Add new toggles

src/lib/SideBars/CharConfig.svelte

@@ -34,6 +34,7 @@
     import { exportRegex, importRegex } from "src/ts/process/scripts";
     import Arcodion from "../UI/Arcodion.svelte";
     import SliderInput from "../UI/GUI/SliderInput.svelte";
+  import Toggles from "./Toggles.svelte";
 
     let iconRemoveMode = $state(false)
     let emos:[string, string][] = $state([])
@@ -289,34 +290,7 @@
     <span class="text-textcolor2 mb-6 text-sm">{tokens.localNote} {language.tokens}</span>
 
     {#if !$MobileGUI}
-        <div class="flex mt-6 items-center">
-            <Check bind:check={DBState.db.jailbreakToggle} name={language.jailbreakToggle}/>
-        </div>
-
-        {#each parseKeyValue(DBState.db.customPromptTemplateToggle + getModuleToggles()) as toggle}
-            <div class="flex mt-2 items-center">
-                <Check check={DBState.db.globalChatVariables[`toggle_${toggle[0]}`] === '1'} name={toggle[1]} onChange={() => {
-                    DBState.db.globalChatVariables[`toggle_${toggle[0]}`] = DBState.db.globalChatVariables[`toggle_${toggle[0]}`] === '1' ? '0' : '1'
-                }} />
-            </div>
-        {/each}
-
-        
-        {#if DBState.db.supaModelType !== 'none' || DBState.db.hanuraiEnable}
-            {#if DBState.db.hanuraiEnable}
-                <div class="flex mt-2 items-center">
-                    <Check bind:check={DBState.db.characters[$selectedCharID].supaMemory} name={ language.hanuraiMemory}/>
-                </div>
-            {:else if DBState.db.hypaMemory}
-                <div class="flex mt-2 items-center">
-                    <Check bind:check={DBState.db.characters[$selectedCharID].supaMemory} name={ language.ToggleHypaMemory}/>
-                </div>
-            {:else}
-                <div class="flex mt-2 items-center">
-                    <Check bind:check={DBState.db.characters[$selectedCharID].supaMemory} name={ language.ToggleSuperMemory}/>
-                </div>
-            {/if}
-        {/if}
+        <Toggles bind:chara={DBState.db.characters[$selectedCharID]} noContainer />
 
         {#if DBState.db.characters[$selectedCharID].type === 'group'}
             <div class="flex mt-2 items-center">

src/lib/SideBars/SideChatList.svelte

@@ -19,6 +19,7 @@
     import { getChatBranches } from "src/ts/gui/branches";
     import { getModuleToggles } from "src/ts/process/modules";
     import { language } from "src/lang";
+  import Toggles from "./Toggles.svelte";
 
     interface Props {
         chara: character|groupChat;
@@ -497,50 +498,7 @@
         </div>
 
         {#if DBState.db.characters[$selectedCharID]?.chaId !== '§playground'}            
-            {#if parseKeyValue(DBState.db.customPromptTemplateToggle + getModuleToggles()).length > 4}
-                <div class="h-48 border-darkborderc p-2 border rounded flex flex-col items-start mt-2 overflow-y-auto">
-                    <div class="flex mt-2 items-center w-full" class:justify-end={$MobileGUI}>
-                        <CheckInput bind:check={DBState.db.jailbreakToggle} name={language.jailbreakToggle} reverse />
-                    </div>
-                    {#each parseKeyValue(DBState.db.customPromptTemplateToggle + getModuleToggles()) as toggle}
-                        <div class="flex mt-2 items-center w-full" class:justify-end={$MobileGUI}>
-                            <CheckInput check={DBState.db.globalChatVariables[`toggle_${toggle[0]}`] === '1'} reverse name={toggle[1]} onChange={() => {
-                                DBState.db.globalChatVariables[`toggle_${toggle[0]}`] = DBState.db.globalChatVariables[`toggle_${toggle[0]}`] === '1' ? '0' : '1'
-                            }} />
-                        </div>
-                    {/each}
-                    {#if DBState.db.supaModelType !== 'none' || DBState.db.hanuraiEnable}
-                        <div class="flex mt-2 items-center w-full" class:justify-end={$MobileGUI}>
-                            <CheckInput bind:check={chara.supaMemory} reverse name={DBState.db.hanuraiEnable ? language.hanuraiMemory : DBState.db.hypaMemory ? language.ToggleHypaMemory : language.ToggleSuperMemory}/>
-                        </div>
-                    {/if}
-                </div>
-            {:else if parseKeyValue(DBState.db.customPromptTemplateToggle + getModuleToggles()).length > 0}
-                <div class="flex mt-2 items-center">
-                    <CheckInput bind:check={DBState.db.jailbreakToggle} name={language.jailbreakToggle} reverse/>
-                </div>
-                {#each parseKeyValue(DBState.db.customPromptTemplateToggle + getModuleToggles()) as toggle}
-                    <div class="flex mt-2 items-center">
-                        <CheckInput check={DBState.db.globalChatVariables[`toggle_${toggle[0]}`] === '1'} reverse name={toggle[1]} onChange={() => {
-                            DBState.db.globalChatVariables[`toggle_${toggle[0]}`] = DBState.db.globalChatVariables[`toggle_${toggle[0]}`] === '1' ? '0' : '1'
-                        }} />
-                    </div>
-                {/each}
-                {#if DBState.db.supaModelType !== 'none' || DBState.db.hanuraiEnable}
-                    <div class="flex mt-2 items-center">
-                        <CheckInput bind:check={chara.supaMemory} reverse name={DBState.db.hanuraiEnable ? language.hanuraiMemory : DBState.db.hypaMemory ? language.ToggleHypaMemory : language.ToggleSuperMemory}/>
-                    </div>
-                {/if}
-            {:else}
-                <div class="flex mt-2 items-center">
-                    <CheckInput bind:check={DBState.db.jailbreakToggle} name={language.jailbreakToggle}/>
-                </div>
-                {#if DBState.db.supaModelType !== 'none' || DBState.db.hanuraiEnable}
-                    <div class="flex mt-2 items-center">
-                        <CheckInput bind:check={chara.supaMemory} name={DBState.db.hanuraiEnable ? language.hanuraiMemory : DBState.db.hypaMemory ? language.ToggleHypaMemory : language.ToggleSuperMemory}/>
-                    </div>
-                {/if}
-            {/if}
+            <Toggles bind:chara={chara} />
         {/if}
     </div>
     {#if chara.type === 'group'}

src/lib/SideBars/Toggles.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+    import { getModuleToggles } from "src/ts/process/modules";
+    import { DBState, MobileGUI } from "src/ts/stores.svelte";
+    import { parseToggleSyntax } from "src/ts/util";
+    import CheckInput from "../UI/GUI/CheckInput.svelte";
+    import { language } from "src/lang";
+    import type { character, groupChat } from "src/ts/storage/database.svelte";
+  import SelectInput from "../UI/GUI/SelectInput.svelte";
+  import OptionInput from "../UI/GUI/OptionInput.svelte";
+  import TextInput from "../UI/GUI/TextInput.svelte";
+
+    interface Props {
+        chara?: character|groupChat
+        noContainer?: boolean
+    }
+
+    let { chara = $bindable(), noContainer }: Props = $props();
+
+    let parsedKv = $derived(parseToggleSyntax(DBState.db.customPromptTemplateToggle + getModuleToggles()))
+
+</script>
+
+{#snippet toggles()}
+    {#each parsedKv as toggle}
+        {#if toggle.type === 'select'}
+            <div class="flex mt-2 items-center">
+                <span class="text-sm mr-2">{toggle.value}</span>
+
+                <SelectInput bind:value={DBState.db.globalChatVariables[`toggle_${toggle.key}`]}>
+                    {#each toggle.options as option, i}
+                        <OptionInput value={i.toString()}>{option}</OptionInput>
+                    {/each}
+                </SelectInput>
+            </div>
+        {:else if toggle.type === 'text'}
+            <div class="flex mt-2 items-center">
+                <span class="text-sm mr-2">{toggle.value}</span>
+                <TextInput bind:value={DBState.db.globalChatVariables[`toggle_${toggle.key}`]} />
+            </div>
+        {:else}
+            <div class="flex mt-2 items-center">
+                <CheckInput check={DBState.db.globalChatVariables[`toggle_${toggle.key}`] === '1'} reverse name={toggle.value} onChange={() => {
+                    DBState.db.globalChatVariables[`toggle_${toggle.value}`] = DBState.db.globalChatVariables[`toggle_${toggle.value}`] === '1' ? '0' : '1'
+                }} />
+            </div>
+        {/if}
+    {/each}
+{/snippet}
+
+{#if !noContainer && parsedKv.length > 4}
+    <div class="h-48 border-darkborderc p-2 border rounded flex flex-col items-start mt-2 overflow-y-auto">
+        <div class="flex mt-2 items-center w-full" class:justify-end={$MobileGUI}>
+            <CheckInput bind:check={DBState.db.jailbreakToggle} name={language.jailbreakToggle} reverse />
+        </div>
+        {@render toggles()}
+        {#if DBState.db.supaModelType !== 'none' || DBState.db.hanuraiEnable}
+            <div class="flex mt-2 items-center w-full" class:justify-end={$MobileGUI}>
+                <CheckInput bind:check={chara.supaMemory} reverse name={DBState.db.hanuraiEnable ? language.hanuraiMemory : DBState.db.hypaMemory ? language.ToggleHypaMemory : language.ToggleSuperMemory}/>
+            </div>
+        {/if}
+    </div>
+{:else}
+    <div class="flex mt-2 items-center">
+        <CheckInput bind:check={DBState.db.jailbreakToggle} name={language.jailbreakToggle}/>
+    </div>
+    {@render toggles()}
+    {#if DBState.db.supaModelType !== 'none' || DBState.db.hanuraiEnable}
+        <div class="flex mt-2 items-center">
+            <CheckInput bind:check={chara.supaMemory} name={DBState.db.hanuraiEnable ? language.hanuraiMemory : DBState.db.hypaMemory ? language.ToggleHypaMemory : language.ToggleSuperMemory}/>
+        </div>
+    {/if}
+{/if}

src/ts/util.ts

@@ -1009,6 +1009,40 @@ export function parseKeyValue(template:string){
     }
 }
 
+export function parseToggleSyntax(template:string){
+    try {
+        console.log(template)
+        if(!template){
+            return []
+        }
+    
+        const keyValue:{
+            key:string,
+            value:string,
+            type?:string,
+            options?:string[]
+        }[] = []
+    
+        const splited = template.split('\n')
+
+        for(const line of splited){
+            const [key, value, type, option] = line.split('=')
+            if(key && value){
+                keyValue.push({
+                    key, value, type, options: option ? option.split(',') : []
+                })
+            }
+        }
+
+        console.log(keyValue)
+    
+        return keyValue   
+    } catch (error) {
+        console.error(error)
+        return []
+    }
+}
+
 export const sortableOptions = {
 	delay: 300, // time in milliseconds to define when the sorting should start
 	delayOnTouchOnly: true,