Migrate to svelte 5

src/lib/ChatScreens/Chat.svelte

@@ -1,11 +1,13 @@
 <script lang="ts">
+    import { run } from 'svelte/legacy';
+
     import { ArrowLeft, ArrowRight, PencilIcon, LanguagesIcon, RefreshCcwIcon, TrashIcon, CopyIcon, Volume2Icon, BotIcon, ArrowLeftRightIcon, UserIcon } from "lucide-svelte";
     import { type CbsConditions, ParseMarkdown, postTranslationParse, type simpleCharacterArgument } from "../../ts/parser";
     import AutoresizeArea from "../UI/GUI/TextAreaResizable.svelte";
     import { alertConfirm, alertError, alertRequestData } from "../../ts/alert";
     import { language } from "../../lang";
     import { DataBase, type MessageGenerationInfo } from "../../ts/storage/database";
-    import { CurrentCharacter, CurrentChat, HideIconStore, ReloadGUIPointer } from "../../ts/stores";
+    import { HideIconStore, ReloadGUIPointer, selectedCharID } from "../../ts/stores";
     import { translateHTML } from "../../ts/translator/translator";
     import { risuChatParser } from "src/ts/process/scripts";
     import { get, type Unsubscriber } from "svelte/store";
@@ -17,33 +19,51 @@
     import { ColorSchemeTypeStore } from "src/ts/gui/colorscheme";
     import { ConnectionOpenStore } from "src/ts/sync/multiuser";
     import { onDestroy, onMount } from "svelte";
-    export let message = ''
-    export let name = ''
-    export let largePortrait = false
-    export let isLastMemory:boolean
-    export let img:string|Promise<string> = ''
-    export let idx = -1
-    export let rerollIcon = false
-    export let messageGenerationInfo:MessageGenerationInfo|null = null
-    export let onReroll = () => {}
-    export let unReroll = () => {}
-    export let character:simpleCharacterArgument|string|null = null
-    export let firstMessage = false
-    let translating = false
+    let translating = $state(false)
     try {
         translating = get(DataBase).autoTranslate                
     } catch (error) {}
-    let editMode = false
-    let statusMessage:string = ''
-    export let altGreeting = false
+    let editMode = $state(false)
+    let statusMessage:string = $state('')
+    interface Props {
+        message?: string;
+        name?: string;
+        largePortrait?: boolean;
+        isLastMemory: boolean;
+        img?: string|Promise<string>;
+        idx?: any;
+        rerollIcon?: boolean;
+        messageGenerationInfo?: MessageGenerationInfo|null;
+        onReroll?: any;
+        unReroll?: any;
+        character?: simpleCharacterArgument|string|null;
+        firstMessage?: boolean;
+        altGreeting?: boolean;
+    }
 
-    let msgDisplay = ''
-    let translated = get(DataBase).autoTranslate
+    let {
+        message = $bindable(''),
+        name = '',
+        largePortrait = false,
+        isLastMemory,
+        img = '',
+        idx = -1,
+        rerollIcon = false,
+        messageGenerationInfo = null,
+        onReroll = () => {},
+        unReroll = () => {},
+        character = null,
+        firstMessage = false,
+        altGreeting = false
+    }: Props = $props();
+
+    let msgDisplay = $state('')
+    let translated = $state(get(DataBase).autoTranslate)
     async function rm(e:MouseEvent, rec?:boolean){
         if(e.shiftKey){
-            let msg = $CurrentChat.message
+            let msg = $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message
             msg = msg.slice(0, idx)
-            $CurrentChat.message = msg
+            $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message = msg
             return
         }
 
@@ -51,33 +71,33 @@
         if(rm){
             if($DataBase.instantRemove || rec){
                 const r = await alertConfirm(language.instantRemoveConfirm)
-                let msg = $CurrentChat.message
+                let msg = $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message
                 if(!r){
                     msg = msg.slice(0, idx)
                 }
                 else{
                     msg.splice(idx, 1)
                 }
-                $CurrentChat.message = msg
+                $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message = msg
             }
             else{
-                let msg = $CurrentChat.message
+                let msg = $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message
                 msg.splice(idx, 1)
-                $CurrentChat.message = msg
+                $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message = msg
             }
         }
     }
 
     async function edit(){
-        let msg = $CurrentChat.message
+        let msg = $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message
         msg[idx].data = message
-        $CurrentChat.message = msg
+        $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message = msg
     }
 
     function getCbsCondition(){
         const cbsConditions:CbsConditions = {
             firstmsg: firstMessage ?? false,
-            chatRole: $CurrentChat?.message?.[idx]?.role ?? null,
+            chatRole: $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage]?.message?.[idx]?.role ?? null,
         }
         return cbsConditions
     }
@@ -94,15 +114,18 @@
         }, timeout)
     }
 
-    let lastParsed = ''
+    let lastParsed = $state('')
     let lastCharArg:string|simpleCharacterArgument = null
     let lastChatId = -10
-    let blankMessage = (message === '{{none}}' || message === '{{blank}}' || message === '') && idx === -1
-    $: blankMessage = (message === '{{none}}' || message === '{{blank}}' || message === '') && idx === -1
+    let blankMessage = $state((message === '{{none}}' || message === '{{blank}}' || message === '') && idx === -1)
+    run(() => {
+        blankMessage = (message === '{{none}}' || message === '{{blank}}' || message === '') && idx === -1
+    });
     const markParsing = async (data: string, charArg?: string | simpleCharacterArgument, mode?: "normal" | "back", chatID?: number, translateText?:boolean, tries?:number) => {
+        let lastParsedQueue = ''
         try {
-                if((!isEqual(lastCharArg, charArg)) || (chatID !== lastChatId)){
-                lastParsed = ''
+            if((!isEqual(lastCharArg, charArg)) || (chatID !== lastChatId)){
+                lastParsedQueue = ''
                 lastCharArg = charArg
                 lastChatId = chatID
                 translateText = false
@@ -119,7 +142,7 @@
                     translating = true
                     const translated = await postTranslationParse(await translateHTML(marked, false, charArg, chatID))
                     translating = false
-                    lastParsed = translated
+                    lastParsedQueue = translated
                     lastCharArg = charArg
                     return translated
                 }
@@ -128,14 +151,14 @@
                     translating = true
                     const translated = await translateHTML(marked, false, charArg, chatID)
                     translating = false
-                    lastParsed = translated
+                    lastParsedQueue = translated
                     lastCharArg = charArg
                     return translated
                 }
             }
             else{
                 const marked = await ParseMarkdown(data, charArg, mode, chatID, getCbsCondition())
-                lastParsed = marked
+                lastParsedQueue = marked
                 lastCharArg = charArg
                 return marked
             }   
@@ -148,9 +171,16 @@
             }
             return await markParsing(data, charArg, mode, chatID, translateText, (tries ?? 0) + 1)
         }
+        finally{
+            setTimeout(() => {
+                lastParsed = lastParsedQueue
+            }, 1)
+        }
     }
 
-    $: displaya(message)
+    run(() => {
+        displaya(message)
+    });
 
     const unsubscribers:Unsubscriber[] = []
 
@@ -167,7 +197,7 @@
 <div class="flex max-w-full justify-center risu-chat" style={isLastMemory ? `border-top:${$DataBase.memoryLimitThickness}px solid rgba(98, 114, 164, 0.7);` : ''}>
     <div class="text-textcolor mt-1 ml-4 mr-4 mb-1 p-2 bg-transparent flex-grow border-t-gray-900 border-opacity-30 border-transparent flexium items-start max-w-full" >
         {#if !blankMessage && !$HideIconStore}
-            {#if $CurrentCharacter?.chaId === "§playground"}
+            {#if $DataBase.characters[$selectedCharID]?.chaId === "§playground"}
                 <div class="shadow-lg border-textcolor2 border mt-2 flex justify-center items-center text-textcolor2" style={`height:${$DataBase.iconsize * 3.5 / 100}rem;width:${$DataBase.iconsize * 3.5 / 100}rem;min-width:${$DataBase.iconsize * 3.5 / 100}rem`}
                 class:rounded-md={!$DataBase.roundIcons} class:rounded-full={$DataBase.roundIcons}>
                     {#if name === 'assistant'}
@@ -179,26 +209,26 @@
             {:else}
                 {#await img}
                     <div class="shadow-lg bg-textcolor2 mt-2" style={`height:${$DataBase.iconsize * 3.5 / 100}rem;width:${$DataBase.iconsize * 3.5 / 100}rem;min-width:${$DataBase.iconsize * 3.5 / 100}rem`}
-                    class:rounded-md={!$DataBase.roundIcons} class:rounded-full={$DataBase.roundIcons} />
+                    class:rounded-md={!$DataBase.roundIcons} class:rounded-full={$DataBase.roundIcons}></div>
                 {:then m}
                     {#if largePortrait && (!$DataBase.roundIcons)}
                         <div class="shadow-lg bg-textcolor2 mt-2" style={m + `height:${$DataBase.iconsize * 3.5 / 100 / 0.75}rem;width:${$DataBase.iconsize * 3.5 / 100}rem;min-width:${$DataBase.iconsize * 3.5 / 100}rem`}
-                        class:rounded-md={!$DataBase.roundIcons} class:rounded-full={$DataBase.roundIcons}  />
+                        class:rounded-md={!$DataBase.roundIcons} class:rounded-full={$DataBase.roundIcons}></div>
                     {:else}
                         <div class="shadow-lg bg-textcolor2 mt-2" style={m + `height:${$DataBase.iconsize * 3.5 / 100}rem;width:${$DataBase.iconsize * 3.5 / 100}rem;min-width:${$DataBase.iconsize * 3.5 / 100}rem`}
-                        class:rounded-md={!$DataBase.roundIcons} class:rounded-full={$DataBase.roundIcons}  />
+                        class:rounded-md={!$DataBase.roundIcons} class:rounded-full={$DataBase.roundIcons}></div>
                     {/if}
                 {/await}
             {/if}
         {/if}
         <span class="flex flex-col ml-4 w-full max-w-full min-w-0">
             <div class="flexium items-center chat">
-                {#if $CurrentCharacter?.chaId === "§playground" && !blankMessage}
+                {#if $DataBase.characters[$selectedCharID]?.chaId === "§playground" && !blankMessage}
                     <span class="chat text-xl border-darkborderc flex items-center">
                         <span>{name === 'assistant' ? 'Assistant' : 'User'}</span>
-                        <button class="ml-2 text-textcolor2 hover:text-textcolor" on:click={() => {
-                            $CurrentChat.message[idx].role = $CurrentChat.message[idx].role === 'char' ? 'user' : 'char'
-                            $CurrentChat = $CurrentChat
+                        <button class="ml-2 text-textcolor2 hover:text-textcolor" onclick={() => {
+                            $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message[idx].role = $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message[idx].role === 'char' ? 'user' : 'char'
+                            $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage] = $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage]
                         }}><ArrowLeftRightIcon size="18" /></button>
                     </span>
                 {:else if !blankMessage && !$HideIconStore}
@@ -207,7 +237,7 @@
                 <div class="flex-grow flex items-center justify-end text-textcolor2">
                     <span class="text-xs">{statusMessage}</span>
                     {#if $DataBase.useChatCopy && !blankMessage}
-                        <button class="ml-2 hover:text-green-500 transition-colors" on:click={()=>{
+                        <button class="ml-2 hover:text-green-500 transition-colors" onclick={()=>{
                             window.navigator.clipboard.writeText(msgDisplay).then(() => {
                                 setStatusMessage(language.copied)
                             })
@@ -216,8 +246,8 @@
                         </button>    
                     {/if}
                     {#if idx > -1}
-                        {#if $CurrentCharacter.type !== 'group' && $CurrentCharacter.ttsMode !== 'none' && ($CurrentCharacter.ttsMode)}
-                            <button class="ml-2 hover:text-green-500 transition-colors" on:click={()=>{
+                        {#if $DataBase.characters[$selectedCharID].type !== 'group' && $DataBase.characters[$selectedCharID].ttsMode !== 'none' && ($DataBase.characters[$selectedCharID].ttsMode)}
+                            <button class="ml-2 hover:text-green-500 transition-colors" onclick={()=>{
                                 return sayTTS(null, message)
                             }}>
                                 <Volume2Icon size={20}/>
@@ -225,7 +255,7 @@
                         {/if}
 
                         {#if !$ConnectionOpenStore}
-                            <button class={"ml-2 hover:text-green-500 transition-colors "+(editMode?'text-green-400':'')} on:click={() => {
+                            <button class={"ml-2 hover:text-green-500 transition-colors "+(editMode?'text-green-400':'')} onclick={() => {
                                 if(!editMode){
                                     editMode = true
                                 }
@@ -236,13 +266,13 @@
                             }}>
                                 <PencilIcon size={20}/>
                             </button>
-                            <button class="ml-2 hover:text-green-500 transition-colors" on:click={(e) => rm(e, false)} use:longpress={(e) => rm(e, true)}>
+                            <button class="ml-2 hover:text-green-500 transition-colors" onclick={(e) => rm(e, false)} use:longpress={(e) => rm(e, true)}>
                                 <TrashIcon size={20}/>
                             </button>
                         {/if}
                     {/if}
                     {#if $DataBase.translator !== '' && !blankMessage}
-                        <button class={"ml-2 cursor-pointer hover:text-green-500 transition-colors " + (translated ? 'text-green-400':'')} class:translating={translating} on:click={async () => {
+                        <button class={"ml-2 cursor-pointer hover:text-green-500 transition-colors " + (translated ? 'text-green-400':'')} class:translating={translating} onclick={async () => {
                             translated = !translated
                         }}>
                             <LanguagesIcon />
@@ -250,14 +280,14 @@
                     {/if}
                     {#if rerollIcon || altGreeting}
                         {#if $DataBase.swipe || altGreeting}
-                            <button class="ml-2 hover:text-green-500 transition-colors" on:click={unReroll}>
+                            <button class="ml-2 hover:text-green-500 transition-colors" onclick={unReroll}>
                                 <ArrowLeft size={22}/>
                             </button>
-                            <button class="ml-2 hover:text-green-500 transition-colors" on:click={onReroll}>
+                            <button class="ml-2 hover:text-green-500 transition-colors" onclick={onReroll}>
                                 <ArrowRight size={22}/>
                             </button>
                         {:else}
-                            <button class="ml-2 hover:text-green-500 transition-colors" on:click={onReroll}>
+                            <button class="ml-2 hover:text-green-500 transition-colors" onclick={onReroll}>
                                 <RefreshCcwIcon size={20}/>
                             </button>
                         {/if}
@@ -268,7 +298,7 @@
                 <div>
                     <button class="text-sm p-1 text-textcolor2 border-darkborderc float-end mr-2 my-2
                                     hover:ring-darkbutton hover:ring rounded-md hover:text-textcolor transition-all flex justify-center items-center" 
-                            on:click={() => {
+                            onclick={() => {
                                 alertRequestData({
                                     genInfo: messageGenerationInfo,
                                     idx: idx,
@@ -291,8 +321,8 @@
                     {language.noMessage}
                 </div>
             {:else}
-                <!-- svelte-ignore a11y-click-events-have-key-events -->
-                <span class="text chat chattext prose minw-0" class:prose-invert={$ColorSchemeTypeStore} on:click={() => {
+                <!-- svelte-ignore a11y_click_events_have_key_events -->
+                <span class="text chat chattext prose minw-0" class:prose-invert={$ColorSchemeTypeStore} onclick={() => {
                     if($DataBase.clickToEdit && idx > -1){
                         editMode = true
                     }