[feat] trigger gui
This commit is contained in:
kwaroran
@@ -13,7 +13,7 @@
|
||||
import { onDestroy } from "svelte";
|
||||
import {isEqual, cloneDeep} from 'lodash'
|
||||
import Help from "../Others/Help.svelte";
|
||||
import RegexData from "./Regex/RegexData.svelte";
|
||||
import RegexData from "./Scripts/RegexData.svelte";
|
||||
import { exportChar, shareRisuHub } from "src/ts/characterCards";
|
||||
import { getElevenTTSVoices, getWebSpeechTTSVoices, getVOICEVOXVoices } from "src/ts/process/tts";
|
||||
import { checkCharOrder, getFileSrc } from "src/ts/storage/globalApi";
|
||||
@@ -22,10 +22,11 @@
|
||||
import TextInput from "../UI/GUI/TextInput.svelte";
|
||||
import NumberInput from "../UI/GUI/NumberInput.svelte";
|
||||
import TextAreaInput from "../UI/GUI/TextAreaInput.svelte";
|
||||
import Button from "../UI/GUI/Button.svelte";
|
||||
import SelectInput from "../UI/GUI/SelectInput.svelte";
|
||||
import OptionInput from "../UI/GUI/OptionInput.svelte";
|
||||
import RegexList from "./Regex/RegexList.svelte";
|
||||
import Button from "../UI/GUI/Button.svelte";
|
||||
import SelectInput from "../UI/GUI/SelectInput.svelte";
|
||||
import OptionInput from "../UI/GUI/OptionInput.svelte";
|
||||
import RegexList from "./Scripts/RegexList.svelte";
|
||||
import TriggerList from "./Scripts/TriggerList.svelte";
|
||||
|
||||
let subMenu = 0
|
||||
let openHubUpload = false
|
||||
@@ -460,6 +461,21 @@
|
||||
currentChar.data.customscript = script
|
||||
}
|
||||
}}><PlusIcon /></button>
|
||||
|
||||
<span class="text-neutral-200 mt-4">{language.triggerScript} <Help key="regexScript"/></span>
|
||||
<TriggerList bind:value={currentChar.data.triggerscript} />
|
||||
<button class="font-medium cursor-pointer hover:text-green-500 mb-2" on:click={() => {
|
||||
if(currentChar.type === 'character'){
|
||||
let script = currentChar.data.triggerscript
|
||||
script.push({
|
||||
comment: "",
|
||||
type: "output",
|
||||
conditions: [],
|
||||
effect: []
|
||||
})
|
||||
currentChar.data.triggerscript = script
|
||||
}
|
||||
}}><PlusIcon /></button>
|
||||
{/if}
|
||||
{:else if subMenu === 5}
|
||||
{#if currentChar.type === 'character'}
|
||||
|
||||
244
src/lib/SideBars/Scripts/TriggerData.svelte
Normal file
244
src/lib/SideBars/Scripts/TriggerData.svelte
Normal file
@@ -0,0 +1,244 @@
|
||||
<script lang="ts">
|
||||
import { PlusIcon, XIcon } from "lucide-svelte";
|
||||
import { language } from "src/lang";
|
||||
import { alertConfirm } from "src/ts/alert";
|
||||
import type { triggerscript } from "src/ts/storage/database";
|
||||
import Check from "../../UI/GUI/CheckInput.svelte";
|
||||
import TextInput from "../../UI/GUI/TextInput.svelte";
|
||||
import SelectInput from "../../UI/GUI/SelectInput.svelte";
|
||||
import OptionInput from "../../UI/GUI/OptionInput.svelte";
|
||||
import NumberInput from "src/lib/UI/GUI/NumberInput.svelte";
|
||||
import TextAreaInput from "src/lib/UI/GUI/TextAreaInput.svelte";
|
||||
|
||||
export let value:triggerscript
|
||||
export let onRemove: () => void = () => {}
|
||||
export let onClose: () => void = () => {}
|
||||
export let onOpen: () => void = () => {}
|
||||
|
||||
export let idx:number
|
||||
let open = false
|
||||
</script>
|
||||
|
||||
<div class="w-full flex flex-col pt-2 mt-2 border-t border-t-selected first:pt-0 first:mt-0 first:border-0" data-risu-idx={idx}>
|
||||
<div class="flex items-center transition-colors w-full ">
|
||||
<button class="endflex valuer border-borderc" on:click={() => {
|
||||
open = !open
|
||||
if(open){
|
||||
onOpen()
|
||||
}
|
||||
else{
|
||||
onClose()
|
||||
}
|
||||
}}>
|
||||
<span>{value.comment.length === 0 ? 'Unnamed Trigger' : value.comment}</span>
|
||||
</button>
|
||||
<button class="valuer" on:click={async () => {
|
||||
const d = await alertConfirm(language.removeConfirm + value.comment)
|
||||
if(d){
|
||||
if(!open){
|
||||
onClose()
|
||||
}
|
||||
onRemove()
|
||||
}
|
||||
}}>
|
||||
<XIcon />
|
||||
</button>
|
||||
</div>
|
||||
{#if open}
|
||||
<div class="seperator p-2">
|
||||
<span class="text-neutral-200 mt-6">{language.name}</span>
|
||||
<TextInput size="sm" bind:value={value.comment} />
|
||||
<span class="text-neutral-200 mt-4">{language.type}</span>
|
||||
<SelectInput bind:value={value.type}>
|
||||
<OptionInput value="output">{language.triggerOutput}</OptionInput>
|
||||
<OptionInput value="start">{language.triggerStart}</OptionInput>
|
||||
<OptionInput value="manual">{language.triggerManual}</OptionInput>
|
||||
</SelectInput>
|
||||
|
||||
<span class="text-neutral-200 mt-4">Conditions
|
||||
<button aria-labelledby="Add Conditions" class="float-right text-gray-400 hover:text-green-500" on:click={() => {
|
||||
value.conditions.push({
|
||||
type: 'exists',
|
||||
value: '',
|
||||
type2: 'loose',
|
||||
depth: 3
|
||||
})
|
||||
value.conditions = value.conditions
|
||||
|
||||
}}><PlusIcon size={18} /></button>
|
||||
</span>
|
||||
<div class="flex flex-col px-2 py-4 border border-selected rounded-md">
|
||||
{#if value.conditions.length === 0}
|
||||
<span class="text-gray-500 text-sm">{language.always}</span>
|
||||
{/if}
|
||||
{#each value.conditions as cond,i}
|
||||
{#if i > 0}
|
||||
<hr class="border-selected my-4" />
|
||||
{/if}
|
||||
<span class="text-gray-400 text-sm">{language.type}
|
||||
<button aria-labelledby="Add Conditions" class="float-right text-gray-400 hover:text-green-500" on:click={() => {
|
||||
value.conditions.splice(i, 1)
|
||||
value.conditions = value.conditions
|
||||
|
||||
}}><XIcon size={18} /></button>
|
||||
|
||||
</span>
|
||||
<SelectInput bind:value={cond.type} size="sm" on:change={() => {
|
||||
if(cond.type === 'exists'){
|
||||
cond = {
|
||||
type: 'exists',
|
||||
value: '',
|
||||
type2: 'loose',
|
||||
depth: 3
|
||||
}
|
||||
}
|
||||
if(cond.type === 'var'){
|
||||
cond = {
|
||||
type: 'var',
|
||||
var: '',
|
||||
value: '',
|
||||
operator: '='
|
||||
}
|
||||
}
|
||||
}}>
|
||||
<OptionInput value="exists">{language.triggerCondExists}</OptionInput>
|
||||
<OptionInput value="var">{language.triggerCondVar}</OptionInput>
|
||||
</SelectInput>
|
||||
|
||||
{#if cond.type === 'exists'}
|
||||
<SelectInput bind:value={cond.type2} size="sm">
|
||||
<OptionInput value="loose">{language.triggerMatchLoose}</OptionInput>
|
||||
<OptionInput value="strict">{language.triggerMatchStrict}</OptionInput>
|
||||
<OptionInput value="regex">{language.triggerMatchRegex}</OptionInput>
|
||||
</SelectInput>
|
||||
<span class="text-gray-400 text-sm">{language.value}</span>
|
||||
<TextInput size="sm" bind:value={cond.value} />
|
||||
|
||||
<span class="text-gray-400 text-sm">{language.searchDepth}</span>
|
||||
<NumberInput size="sm" bind:value={cond.depth} />
|
||||
{/if}
|
||||
{#if cond.type === 'var'}
|
||||
<span class="text-gray-400 text-sm">{language.varableName}</span>
|
||||
<TextInput size="sm" bind:value={cond.var} />
|
||||
<span class="text-gray-400 text-sm">{language.value}</span>
|
||||
<SelectInput bind:value={cond.operator} size="sm">
|
||||
<OptionInput value="=">{language.equal}</OptionInput>
|
||||
<OptionInput value="!=">{language.notEqual}</OptionInput>
|
||||
<OptionInput value=">">{language.greater}</OptionInput>
|
||||
<OptionInput value="<">{language.less}</OptionInput>
|
||||
<OptionInput value=">=">{language.greaterEqual}</OptionInput>
|
||||
<OptionInput value="<=">{language.lessEqual}</OptionInput>
|
||||
</SelectInput>
|
||||
<TextInput size="sm" bind:value={cond.value} />
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<span class="text-neutral-200 mt-4">Effects
|
||||
<button aria-labelledby="Add Effects" class="float-right text-gray-400 hover:text-green-500" on:click={() => {
|
||||
value.effect.push({
|
||||
type: 'systemprompt',
|
||||
value: '',
|
||||
location: 'historyend'
|
||||
})
|
||||
value.effect = value.effect
|
||||
|
||||
}}><PlusIcon size={18} /></button>
|
||||
</span>
|
||||
|
||||
<div class="flex flex-col px-2 py-4 border border-selected rounded-md">
|
||||
{#if value.effect.length === 0}
|
||||
<span class="text-gray-500 text-sm">{language.noEffect}</span>
|
||||
{/if}
|
||||
{#each value.effect as effect,i}
|
||||
{#if i > 0}
|
||||
<hr class="border-selected my-4" />
|
||||
{/if}
|
||||
<span class="text-gray-400 text-sm">{language.type}
|
||||
<button aria-labelledby="Add Conditions" class="float-right text-gray-400 hover:text-green-500" on:click={() => {
|
||||
value.effect.splice(i, 1)
|
||||
value.effect = value.effect
|
||||
|
||||
}}><XIcon size={18} /></button>
|
||||
|
||||
</span>
|
||||
<SelectInput bind:value={effect.type} size="sm" on:change={() => {
|
||||
if(effect.type === 'systemprompt'){
|
||||
effect = {
|
||||
type: 'systemprompt',
|
||||
value: '',
|
||||
location: 'historyend'
|
||||
}
|
||||
}
|
||||
if(effect.type === 'setvar'){
|
||||
effect = {
|
||||
type: 'setvar',
|
||||
var: '',
|
||||
value: ''
|
||||
}
|
||||
}
|
||||
if(effect.type === 'impersonate'){
|
||||
effect = {
|
||||
type: 'impersonate',
|
||||
role: 'char',
|
||||
value: ''
|
||||
}
|
||||
}
|
||||
}}>
|
||||
<OptionInput value="systemprompt">{language.triggerEffSysPrompt}</OptionInput>
|
||||
<OptionInput value="setvar">{language.triggerEffSetVar}</OptionInput>
|
||||
<OptionInput value="impersonate">{language.triggerEffImperson}</OptionInput>
|
||||
</SelectInput>
|
||||
{#if effect.type === 'systemprompt'}
|
||||
<span class="text-gray-400 text-sm">{language.location}</span>
|
||||
<SelectInput bind:value={effect.location} size="sm">
|
||||
<OptionInput value="start">{language.promptstart}</OptionInput>
|
||||
<OptionInput value="historyend">{language.historyend}</OptionInput>
|
||||
<OptionInput value="promptend">{language.promptend}</OptionInput>
|
||||
</SelectInput>
|
||||
<span class="text-gray-400 text-sm">{language.value}</span>
|
||||
<TextAreaInput size="sm" bind:value={effect.value} />
|
||||
{/if}
|
||||
{#if effect.type === 'setvar'}
|
||||
<span class="text-gray-400 text-sm">{language.varableName}</span>
|
||||
<TextInput size="sm" bind:value={effect.var} />
|
||||
<span class="text-gray-400 text-sm">{language.value}</span>
|
||||
<TextInput size="sm" bind:value={effect.value} />
|
||||
{/if}
|
||||
{#if effect.type === 'impersonate'}
|
||||
<span class="text-gray-400 text-sm">{language.role}</span>
|
||||
<SelectInput bind:value={effect.role} size="sm">
|
||||
<OptionInput value="user">{language.user}</OptionInput>
|
||||
<OptionInput value="char">{language.character}</OptionInput>
|
||||
</SelectInput>
|
||||
<span class="text-gray-400 text-sm">{language.value}</span>
|
||||
<TextAreaInput size="sm" bind:value={effect.value} />
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.valuer:hover{
|
||||
color: rgba(16, 185, 129, 1);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.endflex{
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.seperator{
|
||||
border: none;
|
||||
outline: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
</style>
|
||||
23
src/lib/SideBars/Scripts/TriggerList.svelte
Normal file
23
src/lib/SideBars/Scripts/TriggerList.svelte
Normal file
@@ -0,0 +1,23 @@
|
||||
<script lang="ts">
|
||||
import type { triggerscript } from "src/ts/storage/database";
|
||||
import TriggerData from "./TriggerData.svelte";
|
||||
export let value:triggerscript[] = []
|
||||
let ele: HTMLDivElement
|
||||
let sorted = 0
|
||||
|
||||
</script>
|
||||
|
||||
<div class="contain w-full max-w-full mt-4 flex flex-col p-3 border-selected border-1 bg-darkbg rounded-md" bind:this={ele}>
|
||||
{#if value.length === 0}
|
||||
<div class="text-gray-500">No Scripts</div>
|
||||
{/if}
|
||||
{#key sorted}
|
||||
{#each value as triggerscript, i}
|
||||
<TriggerData idx={i} bind:value={value[i]} onRemove={() => {
|
||||
let triggerscript = value
|
||||
triggerscript.splice(i, 1)
|
||||
value = triggerscript
|
||||
}}/>
|
||||
{/each}
|
||||
{/key}
|
||||
</div>
|
||||
Reference in New Issue
Block a user