fix Loading chat data

src/lang/en.ts

@@ -175,7 +175,7 @@ export const languageEnglish = {
         legacyMediaFindings: "If enabled, it will use the old method to find media assets, without using the additional search algorithm.",
         comfyWorkflow: "Put the API workflow of comfy UI. you can get your API workflow in comfy UI by pressing the 'Workflow > Export (API)' button. you must also put {{risu_prompt}} in you workflow text. the {{risu_prompt}} will be replaced with the prompt provided by the Risu.",
         automaticCachePoint: "Automatically creates cache point after the chat ends, if the caching point doesn't exist.",
-        experimentalChatCompressionDesc: "Compresses the unused chat data and saves in seperate file.",
+        experimentalChatCompressionDesc: "Compresses the unused chat data and saves in seperate file. this greatly reduces the size of the chat data, and greatly improves the performance, however its experimental and can be unstable, causing issues in backup feature and more.",
     },
     setup: {
         chooseProvider: "Choose AI Provider",
@@ -1070,5 +1070,6 @@ export const languageEnglish = {
     claudeCachingRetrival: "Claude Caching Retrival",
     claudeCachingRetrivalDesc: "Extends the cache time for Claude Caching, by requesting every 4 minutes. this can reduce the cache miss rate, but it can increase the cost if its not used properly.",
     automaticCachePoint: "Automatic Cache Point",
-    experimentalChatCompression: "Experimental Chat Data Handling"
+    experimentalChatCompression: "Experimental Chat Data Handling",
+    loadingChatData: "Loading Chat Data",
 }

src/lib/ChatScreens/DefaultChatScreen.svelte

@@ -28,6 +28,7 @@
     import { getInlayAsset } from 'src/ts/process/files/inlays';
     import PlaygroundMenu from '../Playground/PlaygroundMenu.svelte';
     import { ConnectionOpenStore } from 'src/ts/sync/multiuser';
+  import { coldStorageHeader, preLoadChat } from 'src/ts/process/coldstorage.svelte';
 
     let messageInput:string = $state('')
     let messageInputTranslate:string = $state('')
@@ -639,6 +640,15 @@
                 )} {send}/>
             {/if}
             
+            {#if DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].message?.[0]?.data?.startsWith(coldStorageHeader)  }
+                {#await preLoadChat($selectedCharID, DBState.db.characters[$selectedCharID].chatPage)}
+                    <div class="w-full flex justify-center text-textcolor2 italic mb-12">
+                        {language.loadingChatData}
+                    </div>
+                {:then a} 
+                    <div></div>
+                {/await}
+            {:else}
             {#each messageForm(DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].message, loadPages) as chat, i}
                 {#if chat.role === 'char'}
                     {#if DBState.db.characters[$selectedCharID].type !== 'group'}
@@ -683,6 +693,7 @@
                     />
                 {/if}
             {/each}
+
             {#if DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].message.length <= loadPages}
                 {#if DBState.db.characters[$selectedCharID].type !== 'group' }
                     <Chat
@@ -736,6 +747,8 @@
                 {/if}
             {/if}
 
+            {/if}
+
             {#if openMenu}
                 <div class="absolute right-2 bottom-16 p-5 bg-darkbg flex flex-col gap-3 text-textcolor rounded-md" onclick={(e) => {
                     e.stopPropagation()

src/lib/SideBars/SideChatList.svelte

@@ -20,7 +20,6 @@
     import { getModuleToggles } from "src/ts/process/modules";
     import { language } from "src/lang";
   import Toggles from "./Toggles.svelte";
-    import { preLoadChat } from "src/ts/process/coldstorage.svelte";
 
     interface Props {
         chara: character|groupChat;
@@ -68,6 +67,7 @@
                         }
                     })
 
+                    chara.chatPage = newChats.indexOf(chara.chats[currentChatPage])
                     chara.chats = newChats
 
                     try {
@@ -76,10 +76,6 @@
                     sorted += 1
                     await sleep(1)
                     createStb()
-
-                    await preLoadChat($selectedCharID, newChats.indexOf(chara.chats[currentChatPage]))
-                    chara.chatPage = newChats.indexOf(chara.chats[currentChatPage])
-
                 },
                 ...sortableOptions
             }))
@@ -111,17 +107,14 @@
                 })
                 
                 chara.chatFolders = newFolders
+                chara.chatPage = newChats.indexOf(chara.chats[currentChatPage])
                 chara.chats = newChats
-
                 try {
                     folderStb.destroy()
                 } catch (e) {}
                 sorted += 1
                 await sleep(1)
                 createStb()
-
-                await preLoadChat($selectedCharID, newChats.indexOf(chara.chats[currentChatPage]))
-                chara.chatPage = newChats.indexOf(chara.chats[currentChatPage])
             },
             ...sortableOptions
         })
@@ -251,9 +244,8 @@
                     <div></div>
                     {:else}
                     {#each chara.chats.filter(chat => chat.folderId == chara.chatFolders[i].id) as chat}
-                    <button data-risu-chat-idx={chara.chats.indexOf(chat)} onclick={async () => {
+                    <button data-risu-chat-idx={chara.chats.indexOf(chat)} onclick={() => {
                         if(!editMode){
-                            await preLoadChat($selectedCharID, chara.chats.indexOf(chat))
                             chara.chatPage = chara.chats.indexOf(chat)
                             $ReloadGUIPointer += 1
                         }
@@ -275,7 +267,6 @@
                                         const newChat = safeStructuredClone($state.snapshot(chara.chats[chara.chats.indexOf(chat)]))
                                         newChat.name = `Copy of ${newChat.name}`
                                         chara.chats.unshift(newChat)
-                                        await preLoadChat($selectedCharID, 0)
                                         chara.chatPage = 0
                                         chara.chats = chara.chats
                                         break
@@ -302,7 +293,6 @@
                                         break
                                     }
                                     case 2:{
-                                        await preLoadChat($selectedCharID, chara.chats.indexOf(chat))
                                         chara.chatPage = chara.chats.indexOf(chat)
                                         createMultiuserRoom()
                                     }
@@ -325,7 +315,6 @@
                                 }
                             }} class="text-textcolor2 hover:text-green-500 mr-1 cursor-pointer" onclick={async (e) => {
                                 e.stopPropagation()
-                                await preLoadChat($selectedCharID, chara.chats.indexOf(chat))
                                 exportChat(chara.chats.indexOf(chat))
                             }}>
                                 <DownloadIcon size={18}/>
@@ -342,7 +331,6 @@
                                 }
                                 const d = await alertConfirm(`${language.removeConfirm}${chat.name}`)
                                 if(d){
-                                    await preLoadChat($selectedCharID, 0)
                                     chara.chatPage = 0
                                     $ReloadGUIPointer += 1
                                     let chats = chara.chats
@@ -364,9 +352,8 @@
         <div class="risu-chat flex flex-col">
             {#each chara.chats as chat, i}
             {#if chat.folderId == null}
-            <button data-risu-chat-idx={i} onclick={async () => {
+            <button data-risu-chat-idx={i} onclick={() => {
                 if(!editMode){
-                    await preLoadChat($selectedCharID, i)
                     chara.chatPage = i
                     $ReloadGUIPointer += 1
                 }
@@ -390,7 +377,6 @@
                                 const newChat = safeStructuredClone($state.snapshot(chara.chats[i]))
                                 newChat.name = `Copy of ${newChat.name}`
                                 chara.chats.unshift(newChat)
-                                await preLoadChat($selectedCharID, 0)
                                 chara.chatPage = 0
                                 chara.chats = chara.chats
                                 break
@@ -418,7 +404,6 @@
                                 break
                             }
                             case 2:{
-                                await preLoadChat($selectedCharID, i)
                                 chara.chatPage = i
                                 createMultiuserRoom()
                             }
@@ -457,7 +442,6 @@
                         }
                         const d = await alertConfirm(`${language.removeConfirm}${chat.name}`)
                         if(d){
-                            await preLoadChat($selectedCharID, 0)
                             chara.chatPage = 0
                             $ReloadGUIPointer += 1
                             let chats = chara.chats

src/ts/process/coldstorage.svelte.ts

@@ -12,7 +12,7 @@ import { DBState } from "../stores.svelte"
 import { hubURL } from "../characterCards"
 import type { AccountStorage } from "../storage/accountStorage"
 
-const coldStorageHeader = '\uEF01COLDSTORAGE\uEF01'
+export const coldStorageHeader = '\uEF01COLDSTORAGE\uEF01'
 
 async function decompress(data:Uint8Array) {
     const fflate = await import('fflate')