Migrate to svelte 5
This commit is contained in:
kwaroran
@@ -4,7 +4,7 @@
|
||||
import { AccountWarning } from "src/ts/storage/accountStorage";
|
||||
|
||||
</script>
|
||||
<button class="absolute top-2 right-2 z-10 text-white bg-red-800 hover:bg-red-600 p-2 rounded" on:click={() =>{
|
||||
<button class="absolute top-2 right-2 z-10 text-white bg-red-800 hover:bg-red-600 p-2 rounded" onclick={() =>{
|
||||
alertMd($AccountWarning)
|
||||
$AccountWarning = ''
|
||||
}}>
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { run, preventDefault, stopPropagation } from 'svelte/legacy';
|
||||
|
||||
import { alertStore, alertGenerationInfoStore } from "../../ts/alert";
|
||||
import { DataBase } from '../../ts/storage/database';
|
||||
import { getCharImage } from '../../ts/characters';
|
||||
@@ -14,19 +16,19 @@
|
||||
import OptionInput from "../UI/GUI/OptionInput.svelte";
|
||||
import { language } from 'src/lang';
|
||||
import { getFetchData } from 'src/ts/storage/globalApi';
|
||||
import { CurrentChat, CurrentCharacter } from "src/ts/stores";
|
||||
import { selectedCharID } from "src/ts/stores";
|
||||
import { tokenize } from "src/ts/tokenizer";
|
||||
import TextAreaInput from "../UI/GUI/TextAreaInput.svelte";
|
||||
import ModuleChatMenu from "../Setting/Pages/Module/ModuleChatMenu.svelte";
|
||||
import { ColorSchemeTypeStore } from "src/ts/gui/colorscheme";
|
||||
import Help from "./Help.svelte";
|
||||
import { ColorSchemeTypeStore } from "src/ts/gui/colorscheme";
|
||||
import Help from "./Help.svelte";
|
||||
let btn
|
||||
let input = ''
|
||||
let cardExportType = 'realm'
|
||||
let cardExportType2 = ''
|
||||
let cardLicense = ''
|
||||
let generationInfoMenuIndex = 0
|
||||
$: {
|
||||
let input = $state('')
|
||||
let cardExportType = $state('realm')
|
||||
let cardExportType2 = $state('')
|
||||
let cardLicense = $state('')
|
||||
let generationInfoMenuIndex = $state(0)
|
||||
run(() => {
|
||||
if(btn){
|
||||
btn.focus()
|
||||
}
|
||||
@@ -38,7 +40,7 @@
|
||||
cardExportType2 = ''
|
||||
cardLicense = ''
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const beautifyJSON = (data:string) =>{
|
||||
try {
|
||||
@@ -47,9 +49,17 @@
|
||||
return data
|
||||
}
|
||||
}
|
||||
|
||||
interface Props{
|
||||
onclick?: (e:MouseEvent) => void
|
||||
}
|
||||
|
||||
let {
|
||||
onclick
|
||||
}:Props = $props()
|
||||
</script>
|
||||
|
||||
<svelte:window on:message={async (e) => {
|
||||
<svelte:window onmessage={async (e) => {
|
||||
if(e.origin.startsWith("https://sv.risuai.xyz") || e.origin.startsWith("http://127.0.0.1")){
|
||||
if(e.data.msg.data.vaild && $alertStore.type === 'login'){
|
||||
$alertStore = {
|
||||
@@ -79,9 +89,9 @@
|
||||
{/await}
|
||||
</span>
|
||||
{:else if $alertStore.type === 'tos'}
|
||||
<!-- svelte-ignore a11y-missing-attribute -->
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<div class="text-textcolor">You should accept <a class="text-green-600 hover:text-green-500 transition-colors duration-200 cursor-pointer" on:click={() => {
|
||||
<!-- svelte-ignore a11y_missing_attribute -->
|
||||
<!-- svelte-ignore a11y_click_events_have_key_events -->
|
||||
<div class="text-textcolor">You should accept <a class="text-green-600 hover:text-green-500 transition-colors duration-200 cursor-pointer" onclick={() => {
|
||||
openURL('https://sv.risuai.xyz/hub/tos')
|
||||
}}>Terms of Service</a> to continue</div>
|
||||
{:else if $alertStore.type !== 'select' && $alertStore.type !== 'requestdata' && $alertStore.type !== 'addchar' && $alertStore.type !== 'hypaV2' && $alertStore.type !== 'chatOptions'}
|
||||
@@ -92,13 +102,13 @@
|
||||
{/if}
|
||||
{#if $alertStore.type === 'ask'}
|
||||
<div class="flex gap-2 w-full">
|
||||
<Button className="mt-4 flex-grow" on:click={() => {
|
||||
<Button className="mt-4 flex-grow" onclick={() => {
|
||||
alertStore.set({
|
||||
type: 'none',
|
||||
msg: 'yes'
|
||||
})
|
||||
}}>YES</Button>
|
||||
<Button className="mt-4 flex-grow" on:click={() => {
|
||||
<Button className="mt-4 flex-grow" onclick={() => {
|
||||
alertStore.set({
|
||||
type: 'none',
|
||||
msg: 'no'
|
||||
@@ -107,13 +117,13 @@
|
||||
</div>
|
||||
{:else if $alertStore.type === 'tos'}
|
||||
<div class="flex gap-2 w-full">
|
||||
<Button className="mt-4 flex-grow" on:click={() => {
|
||||
<Button className="mt-4 flex-grow" onclick={() => {
|
||||
alertStore.set({
|
||||
type: 'none',
|
||||
msg: 'yes'
|
||||
})
|
||||
}}>Accept</Button>
|
||||
<Button styled={'outlined'} className="mt-4 flex-grow" on:click={() => {
|
||||
<Button styled={'outlined'} className="mt-4 flex-grow" onclick={() => {
|
||||
alertStore.set({
|
||||
type: 'none',
|
||||
msg: 'no'
|
||||
@@ -122,7 +132,7 @@
|
||||
</div>
|
||||
{:else if $alertStore.type === 'select'}
|
||||
{#each $alertStore.msg.split('||') as n, i}
|
||||
<Button className="mt-4" on:click={() => {
|
||||
<Button className="mt-4" onclick={() => {
|
||||
alertStore.set({
|
||||
type: 'none',
|
||||
msg: i.toString()
|
||||
@@ -130,7 +140,7 @@
|
||||
}}>{n}</Button>
|
||||
{/each}
|
||||
{:else if $alertStore.type === 'error' || $alertStore.type === 'normal' || $alertStore.type === 'markdown'}
|
||||
<Button className="mt-4" on:click={() => {
|
||||
<Button className="mt-4" onclick={() => {
|
||||
alertStore.set({
|
||||
type: 'none',
|
||||
msg: ''
|
||||
@@ -138,7 +148,7 @@
|
||||
}}>OK</Button>
|
||||
{:else if $alertStore.type === 'input'}
|
||||
<TextInput value="" id="alert-input" autocomplete="off" marginTop />
|
||||
<Button className="mt-4" on:click={() => {
|
||||
<Button className="mt-4" onclick={() => {
|
||||
alertStore.set({
|
||||
type: 'none',
|
||||
//@ts-ignore
|
||||
@@ -182,16 +192,16 @@
|
||||
</div>
|
||||
{:else if $alertStore.type === 'requestdata'}
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<Button selected={generationInfoMenuIndex === 0} size="sm" on:click={() => {generationInfoMenuIndex = 0}}>
|
||||
<Button selected={generationInfoMenuIndex === 0} size="sm" onclick={() => {generationInfoMenuIndex = 0}}>
|
||||
{language.tokens}
|
||||
</Button>
|
||||
<Button selected={generationInfoMenuIndex === 1} size="sm" on:click={() => {generationInfoMenuIndex = 1}}>
|
||||
<Button selected={generationInfoMenuIndex === 1} size="sm" onclick={() => {generationInfoMenuIndex = 1}}>
|
||||
{language.metaData}
|
||||
</Button>
|
||||
<Button selected={generationInfoMenuIndex === 2} size="sm" on:click={() => {generationInfoMenuIndex = 2}}>
|
||||
<Button selected={generationInfoMenuIndex === 2} size="sm" onclick={() => {generationInfoMenuIndex = 2}}>
|
||||
{language.log}
|
||||
</Button>
|
||||
<button class="ml-auto" on:click={() => {
|
||||
<button class="ml-auto" onclick={() => {
|
||||
alertStore.set({
|
||||
type: 'none',
|
||||
msg: ''
|
||||
@@ -229,17 +239,17 @@
|
||||
<span class="text-amber-500">Model</span>
|
||||
<span class="text-amber-500 justify-self-end">{$alertGenerationInfoStore.genInfo.model}</span>
|
||||
<span class="text-green-500">ID</span>
|
||||
<span class="text-green-500 justify-self-end">{$CurrentChat.message[$alertGenerationInfoStore.idx].chatId ?? "None"}</span>
|
||||
<span class="text-green-500 justify-self-end">{$DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message[$alertGenerationInfoStore.idx].chatId ?? "None"}</span>
|
||||
<span class="text-red-500">GenID</span>
|
||||
<span class="text-red-500 justify-self-end">{$alertGenerationInfoStore.genInfo.generationId}</span>
|
||||
<span class="text-cyan-500">Saying</span>
|
||||
<span class="text-cyan-500 justify-self-end">{$CurrentChat.message[$alertGenerationInfoStore.idx].saying}</span>
|
||||
<span class="text-cyan-500 justify-self-end">{$DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message[$alertGenerationInfoStore.idx].saying}</span>
|
||||
<span class="text-purple-500">Size</span>
|
||||
<span class="text-purple-500 justify-self-end">{JSON.stringify($CurrentChat.message[$alertGenerationInfoStore.idx]).length} Bytes</span>
|
||||
<span class="text-purple-500 justify-self-end">{JSON.stringify($DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message[$alertGenerationInfoStore.idx]).length} Bytes</span>
|
||||
<span class="text-yellow-500">Time</span>
|
||||
<span class="text-yellow-500 justify-self-end">{(new Date($CurrentChat.message[$alertGenerationInfoStore.idx].time ?? 0)).toLocaleString()}</span>
|
||||
<span class="text-yellow-500 justify-self-end">{(new Date($DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message[$alertGenerationInfoStore.idx].time ?? 0)).toLocaleString()}</span>
|
||||
<span class="text-green-500">Tokens</span>
|
||||
{#await tokenize($CurrentChat.message[$alertGenerationInfoStore.idx].data)}
|
||||
{#await tokenize($DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message[$alertGenerationInfoStore.idx].data)}
|
||||
<span class="text-green-500 justify-self-end">Loading</span>
|
||||
{:then tokens}
|
||||
<span class="text-green-500 justify-self-end">{tokens}</span>
|
||||
@@ -263,13 +273,13 @@
|
||||
{/if}
|
||||
{:else if $alertStore.type === 'hypaV2'}
|
||||
<div class="flex flex-wrap gap-2 mb-4 max-w-full w-124">
|
||||
<Button selected={generationInfoMenuIndex === 0} size="sm" on:click={() => {generationInfoMenuIndex = 0}}>
|
||||
<Button selected={generationInfoMenuIndex === 0} size="sm" onclick={() => {generationInfoMenuIndex = 0}}>
|
||||
Chunks
|
||||
</Button>
|
||||
<Button selected={generationInfoMenuIndex === 1} size="sm" on:click={() => {generationInfoMenuIndex = 1}}>
|
||||
<Button selected={generationInfoMenuIndex === 1} size="sm" onclick={() => {generationInfoMenuIndex = 1}}>
|
||||
Summarized
|
||||
</Button>
|
||||
<button class="ml-auto" on:click={() => {
|
||||
<button class="ml-auto" onclick={() => {
|
||||
alertStore.set({
|
||||
type: 'none',
|
||||
msg: ''
|
||||
@@ -278,20 +288,20 @@
|
||||
</div>
|
||||
{#if generationInfoMenuIndex === 0}
|
||||
<div class="flex flex-col gap-2 w-full">
|
||||
{#each $CurrentChat.hypaV2Data.chunks as chunk}
|
||||
{#each $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].hypaV2Data.chunks as chunk}
|
||||
<TextAreaInput bind:value={chunk.text} />
|
||||
{/each}
|
||||
|
||||
<Button on:click={() => {
|
||||
$CurrentChat.hypaV2Data.chunks.push({
|
||||
<Button onclick={() => {
|
||||
$DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].hypaV2Data.chunks.push({
|
||||
text: '',
|
||||
targetId: 'all'
|
||||
})
|
||||
$CurrentChat.hypaV2Data.chunks = $CurrentChat.hypaV2Data.chunks
|
||||
$DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].hypaV2Data.chunks = $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].hypaV2Data.chunks
|
||||
}}>+</Button>
|
||||
</div>
|
||||
{:else}
|
||||
{#each $CurrentChat.hypaV2Data.chunks as chunk, i}
|
||||
{#each $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].hypaV2Data.chunks as chunk, i}
|
||||
<div class="flex flex-col p-2 rounded-md border-darkborderc border">
|
||||
{#if i === 0}
|
||||
<span class="text-green-500">Active</span>
|
||||
@@ -305,12 +315,12 @@
|
||||
{:else if $alertStore.type === 'addchar'}
|
||||
<div class="w-2xl flex flex-col max-w-full">
|
||||
|
||||
<button class="border-darkborderc border py-12 px-8 flex rounded-md hover:ring-2 justify-center items-center" on:click|stopPropagation|preventDefault={(e) => {
|
||||
<button class="border-darkborderc border py-12 px-8 flex rounded-md hover:ring-2 justify-center items-center" onclick={stopPropagation(preventDefault((e) => {
|
||||
alertStore.set({
|
||||
type: 'none',
|
||||
msg: 'importFromRealm'
|
||||
})
|
||||
}}>
|
||||
}))}>
|
||||
<div class="flex flex-col justify-start items-start">
|
||||
<span class="text-2xl font-bold">{language.importFromRealm}</span>
|
||||
<span class="text-textcolor2">{language.importFromRealmDesc}</span>
|
||||
@@ -319,12 +329,12 @@
|
||||
<ChevronRightIcon />
|
||||
</div>
|
||||
</button>
|
||||
<button class="border-darkborderc border py-2 px-8 flex rounded-md hover:ring-2 items-center mt-2" on:click|stopPropagation|preventDefault={() => {
|
||||
<button class="border-darkborderc border py-2 px-8 flex rounded-md hover:ring-2 items-center mt-2" onclick={stopPropagation(preventDefault(() => {
|
||||
alertStore.set({
|
||||
type: 'none',
|
||||
msg: 'importCharacter'
|
||||
})
|
||||
}}>
|
||||
}))}>
|
||||
<div class="flex flex-col justify-start items-start">
|
||||
<span>{language.importCharacter}</span>
|
||||
</div>
|
||||
@@ -332,12 +342,12 @@
|
||||
<ChevronRightIcon />
|
||||
</div>
|
||||
</button>
|
||||
<button class="border-darkborderc border py-2 px-8 flex rounded-md hover:ring-2 items-center mt-2" on:click|stopPropagation|preventDefault={() => {
|
||||
<button class="border-darkborderc border py-2 px-8 flex rounded-md hover:ring-2 items-center mt-2" onclick={stopPropagation(preventDefault(() => {
|
||||
alertStore.set({
|
||||
type: 'none',
|
||||
msg: 'createfromScratch'
|
||||
})
|
||||
}}>
|
||||
}))}>
|
||||
<div class="flex flex-col justify-start items-start">
|
||||
<span>{language.createfromScratch}</span>
|
||||
</div>
|
||||
@@ -345,12 +355,12 @@
|
||||
<ChevronRightIcon />
|
||||
</div>
|
||||
</button>
|
||||
<button class="border-darkborderc border py-2 px-8 flex rounded-md hover:ring-2 items-center mt-2" on:click|stopPropagation|preventDefault={() => {
|
||||
<button class="border-darkborderc border py-2 px-8 flex rounded-md hover:ring-2 items-center mt-2" onclick={stopPropagation(preventDefault(() => {
|
||||
alertStore.set({
|
||||
type: 'none',
|
||||
msg: 'createGroup'
|
||||
})
|
||||
}}>
|
||||
}))}>
|
||||
<div class="flex flex-col justify-start items-start">
|
||||
<span>{language.createGroup}</span>
|
||||
</div>
|
||||
@@ -358,12 +368,12 @@
|
||||
<ChevronRightIcon />
|
||||
</div>
|
||||
</button>
|
||||
<button class="border-darkborderc border py-2 px-8 flex rounded-md hover:ring-2 items-center mt-2" on:click|stopPropagation|preventDefault={() => {
|
||||
<button class="border-darkborderc border py-2 px-8 flex rounded-md hover:ring-2 items-center mt-2" onclick={stopPropagation(preventDefault(() => {
|
||||
alertStore.set({
|
||||
type: 'none',
|
||||
msg: 'cancel'
|
||||
})
|
||||
}}>
|
||||
}))}>
|
||||
<div class="flex flex-col justify-start items-start">
|
||||
<span>{language.cancel}</span>
|
||||
</div>
|
||||
@@ -374,7 +384,7 @@
|
||||
<h1 class="text-xl mb-4 font-bold">
|
||||
{language.chatOptions}
|
||||
</h1>
|
||||
<button class="border-darkborderc border py-2 px-8 flex rounded-md hover:ring-2 items-center mt-2" on:click={() => {
|
||||
<button class="border-darkborderc border py-2 px-8 flex rounded-md hover:ring-2 items-center mt-2" onclick={() => {
|
||||
alertStore.set({
|
||||
type: 'none',
|
||||
msg: '0'
|
||||
@@ -387,7 +397,7 @@
|
||||
<ChevronRightIcon />
|
||||
</div>
|
||||
</button>
|
||||
<button class="border-darkborderc border py-2 px-8 flex rounded-md hover:ring-2 items-center mt-2" on:click={() => {
|
||||
<button class="border-darkborderc border py-2 px-8 flex rounded-md hover:ring-2 items-center mt-2" onclick={() => {
|
||||
alertStore.set({
|
||||
type: 'none',
|
||||
msg: '1'
|
||||
@@ -401,7 +411,7 @@
|
||||
</div>
|
||||
</button>
|
||||
{#if $DataBase.useExperimental}
|
||||
<button class="border-darkborderc border py-2 px-8 flex rounded-md hover:ring-2 items-center mt-2" on:click={() => {
|
||||
<button class="border-darkborderc border py-2 px-8 flex rounded-md hover:ring-2 items-center mt-2" onclick={() => {
|
||||
alertStore.set({
|
||||
type: 'none',
|
||||
msg: '2'
|
||||
@@ -415,7 +425,7 @@
|
||||
</div>
|
||||
</button>
|
||||
{/if}
|
||||
<button class="border-darkborderc border py-2 px-8 flex rounded-md hover:ring-2 items-center mt-2" on:click={() => {
|
||||
<button class="border-darkborderc border py-2 px-8 flex rounded-md hover:ring-2 items-center mt-2" onclick={() => {
|
||||
alertStore.set({
|
||||
type: 'none',
|
||||
msg: 'cancel'
|
||||
@@ -431,13 +441,13 @@
|
||||
</div>
|
||||
|
||||
{:else if $alertStore.type === 'cardexport'}
|
||||
<div class="fixed top-0 left-0 h-full w-full bg-black bg-opacity-50 flex flex-col z-50 items-center justify-center" on:click={close}>
|
||||
<div class="bg-darkbg rounded-md p-4 max-w-full flex flex-col w-2xl" on:click|stopPropagation>
|
||||
<div class="fixed top-0 left-0 h-full w-full bg-black bg-opacity-50 flex flex-col z-50 items-center justify-center" onclick={close}>
|
||||
<div class="bg-darkbg rounded-md p-4 max-w-full flex flex-col w-2xl" onclick={stopPropagation(onclick)}>
|
||||
<h1 class="font-bold text-2xl w-full">
|
||||
<span>
|
||||
{language.shareExport}
|
||||
</span>
|
||||
<button class="float-right text-textcolor2 hover:text-green-500" on:click={() => {
|
||||
<button class="float-right text-textcolor2 hover:text-green-500" onclick={() => {
|
||||
alertStore.set({
|
||||
type: 'none',
|
||||
msg: JSON.stringify({
|
||||
@@ -457,7 +467,7 @@
|
||||
<span class="text-textcolor2 text-sm">{language.risupresetDesc}</span>
|
||||
{:else}
|
||||
<span class="text-textcolor2 text-sm">{language.ccv3Desc}</span>
|
||||
{#if cardExportType2 !== 'charx' && isCharacterHasAssets($CurrentCharacter)}
|
||||
{#if cardExportType2 !== 'charx' && isCharacterHasAssets($DataBase.characters[$selectedCharID])}
|
||||
<span class="text-red-500 text-sm">{language.notCharxWarn}</span>
|
||||
{/if}
|
||||
{/if}
|
||||
@@ -471,18 +481,18 @@
|
||||
{/if}
|
||||
<div class="flex items-center flex-wrap mt-2">
|
||||
{#if $alertStore.submsg === 'preset'}
|
||||
<button class="bg-bgcolor px-2 py-4 rounded-lg flex-1" class:ring-1={cardExportType === 'realm'} on:click={() => {cardExportType = 'realm'}}>RisuRealm</button>
|
||||
<button class="bg-bgcolor px-2 py-4 rounded-lg ml-2 flex-1" class:ring-1={cardExportType === ''} on:click={() => {cardExportType = ''}}>Risupreset</button>
|
||||
<button class="bg-bgcolor px-2 py-4 rounded-lg flex-1" class:ring-1={cardExportType === 'realm'} onclick={() => {cardExportType = 'realm'}}>RisuRealm</button>
|
||||
<button class="bg-bgcolor px-2 py-4 rounded-lg ml-2 flex-1" class:ring-1={cardExportType === ''} onclick={() => {cardExportType = ''}}>Risupreset</button>
|
||||
{:else if $alertStore.submsg === 'module'}
|
||||
<button class="bg-bgcolor px-2 py-4 rounded-lg ml-2 flex-1" class:ring-1={cardExportType === 'realm'} on:click={() => {cardExportType = 'realm'}}>RisuRealm</button>
|
||||
<button class="bg-bgcolor px-2 py-4 rounded-lg flex-1" class:ring-1={cardExportType === ''} on:click={() => {cardExportType = ''}}>RisuM</button>
|
||||
<button class="bg-bgcolor px-2 py-4 rounded-lg ml-2 flex-1" class:ring-1={cardExportType === 'realm'} onclick={() => {cardExportType = 'realm'}}>RisuRealm</button>
|
||||
<button class="bg-bgcolor px-2 py-4 rounded-lg flex-1" class:ring-1={cardExportType === ''} onclick={() => {cardExportType = ''}}>RisuM</button>
|
||||
{:else}
|
||||
<button class="bg-bgcolor px-2 py-4 rounded-lg flex-1" class:ring-1={cardExportType === 'realm'} on:click={() => {cardExportType = 'realm'}}>RisuRealm</button>
|
||||
<button class="bg-bgcolor px-2 py-4 rounded-lg ml-2 flex-1" class:ring-1={cardExportType === ''} on:click={() => {
|
||||
<button class="bg-bgcolor px-2 py-4 rounded-lg flex-1" class:ring-1={cardExportType === 'realm'} onclick={() => {cardExportType = 'realm'}}>RisuRealm</button>
|
||||
<button class="bg-bgcolor px-2 py-4 rounded-lg ml-2 flex-1" class:ring-1={cardExportType === ''} onclick={() => {
|
||||
cardExportType = ''
|
||||
cardExportType2 = isCharacterHasAssets($CurrentCharacter) ? 'charx' : ''
|
||||
cardExportType2 = isCharacterHasAssets($DataBase.characters[$selectedCharID]) ? 'charx' : ''
|
||||
}}>Character Card V3</button>
|
||||
<button class="bg-bgcolor px-2 py-4 rounded-lg ml-2 flex-1" class:ring-1={cardExportType === 'ccv2'} on:click={() => {cardExportType = 'ccv2'}}>Character Card V2</button>
|
||||
<button class="bg-bgcolor px-2 py-4 rounded-lg ml-2 flex-1" class:ring-1={cardExportType === 'ccv2'} onclick={() => {cardExportType = 'ccv2'}}>Character Card V2</button>
|
||||
{/if}
|
||||
</div>
|
||||
{#if $alertStore.submsg === '' && cardExportType === ''}
|
||||
@@ -493,7 +503,7 @@
|
||||
<OptionInput value="charx">CHARX</OptionInput>
|
||||
</SelectInput>
|
||||
{/if}
|
||||
<Button className="mt-4" on:click={() => {
|
||||
<Button className="mt-4" onclick={() => {
|
||||
alertStore.set({
|
||||
type: 'none',
|
||||
msg: JSON.stringify({
|
||||
@@ -507,7 +517,7 @@
|
||||
|
||||
{:else if $alertStore.type === 'toast'}
|
||||
<div class="toast-anime absolute right-0 bottom-0 bg-darkbg p-4 break-any rounded-md flex flex-col max-w-3xl max-h-11/12 overflow-y-auto z-50 text-textcolor"
|
||||
on:animationend={() => {
|
||||
onanimationend={() => {
|
||||
alertStore.set({
|
||||
type: 'none',
|
||||
msg: ''
|
||||
|
||||
@@ -2,14 +2,15 @@
|
||||
import { alertConfirm, alertError } from "../../ts/alert";
|
||||
import { language } from "../../lang";
|
||||
import { DataBase } from "../../ts/storage/database";
|
||||
import { CurrentCharacter, ReloadGUIPointer, selectedCharID } from "../../ts/stores";
|
||||
import { ReloadGUIPointer, selectedCharID } from "../../ts/stores";
|
||||
import { DownloadIcon, EditIcon, FolderUpIcon, PlusIcon, TrashIcon, XIcon } from "lucide-svelte";
|
||||
import { exportChat, importChat } from "../../ts/characters";
|
||||
import { findCharacterbyId } from "../../ts/util";
|
||||
import TextInput from "../UI/GUI/TextInput.svelte";
|
||||
|
||||
let editMode = false
|
||||
export let close = () => {}
|
||||
let editMode = $state(false)
|
||||
/** @type {{close?: any}} */
|
||||
let { close = () => {} } = $props();
|
||||
</script>
|
||||
|
||||
<div class="absolute w-full h-full z-40 bg-black bg-opacity-50 flex justify-center items-center">
|
||||
@@ -17,42 +18,42 @@
|
||||
<div class="flex items-center text-textcolor mb-4">
|
||||
<h2 class="mt-0 mb-0">{language.chatList}</h2>
|
||||
<div class="flex-grow flex justify-end">
|
||||
<button class="text-textcolor2 hover:text-green-500 mr-2 cursor-pointer items-center" on:click={close}>
|
||||
<button class="text-textcolor2 hover:text-green-500 mr-2 cursor-pointer items-center" onclick={close}>
|
||||
<XIcon size={24}/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{#each $CurrentCharacter.chats as chat, i}
|
||||
<button on:click={() => {
|
||||
{#each $DataBase.characters[$selectedCharID].chats as chat, i}
|
||||
<button onclick={() => {
|
||||
if(!editMode){
|
||||
$CurrentCharacter.chatPage = i
|
||||
$DataBase.characters[$selectedCharID].chatPage = i
|
||||
close()
|
||||
}
|
||||
}} class="flex items-center text-textcolor border-t-1 border-solid border-0 border-darkborderc p-2 cursor-pointer" class:bg-selected={i === $CurrentCharacter.chatPage}>
|
||||
}} class="flex items-center text-textcolor border-t-1 border-solid border-0 border-darkborderc p-2 cursor-pointer" class:bg-selected={i === $DataBase.characters[$selectedCharID].chatPage}>
|
||||
{#if editMode}
|
||||
<TextInput bind:value={$CurrentCharacter.chats[i].name} padding={false}/>
|
||||
<TextInput bind:value={$DataBase.characters[$selectedCharID].chats[i].name} padding={false}/>
|
||||
{:else}
|
||||
<span>{chat.name}</span>
|
||||
{/if}
|
||||
<div class="flex-grow flex justify-end">
|
||||
<div class="text-textcolor2 hover:text-green-500 mr-2 cursor-pointer" on:click={async (e) => {
|
||||
<div class="text-textcolor2 hover:text-green-500 mr-2 cursor-pointer" onclick={async (e) => {
|
||||
e.stopPropagation()
|
||||
exportChat(i)
|
||||
}}>
|
||||
<DownloadIcon size={18}/>
|
||||
</div>
|
||||
<div class="text-textcolor2 hover:text-green-500 cursor-pointer" on:click={async (e) => {
|
||||
<div class="text-textcolor2 hover:text-green-500 cursor-pointer" onclick={async (e) => {
|
||||
e.stopPropagation()
|
||||
if($CurrentCharacter.chats.length === 1){
|
||||
if($DataBase.characters[$selectedCharID].chats.length === 1){
|
||||
alertError(language.errors.onlyOneChat)
|
||||
return
|
||||
}
|
||||
const d = await alertConfirm(`${language.removeConfirm}${chat.name}`)
|
||||
if(d){
|
||||
$CurrentCharacter.chatPage = 0
|
||||
let chats = $CurrentCharacter.chats
|
||||
$DataBase.characters[$selectedCharID].chatPage = 0
|
||||
let chats = $DataBase.characters[$selectedCharID].chats
|
||||
chats.splice(i, 1)
|
||||
$CurrentCharacter.chats = chats
|
||||
$DataBase.characters[$selectedCharID].chats = chats
|
||||
}
|
||||
}}>
|
||||
<TrashIcon size={18}/>
|
||||
@@ -61,10 +62,10 @@
|
||||
</button>
|
||||
{/each}
|
||||
<div class="flex mt-2 items-center">
|
||||
<button class="text-textcolor2 hover:text-green-500 cursor-pointer mr-1" on:click={() => {
|
||||
const cha = $CurrentCharacter
|
||||
const len = $CurrentCharacter.chats.length
|
||||
let chats = $CurrentCharacter.chats
|
||||
<button class="text-textcolor2 hover:text-green-500 cursor-pointer mr-1" onclick={() => {
|
||||
const cha = $DataBase.characters[$selectedCharID]
|
||||
const len = $DataBase.characters[$selectedCharID].chats.length
|
||||
let chats = $DataBase.characters[$selectedCharID].chats
|
||||
chats.unshift({
|
||||
message:[], note:'', name:`New Chat ${len + 1}`, localLore:[], fmIndex: -1
|
||||
})
|
||||
@@ -77,19 +78,19 @@
|
||||
})
|
||||
})
|
||||
}
|
||||
$CurrentCharacter.chats = chats
|
||||
$DataBase.characters[$selectedCharID].chats = chats
|
||||
$ReloadGUIPointer += 1
|
||||
$CurrentCharacter.chatPage = len
|
||||
$DataBase.characters[$selectedCharID].chatPage = len
|
||||
close()
|
||||
}}>
|
||||
<PlusIcon/>
|
||||
</button>
|
||||
<button class="text-textcolor2 hover:text-green-500 mr-2 cursor-pointer" on:click={() => {
|
||||
<button class="text-textcolor2 hover:text-green-500 mr-2 cursor-pointer" onclick={() => {
|
||||
importChat()
|
||||
}}>
|
||||
<FolderUpIcon size={18}/>
|
||||
</button>
|
||||
<button class="text-textcolor2 hover:text-green-500 cursor-pointer" on:click={() => {
|
||||
<button class="text-textcolor2 hover:text-green-500 cursor-pointer" onclick={() => {
|
||||
editMode = !editMode
|
||||
}}>
|
||||
<EditIcon size={18}/>
|
||||
|
||||
@@ -11,29 +11,29 @@
|
||||
{#if !isTauri}
|
||||
<a class="github-button mt-4" href="https://github.com/kwaroran/risuAI" data-color-scheme="no-preference: dark; light: dark; dark: dark;" data-size="large" data-show-count="true" aria-label="Star kwaroran/risuAI on GitHub">Star</a>
|
||||
{:else}
|
||||
<button on:click={() => {
|
||||
<button onclick={() => {
|
||||
openURL("https://github.com/kwaroran/risuAI")
|
||||
}}>
|
||||
<img src="/icon/github-mark-white.svg" width="24" alt="github" />
|
||||
</button>
|
||||
{/if}
|
||||
<button class="text-textcolor" on:click={() => {
|
||||
<button class="text-textcolor" onclick={() => {
|
||||
openURL("https://risuai.net/")
|
||||
}}>
|
||||
<HomeIcon size={24} />
|
||||
</button>
|
||||
<button class="text-textcolor" on:click={() => {
|
||||
<button class="text-textcolor" onclick={() => {
|
||||
openURL("https://www.patreon.com/RisuAI")
|
||||
}}>
|
||||
<WalletIcon size={24} />
|
||||
</button>
|
||||
<button class="text-textcolor" on:click={() => {
|
||||
<button class="text-textcolor" onclick={() => {
|
||||
openURL("mailto:risuai@proton.me")
|
||||
}}>
|
||||
<MailIcon size={24} />
|
||||
</button>
|
||||
{#if !isTauri}
|
||||
<button class="text-textcolor" on:click={() => {
|
||||
<button class="text-textcolor" onclick={() => {
|
||||
toggleFullscreen()
|
||||
}}>
|
||||
<MaximizeIcon size={24} />
|
||||
|
||||
@@ -9,9 +9,13 @@
|
||||
import { language } from "src/lang";
|
||||
import { parseMultilangString } from "src/ts/util";
|
||||
import { checkCharOrder } from "src/ts/storage/globalApi";
|
||||
export let endGrid = () => {}
|
||||
let search = ''
|
||||
let selected = 0
|
||||
interface Props {
|
||||
endGrid?: any;
|
||||
}
|
||||
|
||||
let { endGrid = () => {} }: Props = $props();
|
||||
let search = $state('')
|
||||
let selected = $state(0)
|
||||
|
||||
function changeChar(index = -1){
|
||||
characterFormatUpdate(index)
|
||||
@@ -53,7 +57,7 @@
|
||||
<div class="h-full w-full flex justify-center">
|
||||
<div class="h-full p-6 bg-darkbg max-w-full w-2xl flex flex-col overflow-y-auto">
|
||||
<h1 class="text-textcolor text-2xl font-bold mt-2 flex items-center mx-4 mb-2">
|
||||
<button class="mr-2 hover:text-textcolor text-textcolor2" on:click={() => {
|
||||
<button class="mr-2 hover:text-textcolor text-textcolor2" onclick={() => {
|
||||
endGrid()
|
||||
}}><ArrowLeft /></button>
|
||||
<span>Catalog</span>
|
||||
@@ -61,13 +65,13 @@
|
||||
<div class="mx-4 mb-6 flex flex-col">
|
||||
<TextInput placeholder="Search" bind:value={search} size="lg" autocomplete="off"/>
|
||||
<div class="flex flex-wrap gap-2 mt-2">
|
||||
<Button selected={selected === 0} size="sm" on:click={() => {selected = 0}}>
|
||||
<Button selected={selected === 0} size="sm" onclick={() => {selected = 0}}>
|
||||
{language.grid}
|
||||
</Button>
|
||||
<Button selected={selected === 1} size="sm" on:click={() => {selected = 1}}>
|
||||
<Button selected={selected === 1} size="sm" onclick={() => {selected = 1}}>
|
||||
{language.list}
|
||||
</Button>
|
||||
<Button selected={selected === 2} size="sm" on:click={() => {selected = 2}}>
|
||||
<Button selected={selected === 2} size="sm" onclick={() => {selected = 2}}>
|
||||
{language.trash}
|
||||
</Button>
|
||||
</div>
|
||||
@@ -100,12 +104,12 @@
|
||||
<h4 class="text-textcolor font-bold text-lg mb-1">{char.name || "Unnamed"}</h4>
|
||||
<span class="text-textcolor2">{parseMultilangString(char.desc)['en'] || parseMultilangString(char.desc)['xx'] || 'No description'}</span>
|
||||
<div class="flex gap-2 justify-end">
|
||||
<button class="hover:text-textcolor text-textcolor2" on:click={() => {
|
||||
<button class="hover:text-textcolor text-textcolor2" onclick={() => {
|
||||
changeChar(char.index)
|
||||
}}>
|
||||
<Inspect />
|
||||
</button>
|
||||
<button class="hover:text-textcolor text-textcolor2" on:click={() => {
|
||||
<button class="hover:text-textcolor text-textcolor2" onclick={() => {
|
||||
removeChar(char.index, char.name)
|
||||
}}>
|
||||
<TrashIcon />
|
||||
@@ -123,13 +127,13 @@
|
||||
<h4 class="text-textcolor font-bold text-lg mb-1">{char.name || "Unnamed"}</h4>
|
||||
<span class="text-textcolor2">{parseMultilangString(char.desc)['en'] || parseMultilangString(char.desc)['xx'] || 'No description'}</span>
|
||||
<div class="flex gap-2 justify-end">
|
||||
<button class="hover:text-textcolor text-textcolor2" on:click={() => {
|
||||
<button class="hover:text-textcolor text-textcolor2" onclick={() => {
|
||||
$DataBase.characters[char.index].trashTime = undefined
|
||||
checkCharOrder()
|
||||
}}>
|
||||
<Undo2Icon />
|
||||
</button>
|
||||
<button class="hover:text-textcolor text-textcolor2" on:click={() => {
|
||||
<button class="hover:text-textcolor text-textcolor2" onclick={() => {
|
||||
removeChar(char.index, char.name, 'permanent')
|
||||
}}>
|
||||
<TrashIcon />
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<button title={name+' '+language.showHelp} class="relative help inline-block cursor-default hover:text-green-500" on:click={() => {
|
||||
<button title={name+' '+language.showHelp} class="relative help inline-block cursor-default hover:text-green-500" onclick={() => {
|
||||
alertMd(language.help[key])
|
||||
}}>
|
||||
|
||||
@@ -19,7 +19,11 @@
|
||||
import { language } from "src/lang";
|
||||
import { alertMd } from "src/ts/alert";
|
||||
|
||||
export let unrecommended = false
|
||||
export let key: (keyof (typeof language.help))
|
||||
export let name = ''
|
||||
interface Props {
|
||||
unrecommended?: boolean;
|
||||
key: (keyof (typeof language.help));
|
||||
name?: string;
|
||||
}
|
||||
|
||||
let { unrecommended = false, key, name = '' }: Props = $props();
|
||||
</script>
|
||||
@@ -1,4 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { run } from 'svelte/legacy';
|
||||
|
||||
|
||||
import { ArrowBigLeftIcon, Send } from "lucide-svelte";
|
||||
import { changeLanguage, language } from "src/lang";
|
||||
@@ -7,9 +9,9 @@
|
||||
import { prebuiltPresets } from "src/ts/process/templates/templates";
|
||||
import { updateTextThemeAndCSS } from "src/ts/gui/colorscheme";
|
||||
|
||||
let step = 0
|
||||
let provider = ''
|
||||
let input = ''
|
||||
let step = $state(0)
|
||||
let provider = $state('')
|
||||
let input = $state('')
|
||||
|
||||
if(step === 0){
|
||||
const browserLang = navigator.language
|
||||
@@ -21,7 +23,7 @@
|
||||
step = 1
|
||||
}
|
||||
}
|
||||
let start = false
|
||||
let start = $state(false)
|
||||
|
||||
function send(){
|
||||
switch(step){
|
||||
@@ -60,7 +62,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
$: {
|
||||
run(() => {
|
||||
if(step === 10){
|
||||
setTimeout(() => {
|
||||
$DataBase = setPreset($DataBase, prebuiltPresets.OAI2)
|
||||
@@ -84,13 +86,13 @@
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="w-full h-full flex justify-center welcome-bg text-textcolor relative bg-gray-900">
|
||||
<div class="w-2xl overflow-x-hidden max-w-full min-h-full h-full flex flex-col overflow-y-hidden" class:justify-center={!start}>
|
||||
{#if !start}
|
||||
<div class="w-full justify-center flex mt-8 logo-animation" on:animationend={() => {
|
||||
<div class="w-full justify-center flex mt-8 logo-animation" onanimationend={() => {
|
||||
start = true
|
||||
}}>
|
||||
<img src="/logo_typo_trans.png" alt="logo" class="w-full max-w-screen-sm mb-0">
|
||||
@@ -100,32 +102,32 @@
|
||||
{#if step === 0}
|
||||
<h2 class="animate-bounce">Choose your language</h2>
|
||||
<div class="flex flex-col items-start ml-2">
|
||||
<button class="hover:text-green-500 transition-colors" on:click={() => {
|
||||
<button class="hover:text-green-500 transition-colors" onclick={() => {
|
||||
changeLanguage('de')
|
||||
$DataBase.language='de'
|
||||
step = 1
|
||||
}}>• Deutsch</button>
|
||||
<button class="hover:text-green-500 transition-colors" on:click={() => {
|
||||
<button class="hover:text-green-500 transition-colors" onclick={() => {
|
||||
changeLanguage('en')
|
||||
$DataBase.language='en'
|
||||
step = 1
|
||||
}}>• English</button>
|
||||
<button class="hover:text-green-500 transition-colors" on:click={() => {
|
||||
<button class="hover:text-green-500 transition-colors" onclick={() => {
|
||||
changeLanguage('ko')
|
||||
$DataBase.language='ko'
|
||||
step = 1
|
||||
}}>• 한국어</button>
|
||||
<button class="hover:text-green-500 transition-colors" on:click={() => {
|
||||
<button class="hover:text-green-500 transition-colors" onclick={() => {
|
||||
changeLanguage('cn')
|
||||
$DataBase.language='cn'
|
||||
step = 1
|
||||
}}>• 中文</button>
|
||||
<button class="hover:text-green-500 transition-colors" on:click={() => {
|
||||
<button class="hover:text-green-500 transition-colors" onclick={() => {
|
||||
changeLanguage('zh-Hant')
|
||||
$DataBase.language='zh-Hant'
|
||||
step = 1
|
||||
}}>• 中文(繁體)</button>
|
||||
<button class="hover:text-green-500 transition-colors" on:click={() => {
|
||||
<button class="hover:text-green-500 transition-colors" onclick={() => {
|
||||
changeLanguage('vi')
|
||||
$DataBase.language='vi'
|
||||
step = 1
|
||||
@@ -140,28 +142,28 @@
|
||||
{/if}
|
||||
{#if step === 2}
|
||||
<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||
<button class="border-l-blue-500 border-l-4 p-6 flex flex-col transition-shadow hover:ring-1" on:click={() => {
|
||||
<button class="border-l-blue-500 border-l-4 p-6 flex flex-col transition-shadow hover:ring-1" onclick={() => {
|
||||
provider = 'openai'
|
||||
step = 3
|
||||
}}>
|
||||
<h1 class="text-2xl font-bold text-start">OpenAI</h1>
|
||||
<span class="mt-2 text-textcolor2 text-start">{language.setup.openAIProvider}</span>
|
||||
</button>
|
||||
<button class="border-l-red-500 border-l-4 p-6 flex flex-col transition-shadow hover:ring-1" on:click={() => {
|
||||
<button class="border-l-red-500 border-l-4 p-6 flex flex-col transition-shadow hover:ring-1" onclick={() => {
|
||||
provider = 'horde'
|
||||
step = 10
|
||||
}}>
|
||||
<h1 class="text-2xl font-bold text-start">Horde</h1>
|
||||
<span class="mt-2 text-textcolor2 text-start">{language.setup.hordeProvider}</span>
|
||||
</button>
|
||||
<button class="border-l-green-500 border-l-4 p-6 flex flex-col transition-shadow hover:ring-1" on:click={() => {
|
||||
<button class="border-l-green-500 border-l-4 p-6 flex flex-col transition-shadow hover:ring-1" onclick={() => {
|
||||
provider = 'openrouter'
|
||||
step = 3
|
||||
}}>
|
||||
<h1 class="text-2xl font-bold text-start">OpenRouter</h1>
|
||||
<span class="mt-2 text-textcolor2 text-start">{language.setup.openrouterProvider}</span>
|
||||
</button>
|
||||
<button class="border-l-gray-500 border-l-4 p-6 flex flex-col transition-shadow hover:ring-1" on:click={() => {
|
||||
<button class="border-l-gray-500 border-l-4 p-6 flex flex-col transition-shadow hover:ring-1" onclick={() => {
|
||||
provider = 'later'
|
||||
step = 10
|
||||
}}>
|
||||
@@ -185,7 +187,7 @@
|
||||
<div class="flex items-end mb-2 w-full mt-auto ">
|
||||
<input class="flex-grow text-textcolor p-2 min-w-0 bg-transparent input-text text-xl ml-4 mr-2 border-darkbutton resize-none focus:bg-selected overflow-y-hidden overflow-x-hidden max-w-full"
|
||||
bind:value={input}
|
||||
on:keydown={(e) => {
|
||||
onkeydown={(e) => {
|
||||
if(e.key.toLocaleLowerCase() === "enter" && (!e.shiftKey) && !e.isComposing){
|
||||
e.preventDefault()
|
||||
send()
|
||||
@@ -193,7 +195,7 @@
|
||||
}}
|
||||
style:height={'44px'}
|
||||
/>
|
||||
<div on:click={send}
|
||||
<div onclick={send}
|
||||
class="mr-2 bg-textcolor2 flex justify-center items-center text-gray-100 w-12 h-12 rounded-md hover:bg-green-500 transition-colors">
|
||||
<Send />
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user