Add Modules

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

@@ -0,0 +1,77 @@
+<script lang="ts">
+    import { CheckCircle2Icon, Globe, XIcon } from "lucide-svelte";
+    import { language } from "src/lang";
+  import Button from "src/lib/UI/GUI/Button.svelte";
+    import { DataBase } from "src/ts/storage/database";
+    import { CurrentChat } from "src/ts/stores";
+    export let close = () => {}
+
+</script>
+
+
+<div class="absolute w-full h-full z-40 bg-black bg-opacity-50 flex justify-center items-center">
+    <div class="bg-darkbg p-4 break-any rounded-md flex flex-col max-w-3xl w-full max-h-full overflow-y-auto">
+        <div class="flex items-center text-textcolor">
+            <h2 class="mt-0 mb-0 text-lg">{language.modules}</h2>
+            <div class="flex-grow flex justify-end">
+                <button class="text-textcolor2 hover:text-green-500 mr-2 cursor-pointer items-center" on:click={close}>
+                    <XIcon size={24}/>
+                </button>
+            </div>
+        </div>
+        <span class="text-sm text-textcolor2">{language.chatModulesInfo}</span>
+
+        <div class="contain w-full max-w-full mt-4 flex flex-col border-selected border-1 rounded-md">
+            {#if $DataBase.modules.length === 0}
+                <div class="text-textcolor2 p-3">{language.noModules}</div>
+            {:else}
+                {#each $DataBase.modules as rmodule, i}
+                    {#if i !== 0}
+                        <div class="border-t-1 border-selected"></div>
+                    {/if}
+                    <div class="pl-3 pt-3 text-left flex">
+                        <span class="text-lg">{rmodule.name}</span>
+                        <div class="flex-grow flex justify-end">
+                            {#if $DataBase.enabledModules.includes(rmodule.id)}
+                                <button class="mr-2 cursor-pointer text-blue-500">
+                                    <Globe size={18}/>
+                                </button>
+                            {:else}
+                                <button class={(!$CurrentChat.modules.includes(rmodule.id)) ?
+                                        "text-textcolor2 hover:text-green-500 mr-2 cursor-pointer" :
+                                        "mr-2 cursor-pointer text-blue-500"
+                                } on:click={async (e) => {
+                                    e.stopPropagation()
+                                    if($CurrentChat.modules.includes(rmodule.id)){
+                                        $CurrentChat.modules.splice($CurrentChat.modules.indexOf(rmodule.id), 1)
+                                    }
+                                    else{
+                                        $CurrentChat.modules.push(rmodule.id)
+                                    }
+                                    $CurrentChat.modules = $CurrentChat.modules
+                                }}>
+                                    <CheckCircle2Icon size={18}/>
+                                </button>
+                            {/if}
+                        </div>
+                    </div>
+                    <div class="mt-1 mb-3 pl-3">
+                        <span class="text-sm text-textcolor2">{rmodule.description || 'No description provided'}</span>
+                    </div>
+                {/each}
+            {/if}
+        </div>
+        <div>
+            <Button className="mt-4 flex-grow-0" size="sm" on:click={() => {
+                close()
+            }}>{language.edit}</Button>
+        </div>
+    </div>
+</div>
+
+<style>
+    .break-any{
+        word-break: normal;
+        overflow-wrap: anywhere;
+    }
+</style>

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

@@ -0,0 +1,153 @@
+<script type="ts" lang="ts">
+    import { language } from "src/lang";
+    import TextAreaInput from "src/lib/UI/GUI/TextAreaInput.svelte";
+    import TextInput from "src/lib/UI/GUI/TextInput.svelte";
+    import LoreBookData from "src/lib/SideBars/LoreBook/LoreBookData.svelte";
+    import type { RisuModule } from "src/ts/process/modules";
+    import { PlusIcon } from "lucide-svelte";
+    import { alertConfirm } from "src/ts/alert";
+    import RegexList from "src/lib/SideBars/Scripts/RegexList.svelte";
+    import TriggerList from "src/lib/SideBars/Scripts/TriggerList.svelte";
+
+
+    export let currentModule:RisuModule
+
+
+    async function toggleLorebook(){
+        if(!Array.isArray(currentModule.lorebook)){
+            currentModule.lorebook = []
+        }
+        else if(currentModule.lorebook.length > 0){
+            const conf = await alertConfirm(language.confirmRemoveModuleFeature)
+            if(conf){
+                currentModule.lorebook = undefined
+            }
+        }
+        else{
+            currentModule.lorebook = undefined
+        }
+    }
+
+    async function toggleRegex(){
+        if(!Array.isArray(currentModule.regex)){
+            currentModule.regex = []
+        }
+        else if(currentModule.regex.length > 0){
+            const conf = await alertConfirm(language.confirmRemoveModuleFeature)
+            if(conf){
+                currentModule.regex = undefined
+            }
+        }
+        else{
+            currentModule.regex = undefined
+        }
+    }
+
+    async function toggleTrigger(){
+        if(!Array.isArray(currentModule.trigger)){
+            currentModule.trigger = []
+        }
+        else if(currentModule.trigger.length > 0){
+            const conf = await alertConfirm(language.confirmRemoveModuleFeature)
+            if(conf){
+                currentModule.trigger = undefined
+            }
+        }
+        else{
+            currentModule.trigger = undefined
+        }
+    }
+
+    function addLorebook(){
+        if(Array.isArray(currentModule.lorebook)){
+            currentModule.lorebook.push({
+                key: '',
+                comment: `New Lore`,
+                content: '',
+                mode: 'normal',
+                insertorder: 100,
+                alwaysActive: false,
+                secondkey: "",
+                selective: false
+            })
+
+            currentModule.lorebook = currentModule.lorebook
+        }
+    }
+
+    function addRegex(){
+        if(Array.isArray(currentModule.regex)){
+            currentModule.regex.push({
+                comment: "",
+                in: "",
+                out: "",
+                type: "editinput"
+            })
+
+            currentModule.regex = currentModule.regex
+        }
+    }
+
+    function addTrigger(){
+        if(Array.isArray(currentModule.trigger)){
+            currentModule.trigger.push({
+                conditions: [],
+                type: 'start',
+                comment: '',
+                effect: []
+            })
+
+            currentModule.trigger = currentModule.trigger
+        }
+    }
+</script>
+
+<span class="mt-4 text-xl">{language.basicInfo}</span>
+<TextInput bind:value={currentModule.name} additionalClass="mt-1" placeholder={language.name}/>
+<TextInput bind:value={currentModule.description} additionalClass="mt-1" placeholder={language.description} size="sm"/>
+<span class="mt-6 text-xl">{language.moduleContent}</span>
+<div class="grid grid-cols-2 border-selected border rounded-md">
+    <button class={(!Array.isArray(currentModule.lorebook)) ? 'p-4' : "p-4 bg-selected rounded-tl-md"} on:click={toggleLorebook}>
+        {language.loreBook}
+    </button>
+    <button class={(!Array.isArray(currentModule.regex)) ? 'p-4' : "p-4 bg-selected rounded-tr-md"} on:click={toggleRegex}>
+        {language.regexScript}
+    </button>
+    <button class={(!Array.isArray(currentModule.trigger)) ? 'p-4' : "p-4 bg-selected rounded-tr-md"} on:click={toggleTrigger}>
+        {language.triggerScript}
+    </button>
+    <button class="p-4">
+        
+    </button>
+</div>
+
+{#if (Array.isArray(currentModule.lorebook))}
+    <span class="mt-8 text-xl">{language.loreBook}</span>
+    <div class="border border-selected p-2 flex flex-col rounded-md mt-2">
+        {#each currentModule.lorebook as lore, i}
+            <LoreBookData bind:value={currentModule.lorebook[i]} idx={i} onRemove={() => {
+                currentModule.lorebook.splice(i, 1)
+                currentModule.lorebook = currentModule.lorebook
+            }}/>
+        {/each}
+    </div>
+    <button on:click={() => {addLorebook()}} class="hover:text-textcolor cursor-pointer">
+        <PlusIcon />
+    </button>
+{/if}
+
+{#if (Array.isArray(currentModule.regex))}
+    <span class="mt-8 text-xl">{language.regexScript}</span>
+    <RegexList bind:value={currentModule.regex}/>
+    <button on:click={() => {addRegex()}} class="hover:text-textcolor cursor-pointer">
+        <PlusIcon />
+    </button>
+{/if}
+
+{#if (Array.isArray(currentModule.trigger))}
+    <span class="mt-8 text-xl">{language.triggerScript}</span>
+    <TriggerList bind:value={currentModule.trigger}/>
+    <button on:click={() => {addTrigger()}} class="hover:text-textcolor cursor-pointer">
+        <PlusIcon />
+    </button>
+{/if}

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

@@ -0,0 +1,109 @@
+<script lang="ts">
+    import { language } from "src/lang";
+    import { DataBase } from "src/ts/storage/database";
+    import Button from "src/lib/UI/GUI/Button.svelte";
+    import ModuleMenu from "src/lib/Setting/Pages/Module/ModuleMenu.svelte";
+    import { exportModule, type RisuModule } from "src/ts/process/modules";
+    import { DownloadIcon, Edit, TrashIcon, Globe } from "lucide-svelte";
+    import { v4 } from "uuid";
+    import { tooltip } from "src/ts/gui/tooltip";
+    import { alertConfirm } from "src/ts/alert";
+    let tempModule:RisuModule = {
+        name: '',
+        description: '',
+        id: v4(),
+    }
+    let mode = 0
+    let editModuleIndex = -1
+</script>
+{#if mode === 0}
+    <h2 class="mb-2 text-2xl font-bold mt-2">{language.modules}</h2>
+
+    <div class="contain w-full max-w-full mt-4 flex flex-col border-selected border-1 rounded-md">
+        {#if $DataBase.modules.length === 0}
+            <div class="text-textcolor2 p-3">{language.noModules}</div>
+        {:else}
+            {#each $DataBase.modules as rmodule, i}
+                {#if i !== 0}
+                    <div class="border-t-1 border-selected"></div>
+                {/if}
+
+                <div class="pl-3 pt-3 text-left flex">
+                    <span class="text-lg">{rmodule.name}</span>
+                    <div class="flex-grow flex justify-end">
+                        <button class={(!$DataBase.enabledModules.includes(rmodule.id)) ?
+                                "text-textcolor2 hover:text-green-500 mr-2 cursor-pointer" :
+                                "mr-2 cursor-pointer text-blue-500"
+                            } use:tooltip={language.enableGlobal} on:click={async (e) => {
+                            e.stopPropagation()
+                            if($DataBase.enabledModules.includes(rmodule.id)){
+                                $DataBase.enabledModules.splice($DataBase.enabledModules.indexOf(rmodule.id), 1)
+                            }
+                            else{
+                                $DataBase.enabledModules.push(rmodule.id)
+                            }
+                            $DataBase.enabledModules = $DataBase.enabledModules
+                        }}>
+                            <Globe size={18}/>
+                        </button>
+                        <button class="text-textcolor2 hover:text-green-500 mr-2 cursor-pointer" use:tooltip={language.download} on:click={async (e) => {
+                            e.stopPropagation()
+                            exportModule(rmodule)
+                        }}>
+                            <DownloadIcon size={18}/>
+                        </button>
+                        <button class="text-textcolor2 hover:text-green-500 mr-2 cursor-pointer" use:tooltip={language.edit} on:click={async (e) => {
+                            e.stopPropagation()
+
+                            tempModule = rmodule
+                            editModuleIndex = i
+                            mode = 2
+                        }}>
+                            <Edit size={18}/>
+                        </button>
+                        <button class="text-textcolor2 hover:text-green-500 mr-2 cursor-pointer" use:tooltip={language.remove} on:click={async (e) => {
+                            e.stopPropagation()
+                            const d = await alertConfirm(`${language.removeConfirm}` + rmodule.name)
+                            if(d){
+                                $DataBase.modules.splice(i, 1)
+                                $DataBase.modules = $DataBase.modules
+                            }
+                        }}>
+                            <TrashIcon size={18}/>
+                        </button>
+                    </div>
+                </div>
+                <div class="mt-1 mb-3 pl-3">
+                    <span class="text-sm text-textcolor2">{rmodule.description || 'No description provided'}</span>
+                </div>
+            {/each}
+        {/if}
+    </div>
+    <Button className="mt-2" on:click={() => {
+        tempModule = {
+            name: '',
+            description: '',
+            id: v4(),
+        }
+        mode = 1
+    }}>{language.createModule}</Button>
+    <Button className="mt-2">{language.importModule}</Button>
+{:else if mode === 1}
+    <h2 class="mb-2 text-2xl font-bold mt-2">{language.createModule}</h2>
+    <ModuleMenu bind:currentModule={tempModule}/>
+    {#if tempModule.name !== ''}
+        <Button className="mt-6" on:click={() => {
+            $DataBase.modules.push(tempModule)
+            mode = 0
+        }}>{language.editModule}</Button>
+    {/if}
+{:else if mode === 2}
+    <h2 class="mb-2 text-2xl font-bold mt-2">{language.editModule}</h2>
+    <ModuleMenu bind:currentModule={tempModule}/>
+    {#if tempModule.name !== ''}
+        <Button className="mt-6" on:click={() => {
+            $DataBase.modules[editModuleIndex] = tempModule
+            mode = 0
+        }}>{language.createModule}</Button>
+    {/if}
+{/if}

src/lib/Setting/Settings.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { AccessibilityIcon, ActivityIcon, AlignLeft, BookIcon, BotIcon, BoxIcon, CodeIcon, ContactIcon, DiamondIcon, FolderIcon, LanguagesIcon, MonitorIcon, Sailboat, ScrollTextIcon, UserIcon, XCircleIcon } from "lucide-svelte";
+    import { AccessibilityIcon, ActivityIcon, AlignLeft, BookIcon, PackageIcon, BotIcon, BoxIcon, CodeIcon, ContactIcon, DiamondIcon, FolderIcon, LanguagesIcon, MonitorIcon, Sailboat, ScrollTextIcon, UserIcon, XCircleIcon } from "lucide-svelte";
     import { language } from "src/lang";
     import DisplaySettings from "./Pages/DisplaySettings.svelte";
     import UserSettings from "./Pages/UserSettings.svelte";
@@ -17,13 +17,13 @@
     import LanguageSettings from "./Pages/LanguageSettings.svelte";
     import AccessibilitySettings from "./Pages/AccessibilitySettings.svelte";
     import PersonaSettings from "./Pages/PersonaSettings.svelte";
-  import PromptSettings from "./Pages/PromptSettings.svelte";
-  import { DataBase } from "src/ts/storage/database";
-  import ThanksPage from "./Pages/ThanksPage.svelte";
+    import PromptSettings from "./Pages/PromptSettings.svelte";
+    import ThanksPage from "./Pages/ThanksPage.svelte";
+    import ModuleSettings from "./Pages/Module/ModuleSettings.svelte";
     let selected = -1
     let openPresetList = false
     let openLoreList = false
-    if(window.innerWidth >= 700){
+    if(window.innerWidth >= 700 && selected === -1){
         selected = 1
     }
 
@@ -106,6 +106,15 @@
                     <AlignLeft />
                     <span>{language.globalRegexScript}</span>
                 </button>
+                <button class="flex gap-2 items-center hover:text-textcolor"
+                    class:text-textcolor={selected === 14}
+                    class:text-textcolor2={selected !== 14}
+                    on:click={() => {
+                        selected = 14
+                }}>
+                    <PackageIcon />
+                    <span>{language.modules}</span>
+                </button>
                 <button class="flex gap-2 items-center hover:text-textcolor"
                     class:text-textcolor={selected === 4}
                     class:text-textcolor2={selected !== 4}
@@ -180,6 +189,8 @@
                         <AccessibilitySettings/>
                     {:else if selected === 12}
                         <PersonaSettings/>
+                    {:else if selected === 14}
+                        <ModuleSettings/>
                     {:else if selected === 13}
                         <PromptSettings onGoBack={() => {
                             selected = 1