[feat] trigger gui

src/lib/Setting/Pages/GlobalRegex.svelte

@@ -4,7 +4,7 @@
   import Help from "src/lib/Others/Help.svelte";
   import { DataBase } from "src/ts/storage/database";
   import { exportRegex, importRegex } from "src/ts/process/scripts";
-  import RegexList from "src/lib/SideBars/Regex/RegexList.svelte";
+  import RegexList from "src/lib/SideBars/Scripts/RegexList.svelte";
 </script>
 <h2 class="mb-2 text-2xl font-bold mt-2">{language.globalRegexScript} <Help key="regexScript" /></h2>
 <RegexList bind:value={$DataBase.globalscript} />

src/lib/SideBars/CharConfig.svelte

@@ -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'}

src/lib/SideBars/Scripts/TriggerData.svelte

@@ -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>

src/lib/SideBars/Scripts/TriggerList.svelte

@@ -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>

src/lib/UI/GUI/NumberInput.svelte

@@ -1,27 +1,14 @@
-<!-- <input
-    class="text-neutral-200 bg-transparent input-text focus:bg-selected"
-    class:text-sm={size === 'sm'}
-    class:text-md={size === 'md'}
-    class:text-lg={size === 'lg'}
-    class:p-2={padding}
-    class:mb-4={marginBottom}
-    class:w-full={fullwidth}
-    class:h-full={fullh}
-    on:change={onChange}
-    type="number"
-    min={min}
-    max={max}
-    id={id}
-    bind:value
-> -->
-
 <input 
     class={"border border-gray-600 focus:border-borderc rounded-md shadow-sm text-white bg-transparent numinput focus:ring-borderc focus:ring-2 focus:outline-none transition-colors duration-200" + ((additionalClass) ? (' ' + additionalClass) : '')} 
     class:text-sm={size === 'sm'}
     class:text-md={size === 'md'}
     class:text-lg={size === 'lg'}
-    class:px-4={padding}
-    class:py-2={padding}
+    class:px-4={size === 'md' && padding}
+    class:py-2={size === 'md' && padding}
+    class:px-2={size === 'sm' && padding}
+    class:py-1={size === 'sm' && padding}
+    class:px-6={size === 'lg' && padding}
+    class:py-3={size === 'lg' && padding}
     class:mb-4={marginBottom}
     class:w-full={fullwidth}
     class:h-full={fullh}

src/lib/UI/GUI/TextInput.svelte

@@ -4,8 +4,14 @@
     class:text-md={size === 'md'}
     class:text-lg={size === 'lg'}
     class:text-xl={size === 'xl'}
-    class:px-4={padding}
-    class:py-2={padding}
+
+    class:px-4={size === 'md' && padding}
+    class:py-2={size === 'md' && padding}
+    class:px-2={size === 'sm' && padding}
+    class:py-1={size === 'sm' && padding}
+    class:px-6={size === 'lg' || size === 'xl' && padding}
+    class:py-3={size === 'lg' || size === 'xl'&& padding}
+
     class:mb-4={marginBottom}
     class:mt-4={marginTop}
     class:w-full={fullwidth}