Risuai 0.6.3 first commit

src/lib/SideBars/BarIcon.svelte

@@ -0,0 +1,36 @@
+
+{#await additionalStyle}
+    <button on:click={onClick} class="ico"><slot/></button>
+{:then as} 
+    <button on:click={onClick} class="ico" style={as}><slot/></button>
+{/await}
+<script lang="ts">
+    export let onClick = () => {}
+    export let additionalStyle:string|Promise<string> = ''
+</script>
+<style>
+    .ico {
+        cursor: pointer;
+        border-radius: 0.375rem;
+        height: 3.5rem;
+        width: 3.5rem;
+        min-height: 3.5rem;
+        margin-top: 0.5rem;
+        --tw-shadow-color: 0, 0, 0;
+        --tw-shadow: 0 10px 15px -3px rgba(var(--tw-shadow-color), 0.1), 0 4px 6px -2px rgba(var(--tw-shadow-color), 0.05);
+        -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+        --tw-bg-opacity: 1;
+        background-color: rgba(107, 114, 128, var(--tw-bg-opacity));        display: flex;
+        justify-content: center;
+        align-items: center;
+        transition-property: background-color, border-color, color, fill, stroke;
+        transition-duration: 150ms;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    .ico:hover {
+        --tw-bg-opacity: 1;
+        background-color: rgba(16, 185, 129, var(--tw-bg-opacity));
+    }
+</style>

src/lib/SideBars/CharConfig.svelte

@@ -0,0 +1,466 @@
+<script lang="ts">
+    import { language } from "../../lang";
+    import { tokenize } from "../../ts/tokenizer";
+    import { DataBase, type Database, type character, type groupChat } from "../../ts/database";
+    import { selectedCharID } from "../../ts/stores";
+    import { PlusIcon, SmileIcon, TrashIcon, UserIcon, ActivityIcon, BookIcon, LoaderIcon, User } from 'lucide-svelte'
+    import Check from "../Others/Check.svelte";
+    import { addCharEmotion, addingEmotion, exportChar, getCharImage, rmCharEmotion, selectCharImg, makeGroupImage } from "../../ts/characters";
+    import LoreBook from "./LoreBookSetting.svelte";
+    import { alertConfirm, alertError, alertSelectChar } from "../../ts/alert";
+    import BarIcon from "./BarIcon.svelte";
+    import { findCharacterbyId } from "../../ts/util";
+    import { onDestroy } from "svelte";
+    import {isEqual, cloneDeep} from 'lodash'
+    import Help from "../Others/Help.svelte";
+  import RegexData from "./RegexData.svelte";
+
+    let subMenu = 0
+    let subberMenu = 0
+
+    let tokens = {
+        desc: 0,
+        firstMsg: 0,
+        localNote: 0
+    }
+
+    let lasttokens = {
+        desc: '',
+        firstMsg: '',
+        localNote: ''
+    }
+
+    async function loadTokenize(chara){
+        console.log('tokenize')
+        const cha = chara
+        if(cha.type !== 'group'){
+            if(lasttokens.desc !== cha.desc){
+                if(cha.desc){
+                    lasttokens.desc = cha.desc
+                    tokens.desc = await tokenize(cha.desc)
+                }
+            }
+            if(lasttokens.firstMsg !==chara.firstMessage){
+                lasttokens.firstMsg = chara.firstMessage
+                tokens.firstMsg = await tokenize(chara.firstMessage)
+            }
+        }
+        if(lasttokens.localNote !== currentChar.data.chats[currentChar.data.chatPage].note){
+            lasttokens.localNote = currentChar.data.chats[currentChar.data.chatPage].note
+            tokens.localNote = await tokenize(currentChar.data.chats[currentChar.data.chatPage].note)
+        
+        }
+    }
+
+    $:{
+        loadTokenize(currentChar.data)
+    }
+
+    async function addGroupChar(){
+        let group = currentChar.data
+        if(group.type === 'group'){
+            const res = await alertSelectChar()
+            if(res){
+                if(group.characters.includes(res)){
+                    alertError(language.errors.alreadyCharInGroup)
+                }
+                else{
+                    if(await alertConfirm(language.askLoadFirstMsg)){
+                        group.chats[group.chatPage].message.push({
+                            role:'char',
+                            data: findCharacterbyId(res).firstMessage,
+                            saying: res,
+                        })
+                    }
+
+                    group.characters.push(res)
+                    currentChar.data = group
+                }
+            }
+        }
+    }
+
+
+    function rmCharFromGroup(index:number){
+        let group = currentChar.data
+        if(group.type === 'group'){
+            group.characters.splice(index, 1)
+            currentChar.data = group
+        }
+    }
+
+    let database:Database
+    let currentChar:{
+        type: 'character',
+        data: character
+    }|{
+        type: 'group',
+        data: groupChat
+    }
+
+
+    const unsub = DataBase.subscribe((v) => {
+        database = v
+        const cha = v.characters[$selectedCharID]
+        if(!cha){
+            return
+        }
+        if((!currentChar) || (!isEqual(currentChar.data, cha))){
+            if(cha.type === 'character'){
+                currentChar = {
+                    type: 'character',
+                    data: (cha)
+                }
+            }
+            else{
+                currentChar = {
+                    type: 'group',
+                    data: (cha)
+                }
+            }
+        }
+    })
+
+    $: {
+        if(database.characters[$selectedCharID].chaId === currentChar.data.chaId){
+            database.characters[$selectedCharID] = currentChar.data
+        }
+
+        DataBase.set(database)
+    }
+
+    onDestroy(unsub);
+
+</script>
+
+<div class="flex gap-2 mb-2">
+    <button class={subMenu === 0 ? 'text-gray-200 ' : 'text-gray-500'} on:click={() => {subMenu = 0}}>
+        <UserIcon />
+    </button>
+    <button class={subMenu === 1 ? 'text-gray-200' : 'text-gray-500'} on:click={() => {subMenu = 1}}>
+        <SmileIcon />
+    </button>
+    <button class={subMenu === 3 ? 'text-gray-200' : 'text-gray-500'} on:click={() => {subMenu = 3;subberMenu = 0}}>
+        <BookIcon />
+    </button>
+    <button class={subMenu === 2 ? 'text-gray-200' : 'text-gray-500'} on:click={() => {subMenu = 2}}>
+        <ActivityIcon />
+    </button>
+</div>
+
+
+{#if subMenu === 0}
+    {#if currentChar.type !== 'group'}
+        <input class="text-neutral-200 mt-2 mb-4 p-2 bg-transparent input-text text-xl focus:bg-selected" placeholder="Character Name" bind:value={currentChar.data.name}>
+        <span class="text-neutral-200">{language.description} <Help key="charDesc"/></span>
+        <textarea class="bg-transparent input-text mt-2 mb-2 text-gray-200 text-xs resize-none h-20 focus:bg-selected" autocomplete="off" bind:value={currentChar.data.desc}></textarea>
+        <span class="text-gray-400 mb-6 text-sm">{tokens.desc} {language.tokens}</span>
+        <span class="text-neutral-200">{language.firstMessage} <Help key="charFirstMessage"/></span>
+        <textarea class="bg-transparent input-text mt-2 mb-2 text-gray-200 text-xs resize-none h-20 focus:bg-selected" autocomplete="off" bind:value={currentChar.data.firstMessage}></textarea>
+        <span class="text-gray-400 mb-6 text-sm">{tokens.firstMsg} {language.tokens}</span>
+    {:else}
+        <input class="text-neutral-200 mt-2 mb-4 p-2 bg-transparent input-text text-xl focus:bg-selected" placeholder="Group Name" bind:value={currentChar.data.name}>
+        <span class="text-neutral-200">{language.character}</span>
+        <div class="p-2 flex gap-2">
+            {#if currentChar.data.characters.length === 0}
+                <span class="text-gray-500">No Character</span>
+            {:else}
+                {#each currentChar.data.characters as char, i}
+                    {#await getCharImage(findCharacterbyId(char).image, 'css')}
+                        <BarIcon onClick={() => {
+                            rmCharFromGroup(i)
+                        }}>
+                            <User/>
+                        </BarIcon>
+                    {:then im} 
+                        <BarIcon onClick={() => {
+                            rmCharFromGroup(i)
+                        }} additionalStyle={im} />
+                    {/await}
+                {/each}
+            {/if}
+        </div>
+        <div class="text-gray-500 mt-1 flex mb-6">
+            <button on:click={addGroupChar} class="hover:text-neutral-200 cursor-pointer">
+                <PlusIcon />
+            </button>
+        </div>
+
+    {/if}
+    <span class="text-neutral-200">{language.authorNote} <Help key="charNote"/></span>
+    <textarea class="bg-transparent input-text mt-2 mb-2 text-gray-200 resize-none h-20 focus:bg-selected text-xs" autocomplete="off" bind:value={currentChar.data.chats[currentChar.data.chatPage].note}></textarea>
+    <span class="text-gray-400 mb-6 text-sm">{tokens.localNote} {language.tokens}</span>
+
+    <div class="flex mt-6 items-center">
+        <Check bind:check={$DataBase.jailbreakToggle}/>
+        <span class="text-neutral-200 ml-2">{language.jailbreakToggle}</span>
+    </div>
+{:else if subMenu === 1}
+    <h2 class="mb-2 text-2xl font-bold mt-2">{language.characterDisplay}</h2>
+    <span class="text-neutral-200 mt-2 mb-2">{currentChar.type !== 'group' ? language.charIcon : language.groupIcon}</span>
+    <button on:click={() => {selectCharImg($selectedCharID)}}>
+        {#if currentChar.data.image === ''}
+            <div class="rounded-md h-32 w-32 shadow-lg bg-gray-500 cursor-pointer hover:text-green-500" />
+        {:else}
+            {#await getCharImage(currentChar.data.image, 'css')}
+                <div class="rounded-md h-32 w-32 shadow-lg bg-gray-500 cursor-pointer hover:text-green-500"></div>
+            {:then im} 
+                <div class="rounded-md h-32 w-32 shadow-lg bg-gray-500 cursor-pointer hover:text-green-500" style={im} />                
+            {/await}
+        {/if}
+    </button>
+
+    {#if currentChar.type === 'group'}
+        <button
+            on:click={makeGroupImage}
+            class="drop-shadow-lg p-2 border-borderc border-solid mt-2 flex justify-center items-center ml-2 mr-2 border-1 hover:bg-selected">
+            {language.createGroupImg}
+        </button>
+    {/if}
+
+
+    <span class="text-neutral-200 mt-6 mb-2">{language.viewScreen}</span>
+    <!-- svelte-ignore empty-block -->
+
+    {#if currentChar.type !== 'group'}
+        <select class="bg-transparent input-text mb-4 text-gray-200 appearance-none" bind:value={currentChar.data.viewScreen}>
+            <option value="none" class="bg-darkbg appearance-none">{language.none}</option>
+            <option value="emotion" class="bg-darkbg appearance-none">{language.emotionImage}</option>
+            <option value="imggen" class="bg-darkbg appearance-none">{language.imageGeneration}</option>
+        </select>
+    {:else}
+    <select class="bg-transparent input-text mb-4 text-gray-200 appearance-none" bind:value={currentChar.data.viewScreen}>
+        <option value="none" class="bg-darkbg appearance-none">{language.none}</option>
+        <option value="single" class="bg-darkbg appearance-none">{language.singleView}</option>
+        <option value="multiple" class="bg-darkbg appearance-none">{language.SpacedView}</option>
+        <option value="emp" class="bg-darkbg appearance-none">{language.emphasizedView}</option>
+
+    </select>
+    {/if}
+
+    {#if currentChar.data.viewScreen === 'emotion'}
+        <span class="text-neutral-200 mt-6">{language.emotionImage} <Help key="emotion"/></span>
+        <span class="text-gray-400 text-xs">{language.emotionWarn}</span>
+
+        <table class="contain w-full max-w-full tabler">
+            <tr>
+                <th class="font-medium w-1/3">{language.image}</th>
+                <th class="font-medium w-1/2">{language.emotion}</th>
+                <th class="font-medium"></th>
+            </tr>
+            {#if currentChar.data.emotionImages.length === 0}
+                <tr>
+                    <div class="text-gray-500">{language.noImages}</div>
+                </tr>
+            {/if}
+            {#each currentChar.data.emotionImages as emo, i}
+                <tr>
+                    {#await getCharImage(emo[1], 'plain')}
+                        <td class="font-medium truncate w-1/3"></td>
+                    {:then im}
+                        <td class="font-medium truncate w-1/3"><img src={im} alt="img" class="w-full"></td>                        
+                    {/await}
+                    <td class="font-medium truncate w-1/2">
+                        <input class="text-neutral-200 mt-2 mb-4 p-2 bg-transparent input-text text-xl focus:bg-selected" bind:value={currentChar.data.emotionImages[i][0]}>
+                    </td>
+                    <button class="font-medium cursor-pointer hover:text-green-500" on:click={() => {
+                        rmCharEmotion($selectedCharID,i)
+                    }}><TrashIcon /></button>
+                </tr>
+            {/each}
+        </table>
+
+        <div class="text-gray-500 hover:text-neutral-200 mt-2 flex">
+            {#if !$addingEmotion}
+                <button class="cursor-pointer hover:text-green-500" on:click={() => {addCharEmotion($selectedCharID)}}>
+                    <PlusIcon />
+                </button>
+            {:else}
+                <span>Loading...</span>
+            {/if}
+        </div>
+    {/if}
+    {#if currentChar.data.viewScreen === 'imggen'}
+        <span class="text-neutral-200 mt-6">{language.imageGeneration} <Help key="imggen"/></span>
+        <span class="text-gray-400 text-xs">{language.emotionWarn}</span>
+        
+        
+        <table class="contain w-full max-w-full tabler">
+            <tr>
+                <th class="font-medium w-1/3">{language.key}</th>
+                <th class="font-medium w-1/2">{language.value}</th>
+                <th class="font-medium"></th>
+            </tr>
+            {#if currentChar.data.sdData.length === 0}
+                <tr>
+                    <div class="text-gray-500">{language.noData}</div>
+                </tr>
+            {/if}
+            {#each currentChar.data.sdData as emo, i}
+                <tr>
+                    <td class="font-medium truncate w-1/3">
+                        <input class="text-neutral-200 mt-2 mb-4 p-2 bg-transparent input-text focus:bg-selected text-sm" bind:value={currentChar.data.sdData[i][0]}>
+                    </td>
+                    <td class="font-medium truncate w-1/2">
+                        <input class="text-neutral-200 mt-2 mb-4 p-2 bg-transparent input-text focus:bg-selected text-sm" bind:value={currentChar.data.sdData[i][1]}>
+                    </td>
+                    {#if (!['always','negative'].includes(currentChar.data.sdData[i][0]))}
+                    <button class="font-medium flex justify-center items-center h-full cursor-pointer hover:text-green-500" on:click={() => {
+                            let db = ($DataBase)
+                            let charId = $selectedCharID
+                            let dbChar = db.characters[charId]
+                            if(dbChar.type !== 'group'){
+                                dbChar.sdData.splice(i, 1)
+                                db.characters[charId] = dbChar
+                            }
+                            $DataBase = (db)
+                    }}><TrashIcon /></button>
+                    {:else}
+                    <td></td>
+                    {/if}
+                </tr>
+            {/each}
+            
+        </table>
+        <div class="text-gray-500 hover:text-neutral-200 mt-2 flex">
+            {#if !$addingEmotion}
+                <button class="cursor-pointer hover:text-green-500" on:click={() => {
+                    let db = ($DataBase)
+                    let charId = $selectedCharID
+                    let dbChar = db.characters[charId]
+                    if(dbChar.type !== 'group'){
+                        dbChar.sdData.push(['', ''])
+                        db.characters[charId] = dbChar
+                    }
+                    $DataBase = (db)
+                }}>
+                    <PlusIcon />
+                </button>
+            {:else}
+                <span>Loading...</span>
+            {/if}
+        </div>
+        <span class="text-neutral-200 mt-6">{language.currentImageGeneration}</span>
+        {#if currentChar.data.chats[currentChar.data.chatPage].sdData}
+            <textarea class="bg-transparent input-text mt-2 mb-2 text-gray-200 resize-none h-20 focus:bg-selected" autocomplete="off" bind:value={currentChar.data.chats[currentChar.data.chatPage].sdData}></textarea>
+        {:else}
+            <span><div class="text-gray-500">{language.noData}</div></span>
+        {/if}
+    {/if}
+{:else if subMenu === 3}
+    <h2 class="mb-2 text-2xl font-bold mt-2">{language.loreBook} <Help key="lorebook"/></h2>
+    <LoreBook />
+{:else if subMenu === 2}
+    <h2 class="mb-2 text-2xl font-bold mt-2">{language.advancedSettings}</h2>
+    {#if currentChar.type !== 'group'}
+        <span class="text-neutral-200 mt-2">Bias <Help key="bias"/></span>
+        <table class="contain w-full max-w-full tabler mt-2">
+            <tr>
+                <th class="font-medium w-1/2">Bias</th>
+                <th class="font-medium w-1/3">{language.value}</th>
+                <th class="font-medium cursor-pointer hover:text-green-500" on:click={() => {
+                    if(currentChar.type === 'character'){
+                        let bia = currentChar.data.bias
+                        bia.push(['', 0])
+                        currentChar.data.bias = bia
+                    }
+                }}><PlusIcon /></th>
+            </tr>
+            {#if currentChar.data.bias.length === 0}
+                <tr>
+                    <div class="text-gray-500">{language.noBias}</div>
+                </tr>
+            {/if}
+            {#each currentChar.data.bias as bias, i}
+                <tr>
+                    <td class="font-medium truncate w-1/2">
+                        <input class="text-neutral-200 mt-2 mb-4 p-2 bg-transparent input-text focus:bg-selected" bind:value={currentChar.data.bias[i][0]} placeholder="string">
+                    </td>
+                    <td class="font-medium truncate w-1/3">
+                        <input class="text-neutral-200 mt-2 mb-4 w-full p-2 bg-transparent input-text focus:bg-selected" bind:value={currentChar.data.bias[i][1]} type="number" max="100" min="-100">
+                    </td>
+                    <button class="font-medium flex justify-center items-center h-full cursor-pointer hover:text-green-500" on:click={() => {
+                        if(currentChar.type === 'character'){
+                            let bia = currentChar.data.bias
+                            bia.splice(i, 1)
+                            currentChar.data.bias = bia
+                        }
+                    }}><TrashIcon /></button>
+                </tr>
+            {/each}
+        </table>
+        <span class="text-neutral-200 mt-4">{language.regexScript} <Help key="experimental"/></span>
+        <table class="contain w-full max-w-full tabler mt-2 flex flex-col p-2 gap-2">
+            {#if currentChar.data.customscript.length === 0}
+                    <div class="text-gray-500">No Scripts</div>
+            {/if}
+            {#each currentChar.data.customscript as customscript, i}
+                <RegexData bind:value={currentChar.data.customscript[i]}  onRemove={() => {
+                    if(currentChar.type === 'character'){
+                        let customscript = currentChar.data.customscript
+                        customscript.splice(i, 1)
+                        currentChar.data.customscript = customscript
+                    }
+                }}/>
+            {/each}
+        </table>
+        <th class="font-medium cursor-pointer hover:text-green-500" on:click={() => {
+            if(currentChar.type === 'character'){
+                let script = currentChar.data.customscript
+                script.push({
+                  comment: "",
+                  in: "",
+                  out: "",
+                  type: "editinput"
+                })
+                currentChar.data.customscript = script
+            }
+        }}><PlusIcon /></th>
+        <div class="flex items-center mt-4">
+            <Check bind:check={currentChar.data.utilityBot}/>
+            <span>{language.utilityBot}</span>
+        </div>
+        <button on:click={async () => {
+            exportChar($selectedCharID)
+        }} class="text-neutral-200 mt-6 text-lg bg-transparent border-solid border-1 border-borderc p-4 hover:bg-green-500 transition-colors cursor-pointer">{language.exportCharacter}</button>
+    
+    {:else}
+
+    <div class="flex mb-2 items-center">
+        <Check bind:check={currentChar.data.useCharacterLore}/>
+        <span class="text-neutral-200 ml-2">{language.useCharLorebook} <Help key="experimental"/></span>
+    </div>
+    
+    {/if}
+    <button on:click={async () => {
+        const conf = await alertConfirm(language.removeConfirm + currentChar.data.name)
+        if(!conf){
+            return
+        }
+        const conf2 = await alertConfirm(language.removeConfirm2 + currentChar.data.name)
+        if(!conf2){
+            return
+        }
+        let chars = $DataBase.characters
+        chars.splice($selectedCharID, 1)
+        $selectedCharID = -1
+        $DataBase.characters = chars
+
+    }} class="text-neutral-200 mt-2 bg-transparent border-solid border-1 border-borderc p-2 hover:bg-draculared transition-colors cursor-pointer">{ currentChar.type === 'group' ? language.removeGroup : language.removeCharacter}</button>
+{/if}
+
+
+<style>
+    .contain{
+        border: #6272a4 1px solid
+    }
+
+    .tabler {
+    table-layout: fixed;
+    }
+
+    .tabler td {
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+</style>

src/lib/SideBars/DropList.svelte

@@ -0,0 +1,58 @@
+<script>
+  import { ChevronDown, ChevronUp } from "lucide-svelte";
+  import { language } from "../../lang";
+
+    export let list = []
+</script>
+
+<div class="list flex flex-col bg-bgcolor rounded-md">
+    {#each list as n, i}
+        <div class="w-full h-10 flex items-center">
+            <span class="ml-2 flex-grow">{language.formating[n]}</span>
+            <button class="mr-1" on:click={() => {
+                if(i !== 0){
+                    let tempList = list
+                    const temp = tempList[i]
+                    tempList[i] = tempList[i-1]
+                    tempList[i-1] = temp
+                    list = tempList
+                }
+                else{
+                    let tempList = list
+                    const temp = tempList[i]
+                    tempList[i] = tempList[i+1]
+                    tempList[i+1] = temp
+                    list = tempList
+                }
+            }}><ChevronUp /></button>
+            <button class="mr-1" on:click={() => {
+                if(i !== (list.length - 1)){
+                    let tempList = list
+                    const temp = tempList[i]
+                    tempList[i] = tempList[i+1]
+                    tempList[i+1] = temp
+                    list = tempList
+                }
+                else{
+                    let tempList = list
+                    const temp = tempList[i]
+                    tempList[i] = tempList[i-1]
+                    tempList[i-1] = temp
+                    list = tempList
+                }
+            }}><ChevronDown /></button>
+        </div>
+        {#if i !== (list.length - 1)}
+            <div class="seperator"></div>
+        {/if}
+    {/each}
+</div>
+
+<style>
+    .seperator{
+        width: 100%;
+        border: none;
+        outline: 0;
+        border-bottom: 1px solid #6272a4;
+    }
+</style>

src/lib/SideBars/LoreBookData.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+    import { XIcon } from "lucide-svelte";
+    import { language } from "../../lang";
+    import type { loreBook } from "../../ts/database";
+    import { alertConfirm } from "../../ts/alert";
+    import Check from "../Others/Check.svelte";
+    import Help from "../Others/Help.svelte";
+    export let value:loreBook
+    export let onRemove: () => void = () => {}
+    let open = false
+</script>
+
+<div class="w-full flex flex-col">
+    <div class="flex items-center transition-colors w-full ">
+        <button class="endflex valuer border-borderc" on:click={() => {
+            open = !open
+        }}>
+            <span>{value.comment.length === 0 ? 'Unnamed Lore' : value.comment}</span>
+        </button>
+        <button class="valuer" on:click={async () => {
+            const d = await alertConfirm(language.removeConfirm + value.comment)
+            if(d){
+                onRemove()
+            }
+        }}>
+            <XIcon />
+        </button>
+    </div>
+    {#if open}
+        <div class="seperator">
+            <span class="text-neutral-200 mt-6">{language.name} <Help key="loreName"/></span>
+            <input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected text-sm" bind:value={value.comment}>
+            {#if !value.alwaysActive}
+                <span class="text-neutral-200 mt-6">{language.activationKeys} <Help key="loreActivationKey"/></span>
+                <span class="text-xs text-gray-500">{language.activationKeysInfo}</span>
+                <input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected text-sm" bind:value={value.key}>
+            {/if}
+            <span class="text-neutral-200 mt-4">{language.insertOrder} <Help key="loreorder"/></span>
+            <input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected text-sm" bind:value={value.insertorder} type="number" min={0} max={1000}>
+            <span class="text-neutral-200 mt-4">{language.prompt}</span>
+            <textarea class="bg-transparent input-text mt-2 text-gray-200 resize-none h-20 focus:bg-selected text-xs" autocomplete="off" bind:value={value.content}></textarea>
+            <div class="flex items-center mt-4 mb-6">
+                <Check bind:check={value.alwaysActive}/>
+                <span>{language.alwaysActive}</span>
+            </div>
+        </div>
+    {/if}
+</div>
+
+
+
+<style>
+    .valuer:hover{
+        color: rgba(16, 185, 129, 1);
+        cursor: pointer;
+    }
+
+    .endflex{
+        display: flex;
+        flex-grow: 1;
+        cursor: pointer;
+    }
+
+    .seperator{
+        border: none;
+        outline: 0;
+        width: 100%;
+        margin-top: 0.5rem;
+        display: flex;
+        flex-direction: column;
+        margin-bottom: 0.5rem;
+        background-color: #282a36;
+    }
+    
+</style>

src/lib/SideBars/LoreBookSetting.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+    import { DataBase } from "../../ts/database";
+    import { language } from "../../lang";
+    import {selectedCharID} from '../../ts/stores'
+    import { DownloadIcon, FolderUpIcon, ImportIcon, PlusIcon } from "lucide-svelte";
+    import { addLorebook, exportLoreBook, importLoreBook } from "../../ts/lorebook";
+    import LoreBookData from "./LoreBookData.svelte";
+    let submenu = 0
+</script>
+
+<div class="flex w-full">
+    <button on:click={() => {
+        submenu = 0
+    }} class="flex-1 border-solid border-borderc border-1 p-2 flex justify-center cursor-pointer" class:bg-selected={submenu === 0}>
+        <span>{$DataBase.characters[$selectedCharID].type === 'group' ? language.group : language.character}</span>
+    </button>
+    <button on:click={() => {
+        submenu = 1
+    }} class="flex-1 border-solid border-borderc border-1 border-l-transparent p-2 flex justify-center cursor-pointer" class:bg-selected={submenu === 1}>
+        <span>{language.Chat}</span>
+    </button>
+</div>
+<span class="text-gray-500 mt-2 mb-6 text-sm">{submenu === 0 ? $DataBase.characters[$selectedCharID].type === 'group' ? language.groupLoreInfo : language.globalLoreInfo : language.localLoreInfo}</span>
+
+<div class="border-solid border-borderc p-2 flex flex-col border-1">
+    {#if submenu === 0}
+        {#if $DataBase.characters[$selectedCharID].globalLore.length === 0}
+            <span class="text-gray-500">No Lorebook</span>
+        {:else}
+            {#each $DataBase.characters[$selectedCharID].globalLore as book, i}
+                {#if i !== 0}
+                    <div class="border-borderc mt-2 mb-2 w-full border-solid border-b-1 seperator"></div>
+                {/if}
+                <LoreBookData bind:value={$DataBase.characters[$selectedCharID].globalLore[i]} onRemove={() => {
+                    let lore  = $DataBase.characters[$selectedCharID].globalLore
+                    lore.splice(i, 1)
+                    $DataBase.characters[$selectedCharID].globalLore = lore
+                }}/>
+            {/each}
+        {/if}
+    {:else}
+        {#if $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].localLore.length === 0}
+            <span class="text-gray-500">No Lorebook</span>
+        {:else}
+            {#each $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].localLore as book, i}
+                {#if i !== 0}
+                    <div class="border-borderc mt-2 mb-2 w-full border-solid border-b-1 seperator"></div>
+                {/if}
+                <LoreBookData bind:value={$DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].localLore[i]} onRemove={() => {
+                    let lore  = $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].localLore
+                    lore.splice(i, 1)
+                    $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].localLore = lore
+                }}/>
+            {/each}
+        {/if}
+    {/if}
+
+</div>
+
+<div class="text-gray-500 mt-2 flex">
+    <button on:click={() => {addLorebook(submenu)}} class="hover:text-neutral-200 cursor-pointer">
+        <PlusIcon />
+    </button>
+    <button on:click={() => {
+        exportLoreBook(submenu === 0 ? 'global' : 'local')
+    }} class="hover:text-neutral-200 ml-1  cursor-pointer">
+        <DownloadIcon />
+    </button>
+    <button on:click={() => {
+        importLoreBook(submenu === 0 ? 'global' : 'local')
+    }} class="hover:text-neutral-200 ml-2  cursor-pointer">
+        <FolderUpIcon />
+    </button>
+</div>
+
+<style>
+    .seperator{
+        border-top: 0px;
+        border-left: 0px;
+        border-right: 0px;
+    }
+</style>

src/lib/SideBars/RegexData.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+    import { XIcon } from "lucide-svelte";
+    import { language } from "src/lang";
+    import { alertConfirm } from "src/ts/alert";
+    import type { customscript } from "src/ts/database";
+
+    export let value:customscript
+    export let onRemove: () => void = () => {}
+    let open = false
+</script>
+
+<div class="w-full flex flex-col">
+    <div class="flex items-center transition-colors w-full ">
+        <button class="endflex valuer border-borderc" on:click={() => {
+            open = !open
+        }}>
+            <span>{value.comment.length === 0 ? 'Unnamed Script' : value.comment}</span>
+        </button>
+        <button class="valuer" on:click={async () => {
+            const d = await alertConfirm(language.removeConfirm + value.comment)
+            if(d){
+                onRemove()
+            }
+        }}>
+            <XIcon />
+        </button>
+    </div>
+    {#if open}
+        <div class="seperator">
+            <span class="text-neutral-200 mt-6">{language.name}</span>
+            <input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected text-sm" bind:value={value.comment}>
+            <span class="text-neutral-200 mt-4">Type</span>
+            <select class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected text-sm" bind:value={value.type}>
+                <option value="editinput">{language.editInput}</option>
+                <option value="editoutput">{language.editOutput}</option>
+                <option value="editprocess">{language.editProcess}</option>
+            </select>
+            <span class="text-neutral-200 mt-6">IN:</span>
+            <input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected text-sm" bind:value={value.in}>
+            <span class="text-neutral-200 mt-6">OUT:</span>
+            <input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected text-sm" bind:value={value.out}>
+       </div>
+    {/if}
+</div>
+
+<style>
+    .valuer:hover{
+        color: rgba(16, 185, 129, 1);
+        cursor: pointer;
+    }
+
+    .endflex{
+        display: flex;
+        flex-grow: 1;
+        cursor: pointer;
+    }
+
+    .seperator{
+        border: none;
+        outline: 0;
+        width: 100%;
+        margin-top: 0.5rem;
+        display: flex;
+        flex-direction: column;
+        margin-bottom: 0.5rem;
+        background-color: #282a36;
+    }
+    
+</style>

src/lib/SideBars/Settings.svelte

@@ -0,0 +1,539 @@
+<script>
+    import { ActivityIcon, Bot, CodeIcon, FolderIcon, LayoutDashboardIcon, MonitorIcon, PlusIcon, TrashIcon, UserIcon } from "lucide-svelte";
+    import { tokenize } from "../../ts/tokenizer";
+    import { DataBase, saveImage, updateTextTheme } from "../../ts/database";
+    import DropList from "./DropList.svelte";
+    import { changeLanguage, language } from "../../lang";
+    import { getCharImage, selectUserImg } from "../../ts/characters";
+    import { changeFullscreen, selectSingleFile, sleep } from "../../ts/util";
+    import { customProviderStore, getCurrentPluginMax, importPlugin } from "../../ts/process/plugins";
+    import { alertConfirm, alertMd } from "../../ts/alert";
+    import Check from "../Others/Check.svelte";
+    import { getRequestLog, isTauri } from "../../ts/globalApi";
+    import { checkDriver } from "../../ts/drive/drive";
+  import Help from "../Others/Help.svelte";
+    let subMenu = -1
+    let subSubMenu = 0
+    export let openPresetList =false
+
+    let tokens = {
+        mainPrompt: 0,
+        jailbreak: 0,
+        globalNote: 0
+    }
+
+    let lasttokens = {
+        mainPrompt: '',
+        jailbreak: '',
+        globalNote: ''
+    }
+
+    async function loadTokenize(){
+        if(lasttokens.mainPrompt !== $DataBase.mainPrompt){
+            lasttokens.mainPrompt = $DataBase.mainPrompt
+            tokens.mainPrompt = await tokenize($DataBase.mainPrompt)
+        }
+        tokens.mainPrompt = await tokenize($DataBase.mainPrompt)
+        tokens.jailbreak = await tokenize($DataBase.jailbreak)
+        tokens.globalNote = await tokenize($DataBase.globalNote)
+    }
+    
+    $: loadTokenize()
+</script>
+
+<div class="flex gap-2 mb-2">
+    <button class={subMenu === -1 ? 'text-gray-200' : 'text-gray-500 cursor-pointer'} on:click={() => {subMenu = -1}}>
+        <UserIcon />
+    </button>
+    <button class={subMenu === 0 ? 'text-gray-200' : 'text-gray-500 cursor-pointer'} on:click={() => {subMenu = 0}}>
+        <Bot />
+    </button>
+    <button class={subMenu === 3 ? 'text-gray-200' : 'text-gray-500 cursor-pointer'} on:click={() => {subMenu = 3}}>
+        <MonitorIcon />
+    </button>
+    <button class={subMenu === 2 ? 'text-gray-200' : 'text-gray-500 cursor-pointer'} on:click={() => {subMenu = 2}}>
+        <CodeIcon />
+    </button>
+    <button class={subMenu === 4 ? 'text-gray-200' : 'text-gray-500 cursor-pointer'} on:click={() => {subMenu = 4}}>
+        <FolderIcon />
+    </button>
+    <button class={subMenu === 1 ? 'text-gray-200' : 'text-gray-500 cursor-pointer'} on:click={() => {subMenu = 1}}>
+        <ActivityIcon />
+    </button>
+</div>
+
+{#if subMenu === -1}
+    <h2 class="mb-2 text-2xl font-bold mt-2">{language.userSetting}</h2>
+    <span class="text-neutral-200 mt-2 mb-2">{language.userIcon}</span>
+    <button on:click={() => {selectUserImg()}}>
+        {#if $DataBase.userIcon === ''}
+            <div class="rounded-md h-32 w-32 shadow-lg bg-gray-500 cursor-pointer hover:text-green-500" />
+        {:else}
+            {#await getCharImage($DataBase.userIcon, 'css')}
+                <div class="rounded-md h-32 w-32 shadow-lg bg-gray-500 cursor-pointer hover:text-green-500" />
+            {:then im} 
+                <div class="rounded-md h-32 w-32 shadow-lg bg-gray-500 cursor-pointer hover:text-green-500" style={im} />                
+            {/await}
+        {/if}
+    </button>
+    <span class="text-neutral-200 mt-4">{language.username}</span>
+    <input class="text-neutral-200 mt-2 mb-4 p-2 bg-transparent input-text focus:bg-selected" placeholder="User" bind:value={$DataBase.username}>
+    
+{:else if subMenu === 0 && subSubMenu === 0}
+    <h2 class="mb-2 text-2xl font-bold mt-2">{language.botSettings}</h2>
+    <div class="flex w-full mb-2">
+        <button on:click={() => {
+            subSubMenu = 0
+        }} class="flex-1 border-solid border-borderc border-1 p-2 flex justify-center cursor-pointer" class:bg-selected={subSubMenu === 0}>
+            <span>{language.Chat}</span>
+        </button>
+        <button on:click={() => {
+            subSubMenu = 1
+        }} class="flex-1 border-solid border-borderc border-1 border-l-transparent p-2 flex justify-center cursor-pointer">
+            <span>{language.others}</span>
+        </button>
+    </div>
+    <span class="text-neutral-200 mt-4">{language.model} <Help key="model"/></span>
+    <select class="bg-transparent input-text mt-2 mb-2 text-gray-200 appearance-none text-sm" bind:value={$DataBase.aiModel}>
+        <option value="gpt35" class="bg-darkbg appearance-none">OpenAI GPT-3.5</option>
+        <option value="gpt4" class="bg-darkbg appearance-none">OpenAI GPT-4</option>
+        <option value="textgen_webui" class="bg-darkbg appearance-none">Text Generation WebUI</option>
+        {#if $DataBase.plugins.length > 0}
+            <option value="custom" class="bg-darkbg appearance-none">Plugin</option>
+        {/if}
+    </select>
+
+    <span class="text-neutral-200 mt-2">{language.submodel} <Help key="submodel"/></span>
+    <select class="bg-transparent input-text mt-2 mb-4 text-gray-200 appearance-none text-sm" bind:value={$DataBase.subModel}>
+        <option value="gpt35" class="bg-darkbg appearance-none">OpenAI GPT-3.5</option>
+        <option value="gpt4" class="bg-darkbg appearance-none">OpenAI GPT-4</option>
+        <option value="textgen_webui" class="bg-darkbg appearance-none">Text Generation WebUI</option>
+        {#if $customProviderStore.length > 0}
+            <option value="custom" class="bg-darkbg appearance-none">Plugin</option>
+        {/if}
+    </select>
+
+    {#if $DataBase.aiModel === 'gpt35' || $DataBase.aiModel === 'gpt4' || $DataBase.subModel === 'gpt4' || $DataBase.subModel === 'gpt35'}
+        <span class="text-neutral-200">OpenAI {language.apiKey} <Help key="oaiapikey"/></span>
+        <input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected text-sm" placeholder="sk-XXXXXXXXXXXXXXXXXXXX" bind:value={$DataBase.openAIKey}>
+    {/if}
+    {#if $DataBase.aiModel === 'custom'}
+        <span class="text-neutral-200 mt-2">{language.plugin}</span>
+        <select class="bg-transparent input-text mt-2 mb-4 text-gray-200 appearance-none text-sm" bind:value={$DataBase.currentPluginProvider}>
+            <option value="" class="bg-darkbg appearance-none">None</option>
+            {#each $customProviderStore as plugin}
+                <option value={plugin} class="bg-darkbg appearance-none">{plugin}</option>
+            {/each}
+        </select>
+    {/if}
+    {#if $DataBase.aiModel === 'textgen_webui' || $DataBase.subModel === 'textgen_webui'}
+        <span class="text-neutral-200">TextGen {language.providerURL}</span>
+        <input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected" placeholder="https://..." bind:value={$DataBase.textgenWebUIURL}>
+        <span class="text-draculared text-xs mb-2">You must use WebUI without agpl license or use unmodified version with agpl license to observe the contents of the agpl license.</span>
+        <span class="text-draculared text-xs mb-2">You must use textgen webui with --no-stream and without --cai-chat or --chat</span>
+    {/if}
+    <span class="text-neutral-200">{language.mainPrompt} <Help key="mainprompt"/></span>
+    <textarea class="bg-transparent input-text mt-2 mb-2 text-gray-200 resize-none h-20 focus:bg-selected text-xs" autocomplete="off" bind:value={$DataBase.mainPrompt}></textarea>
+    <span class="text-gray-400 mb-6 text-sm">{tokens.mainPrompt} {language.tokens}</span>
+    <span class="text-neutral-200">{language.jailbreakPrompt} <Help key="jailbreak"/></span>
+    <textarea class="bg-transparent input-text mt-2 mb-2 text-gray-200 resize-none h-20 focus:bg-selected text-xs" autocomplete="off" bind:value={$DataBase.jailbreak}></textarea>
+    <span class="text-gray-400 mb-6 text-sm">{tokens.jailbreak} {language.tokens}</span>
+    <span class="text-neutral-200">{language.globalNote} <Help key="globalNote"/></span>
+    <textarea class="bg-transparent input-text mt-2 mb-2 text-gray-200 resize-none h-20 focus:bg-selected text-xs" autocomplete="off" bind:value={$DataBase.globalNote}></textarea>
+    <span class="text-gray-400 mb-6 text-sm">{tokens.globalNote} {language.tokens}</span>
+    <span class="text-neutral-200">{language.maxContextSize}</span>
+    {#if $DataBase.aiModel === 'gpt35'}
+        <input class="text-neutral-200 mb-4 text-sm p-2 bg-transparent input-text focus:bg-selected" type="number" min={0} max="4000" bind:value={$DataBase.maxContext}>
+    {:else if $DataBase.aiModel === 'gpt4' || $DataBase.aiModel === 'textgen_webui'}
+        <input class="text-neutral-200 mb-4 text-sm p-2 bg-transparent input-text focus:bg-selected" type="number" min={0} max="8000" bind:value={$DataBase.maxContext}>
+    {:else if $DataBase.aiModel === 'custom'}
+        <input class="text-neutral-200 mb-4 text-sm p-2 bg-transparent input-text focus:bg-selected" type="number" min={0} max={getCurrentPluginMax($DataBase.currentPluginProvider)} bind:value={$DataBase.maxContext}>
+    {/if}
+    <span class="text-neutral-200">{language.maxResponseSize}</span>
+    <input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected text-sm" type="number" min={0} max="2048" bind:value={$DataBase.maxResponse}>
+    <span class="text-neutral-200">{language.temperature} <Help key="tempature"/></span>
+    <input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected" type="range" min="0" max="200" bind:value={$DataBase.temperature}>
+    <span class="text-gray-400 mb-6 text-sm">{($DataBase.temperature / 100).toFixed(2)}</span>
+    <span class="text-neutral-200">{language.frequencyPenalty} <Help key="frequencyPenalty"/></span>
+    <input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected" type="range" min="0" max="100" bind:value={$DataBase.frequencyPenalty}>
+    <span class="text-gray-400 mb-6 text-sm">{($DataBase.frequencyPenalty / 100).toFixed(2)}</span>
+    <span class="text-neutral-200">{language.presensePenalty} <Help key="presensePenalty"/></span>
+    <input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected" type="range" min="0" max="100" bind:value={$DataBase.PresensePenalty}>
+    <span class="text-gray-400 mb-6 text-sm">{($DataBase.PresensePenalty / 100).toFixed(2)}</span>
+
+    <span class="text-neutral-200 mt-2">{language.forceReplaceUrl} <Help key="forceUrl"/></span>
+    <input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected text-sm"bind:value={$DataBase.forceReplaceUrl} placeholder="Leave blank to not replace url">
+    <span class="text-neutral-200 mt-2">{language.submodel} {language.forceReplaceUrl} <Help key="forceUrl"/></span>
+    <input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected text-sm"bind:value={$DataBase.forceReplaceUrl2} placeholder="Leave blank to not replace url">
+
+
+
+    <details class="mt-4">
+        <summary class="mb-2">{language.advancedSettings}</summary>
+        <span class="text-neutral-200 mb-2 mt-4">{language.formatingOrder} <Help key="formatOrder"/></span>
+        <DropList bind:list={$DataBase.formatingOrder} />
+        <span class="text-neutral-200 mt-2">Bias <Help key="bias"/></span>
+        <table class="contain w-full max-w-full tabler mt-2">
+            <tr>
+                <th class="font-medium w-1/2">Bias</th>
+                <th class="font-medium w-1/3">{language.value}</th>
+                <th class="font-medium cursor-pointer hover:text-green-500" on:click={() => {
+                        let bia = $DataBase.bias
+                        bia.push(['', 0])
+                        $DataBase.bias = bia
+                }}><PlusIcon /></th>
+            </tr>
+            {#if $DataBase.bias.length === 0}
+                <tr>
+                    <div class="text-gray-500">{language.noBias}</div>
+                </tr>
+            {/if}
+            {#each $DataBase.bias as bias, i}
+                <tr>
+                    <td class="font-medium truncate w-1/2">
+                        <input class="text-neutral-200 mt-2 mb-4 p-2 bg-transparent input-text focus:bg-selected" bind:value={$DataBase.bias[i][0]} placeholder="string">
+                    </td>
+                    <td class="font-medium truncate w-1/3">
+                        <input class="text-neutral-200 mt-2 mb-4 w-full p-2 bg-transparent input-text focus:bg-selected" bind:value={$DataBase.bias[i][1]} type="number" max="100" min="-100">
+                    </td>
+                    <button class="font-medium flex justify-center items-center h-full cursor-pointer hover:text-green-500" on:click={() => {
+                        let bia = $DataBase.bias
+                        bia.splice(i, 1)
+                        $DataBase.bias = bia
+                    }}><TrashIcon /></button>
+                </tr>
+            {/each}
+        </table>
+    
+        <div class="flex items-center mt-4">
+            <Check bind:check={$DataBase.promptPreprocess}/>
+            <span>{language.promptPreprocess}</span>
+        </div>
+    </details>
+
+    <button on:click={() => {openPresetList = true}} class="mt-4 drop-shadow-lg p-3 border-borderc border-solid flex justify-center items-center ml-2 mr-2 border-1 hover:bg-selected">{language.presets}</button>
+
+
+{:else if subMenu === 0 && subSubMenu === 1}
+    <h2 class="mb-2 text-2xl font-bold mt-2">{language.botSettings}</h2>
+    <div class="flex w-full mb-2">
+        <button on:click={() => {
+            subSubMenu = 0
+        }} class="flex-1 border-solid border-borderc border-1 p-2 flex justify-center cursor-pointer">
+            <span>{language.Chat}</span>
+        </button>
+        <button on:click={() => {
+            subSubMenu = 1
+        }} class="flex-1 border-solid border-borderc border-1 border-l-transparent p-2 flex justify-center cursor-pointer" class:bg-selected={subSubMenu === 1}>
+            <span>{language.others}</span>
+        </button>
+    </div>
+    <span class="text-neutral-200 mt-4 text-lg font-bold">{language.imageGeneration}</span>
+
+    <span class="text-neutral-200 mt-2">{language.provider} <Help key="sdProvider"/></span>
+    <select class="bg-transparent input-text mt-2 mb-4 text-gray-200 appearance-none text-sm" bind:value={$DataBase.sdProvider}>
+        <option value="" class="bg-darkbg appearance-none">None</option>
+        <option value="webui" class="bg-darkbg appearance-none">Stable Diffusion WebUI</option>
+        <!-- TODO -->
+        <!-- <option value="runpod" class="bg-darkbg appearance-none">Runpod Serverless</option> -->
+    </select>
+    
+    {#if $DataBase.sdProvider === 'webui'}
+    <span class="text-draculared text-xs mb-2">You must use WebUI with --api flag</span>
+        <span class="text-draculared text-xs mb-2">You must use WebUI without agpl license or use unmodified version with agpl license to observe the contents of the agpl license.</span>
+        {#if !isTauri}
+            <span class="text-draculared text-xs mb-2">You are using web version. you must use ngrok or other tunnels to use your local webui.</span>
+        {/if}
+        <span class="text-neutral-200 mt-2">WebUI {language.providerURL}</span>
+        <input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected text-sm" placeholder="https://..." bind:value={$DataBase.webUiUrl}>
+    {/if}
+
+
+    <span class="text-neutral-200">Steps</span>
+    <input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected text-sm" type="number" min={0} max="100" bind:value={$DataBase.sdSteps}>
+    
+    <span class="text-neutral-200">CFG Scale</span>
+    <input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected text-sm" type="number" min={0} max="20" bind:value={$DataBase.sdCFG}>
+
+    <span class="text-neutral-200">Width</span>
+    <input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected text-sm" type="number" min={0} max="2048" bind:value={$DataBase.sdConfig.width}>
+    <span class="text-neutral-200">Height</span>
+    <input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected text-sm" type="number" min={0} max="2048" bind:value={$DataBase.sdConfig.height}>
+    <span class="text-neutral-200">Sampler</span>
+    <input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected text-sm" bind:value={$DataBase.sdConfig.sampler_name}>
+
+{:else if subMenu === 3}
+    <h2 class="mb-2 text-2xl font-bold mt-2">{language.display}</h2>
+    <span class="text-neutral-200 mt-4">{language.UiLanguage}</span>
+    <select class="bg-transparent input-text mt-2 text-gray-200 appearance-none text-sm" bind:value={$DataBase.language} on:change={async () => {
+        await sleep(10)
+        changeLanguage($DataBase.language)
+        subMenu = -1
+    }}>
+        <option value="en" class="bg-darkbg appearance-none">English</option>
+        <option value="ko" class="bg-darkbg appearance-none">한국어</option>
+    </select>
+
+    <span class="text-neutral-200 mt-4">{language.theme}</span>
+    <select class="bg-transparent input-text mt-2 text-gray-200 appearance-none text-sm" bind:value={$DataBase.theme}>
+        <option value="" class="bg-darkbg appearance-none">Standard Risu</option>
+        <option value="waifu" class="bg-darkbg appearance-none">Waifulike</option>
+        <option value="waifuMobile" class="bg-darkbg appearance-none">WaifuCut</option>
+        <!-- <option value="free" class="bg-darkbg appearance-none">Freestyle</option> -->
+
+    </select>
+
+    
+    {#if $DataBase.theme === "waifu"}
+        <span class="text-neutral-200 mt-4">{language.waifuWidth}</span>
+        <input class="text-neutral-200 text-sm p-2 bg-transparent input-text focus:bg-selected" type="range" min="50" max="200" bind:value={$DataBase.waifuWidth}>
+        <span class="text-gray-400text-sm">{($DataBase.waifuWidth)}%</span>
+
+        <span class="text-neutral-200 mt-4">{language.waifuWidth2}</span>
+        <input class="text-neutral-200 text-sm p-2 bg-transparent input-text focus:bg-selected" type="range" min="20" max="150" bind:value={$DataBase.waifuWidth2}>
+        <span class="text-gray-400text-sm">{($DataBase.waifuWidth2)}%</span>
+    {/if}
+
+    <span class="text-neutral-200 mt-4">{language.textColor}</span>
+    <select class="bg-transparent input-text mt-2 text-gray-200 appearance-none" bind:value={$DataBase.textTheme} on:change={updateTextTheme}>
+        <option value="standard" class="bg-darkbg appearance-none">{language.classicRisu}</option>
+        <option value="highcontrast" class="bg-darkbg appearance-none">{language.highcontrast}</option>
+        <option value="custom" class="bg-darkbg appearance-none">Custom</option>
+    </select>
+
+    {#if $DataBase.textTheme === "custom"}
+        <div class="flex items-center mt-2">
+            <input type="color" class="style2 text-sm" bind:value={$DataBase.customTextTheme.FontColorStandard} on:change={updateTextTheme}>
+            <span class="ml-2">Normal Text</span>
+        </div>
+        <div class="flex items-center mt-2">
+            <input type="color" class="style2 text-sm" bind:value={$DataBase.customTextTheme.FontColorItalic} on:change={updateTextTheme}>
+            <span class="ml-2">Italic Text</span>
+        </div>
+        <div class="flex items-center mt-2">
+            <input type="color" class="style2 text-sm" bind:value={$DataBase.customTextTheme.FontColorBold} on:change={updateTextTheme}>
+            <span class="ml-2">Bold Text</span>
+        </div>
+        <div class="flex items-center mt-2">
+            <input type="color" class="style2 text-sm" bind:value={$DataBase.customTextTheme.FontColorItalicBold} on:change={updateTextTheme}>
+            <span class="ml-2">Italic Bold Text</span>
+        </div>
+    {/if}
+
+
+    {#if isTauri}
+        <span class="text-neutral-200 mt-4">{language.translator}</span>
+        <select class="bg-transparent input-text mt-2 mb-4 text-gray-200 appearance-none text-sm" bind:value={$DataBase.translator}>
+            <option value="" class="bg-darkbg appearance-none">{language.disabled}</option>
+            <option value="ko" class="bg-darkbg appearance-none">한국어</option>
+        </select>
+    {/if}
+    <span class="text-neutral-200">{language.UISize}</span>
+    <input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected" type="range" min="50" max="200" bind:value={$DataBase.zoomsize}>
+    <span class="text-gray-400 mb-6 text-sm">{($DataBase.zoomsize)}%</span>
+
+    <span class="text-neutral-200">{language.iconSize}</span>
+    <input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected" type="range" min="50" max="200" bind:value={$DataBase.iconsize}>
+    <span class="text-gray-400 mb-6 text-sm">{($DataBase.iconsize)}%</span>
+
+    {#if isTauri}
+        <div class="flex items-center mt-2">
+            <Check bind:check={$DataBase.autoTranslate} />
+            <span>{language.autoTranslation}</span>
+        </div>
+    {/if}
+    <div class="flex items-center mt-2">
+        <Check bind:check={$DataBase.fullScreen} onChange={changeFullscreen}/>
+        <span>{language.fullscreen}</span>
+    </div>
+
+    <div class="flex items-center mt-2">
+        <Check check={$DataBase.customBackground !== ''} onChange={async (check) => {
+            if(check){
+                $DataBase.customBackground = '-'
+                const d = await selectSingleFile(['png', 'webp', 'gif'])
+                if(!d){
+                    $DataBase.customBackground = ''
+                    return
+                }
+                const img = await saveImage(d.data)
+                $DataBase.customBackground = img
+            }
+            else{
+                $DataBase.customBackground = ''
+            }
+        }}></Check>
+        <span>{language.useCustomBackground}</span>
+    </div>
+
+    <div class="flex items-center mt-2">
+        <Check bind:check={$DataBase.playMessage}/>
+        <span>{language.playMessage} <Help key="msgSound"/></span>
+    </div>
+
+    <div class="flex items-center mt-2">
+        <Check bind:check={$DataBase.swipe}/>
+        <span>{language.SwipeRegenerate}</span>
+    </div>
+
+    <div class="flex items-center mt-2">
+        <Check bind:check={$DataBase.instantRemove}/>
+        <span>{language.instantRemove}</span>
+    </div>
+
+{:else if subMenu === 2}
+    <h2 class="mb-2 text-2xl font-bold mt-2">{language.plugin}</h2>
+    <span class="text-draculared text-xs mb-4">{language.pluginWarn}</span>
+
+
+    <div class="border-solid border-borderc p-2 flex flex-col border-1">
+        {#if $DataBase.plugins.length === 0}
+            <span class="text-gray-500">No Plugins</span>
+        {:else}
+            {#each $DataBase.plugins as plugin, i}
+                {#if i !== 0}
+                    <div class="border-borderc mt-2 mb-2 w-full border-solid border-b-1 seperator"></div>
+                {/if}
+                    <div class="flex">
+                        <span class="font-bold flex-grow">{plugin.displayName ?? plugin.name}</span>
+                        <button class="gray-500 hover:gray-200 cursor-pointer" on:click={async () => {
+                            const v = await alertConfirm(language.removeConfirm + (plugin.displayName ?? plugin.name))
+                            if(v){
+                                if($DataBase.currentPluginProvider === plugin.name){
+                                    $DataBase.currentPluginProvider  = ''
+                                }
+                                let plugins = $DataBase.plugins
+                                plugins.splice(i, 1)
+                                $DataBase.plugins = plugins
+                            }
+                        }}>
+                            <TrashIcon />
+                        </button>
+                    </div>
+                    {#if Object.keys(plugin.arguments).length > 0}
+                        <div class="flex flex-col mt-2 bg-dark-900 bg-opacity-50 p-3">
+                            {#each Object.keys(plugin.arguments) as arg}
+                                <span>{arg}</span>
+                                {#if Array.isArray(plugin.arguments[arg])}
+                                    <select class="bg-transparent input-text mt-2 mb-4 text-gray-200 appearance-none" bind:value={$DataBase.plugins[i].realArg[arg]}>
+                                        {#each plugin.arguments[arg] as a}
+                                            <option value={a} class="bg-darkbg appearance-none">a</option>
+                                        {/each}
+                                    </select>
+                                {:else if plugin.arguments[arg] === 'string'}
+                                    <input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected" bind:value={$DataBase.plugins[i].realArg[arg]}>
+                                {:else if plugin.arguments[arg] === 'int'}
+                                    <input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected" type="number" bind:value={$DataBase.plugins[i].realArg[arg]}>
+                                {/if}
+                            {/each}
+                        </div>
+                    {/if}
+            {/each}
+        {/if}
+    </div>
+    <div class="text-gray-500 mt-2 flex">
+        <button on:click={() => {
+            importPlugin()  
+        }} class="hover:text-neutral-200 cursor-pointer">
+            <PlusIcon />
+        </button>
+    </div>
+{:else if subMenu === 1}
+    <h2 class="text-2xl font-bold mt-2">{language.advancedSettings}</h2>
+    <span class="text-draculared text-xs mb-2">{language.advancedSettingsWarn}</span>
+    <span class="text-neutral-200 mt-4 mb-2">{language.loreBookDepth}</span>
+    <input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected text-sm" type="number" min={0} max="20" bind:value={$DataBase.loreBookDepth}>
+    <span class="text-neutral-200">{language.loreBookToken}</span>
+    <input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected text-sm" type="number" min={0} max="4096" bind:value={$DataBase.loreBookToken}>
+
+    <span class="text-neutral-200">{language.additionalPrompt}</span>
+    <input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected text-sm"bind:value={$DataBase.additionalPrompt}>
+
+    <span class="text-neutral-200">{language.descriptionPrefix}</span>
+    <input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected text-sm"bind:value={$DataBase.descriptionPrefix}>
+
+    <span class="text-neutral-200">{language.emotionPrompt}</span>
+    <input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected text-sm"bind:value={$DataBase.emotionPrompt2} placeholder="Leave it blank to use default">
+
+    <span class="text-neutral-200">{language.requestretrys}</span>
+    <input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected text-sm" type="number" min={0} max="20" bind:value={$DataBase.requestRetrys}>
+
+
+    {#if isTauri}
+        <span class="text-neutral-200 mt-2">Request Lib</span>
+        <select class="bg-transparent input-text text-gray-200 appearance-none text-sm" bind:value={$DataBase.requester}>
+            <option value="new" class="bg-darkbg appearance-none">Reqwest</option>
+            <option value="old" class="bg-darkbg appearance-none">Tauri</option>
+        </select>
+    {/if}
+
+    <div class="flex items-center mt-4">
+        <Check bind:check={$DataBase.useSayNothing}/>
+        <span>{language.sayNothing}</span>
+    </div>
+
+    <button
+        on:click={async () => {
+            alertMd(getRequestLog())
+        }}
+        class="drop-shadow-lg p-3 border-borderc border-solid mt-6 flex justify-center items-center ml-2 mr-2 border-1 hover:bg-selected text-sm">
+        {language.ShowLog}
+    </button>
+
+{:else if subMenu === 4}
+    <h2 class="mb-2 text-2xl font-bold mt-2">{language.files}</h2>
+
+    <button
+        on:click={async () => {
+            if(await alertConfirm(language.backupConfirm)){
+                localStorage.setItem('backup', 'save')
+                if(isTauri){
+                    checkDriver('savetauri')
+                }
+                else{
+                    checkDriver('save')
+                }
+            }
+        }}
+        class="drop-shadow-lg p-3 border-borderc border-solid mt-2 flex justify-center items-center ml-2 mr-2 border-1 hover:bg-selected text-sm">
+        {language.savebackup}
+    </button>
+
+    <button
+        on:click={async () => {
+            if((await alertConfirm(language.backupLoadConfirm)) && (await alertConfirm(language.backupLoadConfirm2))){
+                localStorage.setItem('backup', 'load')
+                if(isTauri){
+                    checkDriver('loadtauri')
+                }
+                else{
+                    checkDriver('load')
+                }
+            }
+        }}
+        class="drop-shadow-lg p-3 border-borderc border-solid mt-2 flex justify-center items-center ml-2 mr-2 border-1 hover:bg-selected text-sm">
+        {language.loadbackup}
+    </button>
+
+{/if}
+
+<style>
+    .style2 {
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        appearance: none;
+        background-color: transparent;
+        width: 2rem;
+        height: 2rem;
+        border: none;
+        cursor: pointer;
+    }
+    .style2::-webkit-color-swatch {
+        border-radius: 0.5rem;
+        border: 1px solid #6272a4;
+    }
+    .style2::-moz-color-swatch {
+        border-radius: 0.5rem;
+        border: 1pxs solid #6272a4;
+    }
+</style>

src/lib/SideBars/Sidebar.svelte

@@ -0,0 +1,190 @@
+<script lang="ts">
+    import { CharEmotion, SizeStore, selectedCharID, settingsOpen, sideBarStore } from "../../ts/stores";
+    import { DataBase } from "../../ts/database";
+    import BarIcon from "./BarIcon.svelte";
+    import { Plus, User, X, Settings, Users, Edit3Icon, ArrowUp, ArrowDown, ListIcon, LayoutGridIcon, PlusIcon} from 'lucide-svelte'
+    import { characterFormatUpdate, createNewCharacter, createNewGroup, getCharImage, importCharacter } from "../../ts/characters";
+    import SettingsDom from './Settings.svelte'
+    import CharConfig from "./CharConfig.svelte";
+    import { language } from "../../lang";
+    import Botpreset from "../Others/botpreset.svelte";
+    import { onDestroy } from "svelte";
+    import {isEqual} from 'lodash'
+    let openPresetList =false
+    let sideBarMode = 0
+    let editMode = false
+    let menuMode = 0
+    export let openGrid = () => {}
+
+
+    function createScratch(){
+        reseter();
+        const cid = createNewCharacter()
+        selectedCharID.set(cid)
+    }
+    function createGroup(){
+        reseter();
+        const cid = createNewGroup()
+        selectedCharID.set(cid)
+    }
+    async function createImport(){
+        reseter();
+        const cid = await importCharacter()
+        if(cid){
+            selectedCharID.set(cid)
+        }
+    }
+
+    function changeChar(index:number){
+        reseter();
+        characterFormatUpdate(index)
+        selectedCharID.set(index)
+    }
+
+    function reseter(){
+        menuMode = 0;
+        sideBarMode = 0;
+        editMode = false
+        settingsOpen.set(false)
+        CharEmotion.set({})
+    }
+
+    let charImages:string[] = []
+
+    const unsub = DataBase.subscribe((db) => {
+        let newCharImages:string[] = []
+        for(const cha of db.characters){
+            newCharImages.push(cha.image ?? '')
+        }
+        if(!isEqual(charImages, newCharImages)){
+            charImages = newCharImages
+        }
+    })
+
+
+    onDestroy(unsub)
+
+</script>
+<div class="w-20 flex flex-col bg-bgcolor text-white items-center overflow-y-scroll h-full shadow-lg min-w-20 overflow-x-hidden"
+    class:editMode={editMode}>
+    <button class="bg-gray-500 w-14 min-w-14 flex justify-center h-8 items-center rounded-b-md cursor-pointer hover:bg-green-500 transition-colors absolute top-0" on:click={() => {
+        menuMode = 1 - menuMode
+    }}><ListIcon/></button>
+    <div class="w-14 min-w-14 h-8 min-h-8 bg-transparent"></div>
+    {#if menuMode === 0}
+    {#each charImages as charimg, i}
+        <div class="flex items-center">
+            {#if charimg !== ''}
+                <BarIcon onClick={() => {changeChar(i)}} additionalStyle={getCharImage($DataBase.characters[i].image, 'css')}>
+                </BarIcon>
+            {:else}
+                <BarIcon onClick={() => {changeChar(i)}} additionalStyle={i === $selectedCharID ? 'background:#44475a' : ''}>
+
+                </BarIcon>
+            {/if}
+            {#if editMode}
+                <div class="flex flex-col mt-2">
+                    <button on:click={() => {
+                        let chars = $DataBase.characters
+                        if(chars[i-1]){
+                            const currentchar = chars[i]
+                            chars[i] = chars[i-1]
+                            chars[i-1] = currentchar
+                            $DataBase.characters = chars
+                        }
+                    }}>
+                        <ArrowUp size={20}/>
+                    </button>
+                    <button on:click={() => {
+                        let chars = $DataBase.characters
+                        if(chars[i+1]){
+                            const currentchar = chars[i]
+                            chars[i] = chars[i+1]
+                            chars[i+1] = currentchar
+                            $DataBase.characters = chars
+                        }
+                    }}>
+                        <ArrowDown size={22}/>
+                    </button>
+                </div>
+            {/if}
+        </div>
+    {/each}
+    <BarIcon onClick={() => {
+        if(sideBarMode === 1){
+            reseter();
+            sideBarMode = 0
+        }
+        else{
+            reseter();
+            sideBarMode = 1
+        }
+    }}><PlusIcon/></BarIcon>
+    {:else}
+        <BarIcon onClick={() => {
+            if($settingsOpen){
+                reseter();
+                settingsOpen.set(false)
+            }
+            else{
+                reseter();
+                settingsOpen.set(true)
+            }
+        }}><Settings/></BarIcon>
+        <BarIcon onClick={() => {
+            reseter();
+            openGrid()
+        }}><LayoutGridIcon/></BarIcon>
+    {/if}
+</div>
+<div class="w-96 p-6 flex flex-col bg-darkbg text-gray-200 overflow-y-auto overflow-x-hidden setting-area" class:flex-grow={($SizeStore.w <= 1000)} class:minw96={($SizeStore.w > 1000)}>
+    <button class="flex w-full justify-end text-gray-200" on:click={() => {sideBarStore.set(false)}}>
+        <button class="p-0 bg-transparent border-none text-gray-200"><X/></button>
+    </button>
+    {#if sideBarMode === 0}
+        {#if $selectedCharID < 0 || $settingsOpen}
+            <SettingsDom bind:openPresetList/>
+        {:else}
+            <CharConfig />
+        {/if}
+    {:else if sideBarMode === 1}
+        <h2 class="title font-bold text-xl mt-2">Create</h2>
+        <button
+            on:click={createScratch}
+            class="drop-shadow-lg p-5 border-borderc border-solid mt-2 flex justify-center items-center ml-2 mr-2 border-1 hover:bg-selected text-lg">
+            {language.createfromScratch}
+        </button>
+        <button
+            on:click={createImport}
+            class="drop-shadow-lg p-5 border-borderc border-solid mt-2 flex justify-center items-center ml-2 mr-2 border-1 hover:bg-selected text-lg">
+            {language.importCharacter}
+        </button>
+        <button
+            on:click={createGroup}
+            class="drop-shadow-lg p-3 border-borderc border-solid mt-2 flex justify-center items-center ml-2 mr-2 border-1 hover:bg-selected">
+            {language.createGroup}
+        </button>
+        <h2 class="title font-bold text-xl mt-4">Edit</h2>
+        <button
+            on:click={() => {editMode = !editMode;$selectedCharID = -1}}
+            class="drop-shadow-lg p-3 border-borderc border-solid mt-2 flex justify-center items-center ml-2 mr-2 border-1 hover:bg-selected">
+            {language.editOrder}
+        </button>
+    {/if}
+</div>
+
+<style>
+    .minw96 {
+        min-width: 24rem; /* 384px */
+    }
+    .title{
+        margin-bottom: 0.5rem;
+    }
+    .editMode{
+        min-width: 6rem;
+    }
+</style>
+
+{#if openPresetList}
+    <Botpreset close={() => {openPresetList = false}}/>
+{/if}