Add Modules

2024-02-07 02:21:16 +09:00
parent 8bcae0864b
commit 68382cb38e
15 changed files with 527 additions and 20 deletions
--- a/src/lang/en.ts
+++ b/src/lang/en.ts
@@ -515,4 +515,17 @@ export const languageEnglish = {
    license: "License",
    licenseDesc: "You can choose license for the downloaders to limit the usages of your card's prompt.",
    passwordDesc: "You can set a password to protect your card from unauthorized access.",
+    module: "Module",
+    modules: "Modules",
+    noModules: "No modules has been installed.",
+    createModule: "Create Module",
+    basicInfo: "Basic Info",
+    moduleContent: "Module Content",
+    confirmRemoveModuleFeature: "Do you really want to remove this feature? This action cannot be undone.",
+    editModule: "Edit Module",
+    importModule: "Import Module",
+    download: "Download",
+    edit: "Edit",
+    enableGlobal: "Enable Globally",
+    chatModulesInfo: "You can enable or disable modules for this chat.",
 }
--- a/src/lib/ChatScreens/ChatScreen.svelte
+++ b/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>
--- a/src/lib/ChatScreens/DefaultChatScreen.svelte
+++ b/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(){
@@ -581,7 +582,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'}
@@ -663,9 +664,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>

--- a/src/lib/Setting/Pages/Module/ModuleChatMenu.svelte
+++ b/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>
--- a/src/lib/Setting/Pages/Module/ModuleMenu.svelte
+++ b/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}
--- a/src/lib/Setting/Pages/Module/ModuleSettings.svelte
+++ b/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}
--- a/src/lib/Setting/Settings.svelte
+++ b/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
--- a/src/lib/SideBars/Scripts/RegexList.svelte
+++ b/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}
--- a/src/lib/SideBars/Scripts/TriggerList.svelte
+++ b/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}
--- a/src/ts/process/lorebook.ts
+++ b/src/ts/process/lorebook.ts
@@ -7,6 +7,7 @@ import { alertError, alertNormal } from "../alert";
 import { language } from "../../lang";
 import { downloadFile } from "../storage/globalApi";
 import { HypaProcesser } from "./memory/hypamemory";
+import { getModuleLorebooks } from "./modules";

 export function addLorebook(type:number) {
    let selectedID = get(selectedCharID)
@@ -71,12 +72,12 @@ export async function loadLoreBookPrompt(){
    const characterLore = char.globalLore ?? []
    const chatLore = char.chats[page].localLore ?? []
    const globalLore = db.loreBook[db.loreBookPage]?.data ?? []
-    const fullLore = characterLore.concat(chatLore.concat(globalLore))
+    const moduleLorebook = getModuleLorebooks()
+    const fullLore = characterLore.concat(chatLore).concat(moduleLorebook).concat(globalLore)
    const currentChat = char.chats[page].message
    const loreDepth = char.loreSettings?.scanDepth ?? db.loreBookDepth
    const loreToken = char.loreSettings?.tokenBudget ?? db.loreBookToken
    const fullWordMatching = char.loreSettings?.fullWordMatching ?? false
-
    if(char.lorePlus){
        return await loadLoreBookPlusPrompt()
    }
--- a/src/ts/process/modules.ts
+++ b/src/ts/process/modules.ts
@@ -0,0 +1,120 @@
+import { language } from "src/lang"
+import { alertError, alertNormal } from "../alert"
+import { DataBase, type customscript, type loreBook, type triggerscript } from "../storage/database"
+import { downloadFile } from "../storage/globalApi"
+import { get } from "svelte/store"
+import { CurrentChat } from "../stores"
+import { selectSingleFile } from "../util"
+import { v4 } from "uuid"
+
+export interface RisuModule{
+    name: string
+    description: string
+    lorebook?: loreBook[]
+    regex?: customscript[]
+    cjs?: string
+    trigger?: triggerscript[]
+    id: string
+}
+
+export async function exportModule(module:RisuModule){
+    await downloadFile(module.name + '.json', JSON.stringify({
+        ...module,
+        type: 'risuModule'
+    }, null, 2))
+    alertNormal(language.successExport)
+}
+
+export async function importModule(){
+    const f = await selectSingleFile(['json'])
+    if(!f){
+        return
+    }
+    const file = f.data
+    try {
+        const importedModule = JSON.parse(Buffer.from(file).toString())
+        if(importedModule.type === 'risuModule'){
+            const db = get(DataBase)
+            if(
+                (!importedModule.name)
+                || (!importedModule.description)
+                || (!importedModule.id)
+            ){
+                alertError(language.errors.noData)
+            }
+            importedModule.id = v4()
+            db.modules.push(importedModule)
+        }
+    } catch (error) {
+        alertNormal(language.errors.noData)
+    }
+}
+
+function getModuleById(id:string){
+    const db = get(DataBase)
+    for(let i=0;i<db.modules.length;i++){
+        if(db.modules[i].id === id){
+            return db.modules[i]
+        }
+    }
+    return null
+}
+
+
+export function getModuleLorebooks() {
+    const currentChat = get(CurrentChat)
+    const db = get(DataBase)
+    if (!currentChat) return []
+    const moduleIds = currentChat.modules ?? []
+    moduleIds.concat(db.enabledModules)
+    let lorebooks: loreBook[] = []
+    for (const moduleId of moduleIds) {
+        const module = getModuleById(moduleId)
+        if(!module){
+            continue
+        }
+        if (module.lorebook) {
+            lorebooks = lorebooks.concat(module.lorebook)
+        }
+    }
+    return lorebooks
+}
+
+
+export function getModuleTriggers() {
+    const currentChat = get(CurrentChat)
+    const db = get(DataBase)
+    if (!currentChat) return []
+    const moduleIds = currentChat.modules ?? []
+    moduleIds.concat(db.enabledModules)
+    let triggers: triggerscript[] = []
+    for (const moduleId of moduleIds) {
+        const module = getModuleById(moduleId)
+        if(!module){
+            continue
+        }
+        if (module.trigger) {
+            triggers = triggers.concat(module.trigger)
+        }
+    }
+    return triggers
+}
+
+export function getModuleRegexScripts() {
+    const currentChat = get(CurrentChat)
+    const db = get(DataBase)
+    if (!currentChat) return []
+    const moduleIds = currentChat.modules ?? []
+    moduleIds.concat(db.enabledModules)
+    let customscripts: customscript[] = []
+    for (const moduleId of moduleIds) {
+        const module = getModuleById(moduleId)
+        if(!module){
+            continue
+        }
+        if (module.regex) {
+            customscripts = customscripts.concat(module.regex)
+        }
+    }
+    return customscripts
+}
--- a/src/ts/process/scripts.ts
+++ b/src/ts/process/scripts.ts
@@ -10,6 +10,7 @@ import { autoMarkPlugin } from "../plugins/automark";
 import { runCharacterJS } from "../plugins/embedscript";
 import { metricaPlugin } from "../plugins/metrica";
 import { OaiFixKorean } from "../plugins/fixer";
+import { getModuleRegexScripts } from "./modules";

 const dreg = /{{data}}/g
 const randomness = /\|\|\|/g
@@ -60,7 +61,7 @@ export async function importRegex(){
 export async function processScriptFull(char:character|groupChat|simpleCharacterArgument, data:string, mode:ScriptMode, chatID = -1){
    let db = get(DataBase)
    let emoChanged = false
-    const scripts = (db.globalscript ?? []).concat(char.customscript)
+    const scripts = (db.globalscript ?? []).concat(char.customscript).concat(getModuleRegexScripts())
    if(db.officialplugins.automark && mode === 'editdisplay'){
        data = autoMarkPlugin(data)
    }
--- a/src/ts/process/triggers.ts
+++ b/src/ts/process/triggers.ts
@@ -2,6 +2,7 @@ import { cloneDeep } from "lodash";
 import { getVarChat, risuChatParser } from "../parser";
 import type { Chat, character } from "../storage/database";
 import { tokenize } from "../tokenizer";
+import { getModuleTriggers } from "./modules";

 export interface triggerscript{
    comment: string;
@@ -68,7 +69,7 @@ export async function runTrigger(char:character,mode:triggerMode, arg:{
        historyend: '',
        promptend: ''
    }
-    const triggers = char.triggerscript
+    const triggers = char.triggerscript.concat(getModuleTriggers())
    const chat = cloneDeep(arg.chat ?? char.chats[char.chatPage])
    if((!triggers) || (triggers.length === 0)){
        return null
--- a/src/ts/storage/database.ts
+++ b/src/ts/storage/database.ts
@@ -366,6 +366,8 @@ export function setDatabase(data:Database){
    data.openrouterMiddleOut ??= false
    data.removePunctuationHypa ??= true
    data.memoryLimitThickness ??= 1
+    data.modules ??= []
+    data.enabledModules ??= []

    changeLanguage(data.language)
    DataBase.set(data)
@@ -585,6 +587,8 @@ export interface Database{
    lastPatchNoteCheckVersion?:string,
    removePunctuationHypa?:boolean
    memoryLimitThickness?:number
+    modules: RisuModule[]
+    enabledModules: string[]
 }

 export interface customscript{
@@ -837,6 +841,7 @@ export interface Chat{
    suggestMessages?:string[]
    isStreaming?:boolean
    scriptstate?:{[key:string]:string|number|boolean}
+    modules?:string[]
 }

 export interface Message{
@@ -1118,6 +1123,7 @@ export function setPreset(db:Database, newPres: botPreset){
 import { encode as encodeMsgpack, decode as decodeMsgpack } from "msgpackr";
 import * as fflate from "fflate";
 import type { OnnxModelFiles } from '../process/embedding/transformers';
+import type { RisuModule } from '../process/modules';

 export async function downloadPreset(id:number){
    saveCurrentPreset()
--- a/src/ts/storage/globalApi.ts
+++ b/src/ts/storage/globalApi.ts
@@ -44,7 +44,11 @@ interface fetchLog{

 let fetchLog:fetchLog[] = []

-export async function downloadFile(name:string, data:Uint8Array|ArrayBuffer) {
+export async function downloadFile(name:string, dat:Uint8Array|ArrayBuffer|string) {
+    if(typeof(dat) === 'string'){
+        dat = Buffer.from(dat, 'utf-8')
+    }
+    const data = new Uint8Array(dat)
    const downloadURL = (data:string, fileName:string) => {
        const a = document.createElement('a')
        a.href = data