feat: custom toggles for modules (#746)

# PR Checklist
- [ ] Have you checked if it works normally in all models? *Ignore this
if it doesn't use models.*
- [ ] Have you checked if it works normally in all web, local, and node
hosted versions? If it doesn't, have you blocked it in those versions?
- [ ] Have you added type definitions?

# Description
This PR allows custom toggles to be added in the module as well. Below
is a screenshot of the updated module editing UI. Please feel free to
let me know if any further adjustments are needed or if you prefer not
to proceed with these changes.


![image](https://github.com/user-attachments/assets/7d6e98c3-f2be-4abf-89cc-ed8f97c082e3)

src/lib/Setting/Pages/Module/ModuleMenu.svelte

@@ -132,6 +132,8 @@
     <div class="flex items-center mt-4">
         <Check bind:check={currentModule.hideIcon} name={language.hideChatIcon}/>
     </div>
+    <span class="mt-4">{language.customPromptTemplateToggle} <Help key='customPromptTemplateToggle' /></span>
+    <TextAreaInput bind:value={currentModule.customModuleToggle}/>
 {/if}
 {#if submenu === 1 && (Array.isArray(currentModule.lorebook))}
     <div class="border border-selected p-2 flex flex-col rounded-md mt-2">

src/lib/SideBars/CharConfig.svelte

@@ -30,7 +30,7 @@
     import { updateInlayScreen } from "src/ts/process/inlayScreen";
     import { registerOnnxModel } from "src/ts/process/transformers";
     import MultiLangInput from "../UI/GUI/MultiLangInput.svelte";
-    import { applyModule } from "src/ts/process/modules";
+    import { applyModule, getModuleToggles } from "src/ts/process/modules";
     import { exportRegex, importRegex } from "src/ts/process/scripts";
     import Arcodion from "../UI/Arcodion.svelte";
     import SliderInput from "../UI/GUI/SliderInput.svelte";
@@ -293,7 +293,7 @@
             <Check bind:check={DBState.db.jailbreakToggle} name={language.jailbreakToggle}/>
         </div>
 
-        {#each parseKeyValue(DBState.db.customPromptTemplateToggle) as toggle}
+        {#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'

src/lib/SideBars/SideChatList.svelte

@@ -16,6 +16,7 @@
     import { onDestroy, onMount } from "svelte";
     import { v4 } from "uuid";
   import { getChatBranches } from "src/ts/gui/branches";
+  import { getModuleToggles } from "src/ts/process/modules";
 
   interface Props {
     chara: character|groupChat;
@@ -221,12 +222,12 @@
         {#if DBState.db.characters[$selectedCharID]?.chaId !== '§playground'}
 
             
-            {#if parseKeyValue(DBState.db.customPromptTemplateToggle).length > 4}
+            {#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) as toggle}
+                    {#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'
@@ -239,11 +240,11 @@
                         </div>
                     {/if}
                 </div>
-            {:else if parseKeyValue(DBState.db.customPromptTemplateToggle).length > 0}
+            {: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) as toggle}
+                {#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'

src/ts/process/modules.ts

@@ -24,6 +24,7 @@ export interface RisuModule{
     backgroundEmbedding?:string
     assets?:[string,string,string][]
     namespace?:string
+    customModuleToggle?:string
 }
 
 export async function exportModule(module:RisuModule, arg:{
@@ -352,6 +353,20 @@ export function getModuleRegexScripts() {
     return customscripts
 }
 
+export function getModuleToggles() {
+    const modules = getModules()
+    let costomModuleToggles: string = ''
+    for (const module of modules) {
+        if(!module){
+            continue
+        }
+        if (module.customModuleToggle) {
+            costomModuleToggles += '\n' + module.customModuleToggle + '\n'
+        }
+    }
+    return costomModuleToggles
+}
+
 export async function applyModule() {
     const sel = await alertModuleSelect()
     if (!sel) {