Merge branch 'main' into main

src/lib/ChatScreens/ChatScreen.svelte

@@ -10,7 +10,9 @@
     import BackgroundDom from "./BackgroundDom.svelte";
     import SideBarArrow from "../UI/GUI/SideBarArrow.svelte";
     import VisualNovelMain from "../VisualNovel/VisualNovelMain.svelte";
+  import ModuleChatMenu from "../Setting/Pages/Module/ModuleChatMenu.svelte";
     let openChatList = false
+    let openModuleList = false
 
     const wallPaper = `background: url(${defaultWallpaper})`
     const externalStyles = 
@@ -40,7 +42,7 @@
                     <ResizeBox />
                 {/if}
             {/if}
-            <DefaultChatScreen customStyle={bgImg.length > 2 ? `${externalStyles}`: ''} bind:openChatList/>
+            <DefaultChatScreen customStyle={bgImg.length > 2 ? `${externalStyles}`: ''} bind:openChatList bind:openModuleList/>
         </div>
     </div>
 {:else if $DataBase.theme === 'waifu'}
@@ -55,7 +57,7 @@
             {/if}
         {/if}
         <div class="h-full w-2xl" style:width="{42 * ($DataBase.waifuWidth / 100)}rem" class:halfwp={$selectedCharID >= 0 && $CurrentCharacter.viewScreen !== 'none'}>
-            <DefaultChatScreen customStyle={`${externalStyles}backdrop-filter: blur(4px);`} bind:openChatList/>
+            <DefaultChatScreen customStyle={`${externalStyles}backdrop-filter: blur(4px);`} bind:openChatList bind:openModuleList/>
         </div>
     </div>
 {:else if $DataBase.theme === 'waifuMobile'}
@@ -66,7 +68,7 @@
             class:per33={$selectedCharID >= 0 && $CurrentCharacter.viewScreen !== 'none'}
             class:h-full={!($selectedCharID >= 0 && $CurrentCharacter.viewScreen !== 'none')}
         >
-            <DefaultChatScreen customStyle={`${externalStyles}backdrop-filter: blur(4px);`} bind:openChatList/>
+            <DefaultChatScreen customStyle={`${externalStyles}backdrop-filter: blur(4px);`} bind:openChatList bind:openModuleList/>
         </div>
         {#if $selectedCharID >= 0}
             {#if $CurrentCharacter.viewScreen !== 'none'}
@@ -79,6 +81,8 @@
 {/if}
 {#if openChatList}
     <ChatList close={() => {openChatList = false}}/>
+{:else if openModuleList}
+    <ModuleChatMenu close={() => {openModuleList = false}}/>
 {/if}
 
 <style>

src/lib/ChatScreens/DefaultChatScreen.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import Suggestion from './Suggestion.svelte';
-    import { CameraIcon, DatabaseIcon, DicesIcon, GlobeIcon, ImagePlusIcon, LanguagesIcon, Laugh, MenuIcon, MicOffIcon, RefreshCcwIcon, ReplyIcon, Send, StepForwardIcon } from "lucide-svelte";
+    import { CameraIcon, DatabaseIcon, DicesIcon, GlobeIcon, ImagePlusIcon, LanguagesIcon, Laugh, MenuIcon, MicOffIcon, PackageIcon, RefreshCcwIcon, ReplyIcon, Send, StepForwardIcon } from "lucide-svelte";
     import { CurrentCharacter, CurrentChat, CurrentUsername, selectedCharID, CurrentUserIcon, CurrentShowMemoryLimit,CurrentSimpleCharacter } from "../../ts/stores";
     import Chat from "./Chat.svelte";
     import { DataBase, type Message, type character, type groupChat } from "../../ts/storage/database";
@@ -36,6 +36,7 @@
     let doingChatInputTranslate = false
     let currentCharacter:character|groupChat = $CurrentCharacter
     let toggleStickers:boolean = false
+    export let openModuleList = false
     export let openChatList:boolean = false 
 
     async function send(){
@@ -582,7 +583,7 @@
             {/if}
 
             {#if openMenu}
-                <div class="absolute right-2 bottom-16 p-5 bg-darkbg flex flex-col gap-3 text-textcolor" on:click={(e) => {
+                <div class="absolute right-2 bottom-16 p-5 bg-darkbg flex flex-col gap-3 text-textcolor rounded-md" on:click={(e) => {
                     e.stopPropagation()
                 }}>
                     {#if $CurrentCharacter.type === 'group'}
@@ -664,9 +665,15 @@
                         <ReplyIcon />
                         <span class="ml-2">{language.autoSuggest}</span>
                     </div>
-                    <div class="flex items-center cursor-pointer hover:text-green-500 transition-colors" on:click={reroll}>
-                        <RefreshCcwIcon />
-                        <span class="ml-2">{language.reroll}</span>
+
+
+                    <div class="flex items-center cursor-pointer hover:text-green-500 transition-colors" on:click={() => {
+                        $CurrentChat.modules ??= []
+                        openModuleList = true
+                        openMenu = false
+                    }}>
+                        <PackageIcon />
+                        <span class="ml-2">{language.modules}</span>
                     </div>
                 </div>
 

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

@@ -0,0 +1,80 @@
+<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";
+    import { SettingsMenuIndex, settingsOpen } 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={() => {
+                $SettingsMenuIndex = 14
+                $settingsOpen = true
+                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";
@@ -8,7 +8,7 @@
     import PluginSettings from "./Pages/PluginSettings.svelte";
     import FilesSettings from "./Pages/FilesSettings.svelte";
     import AdvancedSettings from "./Pages/AdvancedSettings.svelte";
-    import { settingsOpen } from "src/ts/stores";
+    import { SettingsMenuIndex, settingsOpen } from "src/ts/stores";
     import Botpreset from "./botpreset.svelte";
     import Communities from "./Pages/Communities.svelte";
     import GlobalLoreBookSettings from "./Pages/GlobalLoreBookSettings.svelte";
@@ -17,127 +17,136 @@
     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";
-    let selected = -1
+    import PromptSettings from "./Pages/PromptSettings.svelte";
+    import ThanksPage from "./Pages/ThanksPage.svelte";
+    import ModuleSettings from "./Pages/Module/ModuleSettings.svelte";
+
     let openPresetList = false
     let openLoreList = false
-    if(window.innerWidth >= 700){
-        selected = 1
+    if(window.innerWidth >= 900 && $SettingsMenuIndex === -1){
+        $SettingsMenuIndex = 1
     }
 
 </script>
 <div class="h-full w-full flex justify-center setting-bg">
     <div class="h-full max-w-screen-lg w-full flex relative">
-        {#if window.innerWidth >= 700 || selected === -1}
+        {#if window.innerWidth >= 700 || $SettingsMenuIndex === -1}
             <div class="flex h-full flex-col p-4 pt-8 bg-darkbg gap-2 overflow-y-auto relative"
                 class:w-full={window.innerWidth < 700}>
                 <button class="flex gap-2 items-center hover:text-textcolor"
-                    class:text-textcolor={selected === 1 || selected === 13}
-                    class:text-textcolor2={selected !== 1 && selected !== 13}
+                    class:text-textcolor={$SettingsMenuIndex === 1 || $SettingsMenuIndex === 13}
+                    class:text-textcolor2={$SettingsMenuIndex !== 1 && $SettingsMenuIndex !== 13}
                     on:click={() => {
-                        selected = 1
+                        $SettingsMenuIndex = 1
                         
                 }}>
                     <BotIcon />
                     <span>{language.chatBot}</span>
                 </button>
                 <button class="flex gap-2 items-center hover:text-textcolor"
-                    class:text-textcolor={selected === 12}
-                    class:text-textcolor2={selected !== 12}
+                    class:text-textcolor={$SettingsMenuIndex === 12}
+                    class:text-textcolor2={$SettingsMenuIndex !== 12}
                     on:click={() => {
-                        selected = 12
+                        $SettingsMenuIndex = 12
                 }}>
                     <ContactIcon />
                     <span>{language.persona}</span>
                 </button>
                 <button class="flex gap-2 items-center hover:text-textcolor"
-                    class:text-textcolor={selected === 2}
-                    class:text-textcolor2={selected !== 2}
+                    class:text-textcolor={$SettingsMenuIndex === 2}
+                    class:text-textcolor2={$SettingsMenuIndex !== 2}
                     on:click={() => {
-                        selected = 2
+                        $SettingsMenuIndex = 2
                 }}>
                     <Sailboat />
                     <span>{language.otherBots}</span>
                 </button>
                 <button class="flex gap-2 items-center hover:text-textcolor"
-                    class:text-textcolor={selected === 3}
-                    class:text-textcolor2={selected !== 3}
+                    class:text-textcolor={$SettingsMenuIndex === 3}
+                    class:text-textcolor2={$SettingsMenuIndex !== 3}
                     on:click={() => {
-                        selected = 3
+                        $SettingsMenuIndex = 3
                 }}>
                     <MonitorIcon />
                     <span>{language.display}</span>
                 </button>
                 <button class="flex gap-2 items-center hover:text-textcolor"
-                    class:text-textcolor={selected === 10}
-                    class:text-textcolor2={selected !== 10}
+                    class:text-textcolor={$SettingsMenuIndex === 10}
+                    class:text-textcolor2={$SettingsMenuIndex !== 10}
                     on:click={() => {
-                        selected = 10
+                        $SettingsMenuIndex = 10
                 }}>
                     <LanguagesIcon />
                     <span>{language.language}</span>
                 </button>
                 <button class="flex gap-2 items-center hover:text-textcolor"
-                    class:text-textcolor={selected === 11}
-                    class:text-textcolor2={selected !== 11}
+                    class:text-textcolor={$SettingsMenuIndex === 11}
+                    class:text-textcolor2={$SettingsMenuIndex !== 11}
                     on:click={() => {
-                        selected = 11
+                        $SettingsMenuIndex = 11
                 }}>
                     <AccessibilityIcon />
                     <span>{language.accessibility}</span>
                 </button>
                 <button class="flex gap-2 items-center hover:text-textcolor"
-                    class:text-textcolor={selected === 8}
-                    class:text-textcolor2={selected !== 8}
+                    class:text-textcolor={$SettingsMenuIndex === 8}
+                    class:text-textcolor2={$SettingsMenuIndex !== 8}
                     on:click={() => {
-                        selected = 8
+                        $SettingsMenuIndex = 8
                 }}>
                     <BookIcon />
                     <span>{language.globalLoreBook}</span>
                 </button>
                 <button class="flex gap-2 items-center hover:text-textcolor"
-                    class:text-textcolor={selected === 9}
-                    class:text-textcolor2={selected !== 9}
+                    class:text-textcolor={$SettingsMenuIndex === 9}
+                    class:text-textcolor2={$SettingsMenuIndex !== 9}
                     on:click={() => {
-                        selected = 9
+                        $SettingsMenuIndex = 9
                 }}>
                     <AlignLeft />
                     <span>{language.globalRegexScript}</span>
                 </button>
                 <button class="flex gap-2 items-center hover:text-textcolor"
-                    class:text-textcolor={selected === 4}
-                    class:text-textcolor2={selected !== 4}
+                    class:text-textcolor={$SettingsMenuIndex === 14}
+                    class:text-textcolor2={$SettingsMenuIndex !== 14}
                     on:click={() => {
-                    selected = 4
+                        $SettingsMenuIndex = 14
+                }}>
+                    <PackageIcon />
+                    <span>{language.modules}</span>
+                </button>
+                <button class="flex gap-2 items-center hover:text-textcolor"
+                    class:text-textcolor={$SettingsMenuIndex === 4}
+                    class:text-textcolor2={$SettingsMenuIndex !== 4}
+                    on:click={() => {
+                    $SettingsMenuIndex = 4
                 }}>
                     <CodeIcon />
                     <span>{language.plugin}</span>
                 </button>
                 <button class="flex gap-2 items-center hover:text-textcolor"
-                    class:text-textcolor={selected === 0}
-                    class:text-textcolor2={selected !== 0}
+                    class:text-textcolor={$SettingsMenuIndex === 0}
+                    class:text-textcolor2={$SettingsMenuIndex !== 0}
                     on:click={() => {
-                        selected = 0
+                        $SettingsMenuIndex = 0
                 }}>
                     <UserIcon />
                     <span>{language.account} & {language.files}</span>
                 </button>
                 <button class="flex gap-2 items-center hover:text-textcolor"
-                    class:text-textcolor={selected === 6}
-                    class:text-textcolor2={selected !== 6}
+                    class:text-textcolor={$SettingsMenuIndex === 6}
+                    class:text-textcolor2={$SettingsMenuIndex !== 6}
                     on:click={() => {
-                    selected = 6
+                    $SettingsMenuIndex = 6
                 }}>
                     <ActivityIcon />
                     <span>{language.advancedSettings}</span>
                 </button>
                 <button class="flex gap-2 items-center hover:text-textcolor"
-                    class:text-textcolor={selected === 77}
-                    class:text-textcolor2={selected !== 77}
+                    class:text-textcolor={$SettingsMenuIndex === 77}
+                    class:text-textcolor2={$SettingsMenuIndex !== 77}
                     on:click={() => {
-                    selected = 77
+                    $SettingsMenuIndex = 77
                 }}>
                     <BoxIcon />
                     <span>{language.supporterThanks}</span>
@@ -149,42 +158,44 @@
                 {/if}
             </div>
         {/if}
-        {#if window.innerWidth >= 700 || selected !== -1}
-            {#key selected}
+        {#if window.innerWidth >= 700 || $SettingsMenuIndex !== -1}
+            {#key $SettingsMenuIndex}
                 <div class="flex-grow py-6 px-4 bg-bgcolor flex flex-col text-textcolor overflow-y-auto relative">
-                    {#if selected === 0}
+                    {#if $SettingsMenuIndex === 0}
                         <UserSettings />
-                    {:else if selected === 1}
+                    {:else if $SettingsMenuIndex === 1}
                         <BotSettings bind:openPresetList goPromptTemplate={() => {
-                            selected = 13
+                            $SettingsMenuIndex = 13
                         }} />
-                    {:else if selected === 2}
+                    {:else if $SettingsMenuIndex === 2}
                         <OtherBotSettings />
-                    {:else if selected === 3}
+                    {:else if $SettingsMenuIndex === 3}
                         <DisplaySettings />
-                    {:else if selected === 4}
+                    {:else if $SettingsMenuIndex === 4}
                         <PluginSettings />
-                    {:else if selected === 5}
+                    {:else if $SettingsMenuIndex === 5}
                         <FilesSettings />
-                    {:else if selected === 6}
+                    {:else if $SettingsMenuIndex === 6}
                         <AdvancedSettings />
-                    {:else if selected === 7}
+                    {:else if $SettingsMenuIndex === 7}
                         <Communities />
-                    {:else if selected === 8}
+                    {:else if $SettingsMenuIndex === 8}
                         <GlobalLoreBookSettings bind:openLoreList />
-                    {:else if selected === 9}
+                    {:else if $SettingsMenuIndex === 9}
                         <GlobalRegex/>
-                    {:else if selected === 10}
+                    {:else if $SettingsMenuIndex === 10}
                         <LanguageSettings/>
-                    {:else if selected === 11}
+                    {:else if $SettingsMenuIndex === 11}
                         <AccessibilitySettings/>
-                    {:else if selected === 12}
+                    {:else if $SettingsMenuIndex === 12}
                         <PersonaSettings/>
-                    {:else if selected === 13}
+                    {:else if $SettingsMenuIndex === 14}
+                        <ModuleSettings/>
+                    {:else if $SettingsMenuIndex === 13}
                         <PromptSettings onGoBack={() => {
-                            selected = 1
+                            $SettingsMenuIndex = 1
                         }}/>
-                    {:else if selected === 77}
+                    {:else if $SettingsMenuIndex === 77}
                         <ThanksPage/>
                     {/if}
             </div>
@@ -194,7 +205,7 @@
                     settingsOpen.set(false)
                 }
                 else{
-                    selected = -1
+                    $SettingsMenuIndex = -1
                 }
             }}>
                 <XCircleIcon />

src/lib/SideBars/Scripts/RegexList.svelte

@@ -51,7 +51,7 @@
     })
 </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}>
+<div class="contain w-full max-w-full mt-2 flex flex-col p-3 border-selected border-1 bg-darkbg rounded-md" bind:this={ele}>
     {#if value.length === 0}
             <div class="text-textcolor2">No Scripts</div>
     {/if}

src/lib/SideBars/Scripts/TriggerList.svelte

@@ -7,7 +7,7 @@
 
 </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}>
+<div class="contain w-full max-w-full mt-2 flex flex-col p-3 border-selected border-1 bg-darkbg rounded-md" bind:this={ele}>
     {#if value.length === 0}
             <div class="text-textcolor2">No Scripts</div>
     {/if}

src/lib/UI/ModelList.svelte

@@ -126,10 +126,11 @@
                 <button class="p-2 hover:text-green-500" on:click={() => {changeModel('gptvi4_1106')}}>GPT-4 Turbo 1106 Vision</button>
                 {#if showUnrec}
                     <button class="p-2 hover:text-green-500" on:click={() => {changeModel('gpt35_16k')}}>GPT-3.5 Turbo 16K</button>
-                    <button class="p-2 hover:text-green-500" on:click={() => {changeModel('gpt4_0301')}}>GPT-4 0301</button>
+                    <button class="p-2 hover:text-green-500" on:click={() => {changeModel('gpt4_0314')}}>GPT-4 0314</button>
                     <button class="p-2 hover:text-green-500" on:click={() => {changeModel('gpt4_0613')}}>GPT-4 0613</button>
                     <button class="p-2 hover:text-green-500" on:click={() => {changeModel('gpt4_32k_0613')}}>GPT-4 32K 0613</button>
                     <button class="p-2 hover:text-green-500" on:click={() => {changeModel('gpt4_1106')}}>GPT-4 Turbo 1106</button>
+                    <button class="p-2 hover:text-green-500" on:click={() => {changeModel('gpt35_0125')}}>GPT-3.5 Turbo 0125</button>
                     <button class="p-2 hover:text-green-500" on:click={() => {changeModel('gpt35_1106')}}>GPT-3.5 Turbo 1106</button>
                     <button class="p-2 hover:text-green-500" on:click={() => {changeModel('gpt35_0613')}}>GPT-3.5 Turbo 0613</button>
                     <button class="p-2 hover:text-green-500" on:click={() => {changeModel('gpt35_16k_0613')}}>GPT-3.5 Turbo 16K 0613</button>