From 8e1d014f6ea1d3b8e017c150f88219d1ad6dfef4 Mon Sep 17 00:00:00 2001
From: kwaroran <amasio1234@proton.me>
Date: Tue, 22 Oct 2024 22:06:20 +0900
Subject: [PATCH] Fix svelte 4 components to fit into requirements

---
 src/lib/ChatScreens/Chat.svelte                |  8 ++++----
 src/lib/ChatScreens/DefaultChatScreen.svelte   |  6 +++---
 src/lib/Others/ChatList.svelte                 |  8 ++++----
 src/lib/Setting/Pages/BotSettings.svelte       |  4 ++++
 src/lib/Setting/Pages/Module/ModuleMenu.svelte |  2 ++
 src/lib/Setting/botpreset.svelte               | 12 ++++++------
 src/lib/Setting/lorepreset.svelte              |  4 ++--
 src/lib/SideBars/CharConfig.svelte             |  8 ++++++++
 src/lib/SideBars/SideChatList.svelte           | 16 ++++++++--------
 9 files changed, 41 insertions(+), 27 deletions(-)

diff --git a/src/lib/ChatScreens/Chat.svelte b/src/lib/ChatScreens/Chat.svelte
index e417710f..e49f617e 100644
--- a/src/lib/ChatScreens/Chat.svelte
+++ b/src/lib/ChatScreens/Chat.svelte
@@ -24,7 +24,7 @@
     export let img:string|Promise<string> = ''
     export let idx = -1
     export let rerollIcon = false
-    export let MessageGenerationInfo:MessageGenerationInfo|null = null
+    export let messageGenerationInfo:MessageGenerationInfo|null = null
     export let onReroll = () => {}
     export let unReroll = () => {}
     export let character:simpleCharacterArgument|string|null = null
@@ -264,20 +264,20 @@
                     {/if}
                 </div>
             </div>
-            {#if MessageGenerationInfo && $DataBase.requestInfoInsideChat}
+            {#if messageGenerationInfo && $DataBase.requestInfoInsideChat}
                 <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={() => {
                                 alertRequestData({
-                                    genInfo: MessageGenerationInfo,
+                                    genInfo: messageGenerationInfo,
                                     idx: idx,
                                 })
                             }}
                     >
                         <BotIcon size={20} />
                         <span class="ml-1">
-                            {capitalize(getModelShortName(MessageGenerationInfo.model))}
+                            {capitalize(getModelShortName(messageGenerationInfo.model))}
                         </span>
                     </button>
                 </div>
diff --git a/src/lib/ChatScreens/DefaultChatScreen.svelte b/src/lib/ChatScreens/DefaultChatScreen.svelte
index 618948ad..5adac938 100644
--- a/src/lib/ChatScreens/DefaultChatScreen.svelte
+++ b/src/lib/ChatScreens/DefaultChatScreen.svelte
@@ -566,7 +566,7 @@
                             isLastMemory={$CurrentChat.lastMemory === (chat.chatId ?? 'none') && $CurrentShowMemoryLimit}
                             character={$CurrentSimpleCharacter}
                             largePortrait={$CurrentCharacter.largePortrait}
-                            MessageGenerationInfo={chat.generationInfo}
+                            messageGenerationInfo={chat.generationInfo}
                         />
                     {:else}
                         <Chat
@@ -580,7 +580,7 @@
                             isLastMemory={$CurrentChat.lastMemory === (chat.chatId ?? 'none') && $CurrentShowMemoryLimit}
                             character={chat.saying}
                             largePortrait={findCharacterbyId(chat.saying).largePortrait}
-                            MessageGenerationInfo={chat.generationInfo}
+                            messageGenerationInfo={chat.generationInfo}
                         />
                     {/if}
                 {:else}
@@ -592,7 +592,7 @@
                         img={$ConnectionOpenStore ? '' : getCharImage($CurrentUserIcon, 'css')}
                         isLastMemory={$CurrentChat.lastMemory === (chat.chatId ?? 'none') && $CurrentShowMemoryLimit}
                         largePortrait={$UserIconProtrait}
-                        MessageGenerationInfo={chat.generationInfo}
+                        messageGenerationInfo={chat.generationInfo}
                     />
                 {/if}
             {/each}
diff --git a/src/lib/Others/ChatList.svelte b/src/lib/Others/ChatList.svelte
index 0a6632be..d0e234ce 100644
--- a/src/lib/Others/ChatList.svelte
+++ b/src/lib/Others/ChatList.svelte
@@ -35,13 +35,13 @@
                     <span>{chat.name}</span>
                 {/if}
                 <div class="flex-grow flex justify-end">
-                    <button 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" on:click={async (e) => {
                         e.stopPropagation()
                         exportChat(i)
                     }}>
                         <DownloadIcon size={18}/>
-                    </button>
-                    <button class="text-textcolor2 hover:text-green-500 cursor-pointer" on:click={async (e) => {
+                    </div>
+                    <div class="text-textcolor2 hover:text-green-500 cursor-pointer" on:click={async (e) => {
                         e.stopPropagation()
                         if($CurrentCharacter.chats.length === 1){
                             alertError(language.errors.onlyOneChat)
@@ -56,7 +56,7 @@
                         }
                     }}>
                         <TrashIcon size={18}/>
-                    </button>
+                    </div>
                 </div>
             </button>
         {/each}
diff --git a/src/lib/Setting/Pages/BotSettings.svelte b/src/lib/Setting/Pages/BotSettings.svelte
index ac569e72..f2f9002f 100644
--- a/src/lib/Setting/Pages/BotSettings.svelte
+++ b/src/lib/Setting/Pages/BotSettings.svelte
@@ -475,6 +475,7 @@
 {#if submenu === 3 || submenu === -1}
     <Arcodion styled name="Bias " help="bias">
         <table class="contain w-full max-w-full tabler">
+            <tbody>
             <tr>
                 <th class="font-medium">Bias</th>
                 <th class="font-medium">{language.value}</th>
@@ -508,6 +509,7 @@
                     </td>
                 </tr>
             {/each}
+            </tbody>
         </table>
         <div class="text-textcolor2 mt-2 flex items-center gap-2">
             <button class="font-medium cursor-pointer hover:text-textcolor gap-2" on:click={() => {
@@ -527,6 +529,7 @@
     {#if $DataBase.aiModel === 'reverse_proxy'}
     <Arcodion styled name="{language.additionalParams} " help="additionalParams">
         <table class="contain w-full max-w-full tabler">
+            <tbody>
             <tr>
                 <th class="font-medium">{language.key}</th>
                 <th class="font-medium">{language.value}</th>
@@ -560,6 +563,7 @@
                     </td>
                 </tr>
             {/each}
+            </tbody>
         </table>
     </Arcodion>
     {/if}
diff --git a/src/lib/Setting/Pages/Module/ModuleMenu.svelte b/src/lib/Setting/Pages/Module/ModuleMenu.svelte
index d107509f..2ced0bf6 100644
--- a/src/lib/Setting/Pages/Module/ModuleMenu.svelte
+++ b/src/lib/Setting/Pages/Module/ModuleMenu.svelte
@@ -167,6 +167,7 @@
 {#if submenu === 5 && (Array.isArray(currentModule.assets))}
     <div class="w-full max-w-full border border-selected rounded-md p-2">
         <table class="contain w-full max-w-full tabler mt-2">
+            <tbody>
             <tr>
                 <th class="font-medium">{language.value}</th>
                 <th class="font-medium cursor-pointer w-10">
@@ -222,6 +223,7 @@
                     </tr>
                 {/each}
             {/if}
+            </tbody>
         </table>
     </div>
 {/if}
diff --git a/src/lib/Setting/botpreset.svelte b/src/lib/Setting/botpreset.svelte
index 086f8096..5902486c 100644
--- a/src/lib/Setting/botpreset.svelte
+++ b/src/lib/Setting/botpreset.svelte
@@ -38,13 +38,13 @@
                     <span>{presets.name}</span>
                 {/if}
                 <div class="flex-grow flex justify-end">
-                    <button class="text-textcolor2 hover:text-green-500 cursor-pointer mr-2" on:click={(e) => {
+                    <div class="text-textcolor2 hover:text-green-500 cursor-pointer mr-2" on:click={(e) => {
                         e.stopPropagation()
                         copyPreset(i)
                     }}>
                         <CopyIcon size={18}/>
-                    </button>
-                    <button class="text-textcolor2 hover:text-green-500 cursor-pointer mr-2" on:click={async (e) => {
+                    </div>
+                    <div class="text-textcolor2 hover:text-green-500 cursor-pointer mr-2" on:click={async (e) => {
                         e.stopPropagation()
                         const data = await alertCardExport('preset')
                         console.log(data.type)
@@ -57,8 +57,8 @@
                     }}>
 
                         <Share2Icon size={18} />
-                    </button>
-                    <button class="text-textcolor2 hover:text-green-500 cursor-pointer" on:click={async (e) => {
+                    </div>
+                    <div class="text-textcolor2 hover:text-green-500 cursor-pointer" on:click={async (e) => {
                         e.stopPropagation()
                         if($DataBase.botPresets.length === 1){
                             alertError(language.errors.onlyOneChat)
@@ -74,7 +74,7 @@
                         }
                     }}>
                         <TrashIcon size={18}/>
-                    </button>
+                    </div>
                 </div>
             </button>
         {/each}
diff --git a/src/lib/Setting/lorepreset.svelte b/src/lib/Setting/lorepreset.svelte
index f6fe31d1..0f9c42a0 100644
--- a/src/lib/Setting/lorepreset.svelte
+++ b/src/lib/Setting/lorepreset.svelte
@@ -30,7 +30,7 @@
                     <span>{lore.name}</span>
                 {/if}
                 <div class="flex-grow flex justify-end">
-                    <button class="text-textcolor2 hover:text-green-500 cursor-pointer" on:click={async (e) => {
+                    <div class="text-textcolor2 hover:text-green-500 cursor-pointer" on:click={async (e) => {
                         e.stopPropagation()
                         if($DataBase.loreBook.length === 1){
                             return
@@ -44,7 +44,7 @@
                         }
                     }}>
                         <TrashIcon size={18}/>
-                    </button>
+                    </div>
                 </div>
             </button>
         {/each}
diff --git a/src/lib/SideBars/CharConfig.svelte b/src/lib/SideBars/CharConfig.svelte
index dd754bce..a7bb4ef5 100644
--- a/src/lib/SideBars/CharConfig.svelte
+++ b/src/lib/SideBars/CharConfig.svelte
@@ -530,6 +530,7 @@
         <div class="w-full max-w-full border border-selected p-2 rounded-md">
 
             <table class="w-full max-w-full tabler">
+                <tbody>
                 <tr>
                     <th class="font-medium w-1/3">{language.image}</th>
                     <th class="font-medium w-1/2">{language.emotion}</th>
@@ -556,6 +557,7 @@
                         </tr>
                     {/each}
                 {/if}
+                </tbody>
             </table>
 
         </div>
@@ -618,6 +620,7 @@
         <div class="w-full max-w-full border border-selected rounded-md p-2">
 
         <table class="w-full max-w-full tabler mt-2">
+            <tbody>
             <tr>
                 <th class="font-medium w-1/2">Bias</th>
                 <th class="font-medium w-1/3">{language.value}</th>
@@ -655,6 +658,7 @@
                     </td>
                 </tr>
             {/each}
+            </tbody>
             
         </table>
 
@@ -1015,6 +1019,7 @@
         <span class="text-textcolor mt-2">{language.altGreet}</span>
         <div class="w-full max-w-full border border-selected rounded-md p-2">
             <table class="contain w-full max-w-full tabler mt-2">
+                <tbody>
                 <tr>
                     <th class="font-medium">{language.value}</th>
                     <th class="font-medium cursor-pointer w-10">
@@ -1053,12 +1058,14 @@
                         </th>
                     </tr>
                 {/each}
+            </tbody>
             </table>
         </div>
       
         <Arcodion styled name={language.additionalAssets} help="additionalAssets">
             <div class="w-full max-w-full border border-selected rounded-md p-2">
                 <table class="contain w-full max-w-full tabler mt-2">
+                <tbody>
                     <tr>
                         <th class="font-medium">{language.value}</th>
                         <th class="font-medium cursor-pointer w-10">
@@ -1119,6 +1126,7 @@
                             </tr>
                         {/each}
                     {/if}
+                </tbody>
                 </table>
             </div>
         </Arcodion>
diff --git a/src/lib/SideBars/SideChatList.svelte b/src/lib/SideBars/SideChatList.svelte
index 6287974e..289dc99e 100644
--- a/src/lib/SideBars/SideChatList.svelte
+++ b/src/lib/SideBars/SideChatList.svelte
@@ -100,7 +100,7 @@
                 <span>{chat.name}</span>
             {/if}
             <div class="flex-grow flex justify-end">
-                <button class="text-textcolor2 hover:text-green-500 mr-1 cursor-pointer" on:click={async () => {
+                <div class="text-textcolor2 hover:text-green-500 mr-1 cursor-pointer" on:click={async () => {
                     const option = await alertChatOptions()
                     switch(option){
                         case 0:{
@@ -140,19 +140,19 @@
                     }
                 }}>
                     <MenuIcon size={18}/>
-                </button>
-                <button class="text-textcolor2 hover:text-green-500 mr-1 cursor-pointer" on:click={() => {
+                </div>
+                <div class="text-textcolor2 hover:text-green-500 mr-1 cursor-pointer" on:click={() => {
                     editMode = !editMode
                 }}>
                     <PencilIcon size={18}/>
-                </button>
-                <button class="text-textcolor2 hover:text-green-500 mr-1 cursor-pointer" on:click={async (e) => {
+                </div>
+                <div class="text-textcolor2 hover:text-green-500 mr-1 cursor-pointer" on:click={async (e) => {
                     e.stopPropagation()
                     exportChat(i)
                 }}>
                     <DownloadIcon size={18}/>
-                </button>
-                <button class="text-textcolor2 hover:text-green-500 cursor-pointer" on:click={async (e) => {
+                </div>
+                <div class="text-textcolor2 hover:text-green-500 cursor-pointer" on:click={async (e) => {
                     e.stopPropagation()
                     if(chara.chats.length === 1){
                         alertError(language.errors.onlyOneChat)
@@ -168,7 +168,7 @@
                     }
                 }}>
                     <TrashIcon size={18}/>
-                </button>
+                </div>
             </div>
         </button>
         {/each}