From f6c5c8be9ecb59d1f2bd02ac3e3ac5cd425eb76f Mon Sep 17 00:00:00 2001
From: kwaroran <kwaworan@gmail.com>
Date: Sun, 16 Jul 2023 02:52:00 +0900
Subject: [PATCH] [feat] add persona

---
 package.json                                 |   2 +-
 pnpm-lock.yaml                               |  10 +-
 src/lang/en.ts                               |   6 +-
 src/lib/Setting/Pages/PersonaSettings.svelte |  95 ++++++++++++++
 src/lib/Setting/Pages/UserSettings.svelte    | 124 +++++++++++--------
 src/lib/Setting/Settings.svelte              |  27 ++--
 src/ts/characters.ts                         |  29 +++++
 src/ts/storage/database.ts                   |  14 ++-
 src/ts/storage/globalApi.ts                  |   4 +
 9 files changed, 238 insertions(+), 73 deletions(-)
 create mode 100644 src/lib/Setting/Pages/PersonaSettings.svelte

diff --git a/package.json b/package.json
index 463e9bbb..cd0a0051 100644
--- a/package.json
+++ b/package.json
@@ -32,7 +32,7 @@
     "isomorphic-dompurify": "^1.2.0",
     "localforage": "^1.10.0",
     "lodash": "^4.17.21",
-    "lucide-svelte": "^0.130.0",
+    "lucide-svelte": "^0.260.0",
     "ml-distance": "^4.0.1",
     "mobile-drag-drop": "3.0.0-rc.0",
     "msgpackr": "^1.9.5",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index bba32d60..21c766e1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -60,8 +60,8 @@ dependencies:
     specifier: ^4.17.21
     version: 4.17.21
   lucide-svelte:
-    specifier: ^0.130.0
-    version: 0.130.0(svelte@3.58.0)
+    specifier: ^0.260.0
+    version: 0.260.0(svelte@3.58.0)
   ml-distance:
     specifier: ^4.0.1
     version: 4.0.1
@@ -1900,10 +1900,10 @@ packages:
     resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
     dev: false
 
-  /lucide-svelte@0.130.0(svelte@3.58.0):
-    resolution: {integrity: sha512-KDxJsWucA8p6XnNR5JDLvy3opMyQHWBZd+0mUO+1NI573UHmt7GDETWBynmbAjqavLH/SLT2r6P587aM4IAmPw==}
+  /lucide-svelte@0.260.0(svelte@3.58.0):
+    resolution: {integrity: sha512-fvR/42lZdIaW9RCVIouIMO9LgxwBcE4M770Hpl1ITL2At5YamgQ8J/652mTBXnX7qfiTCND/mSVnnXGESypaEw==}
     peerDependencies:
-      svelte: ^3.49.0
+      svelte: '>=3 <5'
     dependencies:
       svelte: 3.58.0
     dev: false
diff --git a/src/lang/en.ts b/src/lang/en.ts
index 07fdeb39..486ec30c 100644
--- a/src/lang/en.ts
+++ b/src/lang/en.ts
@@ -334,5 +334,9 @@ export const languageEnglish = {
     officialDiscordDesc: "Official Discord to talk about RisuAI",
     confirmRecommendedPreset: "There is a recommended settings for this model. do you want to change the settings to that? (you can turn off asking in the accessiblity settings)",
     toggleConfirmRecommendedPreset: "Ask for recommended setting when model change",
-    recommendedPreset: "Set to Recommended Settings"
+    recommendedPreset: "Set to Recommended Settings",
+    persona: "Persona",
+    icon:"Icon",
+    account: "Account",
+    remove: "Remove"
 }
\ No newline at end of file
diff --git a/src/lib/Setting/Pages/PersonaSettings.svelte b/src/lib/Setting/Pages/PersonaSettings.svelte
new file mode 100644
index 00000000..b02fc9a9
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/lib/Setting/Pages/UserSettings.svelte b/src/lib/Setting/Pages/UserSettings.svelte
index f4e6ca18..1ebc77ef 100644
--- a/src/lib/Setting/Pages/UserSettings.svelte
+++ b/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">
diff --git a/src/lib/Setting/Settings.svelte b/src/lib/Setting/Settings.svelte
index 29874677..e0d9330a 100644
--- 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, 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={() => {
diff --git a/src/ts/characters.ts b/src/ts/characters.ts
index ec2424d9..67cfd0e3 100644
--- a/src/ts/characters.ts
+++ b/src/ts/characters.ts
@@ -87,9 +87,38 @@ export async function selectUserImg() {
     let db = get(DataBase)
     const imgp = await saveImage(img)
     db.userIcon = imgp
+    db.personas[db.selectedPersona] = {
+        name: db.username,
+        icon: db.userIcon,
+        personaPrompt: db.personaPrompt
+    }
     setDatabase(db)
 }
 
+export function saveUserPersona() {
+    let db = get(DataBase)
+    db.personas[db.selectedPersona] = {
+        name: db.username,
+        icon: db.userIcon,
+        personaPrompt: db.personaPrompt
+    }
+    setDatabase(db)
+}
+
+export function changeUserPersona(id:number, save:'save'|'noSave' = 'save') {
+    if(save === 'save'){
+        saveUserPersona()
+    }
+    let db = get(DataBase)
+    const pr = db.personas[id]
+    db.personaPrompt = pr.personaPrompt
+    db.username = pr.name,
+    db.userIcon = pr.icon
+    db.selectedPersona = id
+    setDatabase(db)
+    
+}
+
 export const addingEmotion = writable(false)
 
 export async function addCharEmotion(charId:number) {
diff --git a/src/ts/storage/database.ts b/src/ts/storage/database.ts
index 669edfe5..ea147501 100644
--- a/src/ts/storage/database.ts
+++ b/src/ts/storage/database.ts
@@ -265,6 +265,12 @@ export function setDatabase(data:Database){
     if(checkNullish(data.imageCompression)){
         data.imageCompression = true
     }
+    data.selectedPersona ??= 0
+    data.personas ??= [{
+        name: data.username,
+        personaPrompt: "",
+        icon: data.userIcon
+    }]
     data.classicMaxWidth ??= false
     data.ooba ??= cloneDeep(defaultOoba)
     data.ainconfig ??= cloneDeep(defaultAIN)
@@ -546,9 +552,15 @@ export interface Database{
     proxyRequestModel:string
     ooba:OobaSettings
     ainconfig: AINsettings
-
+    personaPrompt:string
     openrouterRequestModel:string
     openrouterKey:string
+    selectedPersona:number
+    personas:{
+        personaPrompt:string
+        name:string
+        icon:string
+    }[]
 }
 
 interface hordeConfig{
diff --git a/src/ts/storage/globalApi.ts b/src/ts/storage/globalApi.ts
index e96167eb..0514d200 100644
--- a/src/ts/storage/globalApi.ts
+++ b/src/ts/storage/globalApi.ts
@@ -728,6 +728,10 @@ export function getUnpargeables(db:Database, uptype:'basename'|'pure' = 'basenam
             }
         }
     }
+
+    db.personas.map((v) => {
+        addUnparge(v.icon)
+    })
     return unpargeable
 }