[feat] add persona
This commit is contained in:
kwaroran
95
src/lib/Setting/Pages/PersonaSettings.svelte
Normal file
95
src/lib/Setting/Pages/PersonaSettings.svelte
Normal file
@@ -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>
|
||||
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user