[feat] trigger gui

2023-07-28 04:13:33 +09:00
parent c96491d353
commit 18727b837e
14 changed files with 393 additions and 38 deletions
--- a/src/lang/en.ts
+++ b/src/lang/en.ts
@@ -359,4 +359,32 @@ export const languageEnglish = {
    changeFolderColor: "Change Folder Color",
    fullWordMatching: "Full Word Matching",
    botSettingAtStart: "Bot Menu when Launch",
+    triggerStart: "On start of a chat",
+    triggerOutput: "On character's output",
+    triggerManual: "Manual Trigger Only",
+    triggerCondVar: "If Variable is",
+    triggerCondExists: "If Text Exists on Chat",
+    triggerScript: "Trigger Script",
+    triggerMatchRegex: "Match with Regex",
+    triggerMatchLoose: "Match Loosely",
+    triggerMatchStrict: "Match Strictly",
+    searchDepth: "Search Depth",
+    equal: "Equal to",
+    notEqual: "Not Equal to",
+    greater: "Greater than",
+    less: "Less than",
+    greaterEqual: "Greater or Equal to",
+    lessEqual: "Less or Equal to",
+    triggerEffSysPrompt: 'Add System Prompt',
+    triggerEffSetVar: 'Set Variable',
+    triggerEffImperson: 'Send Chat',
+    varableName: "Variable Name",
+    role: "Role",
+    location: 'Location',
+    promptstart: "Start of Prompt",
+    promptend: "End of Prompt",
+    historyend: "End of History",
+    always: "Always",
+    noEffect: "No Effect",
+    
 }
--- a/src/lib/Setting/Pages/GlobalRegex.svelte
+++ b/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} />
--- a/src/lib/SideBars/CharConfig.svelte
+++ b/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'}
--- a/src/lib/SideBars/Scripts/RegexData.svelte
+++ b/src/lib/SideBars/Scripts/RegexData.svelte
--- a/src/lib/SideBars/Scripts/RegexList.svelte
+++ b/src/lib/SideBars/Scripts/RegexList.svelte
--- a/src/lib/SideBars/Scripts/TriggerData.svelte
+++ b/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>
--- a/src/lib/SideBars/Scripts/TriggerList.svelte
+++ b/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>
--- a/src/lib/UI/GUI/NumberInput.svelte
+++ b/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}
--- a/src/lib/UI/GUI/TextInput.svelte
+++ b/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}
--- a/src/ts/characterCards.ts
+++ b/src/ts/characterCards.ts
@@ -1,6 +1,6 @@
 import { get, writable, type Writable } from "svelte/store"
 import { alertConfirm, alertError, alertMd, alertNormal, alertSelect, alertStore, alertTOS } from "./alert"
-import { DataBase, defaultSdDataFunc, type character, setDatabase, type customscript, type loreSettings, type loreBook } from "./storage/database"
+import { DataBase, defaultSdDataFunc, type character, setDatabase, type customscript, type loreSettings, type loreBook, type triggerscript } from "./storage/database"
 import { checkNullish, selectMultipleFile, sleep } from "./util"
 import { language } from "src/lang"
 import { v4 as uuidv4 } from 'uuid';
@@ -183,7 +183,8 @@ function convertOldTavernAndJSON(charaData:OldTavernChar, imgp:string|undefined
        personality: charaData.personality ?? '',
        scenario:charaData.scenario ?? '',
        firstMsgIndex: -1,
-        replaceGlobalNote: ""
+        replaceGlobalNote: "",
+        triggerscript: []
    }
 }

@@ -343,7 +344,8 @@ async function importSpecv2(card:CharacterCardV2, img?:Uint8Array, mode?:'hub'|'
        additionalAssets: extAssets,
        replaceGlobalNote: data.post_history_instructions ?? '',
        backgroundHTML: data?.extensions?.risuai?.backgroundHTML,
-        license: data?.extensions?.risuai?.license
+        license: data?.extensions?.risuai?.license,
+        triggerscript: data?.extensions?.risuai?.triggerscript ?? []
    }

    db.characters.push(char)
@@ -685,7 +687,8 @@ type CharacterCardV2 = {
                sdData?:[string,string][],
                additionalAssets?:[string,string,string][],
                backgroundHTML?:string,
-                license?:string
+                license?:string,
+                triggerscript?:triggerscript[]
            }
        }
    }
--- a/src/ts/characters.ts
+++ b/src/ts/characters.ts
@@ -302,6 +302,7 @@ export function characterFormatUpdate(index:number|character){
        if(checkNullish(cha.utilityBot)){
            cha.utilityBot = false
        }
+        cha.triggerscript = cha.triggerscript ?? []
        cha.alternateGreetings = cha.alternateGreetings ?? []
        cha.exampleMessage = cha.exampleMessage ?? ''
        cha.creatorNotes = cha.creatorNotes ?? ''
@@ -388,7 +389,8 @@ export function createBlankChar():character{
        personality:"",
        scenario:"",
        firstMsgIndex: -1,
-        replaceGlobalNote: ""
+        replaceGlobalNote: "",
+        triggerscript: []
    }
 }

--- a/src/ts/process/scripts.ts
+++ b/src/ts/process/scripts.ts
@@ -57,8 +57,11 @@ export async function importRegex(){
 export function processScriptFull(char:character|groupChat, data:string, mode:ScriptMode, chatID = -1){
    let db = get(DataBase)
    let emoChanged = false
-    const scripts = (db.globalscript ?? []).concat(char.customscript)
-    for (const script of scripts){
+    const globalscripts = (db.globalscript ?? []).concat(char.customscript)
+    if(db.officialplugins.automark && mode === 'editdisplay'){
+        data = autoMarkPlugin(data)
+    }
+    for (const script of globalscripts){
        if(script.type === mode){
            const reg = new RegExp(script.in, script.ableFlag ? script.flag : 'g')
            let outScript2 = script.out.replaceAll("$n", "\n")
@@ -141,9 +144,6 @@ export function processScriptFull(char:character|groupChat, data:string, mode:Sc
            }
        }
    }
-    if(db.officialplugins.automark && mode === 'editdisplay'){
-        data = autoMarkPlugin(data)
-    }
    return {data, emoChanged}
 }

--- a/src/ts/process/triggers.ts
+++ b/src/ts/process/triggers.ts
@@ -0,0 +1,42 @@
+export interface triggerscript{
+    comment: string;
+    type: 'start'|'manual'|'output'
+    conditions: triggerCondition[]
+    effect:triggerEffect[]
+}
+
+export type triggerCondition = triggerConditionsVar|triggerConditionsExists
+
+export type triggerEffect = triggerEffectSetvar|triggerEffectSystemPrompt|triggerEffectImpersonate
+
+export type triggerConditionsVar = {
+    type:'var'
+    var:string
+    value:string
+    operator:'='|'!='|'>'|'<'|'>='|'<='
+}
+
+export type triggerConditionsExists ={
+    type: 'exists'
+    value:string
+    type2: 'strict'|'loose'|'regex',
+    depth: number
+}
+
+export interface triggerEffectSetvar{
+    type: 'setvar'
+    var:string
+    value:string
+}
+
+export interface triggerEffectSystemPrompt{
+    type: 'systemprompt',
+    location: 'start'|'historyend'|'promptend',
+    value:string
+}
+
+export interface triggerEffectImpersonate{
+    type: 'impersonate'
+    role: 'user'|'char',
+    value:string
+}
--- a/src/ts/storage/database.ts
+++ b/src/ts/storage/database.ts
@@ -2,6 +2,7 @@ import { get, writable } from 'svelte/store';
 import { checkNullish, selectSingleFile } from '../util';
 import { changeLanguage, language } from '../../lang';
 import type { RisuPlugin } from '../plugins/plugins';
+import type {triggerscript as triggerscriptMain} from '../process/triggers';
 import { downloadFile, saveAsset as saveImageGlobal } from './globalApi';
 import { clone, cloneDeep } from 'lodash';
 import { defaultAutoSuggestPrompt, defaultJailbreak, defaultMainPrompt } from './defaultPrompts';
@@ -300,6 +301,8 @@ export interface customscript{

 }

+export type triggerscript = triggerscriptMain
+
 export interface loreBook{
    key:string
    secondkey:string
@@ -331,6 +334,7 @@ export interface character{
    chaId: string
    sdData: [string, string][]
    customscript: customscript[]
+    triggerscript: triggerscript[]
    utilityBot: boolean
    exampleMessage:string
    removedQuotes?:boolean
@@ -540,7 +544,7 @@ export interface Database{
        token:string,
        model:string
    }
-    globalscript: customscript[]
+    globalscript: customscript[],
    sendWithEnter:boolean
    clickToEdit: boolean
    koboldURL:string