[feat] add persona

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",

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

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"
 }

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,23 +36,40 @@
     }
 }}></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">
+
+<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 () => {
@@ -89,7 +107,7 @@
             Login
         </button>
     {/if}
-    </div>
+</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={() => {

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) {

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{

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
 }