[feat] add persona

src/lib/Setting/Pages/PersonaSettings.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+    import { language } from "src/lang";
+  import BaseRoundedButton from "src/lib/UI/BaseRoundedButton.svelte";
+  import { alertConfirm, alertError } from "src/ts/alert";
+    import { changeUserPersona, getCharImage, selectUserImg } from "src/ts/characters";
+    import { DataBase, setDatabase } from "src/ts/storage/database";
+  import { get } from "svelte/store";
+
+</script>
+<h2 class="mb-2 text-2xl font-bold mt-2">{language.persona}</h2>
+
+<div class="p-4 rounded-md bg-darkbg flex-wrap flex gap-2">
+    {#each $DataBase.personas as persona, i}
+        <button on:click={() => {
+            changeUserPersona(i)
+        }}>
+            {#if persona.icon === ''}
+                <div class="rounded-md h-20 w-20 shadow-lg bg-gray-500 cursor-pointer hover:text-green-500" class:ring={i === $DataBase.selectedPersona} />
+            {:else}
+                {#await getCharImage(persona.icon, 'css')}
+                    <div class="rounded-md h-20 w-20 shadow-lg bg-gray-500 cursor-pointer hover:text-green-500" class:ring={i === $DataBase.selectedPersona}/>
+                {:then im} 
+                    <div class="rounded-md h-20 w-20 shadow-lg bg-gray-500 cursor-pointer hover:text-green-500" style={im} class:ring={i === $DataBase.selectedPersona} />                
+                {/await}
+            {/if}
+        </button>
+    {/each}
+    <div class="flex justify-center items-center ml-2 mr-2">
+        <BaseRoundedButton
+            onClick={() => {
+                let db = get(DataBase)
+                db.personas.push({
+                    name: 'New Persona',
+                    icon: '',
+                    personaPrompt: ''
+                })
+                setDatabase(db)
+                changeUserPersona(db.personas.length - 1)
+            }}
+            ><svg viewBox="0 0 24 24" width="1.2em" height="1.2em"
+                ><path
+                fill="none"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M12 6v6m0 0v6m0-6h6m-6 0H6"
+                /></svg
+            >
+        </BaseRoundedButton>
+    </div>
+</div>
+
+
+<div class="mt-4 mb-4 border-y-1 border-y-selected">
+</div>
+
+<div class="flex w-full items-starts rounded-md bg-darkbg p-4">
+    <div class="flex flex-col mt-4">
+        <button on:click={() => {selectUserImg()}}>
+            {#if $DataBase.userIcon === ''}
+                <div class="rounded-md h-28 w-28 shadow-lg bg-gray-500 cursor-pointer hover:text-green-500" />
+            {:else}
+                {#await getCharImage($DataBase.userIcon, 'css')}
+                    <div class="rounded-md h-28 w-28 shadow-lg bg-gray-500 cursor-pointer hover:text-green-500" />
+                {:then im} 
+                    <div class="rounded-md h-28 w-28 shadow-lg bg-gray-500 cursor-pointer hover:text-green-500" style={im} />                
+                {/await}
+            {/if}
+        </button>
+    </div>
+    <div class="flex flex-grow flex-col p-2 ml-4">
+        <span class="text-sm text-gray-500">{language.name}</span>
+        <input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected text-lg" placeholder="User" bind:value={$DataBase.username}>
+        <span class="text-sm text-gray-500">{language.description}</span>
+        <textarea class="bg-transparent input-text mt-2 mb-2 text-gray-200 resize-none h-32 min-h-20 focus:bg-selected text-xs w-full" autocomplete="off" bind:value={$DataBase.personaPrompt} placeholder={`Put the description of this persona here.\nExample: [<user> is a 20 year old girl.]`}></textarea>
+        <div>
+            <button class="float-right rounded-md border border-red-700 p-2 hover:bg-red-700 transition-colors mt-4 text-sm" on:click={async () => {
+                if($DataBase.personas.length === 1){
+                    return
+                }
+                const d = await alertConfirm(`${language.removeConfirm}${$DataBase.personas[$DataBase.selectedPersona].name}`)
+                if(d){
+                    changeUserPersona(0)
+                    let personas = $DataBase.personas
+                    personas.splice($DataBase.selectedPersona, 1)
+                    $DataBase.personas = personas
+                    changeUserPersona(0, 'noSave')
+                }
+            }}>
+                {language.remove}
+            </button>
+        </div>
+    </div>
+</div>

src/lib/Setting/Pages/UserSettings.svelte

@@ -5,9 +5,10 @@
     import { loadRisuAccountData, saveRisuAccountData } from "src/ts/drive/accounter";
     import { DataBase } from "src/ts/storage/database";
     import Check from "src/lib/Others/Check.svelte";
-  import { alertSelect } from "src/ts/alert";
-  import { forageStorage, isTauri } from "src/ts/storage/globalApi";
+  import { alertConfirm, alertSelect } from "src/ts/alert";
+  import { forageStorage, isNodeServer, isTauri } from "src/ts/storage/globalApi";
   import { unMigrationAccount } from "src/ts/storage/accountStorage";
+  import { checkDriver } from "src/ts/drive/drive";
     let openIframe = false
     let openIframeURL = ''
     let popup:Window = null
@@ -35,61 +36,78 @@
     }
 }}></svelte:window>
 
-<h2 class="mb-2 text-2xl font-bold mt-2">{language.user}</h2>
+<h2 class="mb-2 text-2xl font-bold mt-2">{language.account} & {language.files}</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
+    on:click={async () => {
+        if(await alertConfirm(language.backupConfirm)){
+            localStorage.setItem('backup', 'save')
+            if(isTauri || isNodeServer){
+                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>
-<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}>
-    <div class="bg-darkbg p-3 rounded-md mb-2 flex flex-col items-start">
-        <div class="w-full">
-            <h1 class="text-3xl font-black min-w-0">Risu Account{#if $DataBase.account}
-                <button class="bg-selected p-1 text-sm font-light rounded-md hover:bg-green-500 transition-colors float-right" on:click={async () => {
-                    if($DataBase.account.useSync || forageStorage.isAccount){
-                        unMigrationAccount()
-                    }
-                    
-                    $DataBase.account = undefined
-                }}>{language.logout}</button>
-            {/if}</h1>
-        </div>
-        {#if $DataBase.account}
-            <span class="mb-4 text-gray-400">ID: {$DataBase.account.id}</span>
-            {#if !isTauri}
-                <div class="flex items-center mt-2">
-                    {#if $DataBase.account.useSync || forageStorage.isAccount}
-                        <span>{language.dataSavingInAccount}</span>
-                    {:else}
-                        <Check check={false} name={language.SaveDataInAccount} onChange={(v) => {
-                            if(v){
-                                localStorage.setItem('dosync', 'sync')
-                                location.reload()
-                            }
-                        }}/>
-                    {/if}
-                </div>
-            {/if}
 
-        {:else}
-            <span>{language.notLoggedIn}</span>
-            <button class="bg-selected p-2 rounded-md mt-2 hover:bg-green-500 transition-colors" on:click={() => {
-                openIframeURL = hubURL + '/hub/login'
-                openIframe = true
-            }}>
-                Login
-            </button>
-        {/if}
+<button
+    on:click={async () => {
+        if((await alertConfirm(language.backupLoadConfirm)) && (await alertConfirm(language.backupLoadConfirm2))){
+            localStorage.setItem('backup', 'load')
+            if(isTauri || isNodeServer){
+                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 mb-4">
+    {language.loadbackup}
+</button>
+<div class="bg-darkbg p-3 rounded-md mb-2 flex flex-col items-start">
+    <div class="w-full">
+        <h1 class="text-3xl font-black min-w-0">Risu Account{#if $DataBase.account}
+            <button class="bg-selected p-1 text-sm font-light rounded-md hover:bg-green-500 transition-colors float-right" on:click={async () => {
+                if($DataBase.account.useSync || forageStorage.isAccount){
+                    unMigrationAccount()
+                }
+                
+                $DataBase.account = undefined
+            }}>{language.logout}</button>
+        {/if}</h1>
     </div>
+    {#if $DataBase.account}
+        <span class="mb-4 text-gray-400">ID: {$DataBase.account.id}</span>
+        {#if !isTauri}
+            <div class="flex items-center mt-2">
+                {#if $DataBase.account.useSync || forageStorage.isAccount}
+                    <span>{language.dataSavingInAccount}</span>
+                {:else}
+                    <Check check={false} name={language.SaveDataInAccount} onChange={(v) => {
+                        if(v){
+                            localStorage.setItem('dosync', 'sync')
+                            location.reload()
+                        }
+                    }}/>
+                {/if}
+            </div>
+        {/if}
+
+    {:else}
+        <span>{language.notLoggedIn}</span>
+        <button class="bg-selected p-2 rounded-md mt-2 hover:bg-green-500 transition-colors" on:click={() => {
+            openIframeURL = hubURL + '/hub/login'
+            openIframe = true
+        }}>
+            Login
+        </button>
+    {/if}
+</div>
 {#if openIframe}
     <div class="fixed top-0 left-0 bg-black bg-opacity-50 w-full h-full flex justify-center items-center">
         <iframe src={openIframeURL} title="login" class="w-full h-full">

src/lib/Setting/Settings.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { AccessibilityIcon, ActivityIcon, AlignLeft, BookIcon, BotIcon, BoxIcon, CodeIcon, DiamondIcon, FolderIcon, LanguagesIcon, MonitorIcon, Sailboat, UserIcon, XCircleIcon } from "lucide-svelte";
+    import { AccessibilityIcon, ActivityIcon, AlignLeft, BookIcon, BotIcon, BoxIcon, CodeIcon, ContactIcon, DiamondIcon, FolderIcon, LanguagesIcon, MonitorIcon, Sailboat, UserIcon, XCircleIcon } from "lucide-svelte";
     import { language } from "src/lang";
     import DisplaySettings from "./Pages/DisplaySettings.svelte";
     import UserSettings from "./Pages/UserSettings.svelte";
@@ -16,11 +16,12 @@
     import GlobalRegex from "./Pages/GlobalRegex.svelte";
     import LanguageSettings from "./Pages/LanguageSettings.svelte";
     import AccessibilitySettings from "./Pages/AccessibilitySettings.svelte";
+    import PersonaSettings from "./Pages/PersonaSettings.svelte";
     let selected = -1
     let openPresetList = false
     let openLoreList = false
     if(window.innerWidth >= 700){
-        selected = 0
+        selected = 1
     }
 
 </script>
@@ -29,18 +30,18 @@
         {#if window.innerWidth >= 700 || selected === -1}
             <div class="flex h-full flex-col p-4 pt-8 bg-darkbg gap-2 overflow-y-auto relative"
                 class:w-full={window.innerWidth < 700}>
-                <button class="text-gray-400 flex gap-2 items-center hover:text-gray-200" class:text-white={selected === 0} on:click={() => {
-                    selected = 0
-                }}>
-                    <UserIcon />
-                    <span>{language.user}</span>
-                </button>
                 <button class="text-gray-400 flex gap-2 items-center hover:text-gray-200" class:text-white={selected === 1} on:click={() => {
                     selected = 1
                 }}>
                     <BotIcon />
                     <span>{language.chatBot}</span>
                 </button>
+                <button class="text-gray-400 flex gap-2 items-center hover:text-gray-200" class:text-white={selected === 12} on:click={() => {
+                    selected = 12
+                }}>
+                    <ContactIcon />
+                    <span>{language.persona}</span>
+                </button>
                 <button class="text-gray-400 flex gap-2 items-center hover:text-gray-200" class:text-white={selected === 2} on:click={() => {
                     selected = 2
                 }}>
@@ -83,11 +84,11 @@
                     <CodeIcon />
                     <span>{language.plugin}</span>
                 </button>
-                <button class="text-gray-400 flex gap-2 items-center hover:text-gray-200" class:text-white={selected === 5} on:click={() => {
-                    selected = 5
+                <button class="text-gray-400 flex gap-2 items-center hover:text-gray-200" class:text-white={selected === 0} on:click={() => {
+                    selected = 0
                 }}>
-                    <FolderIcon />
-                    <span>{language.files}</span>
+                    <UserIcon />
+                    <span>{language.account} & {language.files}</span>
                 </button>
                 <button class="text-gray-400 flex gap-2 items-center hover:text-gray-200" class:text-white={selected === 6} on:click={() => {
                     selected = 6
@@ -134,6 +135,8 @@
                     <LanguageSettings/>
                 {:else if selected === 11}
                     <AccessibilitySettings/>
+                {:else if selected === 12}
+                    <PersonaSettings/>
                 {/if}
             </div>
             <button class="absolute top-2 right-2 hover:text-green-500 text-white" on:click={() => {