Add Saving Icon

src/App.svelte

@@ -10,8 +10,7 @@
     import Settings from './lib/Setting/Settings.svelte';
     import { showRealmInfoStore, importCharacterProcess } from './ts/characterCards';
     import RealmFrame from './lib/UI/Realm/RealmFrame.svelte';
-    import { AccountWarning } from './ts/storage/accountStorage';
+    import SavePopupIconComp from './lib/Others/SavePopupIcon.svelte';
-    import AccountWarningComp from './lib/Others/AccountWarningComp.svelte';
     import Botpreset from './lib/Setting/botpreset.svelte';
     import ListedPersona from './lib/Setting/listedPersona.svelte';
     import MobileHeader from './lib/Mobile/MobileHeader.svelte';
@@ -87,13 +86,11 @@
     {#if $ShowRealmFrameStore}
         <RealmFrame />
     {/if}
-    {#if $AccountWarning}
-        <AccountWarningComp />
-    {/if}
     {#if $openPresetList}
         <Botpreset close={() => {$openPresetList = false}} />
     {/if}
     {#if $openPersonaList}
         <ListedPersona close={() => {$openPersonaList = false}} />
     {/if}
+    <SavePopupIconComp />
 </main>

src/lang/en.ts

@@ -833,4 +833,5 @@ export const languageEnglish = {
     noWebGPU: "Your Browser or OS doesn't support WebGPU. this will slow down the performance significantly.",
     menuSideBar: "Menu Side Bar",
     home: "Home",
+    showSavingIcon: "Show Saving Icon",
 }

src/lib/Others/AccountWarningComp.svelte

@@ -1,12 +0,0 @@
-<script lang="ts">
-  import { AlertOctagon } from "lucide-svelte";
-  import { alertMd } from "src/ts/alert";
-  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" onclick={() =>{
-    alertMd($AccountWarning)
-    $AccountWarning = ''
-}}>
-    <AlertOctagon size={24} />
-</button>

src/lib/Others/SavePopupIcon.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+  import { AlertOctagon, SaveIcon } from "lucide-svelte";
+  import { alertMd } from "src/ts/alert";
+  import { saving } from "src/ts/globalApi.svelte";
+  import { AccountWarning } from "src/ts/storage/accountStorage";
+  import { DBState } from "src/ts/stores.svelte";
+
+</script>
+
+{#if DBState?.db?.showSavingIcon && saving.state}
+  <div
+    class="absolute top-3 right-3 z-10 text-white p-2 rounded bg-gradient-to-br from-blue-500 to-purple-800 saving-animation pointer-events-none opacity-15"
+  >
+    <SaveIcon size={24} />
+  </div>
+{:else if $AccountWarning}
+  <button class="absolute top-3 right-3 z-10 text-white bg-red-800 hover:bg-red-600 p-2 rounded" onclick={() =>{
+      alertMd($AccountWarning)
+      $AccountWarning = ''
+  }}>
+      <AlertOctagon size={24} />
+  </button>
+{/if}
+
+<style>
+  .saving-animation {
+    animation: saving-anime 1s infinite;
+    background-size: 200% auto;
+  }
+
+  @keyframes saving-anime {
+    0% {
+      background-position: 0 0;
+    }
+    50% {
+      background-position: 100% 100%;
+    }
+    100% {
+      background-position: 0 0;
+    }
+  }
+</style>

src/lib/Setting/Pages/DisplaySettings.svelte

@@ -202,7 +202,7 @@
     <SliderInput  min={50} max={200} bind:value={DBState.db.zoomsize} marginBottom/>
 
     <span class="text-textcolor">{language.lineHeight}</span>
-    <SliderInput  min={0.5} max={3} step={0.05} bind:value={DBState.db.lineHeight} marginBottom/>
+    <SliderInput  min={0.5} max={3} step={0.05} fixed={2} bind:value={DBState.db.lineHeight} marginBottom/>
 
     <span class="text-textcolor">{language.iconSize}</span>
     <SliderInput min={50} max={200} bind:value={DBState.db.iconsize} marginBottom/>
@@ -300,6 +300,10 @@
         <Check bind:check={DBState.db.textScreenRounded} name={language.textScreenRound}/>
     </div>
 
+    <div class="flex items-center mt-2">
+        <Check bind:check={DBState.db.showSavingIcon} name={language.showSavingIcon}/>
+    </div>
+
     {#if DBState.db.textScreenBorder}
         <div class="flex items-center mt-2">
             <Check check={true} onChange={() => {

src/ts/globalApi.svelte.ts

@@ -302,6 +302,9 @@ export async function loadAsset(id:string){
 }
 
 let lastSave = ''
+export let saving = $state({
+    state: false
+})
 
 /**
  * Saves the current state of the database.
@@ -335,19 +338,25 @@ export async function saveDb(){
     $effect.root(() => {
 
         let selIdState = $state(0)
+        let oldSaveHash = ''
 
         selectedCharID.subscribe((v) => {
             selIdState = v
         })
 
         $effect(() => {
-            $state.snapshot(DBState?.db?.characters?.[selIdState])
+            let newSaveHash = ''
+            newSaveHash += JSON.stringify(DBState?.db?.characters?.[selIdState])
             for(const key in DBState.db){
                 if(key !== 'characters'){
-                    $state.snapshot(DBState.db[key])
+                    newSaveHash += (DBState.db[key])
                 }
             }
-            changed = true
+
+            if(newSaveHash !== oldSaveHash){
+                changed = true
+                oldSaveHash = newSaveHash
+            }
         })
     })
 
@@ -356,10 +365,11 @@ export async function saveDb(){
     await sleep(1000)
     while(true){
         if(!changed){
-            await sleep(1000)
+            await sleep(500)
             continue
         }
 
+        saving.state = true
         changed = false
 
         try {
@@ -430,6 +440,8 @@ export async function saveDb(){
                 console.error(error)
             }
         }
+
+        saving.state = false
     }
 }
 

src/ts/process/request.ts

@@ -1392,60 +1392,68 @@ async function requestOoba(arg:RequestDataArgumentExtended):Promise<requestDataR
 }
 
 async function requestPlugin(arg:RequestDataArgumentExtended):Promise<requestDataResponse> {
-    const formated = arg.formated
     const db = getDatabase()
-    const maxTokens = arg.maxTokens
+    try {
-    const bias = arg.biasString
+        const formated = arg.formated
-    const v2Function = pluginV2.providers.get(db.currentPluginProvider)
+        const maxTokens = arg.maxTokens
-
+        const bias = arg.biasString
-    const d = v2Function ? (await v2Function(applyParameters({
+        const v2Function = pluginV2.providers.get(db.currentPluginProvider)
-        prompt_chat: formated,
+    
-        mode: arg.mode,
+        const d = v2Function ? (await v2Function(applyParameters({
-        bias: []
+            prompt_chat: formated,
-    }, [
+            mode: arg.mode,
-        'frequency_penalty','min_p','presence_penalty','repetition_penalty','top_k','top_p','temperature'
+            bias: []
-    ], {}, arg.mode) as any)) : await pluginProcess({
+        }, [
-        bias: bias,
+            'frequency_penalty','min_p','presence_penalty','repetition_penalty','top_k','top_p','temperature'
-        prompt_chat: formated,
+        ], {}, arg.mode) as any)) : await pluginProcess({
-        temperature: (db.temperature / 100),
+            bias: bias,
-        max_tokens: maxTokens,
+            prompt_chat: formated,
-        presence_penalty: (db.PresensePenalty / 100),
+            temperature: (db.temperature / 100),
-        frequency_penalty: (db.frequencyPenalty / 100)
+            max_tokens: maxTokens,
-    })
+            presence_penalty: (db.PresensePenalty / 100),
-
+            frequency_penalty: (db.frequencyPenalty / 100)
-    if(!d){
-        return {
-            type: 'fail',
-            result: (language.errors.unknownModel)
-        }
-    }
-    else if(!d.success){
-        return {
-            type: 'fail',
-            result: d.content instanceof ReadableStream ? await (new Response(d.content)).text() : d.content
-        }
-    }
-    else if(d.content instanceof ReadableStream){
-
-        let fullText = ''
-        const piper = new TransformStream<string, StreamResponseChunk>(  {
-            transform(chunk, control) {
-                fullText += chunk
-                control.enqueue({
-                    "0": fullText
-                })
-            }
         })
-
+    
-        return {
+        if(!d){
-            type: 'streaming',
+            return {
-            result: d.content.pipeThrough(piper)
+                type: 'fail',
+                result: (language.errors.unknownModel)
+            }
         }
-    }
+        else if(!d.success){
-    else{
+            return {
+                type: 'fail',
+                result: d.content instanceof ReadableStream ? await (new Response(d.content)).text() : d.content
+            }
+        }
+        else if(d.content instanceof ReadableStream){
+    
+            let fullText = ''
+            const piper = new TransformStream<string, StreamResponseChunk>(  {
+                transform(chunk, control) {
+                    fullText += chunk
+                    control.enqueue({
+                        "0": fullText
+                    })
+                }
+            })
+    
+            return {
+                type: 'streaming',
+                result: d.content.pipeThrough(piper)
+            }
+        }
+        else{
+            return {
+                type: 'success',
+                result: d.content
+            }
+        }   
+    } catch (error) {
+        console.error(error)
         return {
-            type: 'success',
+            type: 'fail',
-            result: d.content
+            result: `Plugin Error from ${db.currentPluginProvider}: ` + JSON.stringify(error)
         }
     }
 }

src/ts/storage/database.svelte.ts

@@ -462,6 +462,7 @@ export function setDatabase(data:Database){
     data.customFlags ??= []
     data.enableCustomFlags ??= false
     data.assetMaxDifference ??= 4
+    data.showSavingIcon ??= false
     changeLanguage(data.language)
     setDatabaseLite(data)
 }
@@ -858,6 +859,7 @@ export interface Database{
     assetMaxDifference:number
     menuSideBar:boolean
     pluginV2: RisuPlugin[]
+    showSavingIcon:boolean
 }
 
 interface SeparateParameters{