From 1b2ea2b15b6532ceaff8c31838c7b9e2b2fe7e4d Mon Sep 17 00:00:00 2001
From: Bo26fhmC5M <88071760+Bo26fhmC5M@users.noreply.github.com>
Date: Sat, 18 Jan 2025 14:16:50 +0900
Subject: [PATCH 01/15] fix: handle null case for firstMessage in HypaV3 modal

---
 src/lib/Others/HypaV3Modal.svelte | 53 ++++++++++++++++++-------------
 1 file changed, 31 insertions(+), 22 deletions(-)

diff --git a/src/lib/Others/HypaV3Modal.svelte b/src/lib/Others/HypaV3Modal.svelte
index 3ac09afd..8cf7156c 100644
--- a/src/lib/Others/HypaV3Modal.svelte
+++ b/src/lib/Others/HypaV3Modal.svelte
@@ -62,21 +62,31 @@
     );
   }
 
+  function getFirstMessage(): string | null {
+    const char = DBState.db.characters[$selectedCharID];
+    const chat = char.chats[DBState.db.characters[$selectedCharID].chatPage];
+
+    return chat.fmIndex === -1
+      ? char.firstMessage
+      : char.alternateGreetings?.[chat.fmIndex]
+        ? char.alternateGreetings[chat.fmIndex]
+        : null;
+  }
+
   function getMessageFromChatMemo(chatMemo: string | null): Message | null {
     const char = DBState.db.characters[$selectedCharID];
     const chat = char.chats[DBState.db.characters[$selectedCharID].chatPage];
-    const firstMessage =
-      chat.fmIndex === -1
-        ? char.firstMessage
-        : char.alternateGreetings?.[chat.fmIndex ?? 0];
+    const firstMessage = getFirstMessage();
 
-    const targetMessage = (
-      chatMemo == null
-        ? { role: "char", data: firstMessage }
-        : chat.message.find((m) => m.chatId === chatMemo)
-    ) as Message;
+    if (!firstMessage) {
+      return null;
+    }
 
-    return targetMessage;
+    if (chatMemo == null) {
+      return { role: "char", data: firstMessage };
+    }
+
+    return chat.message.find((m) => m.chatId === chatMemo) || null;
   }
 
   async function toggleTranslate(
@@ -108,16 +118,11 @@
     const summary = hypaV3DataState.summaries[summaryIndex];
 
     for (const chatMemo of summary.chatMemos) {
-      if (typeof chatMemo === "string") {
-        const char = DBState.db.characters[$selectedCharID];
-        const chat =
-          char.chats[DBState.db.characters[$selectedCharID].chatPage];
-
-        if (!chat.message.find((m) => m.chatId === chatMemo)) {
-          return false;
-        }
+      if (!getMessageFromChatMemo(chatMemo)) {
+        return false;
       }
     }
+
     return true;
   }
 
@@ -235,11 +240,13 @@
   function getNextMessageToSummarize(): Message | null {
     const char = DBState.db.characters[$selectedCharID];
     const chat = char.chats[DBState.db.characters[$selectedCharID].chatPage];
-    const firstMessage =
-      chat.fmIndex === -1
-        ? char.firstMessage
-        : char.alternateGreetings?.[chat.fmIndex ?? 0];
+    const firstMessage = getFirstMessage();
 
+    if (!firstMessage) {
+      return null;
+    }
+
+    // Summaries exist
     if (hypaV3DataState.summaries.length > 0) {
       const lastSummary = hypaV3DataState.summaries.at(-1);
       const lastMessageIndex = chat.message.findIndex(
@@ -255,6 +262,7 @@
       }
     }
 
+    // No summaries
     if (firstMessage?.trim() === "") {
       if (chat.message.length > 0) {
         return chat.message[0];
@@ -263,6 +271,7 @@
       return null;
     }
 
+    // will summarize first message
     return { role: "char", chatId: "first message", data: firstMessage };
   }
 

From 0e86d15c6258e589a82d4173f858c3166c4b1036 Mon Sep 17 00:00:00 2001
From: Bo26fhmC5M <88071760+Bo26fhmC5M@users.noreply.github.com>
Date: Sun, 19 Jan 2025 09:30:54 +0900
Subject: [PATCH 02/15] fix: resolve mobile dual-action translation in HypaV3
 modal

---
 src/lib/Others/HypaV3Modal.svelte | 81 ++++++++++++++++---------------
 1 file changed, 43 insertions(+), 38 deletions(-)

diff --git a/src/lib/Others/HypaV3Modal.svelte b/src/lib/Others/HypaV3Modal.svelte
index 8cf7156c..a1e1b6f8 100644
--- a/src/lib/Others/HypaV3Modal.svelte
+++ b/src/lib/Others/HypaV3Modal.svelte
@@ -292,54 +292,59 @@
   };
 
   function handleDualAction(node: HTMLElement, params: DualActionParams = {}) {
-    const state = {
-      lastTap: 0,
-      tapTimeout: null as any,
-    };
-
     const DOUBLE_TAP_DELAY = 300;
 
-    function handleInteraction(event: Event) {
-      if ("ontouchend" in window) {
-        // Mobile environment
-        const currentTime = new Date().getTime();
-        const tapLength = currentTime - state.lastTap;
+    const state = {
+      lastTap: 0,
+      tapTimeout: null,
+    };
 
-        if (tapLength < DOUBLE_TAP_DELAY && tapLength > 0) {
-          // Double tap detected
-          event.preventDefault();
-          clearTimeout(state.tapTimeout); // Cancel the first tap timeout
-          params.onAlternativeAction?.();
-          state.lastTap = 0; // Reset state
-        } else {
-          // First tap
-          state.lastTap = currentTime;
+    const handleTouch = (event: TouchEvent) => {
+      const currentTime = new Date().getTime();
+      const tapLength = currentTime - state.lastTap;
 
-          // Delayed single tap execution
-          state.tapTimeout = setTimeout(() => {
-            if (state.lastTap === currentTime) {
-              // If no double tap occurred
-              params.onMainAction?.();
-            }
-          }, DOUBLE_TAP_DELAY);
-        }
+      if (tapLength < DOUBLE_TAP_DELAY && tapLength > 0) {
+        // Double tap detected
+        event.preventDefault();
+        clearTimeout(state.tapTimeout); // Cancel the first tap timeout
+        params.onAlternativeAction?.();
+        state.lastTap = 0; // Reset state
       } else {
-        // Desktop environment
-        if ((event as MouseEvent).shiftKey) {
-          params.onAlternativeAction?.();
-        } else {
-          params.onMainAction?.();
-        }
+        state.lastTap = currentTime; // First tap
+        // Delayed single tap execution
+        state.tapTimeout = setTimeout(() => {
+          if (state.lastTap === currentTime) {
+            // If no double tap occurred
+            params.onMainAction?.();
+          }
+        }, DOUBLE_TAP_DELAY);
       }
-    }
+    };
 
-    node.addEventListener("click", handleInteraction);
-    node.addEventListener("touchend", handleInteraction);
+    const handleClick = (event: MouseEvent) => {
+      if (event.shiftKey) {
+        params.onAlternativeAction?.();
+      } else {
+        params.onMainAction?.();
+``      }
+    };
+
+    if ("ontouchend" in window) {
+      // Mobile environment
+      node.addEventListener("touchend", handleTouch);
+    } else {
+      // Desktop environment
+      node.addEventListener("click", handleClick);
+    }
 
     return {
       destroy() {
-        node.removeEventListener("click", handleInteraction);
-        node.removeEventListener("touchend", handleInteraction);
+        if ("ontouchend" in window) {
+          node.removeEventListener("touchend", handleTouch);
+        } else {
+          node.removeEventListener("click", handleClick);
+        }
+
         clearTimeout(state.tapTimeout); // Cleanup timeout
       },
       update(newParams: DualActionParams) {

From ec2dd091aaa83700baa3a08cbbf9e2e7c86de5aa Mon Sep 17 00:00:00 2001
From: Bo26fhmC5M <88071760+Bo26fhmC5M@users.noreply.github.com>
Date: Sun, 19 Jan 2025 11:30:50 +0900
Subject: [PATCH 03/15] feat: add auto-scroll to translations in HypaV3 modal

---
 src/lib/Others/HypaV3Modal.svelte | 121 ++++++++++++++++++++++--------
 1 file changed, 89 insertions(+), 32 deletions(-)

diff --git a/src/lib/Others/HypaV3Modal.svelte b/src/lib/Others/HypaV3Modal.svelte
index a1e1b6f8..83d39cba 100644
--- a/src/lib/Others/HypaV3Modal.svelte
+++ b/src/lib/Others/HypaV3Modal.svelte
@@ -7,6 +7,7 @@
     RefreshCw,
     CheckIcon,
   } from "lucide-svelte";
+  import { tick } from "svelte";
   import TextAreaInput from "../UI/GUI/TextAreaInput.svelte";
   import { alertConfirm, showHypaV3Alert } from "../../ts/alert";
   import { DBState, alertStore, selectedCharID } from "src/ts/stores.svelte";
@@ -18,17 +19,20 @@
   interface SummaryUI {
     isTranslating: boolean;
     translation: string | null;
+    translationRef: HTMLDivElement;
     isRerolling: boolean;
     rerolledText: string | null;
     isRerolledTranslating: boolean;
     rerolledTranslation: string | null;
+    rerolledTranslationRef: HTMLDivElement;
   }
 
   interface ExpandedMessageUI {
     summaryIndex: number;
     selectedChatMemo: string;
     isTranslating: boolean;
-    translation?: string | null;
+    translation: string | null;
+    translationRef: HTMLDivElement;
   }
 
   const hypaV3DataState = $derived(
@@ -44,10 +48,12 @@
     summaryUIStates = hypaV3DataState.summaries.map(() => ({
       isTranslating: false,
       translation: null,
+      translationRef: null,
       isRerolling: false,
       rerolledText: null,
       isRerolledTranslating: false,
       rerolledTranslation: null,
+      rerolledTranslationRef: null,
     }));
 
     expandedMessageUIState = null;
@@ -105,6 +111,18 @@
     summaryUIState.isTranslating = true;
     summaryUIState.translation = "Loading...";
 
+    // Focus on translation element after it's rendered
+    await tick();
+
+    if (summaryUIState.translationRef) {
+      summaryUIState.translationRef.focus();
+      summaryUIState.translationRef.scrollIntoView({
+        behavior: "smooth",
+        block: "nearest",
+      });
+    }
+
+    // Translate
     const result = await translate(
       hypaV3DataState.summaries[summaryIndex].text,
       regenerate
@@ -178,37 +196,24 @@
     summaryUIState.isRerolledTranslating = true;
     summaryUIState.rerolledTranslation = "Loading...";
 
+    // Focus on rerolled translation element after it's rendered
+    await tick();
+
+    if (summaryUIState.rerolledTranslationRef) {
+      summaryUIState.rerolledTranslationRef.focus();
+      summaryUIState.rerolledTranslationRef.scrollIntoView({
+        behavior: "smooth",
+        block: "nearest",
+      });
+    }
+
+    // Translate
     const result = await translate(summaryUIState.rerolledText, regenerate);
 
     summaryUIState.rerolledTranslation = result;
     summaryUIState.isRerolledTranslating = false;
   }
 
-  async function toggleTranslateExpandedMessage(
-    regenerate?: boolean
-  ): Promise<void> {
-    if (!expandedMessageUIState || expandedMessageUIState.isTranslating) return;
-
-    if (expandedMessageUIState.translation) {
-      expandedMessageUIState.translation = null;
-      return;
-    }
-
-    const message = getMessageFromChatMemo(
-      expandedMessageUIState.selectedChatMemo
-    );
-
-    if (!message) return;
-
-    expandedMessageUIState.isTranslating = true;
-    expandedMessageUIState.translation = "Loading...";
-
-    const result = await translate(message.data, regenerate);
-
-    expandedMessageUIState.translation = result;
-    expandedMessageUIState.isTranslating = false;
-  }
-
   function isMessageExpanded(
     summaryIndex: number,
     chatMemo: string | null
@@ -234,9 +239,47 @@
           selectedChatMemo: chatMemo,
           isTranslating: false,
           translation: null,
+          translationRef: null,
         };
   }
 
+  async function toggleTranslateExpandedMessage(
+    regenerate?: boolean
+  ): Promise<void> {
+    if (!expandedMessageUIState || expandedMessageUIState.isTranslating) return;
+
+    if (expandedMessageUIState.translation) {
+      expandedMessageUIState.translation = null;
+      return;
+    }
+
+    const message = getMessageFromChatMemo(
+      expandedMessageUIState.selectedChatMemo
+    );
+
+    if (!message) return;
+
+    expandedMessageUIState.isTranslating = true;
+    expandedMessageUIState.translation = "Loading...";
+
+    // Focus on translation element after it's rendered
+    await tick();
+
+    if (expandedMessageUIState.translationRef) {
+      expandedMessageUIState.translationRef.focus();
+      expandedMessageUIState.translationRef.scrollIntoView({
+        behavior: "smooth",
+        block: "nearest",
+      });
+    }
+
+    // Translate
+    const result = await translate(message.data, regenerate);
+
+    expandedMessageUIState.translation = result;
+    expandedMessageUIState.isTranslating = false;
+  }
+
   function getNextMessageToSummarize(): Message | null {
     const char = DBState.db.characters[$selectedCharID];
     const chat = char.chats[DBState.db.characters[$selectedCharID].chatPage];
@@ -326,7 +369,7 @@
         params.onAlternativeAction?.();
       } else {
         params.onMainAction?.();
-``      }
+      }
     };
 
     if ("ontouchend" in window) {
@@ -354,17 +397,21 @@
   }
 </script>
 
+<!-- Modal backdrop -->
 <div class="fixed inset-0 z-50 bg-black/50 p-4">
+  <!-- Modal wrapper -->
   <div class="h-full w-full flex justify-center">
+    <!-- Modal window -->
     <div
       class="bg-zinc-900 p-6 rounded-lg flex flex-col w-full max-w-3xl {hypaV3DataState
         .summaries.length === 0
-        ? 'max-h-[26rem]'
+        ? 'h-fit'
         : 'max-h-full'}"
     >
       <!-- Header -->
       <div class="flex justify-between items-center w-full mb-4">
         <h1 class="text-2xl font-semibold text-zinc-100">HypaV3 Data</h1>
+        <!-- Button Container -->
         <div class="flex items-center gap-2">
           <!-- Reset Button -->
           <button
@@ -405,14 +452,16 @@
         </div>
       </div>
 
-      <!-- Summaries List -->
+      <!-- Scrollable Container -->
       <div class="flex flex-col gap-3 w-full overflow-y-auto">
         {#if hypaV3DataState.summaries.length === 0}
           <span class="text-textcolor2 text-center p-4">No summaries yet</span>
         {/if}
 
+        <!-- Summaries List -->
         {#each hypaV3DataState.summaries as summary, i}
           {#if summaryUIStates[i]}
+            <!-- Summary Item  -->
             <div
               class="flex flex-col p-4 rounded-lg border border-zinc-700 bg-zinc-800/50"
             >
@@ -468,6 +517,8 @@
                   >
                   <div
                     class="p-2 max-h-48 overflow-y-auto bg-zinc-800 rounded-md whitespace-pre-wrap"
+                    bind:this={summaryUIStates[i].translationRef}
+                    tabindex="-1"
                   >
                     {summaryUIStates[i].translation}
                   </div>
@@ -531,6 +582,8 @@
                       >
                       <div
                         class="p-2 max-h-48 overflow-y-auto bg-zinc-800 rounded-md whitespace-pre-wrap"
+                        bind:this={summaryUIStates[i].rerolledTranslationRef}
+                        tabindex="-1"
                       >
                         {summaryUIStates[i].rerolledTranslation}
                       </div>
@@ -575,7 +628,7 @@
                   {/each}
                 </div>
 
-                <!-- Selected Message Content -->
+                <!-- Selected Message Content (if selected) -->
                 {#if expandedMessageUIState?.summaryIndex === i}
                   {@const message = getMessageFromChatMemo(
                     expandedMessageUIState.selectedChatMemo
@@ -604,6 +657,8 @@
                         >
                         <div
                           class="p-2 max-h-48 overflow-y-auto bg-zinc-800 rounded-md whitespace-pre-wrap"
+                          bind:this={expandedMessageUIState.translationRef}
+                          tabindex="-1"
                         >
                           {expandedMessageUIState.translation}
                         </div>
@@ -616,13 +671,15 @@
           {/if}
         {/each}
 
+        <!-- Next message to be summarized -->
         {#if true}
-          <!-- Next message to summarize -->
           {@const nextMessage = getNextMessageToSummarize()}
           {#if nextMessage}
             <div class="mt-4">
               <span class="text-sm text-textcolor2 mb-2 block">
-                HypaV3 will summarize [{nextMessage.chatId}]
+                HypaV3 will summarize [{nextMessage.chatId
+                  ? nextMessage.chatId
+                  : "no message id"}]
               </span>
               <div
                 class="p-2 max-h-48 overflow-y-auto bg-zinc-800 rounded-md whitespace-pre-wrap"

From 17b9e280410a69d773d3d99b070461239320c63d Mon Sep 17 00:00:00 2001
From: Bo26fhmC5M <88071760+Bo26fhmC5M@users.noreply.github.com>
Date: Sun, 19 Jan 2025 11:55:09 +0900
Subject: [PATCH 04/15] feat: add settings button to HypaV3 modal header

---
 src/lib/Others/HypaV3Modal.svelte | 35 +++++++++++++++++++++++++------
 1 file changed, 29 insertions(+), 6 deletions(-)

diff --git a/src/lib/Others/HypaV3Modal.svelte b/src/lib/Others/HypaV3Modal.svelte
index 83d39cba..eb7ee052 100644
--- a/src/lib/Others/HypaV3Modal.svelte
+++ b/src/lib/Others/HypaV3Modal.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import {
+    SettingsIcon,
     Trash2Icon,
     XIcon,
     LanguagesIcon,
@@ -8,13 +9,19 @@
     CheckIcon,
   } from "lucide-svelte";
   import { tick } from "svelte";
-  import TextAreaInput from "../UI/GUI/TextAreaInput.svelte";
+  import TextAreaInput from "../../lib/UI/GUI/TextAreaInput.svelte";
   import { alertConfirm, showHypaV3Alert } from "../../ts/alert";
-  import { DBState, alertStore, selectedCharID } from "src/ts/stores.svelte";
-  import { summarize } from "src/ts/process/memory/hypav3";
-  import { type OpenAIChat } from "src/ts/process/index.svelte";
-  import { type Message } from "src/ts/storage/database.svelte";
-  import { translateHTML } from "src/ts/translator/translator";
+  import {
+    DBState,
+    alertStore,
+    selectedCharID,
+    settingsOpen,
+    SettingsMenuIndex,
+  } from "../../ts/stores.svelte";
+  import { summarize } from "../../ts/process/memory/hypav3";
+  import { type OpenAIChat } from "../../ts/process/index.svelte";
+  import { type Message } from "../../ts/storage/database.svelte";
+  import { translateHTML } from "../../ts/translator/translator";
 
   interface SummaryUI {
     isTranslating: boolean;
@@ -413,6 +420,22 @@
         <h1 class="text-2xl font-semibold text-zinc-100">HypaV3 Data</h1>
         <!-- Button Container -->
         <div class="flex items-center gap-2">
+          <!-- Settings Button -->
+          <button
+            class="p-2 text-zinc-400 hover:text-zinc-200 transition-colors"
+            onclick={() => {
+              alertStore.set({
+                type: "none",
+                msg: "",
+              });
+
+              settingsOpen.set(true);
+              SettingsMenuIndex.set(2); // Other bot settings
+            }}
+          >
+            <SettingsIcon size={24} />
+          </button>
+
           <!-- Reset Button -->
           <button
             class="p-2 text-zinc-400 hover:text-zinc-200 hover:text-rose-300 transition-colors"

From 9c052f9a1d738e29e5c89b5686c75e6d6e6e8165 Mon Sep 17 00:00:00 2001
From: Bo26fhmC5M <88071760+Bo26fhmC5M@users.noreply.github.com>
Date: Sun, 19 Jan 2025 12:23:09 +0900
Subject: [PATCH 05/15] feat: add cut-after button in HypaV3 summary header

---
 src/lib/Others/HypaV3Modal.svelte | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/src/lib/Others/HypaV3Modal.svelte b/src/lib/Others/HypaV3Modal.svelte
index eb7ee052..87ec2471 100644
--- a/src/lib/Others/HypaV3Modal.svelte
+++ b/src/lib/Others/HypaV3Modal.svelte
@@ -6,6 +6,7 @@
     LanguagesIcon,
     StarIcon,
     RefreshCw,
+    ScissorsLineDashed,
     CheckIcon,
   } from "lucide-svelte";
   import { tick } from "svelte";
@@ -523,6 +524,25 @@
                   >
                     <RefreshCw size={16} />
                   </button>
+
+                  <!-- Delete After Button -->
+                  <button
+                    class="p-2 text-zinc-400 hover:text-zinc-200 hover:text-rose-300 transition-colors"
+                    onclick={async () => {
+                      if (
+                        await alertConfirmTwice(
+                          "Delete all summaries after this one?",
+                          "This action cannot be undone. Are you really sure?"
+                        )
+                      ) {
+                        hypaV3DataState.summaries.splice(i + 1);
+                      }
+
+                      showHypaV3Alert();
+                    }}
+                  >
+                    <ScissorsLineDashed size={16} />
+                  </button>
                 </div>
               </div>
 
@@ -710,6 +730,10 @@
                 {nextMessage.data}
               </div>
             </div>
+          {:else if !getFirstMessage()}
+            <div class="text-sm text-red-500">
+              WARN: Selected first message is null
+            </div>
           {/if}
         {/if}
       </div>

From 28da23c9c3717b4dec4892c6bb477c5740d5165d Mon Sep 17 00:00:00 2001
From: Bo26fhmC5M <88071760+Bo26fhmC5M@users.noreply.github.com>
Date: Sun, 19 Jan 2025 14:05:35 +0900
Subject: [PATCH 06/15] feat: add HypaV2 to V3 conversion in HypaV3 modal

---
 src/lib/Others/HypaV3Modal.svelte | 112 +++++++++++++++++++++++++++++-
 1 file changed, 110 insertions(+), 2 deletions(-)

diff --git a/src/lib/Others/HypaV3Modal.svelte b/src/lib/Others/HypaV3Modal.svelte
index 87ec2471..686707a2 100644
--- a/src/lib/Others/HypaV3Modal.svelte
+++ b/src/lib/Others/HypaV3Modal.svelte
@@ -11,7 +11,11 @@
   } from "lucide-svelte";
   import { tick } from "svelte";
   import TextAreaInput from "../../lib/UI/GUI/TextAreaInput.svelte";
-  import { alertConfirm, showHypaV3Alert } from "../../ts/alert";
+  import {
+    alertConfirm,
+    alertNormalWait,
+    showHypaV3Alert,
+  } from "../../ts/alert";
   import {
     DBState,
     alertStore,
@@ -337,6 +341,80 @@
     }
   }
 
+  function isHypaV2ConversionPossible(): boolean {
+    const char = DBState.db.characters[$selectedCharID];
+    const chat = char.chats[DBState.db.characters[$selectedCharID].chatPage];
+
+    return chat.hypaV3Data?.summaries?.length === 0 && chat.hypaV2Data !== null;
+  }
+
+  function convertHypaV2ToV3(): { success: boolean; error?: string } {
+    try {
+      const char = DBState.db.characters[$selectedCharID];
+      const chat = char.chats[DBState.db.characters[$selectedCharID].chatPage];
+      const hypaV2Data = chat.hypaV2Data;
+
+      if (chat.hypaV3Data?.summaries?.length > 0) {
+        return {
+          success: false,
+          error: "HypaV3 data already exists.",
+        };
+      }
+
+      if (!hypaV2Data) {
+        return {
+          success: false,
+          error: "HypaV2 data not found.",
+        };
+      }
+
+      if (hypaV2Data.mainChunks.length === 0) {
+        return {
+          success: false,
+          error: "No main chunks found.",
+        };
+      }
+
+      for (let i = 0; i < hypaV2Data.mainChunks.length; i++) {
+        const mainChunk = hypaV2Data.mainChunks[i];
+
+        if (!Array.isArray(mainChunk.chatMemos)) {
+          return {
+            success: false,
+            error: `Chunk ${i}'s chatMemos is not an array.`,
+          };
+        }
+
+        if (mainChunk.chatMemos.length === 0) {
+          return {
+            success: false,
+            error: `Chunk ${i}'s chatMemos is empty.`,
+          };
+        }
+      }
+
+      const newHypaV3Data = {
+        summaries: hypaV2Data.mainChunks.map((mainChunk) => ({
+          text: mainChunk.text,
+          chatMemos: [...mainChunk.chatMemos],
+          isImportant: false,
+        })),
+        lastSelectedSummaries: [],
+      };
+
+      chat.hypaV3Data = newHypaV3Data;
+
+      return {
+        success: true,
+      };
+    } catch (error) {
+      return {
+        success: false,
+        error: `Error occurred: ${error.message}`,
+      };
+    }
+  }
+
   type DualActionParams = {
     onMainAction?: () => void;
     onAlternativeAction?: () => void;
@@ -479,7 +557,37 @@
       <!-- Scrollable Container -->
       <div class="flex flex-col gap-3 w-full overflow-y-auto">
         {#if hypaV3DataState.summaries.length === 0}
-          <span class="text-textcolor2 text-center p-4">No summaries yet</span>
+          <!-- Conversion Section -->
+          {#if isHypaV2ConversionPossible()}
+            <div class="mt-4 flex flex-col items-center gap-2">
+              <span class="text-textcolor2 text-center p-4"
+                >No summaries yet, but you can convert HypaV2 data to V3.</span
+              >
+              <button
+                class="px-4 py-2 bg-zinc-800 text-zinc-200 rounded-md hover:bg-zinc-700 transition-colors"
+                onclick={async () => {
+                  const conversionResult = convertHypaV2ToV3();
+
+                  if (conversionResult.success) {
+                    await alertNormalWait(
+                      "Successfully converted HypaV2 data to V3"
+                    );
+                  } else {
+                    await alertNormalWait(
+                      `Failed to convert HypaV2 data to V3: ${conversionResult.error}`
+                    );
+                  }
+
+                  showHypaV3Alert();
+                }}
+              >
+                Convert to V3
+              </button>
+            </div>
+          {:else}
+            <span class="text-textcolor2 text-center p-4">No summaries yet</span
+            >
+          {/if}
         {/if}
 
         <!-- Summaries List -->

From cd65eaf4008f610f0dce9a7f196d373744213278 Mon Sep 17 00:00:00 2001
From: Bo26fhmC5M <88071760+Bo26fhmC5M@users.noreply.github.com>
Date: Sun, 19 Jan 2025 18:05:11 +0900
Subject: [PATCH 07/15] feat: add process regex script option in HypaV3 modal

---
 src/lib/Others/HypaV3Modal.svelte             | 289 +++++++++++-------
 src/lib/Setting/Pages/OtherBotSettings.svelte |   5 +-
 src/ts/storage/database.svelte.ts             |   4 +-
 3 files changed, 188 insertions(+), 110 deletions(-)

diff --git a/src/lib/Others/HypaV3Modal.svelte b/src/lib/Others/HypaV3Modal.svelte
index 686707a2..8a762704 100644
--- a/src/lib/Others/HypaV3Modal.svelte
+++ b/src/lib/Others/HypaV3Modal.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { tick } from "svelte";
   import {
     SettingsIcon,
     Trash2Icon,
@@ -9,7 +10,6 @@
     ScissorsLineDashed,
     CheckIcon,
   } from "lucide-svelte";
-  import { tick } from "svelte";
   import TextAreaInput from "../../lib/UI/GUI/TextAreaInput.svelte";
   import {
     alertConfirm,
@@ -23,8 +23,13 @@
     settingsOpen,
     SettingsMenuIndex,
   } from "../../ts/stores.svelte";
-  import { summarize } from "../../ts/process/memory/hypav3";
   import { type OpenAIChat } from "../../ts/process/index.svelte";
+  import {
+    processScript,
+    processScriptFull,
+    risuChatParser,
+  } from "../../ts/process/scripts";
+  import { summarize } from "../../ts/process/memory/hypav3";
   import { type Message } from "../../ts/storage/database.svelte";
   import { translateHTML } from "../../ts/translator/translator";
 
@@ -80,33 +85,6 @@
     );
   }
 
-  function getFirstMessage(): string | null {
-    const char = DBState.db.characters[$selectedCharID];
-    const chat = char.chats[DBState.db.characters[$selectedCharID].chatPage];
-
-    return chat.fmIndex === -1
-      ? char.firstMessage
-      : char.alternateGreetings?.[chat.fmIndex]
-        ? char.alternateGreetings[chat.fmIndex]
-        : null;
-  }
-
-  function getMessageFromChatMemo(chatMemo: string | null): Message | null {
-    const char = DBState.db.characters[$selectedCharID];
-    const chat = char.chats[DBState.db.characters[$selectedCharID].chatPage];
-    const firstMessage = getFirstMessage();
-
-    if (!firstMessage) {
-      return null;
-    }
-
-    if (chatMemo == null) {
-      return { role: "char", data: firstMessage };
-    }
-
-    return chat.message.find((m) => m.chatId === chatMemo) || null;
-  }
-
   async function toggleTranslate(
     summaryIndex: number,
     regenerate?: boolean
@@ -167,16 +145,19 @@
 
     try {
       const summary = hypaV3DataState.summaries[summaryIndex];
-      const toSummarize: OpenAIChat[] = summary.chatMemos.map((chatMemo) => {
-        const message = getMessageFromChatMemo(chatMemo);
+      const toSummarize: OpenAIChat[] = await Promise.all(
+        summary.chatMemos.map(async (chatMemo) => {
+          // Processed message
+          const message = await getProcessedMessageFromChatMemo(chatMemo);
 
-        return {
-          role: (message.role === "char"
-            ? "assistant"
-            : message.role) as OpenAIChat["role"],
-          content: message.data,
-        };
-      });
+          return {
+            role: (message.role === "char"
+              ? "assistant"
+              : message.role) as OpenAIChat["role"],
+            content: message.data,
+          };
+        })
+      );
 
       const summarizeResult = await summarize(toSummarize);
 
@@ -226,6 +207,65 @@
     summaryUIState.isRerolledTranslating = false;
   }
 
+  async function getProcessedMessageFromChatMemo(
+    chatMemo: string | null
+  ): Promise<Message | null> {
+    const unprocessed = getMessageFromChatMemo(chatMemo);
+
+    if (!unprocessed) {
+      return null;
+    }
+
+    return DBState.db.hypaV3Settings.processRegexScript
+      ? await processRegexScript(unprocessed)
+      : unprocessed;
+  }
+
+  function getMessageFromChatMemo(chatMemo: string | null): Message | null {
+    const char = DBState.db.characters[$selectedCharID];
+    const chat = char.chats[DBState.db.characters[$selectedCharID].chatPage];
+
+    if (chatMemo == null) {
+      const firstMessage = getFirstMessage();
+
+      return firstMessage ? { role: "char", data: firstMessage } : null;
+    }
+
+    return chat.message.find((m) => m.chatId === chatMemo) || null;
+  }
+
+  function getFirstMessage(): string | null {
+    const char = DBState.db.characters[$selectedCharID];
+    const chat = char.chats[DBState.db.characters[$selectedCharID].chatPage];
+
+    return chat.fmIndex === -1
+      ? char.firstMessage
+      : char.alternateGreetings?.[chat.fmIndex]
+        ? char.alternateGreetings[chat.fmIndex]
+        : null;
+  }
+
+  async function processRegexScript(msg: Message): Promise<Message> {
+    const char = DBState.db.characters[$selectedCharID];
+    const chat = char.chats[DBState.db.characters[$selectedCharID].chatPage];
+    const newData: string = (
+      await processScriptFull(
+        char,
+        risuChatParser(msg.data, { chara: char, role: msg.role }),
+        "editprocess",
+        -1,
+        {
+          chatRole: msg.role,
+        }
+      )
+    ).data;
+
+    return {
+      ...msg,
+      data: newData,
+    };
+  }
+
   function isMessageExpanded(
     summaryIndex: number,
     chatMemo: string | null
@@ -265,7 +305,8 @@
       return;
     }
 
-    const message = getMessageFromChatMemo(
+    // Processed message
+    const message = await getProcessedMessageFromChatMemo(
       expandedMessageUIState.selectedChatMemo
     );
 
@@ -292,15 +333,33 @@
     expandedMessageUIState.isTranslating = false;
   }
 
-  function getNextMessageToSummarize(): Message | null {
-    const char = DBState.db.characters[$selectedCharID];
-    const chat = char.chats[DBState.db.characters[$selectedCharID].chatPage];
-    const firstMessage = getFirstMessage();
+  async function translate(
+    text: string,
+    regenerate?: boolean
+  ): Promise<string> {
+    try {
+      return await translateHTML(text, false, "", -1, regenerate);
+    } catch (error) {
+      return `Translation failed: ${error}`;
+    }
+  }
 
-    if (!firstMessage) {
+  async function getProcessedNextSummarizationTarget(): Promise<Message | null> {
+    const unprocessed = getNextSummarizationTarget();
+
+    if (!unprocessed) {
       return null;
     }
 
+    return DBState.db.hypaV3Settings.processRegexScript
+      ? await processRegexScript(unprocessed)
+      : unprocessed;
+  }
+
+  function getNextSummarizationTarget(): Message | null {
+    const char = DBState.db.characters[$selectedCharID];
+    const chat = char.chats[DBState.db.characters[$selectedCharID].chatPage];
+
     // Summaries exist
     if (hypaV3DataState.summaries.length > 0) {
       const lastSummary = hypaV3DataState.summaries.at(-1);
@@ -317,8 +376,11 @@
       }
     }
 
-    // No summaries
-    if (firstMessage?.trim() === "") {
+    const firstMessage = getFirstMessage();
+
+    // When no summaries exist OR couldn't find last connected message
+    // Check if first message is available
+    if (!firstMessage || firstMessage.trim() === "") {
       if (chat.message.length > 0) {
         return chat.message[0];
       }
@@ -327,25 +389,14 @@
     }
 
     // will summarize first message
-    return { role: "char", chatId: "first message", data: firstMessage };
-  }
-
-  async function translate(
-    text: string,
-    regenerate?: boolean
-  ): Promise<string> {
-    try {
-      return await translateHTML(text, false, "", -1, regenerate);
-    } catch (error) {
-      return `Translation failed: ${error}`;
-    }
+    return { role: "char", chatId: "first", data: firstMessage };
   }
 
   function isHypaV2ConversionPossible(): boolean {
     const char = DBState.db.characters[$selectedCharID];
     const chat = char.chats[DBState.db.characters[$selectedCharID].chatPage];
 
-    return chat.hypaV3Data?.summaries?.length === 0 && chat.hypaV2Data !== null;
+    return chat.hypaV3Data?.summaries?.length === 0 && chat.hypaV2Data != null;
   }
 
   function convertHypaV2ToV3(): { success: boolean; error?: string } {
@@ -559,30 +610,34 @@
         {#if hypaV3DataState.summaries.length === 0}
           <!-- Conversion Section -->
           {#if isHypaV2ConversionPossible()}
-            <div class="mt-4 flex flex-col items-center gap-2">
-              <span class="text-textcolor2 text-center p-4"
-                >No summaries yet, but you can convert HypaV2 data to V3.</span
-              >
-              <button
-                class="px-4 py-2 bg-zinc-800 text-zinc-200 rounded-md hover:bg-zinc-700 transition-colors"
-                onclick={async () => {
-                  const conversionResult = convertHypaV2ToV3();
+            <div
+              class="flex flex-col p-4 rounded-lg border border-zinc-700 bg-zinc-800/50"
+            >
+              <div class="mt-4 flex flex-col items-center gap-2">
+                <span class="text-textcolor2 text-center p-4"
+                  >No summaries yet, but you may convert HypaV2 data to V3.</span
+                >
+                <button
+                  class="px-4 py-2 bg-zinc-800 text-zinc-200 rounded-md hover:bg-zinc-700 transition-colors"
+                  onclick={async () => {
+                    const conversionResult = convertHypaV2ToV3();
 
-                  if (conversionResult.success) {
-                    await alertNormalWait(
-                      "Successfully converted HypaV2 data to V3"
-                    );
-                  } else {
-                    await alertNormalWait(
-                      `Failed to convert HypaV2 data to V3: ${conversionResult.error}`
-                    );
-                  }
+                    if (conversionResult.success) {
+                      await alertNormalWait(
+                        "Successfully converted HypaV2 data to V3"
+                      );
+                    } else {
+                      await alertNormalWait(
+                        `Failed to convert HypaV2 data to V3: ${conversionResult.error}`
+                      );
+                    }
 
-                  showHypaV3Alert();
-                }}
-              >
-                Convert to V3
-              </button>
+                    showHypaV3Alert();
+                  }}
+                >
+                  Convert to V3
+                </button>
+              </div>
             </div>
           {:else}
             <span class="text-textcolor2 text-center p-4">No summaries yet</span
@@ -779,26 +834,32 @@
                   {/each}
                 </div>
 
-                <!-- Selected Message Content (if selected) -->
+                <!-- Selected Message (if selected) -->
                 {#if expandedMessageUIState?.summaryIndex === i}
-                  {@const message = getMessageFromChatMemo(
-                    expandedMessageUIState.selectedChatMemo
-                  )}
                   <div class="mt-4">
-                    {#if message}
-                      <!-- Role -->
-                      <div class="text-sm text-textcolor2 mb-2 block">
-                        {message.role}'s Message
+                    <!-- Processed Message -->
+                    {#await getProcessedMessageFromChatMemo(expandedMessageUIState.selectedChatMemo) then expandedMessage}
+                      {#if expandedMessage}
+                        <!-- Role -->
+                        <div class="text-sm text-textcolor2 mb-2 block">
+                          {expandedMessage.role}'s Message
+                        </div>
+                        <!-- Content -->
+                        <div
+                          class="p-2 max-h-48 overflow-y-auto bg-zinc-800 rounded-md whitespace-pre-wrap"
+                        >
+                          {expandedMessage.data}
+                        </div>
+                      {:else}
+                        <div class="text-sm text-red-500">
+                          Message not found
+                        </div>
+                      {/if}
+                    {:catch error}
+                      <div class="text-sm text-red-500 mb-2">
+                        Error loading expanded message: {error.message}
                       </div>
-                      <!-- Content -->
-                      <div
-                        class="p-2 max-h-48 overflow-y-auto bg-zinc-800 rounded-md whitespace-pre-wrap"
-                      >
-                        {message.data}
-                      </div>
-                    {:else}
-                      <div class="text-sm text-red-500">Message not found</div>
-                    {/if}
+                    {/await}
 
                     <!-- Message Translation -->
                     {#if expandedMessageUIState.translation}
@@ -822,15 +883,18 @@
           {/if}
         {/each}
 
-        <!-- Next message to be summarized -->
-        {#if true}
-          {@const nextMessage = getNextMessageToSummarize()}
+        <!-- Next Summarization Target -->
+        {#await getProcessedNextSummarizationTarget() then nextMessage}
           {#if nextMessage}
+            {@const chatId =
+              nextMessage.chatId === "first"
+                ? "First Message"
+                : nextMessage.chatId == null
+                  ? "No Message ID"
+                  : nextMessage.chatId}
             <div class="mt-4">
               <span class="text-sm text-textcolor2 mb-2 block">
-                HypaV3 will summarize [{nextMessage.chatId
-                  ? nextMessage.chatId
-                  : "no message id"}]
+                HypaV3 will summarize [{chatId}]
               </span>
               <div
                 class="p-2 max-h-48 overflow-y-auto bg-zinc-800 rounded-md whitespace-pre-wrap"
@@ -838,11 +902,20 @@
                 {nextMessage.data}
               </div>
             </div>
-          {:else if !getFirstMessage()}
-            <div class="text-sm text-red-500">
-              WARN: Selected first message is null
-            </div>
           {/if}
+        {:catch error}
+          <div class="text-sm text-red-500 mb-2">
+            Error loading next message: {error.message}
+          </div>
+        {/await}
+
+        <!-- No First Message -->
+        {#if !getFirstMessage()}
+          <div class="mt-4">
+            <div class="text-sm text-red-500 mb-2">
+              WARN: Selected first message is empty
+            </div>
+          </div>
         {/if}
       </div>
     </div>
diff --git a/src/lib/Setting/Pages/OtherBotSettings.svelte b/src/lib/Setting/Pages/OtherBotSettings.svelte
index 8259f29b..f8a59880 100644
--- a/src/lib/Setting/Pages/OtherBotSettings.svelte
+++ b/src/lib/Setting/Pages/OtherBotSettings.svelte
@@ -519,7 +519,10 @@
             </div>
             <div class="flex mb-2">
                 <Check name="Preserve Orphaned Memory" bind:check={DBState.db.hypaV3Settings.preserveOrphanedMemory} />
-            </div>        
+            </div>
+            <div class="flex mb-2">
+                <Check name="Process Regex Script (Modify Request Data)" bind:check={DBState.db.hypaV3Settings.processRegexScript} />
+            </div> 
         {:else if (DBState.db.supaModelType !== 'none' && DBState.db.hypav2 === false && DBState.db.hypaV3 === false)}
             <span class="mb-2 text-textcolor2 text-sm text-wrap break-words max-w-full">{language.supaDesc}</span>
             <span class="text-textcolor mt-4">{language.SuperMemory} {language.model}</span>
diff --git a/src/ts/storage/database.svelte.ts b/src/ts/storage/database.svelte.ts
index c2a0e149..9f9facc8 100644
--- a/src/ts/storage/database.svelte.ts
+++ b/src/ts/storage/database.svelte.ts
@@ -477,7 +477,8 @@ export function setDatabase(data:Database){
         recentMemoryRatio: data.hypaV3Settings?.recentMemoryRatio ?? 0.4,
         similarMemoryRatio: data.hypaV3Settings?.similarMemoryRatio ?? 0.4,
         enableSimilarityCorrection: data.hypaV3Settings?.enableSimilarityCorrection ?? false,
-        preserveOrphanedMemory: data.hypaV3Settings?.preserveOrphanedMemory ?? false
+        preserveOrphanedMemory: data.hypaV3Settings?.preserveOrphanedMemory ?? false,
+        processRegexScript: data.hypaV3Settings?.processRegexScript ?? false
     }
     changeLanguage(data.language)
     setDatabaseLite(data)
@@ -890,6 +891,7 @@ export interface Database{
         similarMemoryRatio: number
         enableSimilarityCorrection: boolean
         preserveOrphanedMemory: boolean
+        processRegexScript: boolean
     }
 }
 

From 6f6e4b925a38c41c34da4352828231ffb6897b9a Mon Sep 17 00:00:00 2001
From: Bo26fhmC5M <88071760+Bo26fhmC5M@users.noreply.github.com>
Date: Sun, 19 Jan 2025 19:41:59 +0900
Subject: [PATCH 08/15] refactor: minor changes

---
 src/lib/Others/HypaV3Modal.svelte             | 1 -
 src/lib/Setting/Pages/OtherBotSettings.svelte | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/lib/Others/HypaV3Modal.svelte b/src/lib/Others/HypaV3Modal.svelte
index 8a762704..4ef1af5a 100644
--- a/src/lib/Others/HypaV3Modal.svelte
+++ b/src/lib/Others/HypaV3Modal.svelte
@@ -25,7 +25,6 @@
   } from "../../ts/stores.svelte";
   import { type OpenAIChat } from "../../ts/process/index.svelte";
   import {
-    processScript,
     processScriptFull,
     risuChatParser,
   } from "../../ts/process/scripts";
diff --git a/src/lib/Setting/Pages/OtherBotSettings.svelte b/src/lib/Setting/Pages/OtherBotSettings.svelte
index f8a59880..a9d611ec 100644
--- a/src/lib/Setting/Pages/OtherBotSettings.svelte
+++ b/src/lib/Setting/Pages/OtherBotSettings.svelte
@@ -521,7 +521,7 @@
                 <Check name="Preserve Orphaned Memory" bind:check={DBState.db.hypaV3Settings.preserveOrphanedMemory} />
             </div>
             <div class="flex mb-2">
-                <Check name="Process Regex Script (Modify Request Data)" bind:check={DBState.db.hypaV3Settings.processRegexScript} />
+                <Check name="Process Regex Script (Reroll Only)" bind:check={DBState.db.hypaV3Settings.processRegexScript} />
             </div> 
         {:else if (DBState.db.supaModelType !== 'none' && DBState.db.hypav2 === false && DBState.db.hypaV3 === false)}
             <span class="mb-2 text-textcolor2 text-sm text-wrap break-words max-w-full">{language.supaDesc}</span>

From deb1c7d667ecfbd9ba4f568e36155864f5780bf8 Mon Sep 17 00:00:00 2001
From: Bo26fhmC5M <88071760+Bo26fhmC5M@users.noreply.github.com>
Date: Sun, 19 Jan 2025 22:48:10 +0900
Subject: [PATCH 09/15] fix: minor changes in HypaV3 modal

---
 src/lib/Others/HypaV3Modal.svelte | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/src/lib/Others/HypaV3Modal.svelte b/src/lib/Others/HypaV3Modal.svelte
index 4ef1af5a..efbfdd9b 100644
--- a/src/lib/Others/HypaV3Modal.svelte
+++ b/src/lib/Others/HypaV3Modal.svelte
@@ -24,10 +24,7 @@
     SettingsMenuIndex,
   } from "../../ts/stores.svelte";
   import { type OpenAIChat } from "../../ts/process/index.svelte";
-  import {
-    processScriptFull,
-    risuChatParser,
-  } from "../../ts/process/scripts";
+  import { processScriptFull, risuChatParser } from "../../ts/process/scripts";
   import { summarize } from "../../ts/process/memory/hypav3";
   import { type Message } from "../../ts/storage/database.svelte";
   import { translateHTML } from "../../ts/translator/translator";
@@ -536,13 +533,14 @@
 <!-- Modal backdrop -->
 <div class="fixed inset-0 z-50 bg-black/50 p-4">
   <!-- Modal wrapper -->
-  <div class="h-full w-full flex justify-center">
+  <div
+    class="w-full flex justify-center {hypaV3DataState.summaries.length === 0
+      ? 'h-fit'
+      : 'h-full'}"
+  >
     <!-- Modal window -->
     <div
-      class="bg-zinc-900 p-6 rounded-lg flex flex-col w-full max-w-3xl {hypaV3DataState
-        .summaries.length === 0
-        ? 'h-fit'
-        : 'max-h-full'}"
+      class="bg-zinc-900 p-6 rounded-lg flex flex-col w-full max-w-3xl max-h-full"
     >
       <!-- Header -->
       <div class="flex justify-between items-center w-full mb-4">

From e3d95107a307fa7eeb46a4f815291d035ac765f7 Mon Sep 17 00:00:00 2001
From: Bo26fhmC5M <88071760+Bo26fhmC5M@users.noreply.github.com>
Date: Mon, 20 Jan 2025 12:41:47 +0900
Subject: [PATCH 10/15] fix: remove duplicate modal wrapper from HypaV3 modal

---
 src/lib/Others/AlertComp.svelte | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/lib/Others/AlertComp.svelte b/src/lib/Others/AlertComp.svelte
index 85a248be..f0cdf39d 100644
--- a/src/lib/Others/AlertComp.svelte
+++ b/src/lib/Others/AlertComp.svelte
@@ -317,8 +317,6 @@
                         </div>
                     {/each}
                 {/if}
-            {:else if $alertStore.type === "hypaV3"}
-                <HypaV3Modal />
             {:else if $alertStore.type === 'addchar'}
                 <div class="w-2xl flex flex-col max-w-full">
 
@@ -639,6 +637,10 @@
     </div>
 {/if}
 
+{#if $alertStore.type === "hypaV3"}
+    <HypaV3Modal />
+{/if}
+
 <style>
     .break-any{
         word-break: normal;

From 463dcc66b15f9de54a0509b9f1e6e4944eeafc38 Mon Sep 17 00:00:00 2001
From: Bo26fhmC5M <88071760+Bo26fhmC5M@users.noreply.github.com>
Date: Tue, 21 Jan 2025 00:26:51 +0900
Subject: [PATCH 11/15] fix: improve HypaV3 modal responsive for mobile

---
 src/lib/Others/HypaV3Modal.svelte | 389 ++++++++++++++++--------------
 1 file changed, 205 insertions(+), 184 deletions(-)

diff --git a/src/lib/Others/HypaV3Modal.svelte b/src/lib/Others/HypaV3Modal.svelte
index efbfdd9b..389a1180 100644
--- a/src/lib/Others/HypaV3Modal.svelte
+++ b/src/lib/Others/HypaV3Modal.svelte
@@ -32,12 +32,12 @@
   interface SummaryUI {
     isTranslating: boolean;
     translation: string | null;
-    translationRef: HTMLDivElement;
+    translationRef: HTMLTextAreaElement;
     isRerolling: boolean;
     rerolledText: string | null;
     isRerolledTranslating: boolean;
     rerolledTranslation: string | null;
-    rerolledTranslationRef: HTMLDivElement;
+    rerolledTranslationRef: HTMLTextAreaElement;
   }
 
   interface ExpandedMessageUI {
@@ -45,7 +45,7 @@
     selectedChatMemo: string;
     isTranslating: boolean;
     translation: string | null;
-    translationRef: HTMLDivElement;
+    translationRef: HTMLTextAreaElement;
   }
 
   const hypaV3DataState = $derived(
@@ -531,21 +531,23 @@
 </script>
 
 <!-- Modal backdrop -->
-<div class="fixed inset-0 z-50 bg-black/50 p-4">
+<div class="fixed inset-0 z-50 p-1 sm:p-2 bg-black/50">
   <!-- Modal wrapper -->
-  <div
-    class="w-full flex justify-center {hypaV3DataState.summaries.length === 0
-      ? 'h-fit'
-      : 'h-full'}"
-  >
+  <div class="flex justify-center w-full h-full">
     <!-- Modal window -->
     <div
-      class="bg-zinc-900 p-6 rounded-lg flex flex-col w-full max-w-3xl max-h-full"
+      class="flex flex-col p-3 sm:p-6 rounded-lg bg-zinc-900 w-full max-w-3xl {hypaV3DataState
+        .summaries.length === 0
+        ? 'h-fit'
+        : 'h-full'}"
     >
       <!-- Header -->
-      <div class="flex justify-between items-center w-full mb-4">
-        <h1 class="text-2xl font-semibold text-zinc-100">HypaV3 Data</h1>
-        <!-- Button Container -->
+      <div class="flex justify-between items-center mb-2 sm:mb-4">
+        <!-- Modal Title -->
+        <h1 class="text-lg sm:text-2xl font-semibold text-zinc-300">
+          HypaV3 Data
+        </h1>
+        <!-- Buttons Container -->
         <div class="flex items-center gap-2">
           <!-- Settings Button -->
           <button
@@ -560,12 +562,12 @@
               SettingsMenuIndex.set(2); // Other bot settings
             }}
           >
-            <SettingsIcon size={24} />
+            <SettingsIcon class="w-6 h-6" />
           </button>
 
           <!-- Reset Button -->
           <button
-            class="p-2 text-zinc-400 hover:text-zinc-200 hover:text-rose-300 transition-colors"
+            class="p-2 text-zinc-400 hover:text-rose-300 transition-colors"
             onclick={async () => {
               if (
                 await alertConfirmTwice(
@@ -584,12 +586,12 @@
               }
             }}
           >
-            <Trash2Icon size={24} />
+            <Trash2Icon class="w-6 h-6" />
           </button>
 
           <!-- Close Button -->
           <button
-            class="p-2 text-zinc-400 hover:text-zinc-200 hover:text-rose-300 transition-colors"
+            class="p-2 text-zinc-400 hover:text-zinc-200 transition-colors"
             onclick={() => {
               alertStore.set({
                 type: "none",
@@ -597,25 +599,25 @@
               });
             }}
           >
-            <XIcon size={24} />
+            <XIcon class="w-6 h-6" />
           </button>
         </div>
       </div>
 
       <!-- Scrollable Container -->
-      <div class="flex flex-col gap-3 w-full overflow-y-auto">
+      <div class="flex flex-col gap-2 sm:gap-4 overflow-y-auto">
         {#if hypaV3DataState.summaries.length === 0}
           <!-- Conversion Section -->
           {#if isHypaV2ConversionPossible()}
             <div
-              class="flex flex-col p-4 rounded-lg border border-zinc-700 bg-zinc-800/50"
+              class="flex flex-col p-2 sm:p-4 rounded-lg border border-zinc-700 bg-zinc-800/50"
             >
-              <div class="mt-4 flex flex-col items-center gap-2">
-                <span class="text-textcolor2 text-center p-4"
-                  >No summaries yet, but you may convert HypaV2 data to V3.</span
-                >
+              <div class="flex flex-col items-center">
+                <div class="my-1 sm:my-2 text-center text-zinc-300">
+                  No summaries yet, but you may convert HypaV2 data to V3.
+                </div>
                 <button
-                  class="px-4 py-2 bg-zinc-800 text-zinc-200 rounded-md hover:bg-zinc-700 transition-colors"
+                  class="my-1 sm:my-2 px-4 py-2 rounded-md text-zinc-300 font-semibold bg-zinc-700 hover:bg-zinc-600 transition-colors"
                   onclick={async () => {
                     const conversionResult = convertHypaV2ToV3();
 
@@ -637,8 +639,9 @@
               </div>
             </div>
           {:else}
-            <span class="text-textcolor2 text-center p-4">No summaries yet</span
-            >
+            <div class="p-4 sm:p-3 md:p-4 text-center text-zinc-400">
+              No summaries yet
+            </div>
           {/if}
         {/if}
 
@@ -647,12 +650,13 @@
           {#if summaryUIStates[i]}
             <!-- Summary Item  -->
             <div
-              class="flex flex-col p-4 rounded-lg border border-zinc-700 bg-zinc-800/50"
+              class="flex flex-col p-2 sm:p-4 rounded-lg border border-zinc-700 bg-zinc-800/50"
             >
-              <!-- Summary Header -->
-              <div class="flex justify-between items-center mb-2">
-                <span class="text-sm text-textcolor2">Summary #{i + 1}</span>
-                <div class="flex items-center gap-4">
+              <!-- Original Summary Header -->
+              <div class="flex justify-between items-center">
+                <span class="text-sm text-zinc-400">Summary #{i + 1}</span>
+
+                <div class="flex items-center gap-2">
                   <!-- Translate Button -->
                   <button
                     class="p-2 text-zinc-400 hover:text-zinc-200 transition-colors"
@@ -661,19 +665,19 @@
                       onAlternativeAction: () => toggleTranslate(i, true),
                     }}
                   >
-                    <LanguagesIcon size={16} />
+                    <LanguagesIcon class="w-4 h-4" />
                   </button>
 
                   <!-- Important Button -->
                   <button
-                    class="p-2 hover:text-zinc-200 hover:text-amber-300 transition-colors {summary.isImportant
+                    class="p-2 hover:text-zinc-200 transition-colors {summary.isImportant
                       ? 'text-yellow-500'
                       : 'text-zinc-400'}"
                     onclick={() => {
                       summary.isImportant = !summary.isImportant;
                     }}
                   >
-                    <StarIcon size={16} />
+                    <StarIcon class="w-4 h-4" />
                   </button>
 
                   <!-- Reroll Button -->
@@ -682,12 +686,12 @@
                     onclick={async () => await toggleReroll(i)}
                     disabled={!isRerollable(i)}
                   >
-                    <RefreshCw size={16} />
+                    <RefreshCw class="w-4 h-4" />
                   </button>
 
                   <!-- Delete After Button -->
                   <button
-                    class="p-2 text-zinc-400 hover:text-zinc-200 hover:text-rose-300 transition-colors"
+                    class="p-2 text-zinc-400 hover:text-rose-300 transition-colors"
                     onclick={async () => {
                       if (
                         await alertConfirmTwice(
@@ -701,39 +705,42 @@
                       showHypaV3Alert();
                     }}
                   >
-                    <ScissorsLineDashed size={16} />
+                    <ScissorsLineDashed class="w-4 h-4" />
                   </button>
                 </div>
               </div>
 
               <!-- Original Summary -->
-              <TextAreaInput
-                bind:value={summary.text}
-                className="w-full bg-zinc-900 text-zinc-200 rounded-md p-3 min-h-[100px] resize-y"
-              />
+              <div class="mt-2 sm:mt-4">
+                <textarea
+                  class="p-2 sm:p-4 w-full min-h-40 sm:min-h-56 resize-vertical rounded border border-zinc-700 focus:outline-none focus:ring-2 focus:ring-zinc-600 transition-colors text-zinc-200 bg-zinc-900"
+                  bind:value={summary.text}
+                >
+                </textarea>
+              </div>
 
-              <!-- Translation (if exists) -->
+              <!-- Original Summary Translation -->
               {#if summaryUIStates[i].translation}
-                <div class="mt-4">
-                  <span class="text-sm text-textcolor2 mb-2 block"
-                    >Translation</span
-                  >
-                  <div
-                    class="p-2 max-h-48 overflow-y-auto bg-zinc-800 rounded-md whitespace-pre-wrap"
+                <div class="mt-2 sm:mt-4">
+                  <div class="mb-2 sm:mb-4 text-sm text-zinc-400">
+                    Translation
+                  </div>
+
+                  <textarea
+                    readonly
+                    class="p-2 sm:p-4 w-full min-h-40 sm:min-h-56 resize-vertical rounded border border-zinc-700 focus:outline-none transition-colors text-zinc-200 bg-zinc-900"
                     bind:this={summaryUIStates[i].translationRef}
                     tabindex="-1"
-                  >
-                    {summaryUIStates[i].translation}
-                  </div>
+                    value={summaryUIStates[i].translation}
+                  ></textarea>
                 </div>
               {/if}
 
-              <!-- Rerolled Summary (if exists) -->
               {#if summaryUIStates[i].rerolledText}
-                <div class="mt-4">
-                  <div class="flex justify-between items-center mb-2">
-                    <span class="text-sm text-textcolor2">Rerolled Summary</span
-                    >
+                <!-- Rerolled Summary Header -->
+                <div class="mt-2 sm:mt-4">
+                  <div class="flex justify-between items-center">
+                    <span class="text-sm text-zinc-400">Rerolled Summary</span>
                     <div class="flex items-center gap-2">
                       <!-- Translate Rerolled Button -->
                       <button
@@ -744,23 +751,23 @@
                             toggleTranslateRerolled(i, true),
                         }}
                       >
-                        <LanguagesIcon size={16} />
+                        <LanguagesIcon class="w-4 h-4" />
                       </button>
 
                       <!-- Cancel Button -->
                       <button
-                        class="p-2 text-zinc-400 hover:text-zinc-200 hover:text-rose-300 transition-colors"
+                        class="p-2 text-zinc-400 hover:text-zinc-200 transition-colors"
                         onclick={() => {
                           summaryUIStates[i].rerolledText = null;
                           summaryUIStates[i].rerolledTranslation = null;
                         }}
                       >
-                        <XIcon size={16} />
+                        <XIcon class="w-4 h-4" />
                       </button>
 
                       <!-- Apply Button -->
                       <button
-                        class="p-2 text-zinc-400 hover:text-zinc-200 transition-colors"
+                        class="p-2 text-zinc-400 hover:text-rose-300 transition-colors"
                         onclick={() => {
                           summary.text = summaryUIStates[i].rerolledText!;
                           summaryUIStates[i].translation = null;
@@ -768,150 +775,164 @@
                           summaryUIStates[i].rerolledTranslation = null;
                         }}
                       >
-                        <CheckIcon size={16} />
+                        <CheckIcon class="w-4 h-4" />
                       </button>
                     </div>
                   </div>
-                  <TextAreaInput
+                </div>
+
+                <!-- Rerolled Summary -->
+                <div class="mt-2 sm:mt-4">
+                  <textarea
+                    class="p-2 sm:p-4 w-full min-h-40 sm:min-h-56 resize-vertical rounded border border-zinc-700 focus:outline-none focus:ring-2 focus:ring-zinc-600 transition-colors text-zinc-200 bg-zinc-900"
                     bind:value={summaryUIStates[i].rerolledText}
-                    className="w-full bg-zinc-900 text-zinc-200 rounded-md p-3 min-h-[100px] resize-y"
-                  />
-
-                  <!-- Rerolled Translation (if exists) -->
-                  {#if summaryUIStates[i].rerolledTranslation}
-                    <div class="mt-4">
-                      <span class="text-sm text-textcolor2 mb-2 block"
-                        >Rerolled Translation</span
-                      >
-                      <div
-                        class="p-2 max-h-48 overflow-y-auto bg-zinc-800 rounded-md whitespace-pre-wrap"
-                        bind:this={summaryUIStates[i].rerolledTranslationRef}
-                        tabindex="-1"
-                      >
-                        {summaryUIStates[i].rerolledTranslation}
-                      </div>
-                    </div>
-                  {/if}
-                </div>
-              {/if}
-
-              <!-- Connected Messages -->
-              <div class="mt-4">
-                <div class="flex justify-between items-center mb-2">
-                  <span class="text-sm text-textcolor2">
-                    Connected Messages ({summary.chatMemos.length})
-                  </span>
-                  <!-- Translate Message Button -->
-                  <button
-                    class="p-2 text-zinc-400 hover:text-zinc-200 transition-colors"
-                    use:handleDualAction={{
-                      onMainAction: () => toggleTranslateExpandedMessage(false),
-                      onAlternativeAction: () =>
-                        toggleTranslateExpandedMessage(true),
-                    }}
                   >
-                    <LanguagesIcon size={16} />
-                  </button>
+                  </textarea>
                 </div>
 
-                <!-- Message IDs -->
-                <div class="flex flex-wrap gap-1">
-                  {#each summary.chatMemos as chatMemo}
-                    <button
-                      class="text-xs px-3 py-1.5 bg-zinc-900 text-zinc-300 rounded-full hover:bg-zinc-800 transition-colors {isMessageExpanded(
-                        i,
-                        chatMemo
-                      )
-                        ? 'ring-1 ring-blue-500'
-                        : ''}"
-                      onclick={() => toggleExpandMessage(i, chatMemo)}
-                    >
-                      {chatMemo == null ? "First Message" : chatMemo}
-                    </button>
-                  {/each}
-                </div>
+                <!-- Rerolled Summary Translation -->
+                {#if summaryUIStates[i].rerolledTranslation}
+                  <div class="mt-2 sm:mt-4">
+                    <div class="mb-2 sm:mb-4 text-sm text-zinc-400">
+                      Rerolled Translation
+                    </div>
 
-                <!-- Selected Message (if selected) -->
-                {#if expandedMessageUIState?.summaryIndex === i}
-                  <div class="mt-4">
-                    <!-- Processed Message -->
-                    {#await getProcessedMessageFromChatMemo(expandedMessageUIState.selectedChatMemo) then expandedMessage}
-                      {#if expandedMessage}
-                        <!-- Role -->
-                        <div class="text-sm text-textcolor2 mb-2 block">
-                          {expandedMessage.role}'s Message
-                        </div>
-                        <!-- Content -->
-                        <div
-                          class="p-2 max-h-48 overflow-y-auto bg-zinc-800 rounded-md whitespace-pre-wrap"
-                        >
-                          {expandedMessage.data}
-                        </div>
-                      {:else}
-                        <div class="text-sm text-red-500">
-                          Message not found
-                        </div>
-                      {/if}
-                    {:catch error}
-                      <div class="text-sm text-red-500 mb-2">
-                        Error loading expanded message: {error.message}
-                      </div>
-                    {/await}
-
-                    <!-- Message Translation -->
-                    {#if expandedMessageUIState.translation}
-                      <div class="mt-4">
-                        <span class="text-sm text-textcolor2 mb-2 block"
-                          >Translation</span
-                        >
-                        <div
-                          class="p-2 max-h-48 overflow-y-auto bg-zinc-800 rounded-md whitespace-pre-wrap"
-                          bind:this={expandedMessageUIState.translationRef}
-                          tabindex="-1"
-                        >
-                          {expandedMessageUIState.translation}
-                        </div>
-                      </div>
-                    {/if}
+                    <textarea
+                      readonly
+                      class="p-2 sm:p-4 w-full min-h-40 sm:min-h-56 resize-vertical rounded border border-zinc-700 focus:outline-none transition-colors text-zinc-200 bg-zinc-900"
+                      bind:this={summaryUIStates[i].rerolledTranslationRef}
+                      tabindex="-1"
+                      value={summaryUIStates[i].rerolledTranslation}
+                    ></textarea>
                   </div>
                 {/if}
+              {/if}
+
+              <!-- Connected Messages Header -->
+              <div class="mt-2 sm:mt-4">
+                <div class="flex justify-between items-center">
+                  <span class="text-sm text-zinc-400"
+                    >Connected Messages ({summary.chatMemos.length})</span
+                  >
+
+                  <div class="flex items-center gap-2">
+                    <!-- Translate Message Button -->
+                    <button
+                      class="p-2 text-zinc-400 hover:text-zinc-200 transition-colors"
+                      use:handleDualAction={{
+                        onMainAction: () =>
+                          toggleTranslateExpandedMessage(false),
+                        onAlternativeAction: () =>
+                          toggleTranslateExpandedMessage(true),
+                      }}
+                    >
+                      <LanguagesIcon class="w-4 h-4" />
+                    </button>
+                  </div>
+                </div>
               </div>
+
+              <!-- Connected Message IDs -->
+              <div class="flex flex-wrap mt-2 sm:mt-4 gap-2">
+                {#each summary.chatMemos as chatMemo}
+                  <button
+                    class="px-3 py-2 rounded-full text-xs text-zinc-200 hover:bg-zinc-800 transition-colors bg-zinc-900 {isMessageExpanded(
+                      i,
+                      chatMemo
+                    )
+                      ? 'ring-2 ring-zinc-500'
+                      : ''}"
+                    onclick={() => toggleExpandMessage(i, chatMemo)}
+                  >
+                    {chatMemo == null ? "First Message" : chatMemo}
+                  </button>
+                {/each}
+              </div>
+
+              {#if expandedMessageUIState?.summaryIndex === i}
+                <!-- Expanded Message -->
+                <div class="mt-2 sm:mt-4">
+                  <!-- Processed Message -->
+                  {#await getProcessedMessageFromChatMemo(expandedMessageUIState.selectedChatMemo) then expandedMessage}
+                    {#if expandedMessage}
+                      <!-- Role -->
+                      <div class="mb-2 sm:mb-4 text-sm text-zinc-400">
+                        {expandedMessage.role}'s Message
+                      </div>
+
+                      <!-- Content -->
+                      <textarea
+                        readonly
+                        class="p-2 sm:p-4 w-full min-h-40 sm:min-h-56 resize-vertical rounded border border-zinc-700 focus:outline-none transition-colors text-zinc-200 bg-zinc-900"
+                        value={expandedMessage.data}
+                      ></textarea>
+                    {:else}
+                      <span class="text-sm text-red-500">Message not found</span
+                      >
+                    {/if}
+                  {:catch error}
+                    <span class="text-sm text-red-500"
+                      >Error loading expanded message: {error.message}</span
+                    >
+                  {/await}
+                </div>
+
+                <!-- Expanded Message Translation -->
+                {#if expandedMessageUIState.translation}
+                  <div class="mt-2 sm:mt-4">
+                    <div class="mb-2 sm:mb-4 text-sm text-zinc-400">
+                      Translation
+                    </div>
+
+                    <textarea
+                      readonly
+                      class="p-2 sm:p-4 w-full min-h-40 sm:min-h-56 resize-vertical rounded border border-zinc-700 focus:outline-none transition-colors text-zinc-200 bg-zinc-900"
+                      bind:this={expandedMessageUIState.translationRef}
+                      tabindex="-1"
+                      value={expandedMessageUIState.translation}
+                    ></textarea>
+                  </div>
+                {/if}
+              {/if}
             </div>
           {/if}
         {/each}
 
         <!-- Next Summarization Target -->
-        {#await getProcessedNextSummarizationTarget() then nextMessage}
-          {#if nextMessage}
-            {@const chatId =
-              nextMessage.chatId === "first"
-                ? "First Message"
-                : nextMessage.chatId == null
-                  ? "No Message ID"
-                  : nextMessage.chatId}
-            <div class="mt-4">
-              <span class="text-sm text-textcolor2 mb-2 block">
+        <div class="mt-2 sm:mt-4">
+          {#await getProcessedNextSummarizationTarget() then nextMessage}
+            {#if nextMessage}
+              {@const chatId =
+                nextMessage.chatId === "first"
+                  ? "First Message"
+                  : nextMessage.chatId == null
+                    ? "No Message ID"
+                    : nextMessage.chatId}
+              <div class="mb-2 sm:mb-4 text-sm text-zinc-400">
                 HypaV3 will summarize [{chatId}]
-              </span>
-              <div
-                class="p-2 max-h-48 overflow-y-auto bg-zinc-800 rounded-md whitespace-pre-wrap"
-              >
-                {nextMessage.data}
               </div>
-            </div>
-          {/if}
-        {:catch error}
-          <div class="text-sm text-red-500 mb-2">
-            Error loading next message: {error.message}
-          </div>
-        {/await}
+
+              <textarea
+                readonly
+                class="p-2 sm:p-4 w-full min-h-40 sm:min-h-56 resize-none overflow-y-auto rounded border border-zinc-700 focus:outline-none transition-colors text-zinc-200 bg-zinc-900"
+                value={nextMessage.data}
+              ></textarea>
+            {:else}
+              <span class="text-sm text-red-500">WARN: No messages found</span>
+            {/if}
+          {:catch error}
+            <span class="text-sm text-red-500"
+              >Error loading next message: {error.message}</span
+            >
+          {/await}
+        </div>
 
         <!-- No First Message -->
         {#if !getFirstMessage()}
-          <div class="mt-4">
-            <div class="text-sm text-red-500 mb-2">
-              WARN: Selected first message is empty
-            </div>
+          <div class="mt-2 sm:mt-4">
+            <span class="text-sm text-red-500"
+              >WARN: Selected first message is empty</span
+            >
           </div>
         {/if}
       </div>

From 9877931d1eb52a47a5e6027d86a4f8f3098a398e Mon Sep 17 00:00:00 2001
From: Bo26fhmC5M <88071760+Bo26fhmC5M@users.noreply.github.com>
Date: Tue, 21 Jan 2025 09:17:03 +0900
Subject: [PATCH 12/15] fix: improve contrast in HypaV3 modal

---
 src/lib/Others/HypaV3Modal.svelte | 21 ++++++++++-----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/src/lib/Others/HypaV3Modal.svelte b/src/lib/Others/HypaV3Modal.svelte
index 389a1180..20daf0e5 100644
--- a/src/lib/Others/HypaV3Modal.svelte
+++ b/src/lib/Others/HypaV3Modal.svelte
@@ -10,7 +10,6 @@
     ScissorsLineDashed,
     CheckIcon,
   } from "lucide-svelte";
-  import TextAreaInput from "../../lib/UI/GUI/TextAreaInput.svelte";
   import {
     alertConfirm,
     alertNormalWait,
@@ -617,7 +616,7 @@
                   No summaries yet, but you may convert HypaV2 data to V3.
                 </div>
                 <button
-                  class="my-1 sm:my-2 px-4 py-2 rounded-md text-zinc-300 font-semibold bg-zinc-700 hover:bg-zinc-600 transition-colors"
+                  class="my-1 sm:my-2 px-4 py-2 rounded-md text-zinc-300 font-semibold bg-zinc-700 hover:bg-zinc-500 transition-colors"
                   onclick={async () => {
                     const conversionResult = convertHypaV2ToV3();
 
@@ -671,7 +670,7 @@
                   <!-- Important Button -->
                   <button
                     class="p-2 hover:text-zinc-200 transition-colors {summary.isImportant
-                      ? 'text-yellow-500'
+                      ? 'text-yellow-400'
                       : 'text-zinc-400'}"
                     onclick={() => {
                       summary.isImportant = !summary.isImportant;
@@ -713,7 +712,7 @@
               <!-- Original Summary -->
               <div class="mt-2 sm:mt-4">
                 <textarea
-                  class="p-2 sm:p-4 w-full min-h-40 sm:min-h-56 resize-vertical rounded border border-zinc-700 focus:outline-none focus:ring-2 focus:ring-zinc-600 transition-colors text-zinc-200 bg-zinc-900"
+                  class="p-2 sm:p-4 w-full min-h-40 sm:min-h-56 resize-vertical rounded border border-zinc-700 focus:outline-none focus:ring-2 focus:ring-zinc-500 transition-colors text-zinc-200 bg-zinc-900"
                   bind:value={summary.text}
                 >
                 </textarea>
@@ -784,7 +783,7 @@
                 <!-- Rerolled Summary -->
                 <div class="mt-2 sm:mt-4">
                   <textarea
-                    class="p-2 sm:p-4 w-full min-h-40 sm:min-h-56 resize-vertical rounded border border-zinc-700 focus:outline-none focus:ring-2 focus:ring-zinc-600 transition-colors text-zinc-200 bg-zinc-900"
+                    class="p-2 sm:p-4 w-full min-h-40 sm:min-h-56 resize-vertical rounded border border-zinc-700 focus:outline-none focus:ring-2 focus:ring-zinc-500 transition-colors text-zinc-200 bg-zinc-900"
                     bind:value={summaryUIStates[i].rerolledText}
                   >
                   </textarea>
@@ -836,7 +835,7 @@
               <div class="flex flex-wrap mt-2 sm:mt-4 gap-2">
                 {#each summary.chatMemos as chatMemo}
                   <button
-                    class="px-3 py-2 rounded-full text-xs text-zinc-200 hover:bg-zinc-800 transition-colors bg-zinc-900 {isMessageExpanded(
+                    class="px-3 py-2 rounded-full text-xs text-zinc-200 hover:bg-zinc-700 transition-colors bg-zinc-900 {isMessageExpanded(
                       i,
                       chatMemo
                     )
@@ -867,11 +866,11 @@
                         value={expandedMessage.data}
                       ></textarea>
                     {:else}
-                      <span class="text-sm text-red-500">Message not found</span
+                      <span class="text-sm text-red-400">Message not found</span
                       >
                     {/if}
                   {:catch error}
-                    <span class="text-sm text-red-500"
+                    <span class="text-sm text-red-400"
                       >Error loading expanded message: {error.message}</span
                     >
                   {/await}
@@ -918,10 +917,10 @@
                 value={nextMessage.data}
               ></textarea>
             {:else}
-              <span class="text-sm text-red-500">WARN: No messages found</span>
+              <span class="text-sm text-red-400">WARN: No messages found</span>
             {/if}
           {:catch error}
-            <span class="text-sm text-red-500"
+            <span class="text-sm text-red-400"
               >Error loading next message: {error.message}</span
             >
           {/await}
@@ -930,7 +929,7 @@
         <!-- No First Message -->
         {#if !getFirstMessage()}
           <div class="mt-2 sm:mt-4">
-            <span class="text-sm text-red-500"
+            <span class="text-sm text-red-400"
               >WARN: Selected first message is empty</span
             >
           </div>

From 22e4b3d07cb7caf4824c17ec547a697dfe3dccfe Mon Sep 17 00:00:00 2001
From: Bo26fhmC5M <88071760+Bo26fhmC5M@users.noreply.github.com>
Date: Wed, 22 Jan 2025 22:08:46 +0900
Subject: [PATCH 13/15] feat: add search button in HypaV3 modal

---
 src/lib/Others/HypaV3Modal.svelte | 233 +++++++++++++++++++++++++++++-
 1 file changed, 225 insertions(+), 8 deletions(-)

diff --git a/src/lib/Others/HypaV3Modal.svelte b/src/lib/Others/HypaV3Modal.svelte
index 20daf0e5..8a31c319 100644
--- a/src/lib/Others/HypaV3Modal.svelte
+++ b/src/lib/Others/HypaV3Modal.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
-  import { tick } from "svelte";
+  import { untrack, tick } from "svelte";
   import {
+    SearchIcon,
     SettingsIcon,
     Trash2Icon,
     XIcon,
@@ -29,6 +30,7 @@
   import { translateHTML } from "../../ts/translator/translator";
 
   interface SummaryUI {
+    originalRef: HTMLTextAreaElement;
     isTranslating: boolean;
     translation: string | null;
     translationRef: HTMLTextAreaElement;
@@ -37,6 +39,7 @@
     isRerolledTranslating: boolean;
     rerolledTranslation: string | null;
     rerolledTranslationRef: HTMLTextAreaElement;
+    chatMemoRefs: HTMLButtonElement[];
   }
 
   interface ExpandedMessageUI {
@@ -47,6 +50,18 @@
     translationRef: HTMLTextAreaElement;
   }
 
+  interface SearchResult {
+    element: HTMLElement;
+    matchType: "chatMemo" | "summary";
+  }
+
+  interface SearchUI {
+    ref: HTMLInputElement;
+    query: string;
+    currentIndex: number;
+    results: SearchResult[];
+  }
+
   const hypaV3DataState = $derived(
     DBState.db.characters[$selectedCharID].chats[
       DBState.db.characters[$selectedCharID].chatPage
@@ -54,10 +69,12 @@
   );
 
   let summaryUIStates = $state<SummaryUI[]>([]);
-  let expandedMessageUIState = $state<ExpandedMessageUI | null>(null);
+  let expandedMessageUIState = $state<ExpandedMessageUI>(null);
+  let searchUIState = $state<SearchUI>(null);
 
   $effect.pre(() => {
-    summaryUIStates = hypaV3DataState.summaries.map(() => ({
+    summaryUIStates = hypaV3DataState.summaries.map((summary) => ({
+      originalRef: null,
       isTranslating: false,
       translation: null,
       translationRef: null,
@@ -66,9 +83,13 @@
       isRerolledTranslating: false,
       rerolledTranslation: null,
       rerolledTranslationRef: null,
+      chatMemoRefs: new Array(summary.chatMemos.length).fill(null),
     }));
 
-    expandedMessageUIState = null;
+    untrack(() => {
+      expandedMessageUIState = null;
+      searchUIState = null;
+    });
   });
 
   async function alertConfirmTwice(
@@ -80,6 +101,155 @@
     );
   }
 
+  async function toggleSearch() {
+    if (searchUIState === null) {
+      searchUIState = {
+        ref: null,
+        query: "",
+        currentIndex: -1,
+        results: [],
+      };
+
+      // Focus on search element after it's rendered
+      await tick();
+
+      if (searchUIState.ref) {
+        searchUIState.ref.focus();
+      }
+    } else {
+      searchUIState = null;
+    }
+  }
+
+  function onSearch(e: KeyboardEvent) {
+    if (!searchUIState) return;
+
+    if (e.key === "Escape") {
+      searchUIState = null;
+      return;
+    }
+
+    if (e.key === "Enter") {
+      e.preventDefault(); // Prevent event default action
+
+      const query = searchUIState.query.trim();
+
+      if (!query) return;
+
+      // Search summary index
+      if (query.match(/^#\d+$/)) {
+        const summaryNumber = parseInt(query.substring(1)) - 1;
+
+        if (
+          summaryNumber >= 0 &&
+          summaryNumber < hypaV3DataState.summaries.length
+        ) {
+          summaryUIStates[summaryNumber].originalRef.scrollIntoView({
+            behavior: "instant",
+            block: "center",
+          });
+        }
+
+        return;
+      }
+
+      const normalizedQuery = query.toLowerCase();
+
+      if (searchUIState.currentIndex === -1) {
+        const results: SearchResult[] = [];
+
+        if (isGuidLike(query)) {
+          // Search chatMemo
+          summaryUIStates.forEach((summaryUI) => {
+            summaryUI.chatMemoRefs.forEach((buttonRef) => {
+              const buttonText = buttonRef.textContent?.toLowerCase() || "";
+
+              if (buttonText.includes(normalizedQuery)) {
+                results.push({
+                  element: buttonRef as HTMLButtonElement,
+                  matchType: "chatMemo",
+                });
+              }
+            });
+          });
+        } else {
+          // Search summary
+          summaryUIStates.forEach((summaryUI) => {
+            const textAreaText = summaryUI.originalRef.value?.toLowerCase();
+
+            if (textAreaText.includes(normalizedQuery)) {
+              results.push({
+                element: summaryUI.originalRef as HTMLTextAreaElement,
+                matchType: "summary",
+              });
+            }
+          });
+        }
+
+        searchUIState.results = results;
+        searchUIState.currentIndex = -1;
+      }
+
+      // Rotate search results
+      if (searchUIState.results.length > 0) {
+        searchUIState.currentIndex =
+          (searchUIState.currentIndex + 1) % searchUIState.results.length;
+
+        const currentResult = searchUIState.results[searchUIState.currentIndex];
+
+        // Scroll to element
+        currentResult.element.scrollIntoView({
+          behavior: "instant",
+          block: "center",
+        });
+
+        if (currentResult.matchType === "chatMemo") {
+          // Simulate focus effect
+          currentResult.element.classList.add("ring-2", "ring-zinc-500");
+
+          // Remove focus effect after a short delay
+          window.setTimeout(() => {
+            currentResult.element.classList.remove("ring-2", "ring-zinc-500");
+          }, 1000);
+        } else {
+          const textarea = currentResult.element as HTMLTextAreaElement;
+          const startIndex = textarea.value
+            .toLowerCase()
+            .indexOf(normalizedQuery);
+          const lineHeight = parseInt(
+            window.getComputedStyle(textarea).lineHeight,
+            10
+          );
+
+          if (startIndex !== -1) {
+            // Select query
+            textarea.setSelectionRange(
+              startIndex,
+              startIndex + normalizedQuery.length
+            );
+
+            // Scroll to the bottom
+            textarea.scrollTop = textarea.scrollHeight;
+
+            textarea.blur(); // Collapse selection
+            textarea.focus(); // This scrolls the textarea
+
+            searchUIState.ref.focus(); // Restore focus to search bar
+          }
+        }
+      }
+    }
+  }
+
+  function isGuidLike(str: string): boolean {
+    const strTrimed = str.trim();
+
+    // Exclude too short inputs
+    if (strTrimed.length < 4) return false;
+
+    return /^[0-9a-f]{4,12}(-[0-9a-f]{4,12}){0,4}-?$/i.test(strTrimed);
+  }
+
   async function toggleTranslate(
     summaryIndex: number,
     regenerate?: boolean
@@ -481,13 +651,13 @@
       if (tapLength < DOUBLE_TAP_DELAY && tapLength > 0) {
         // Double tap detected
         event.preventDefault();
-        clearTimeout(state.tapTimeout); // Cancel the first tap timeout
+        window.clearTimeout(state.tapTimeout); // Cancel the first tap timeout
         params.onAlternativeAction?.();
         state.lastTap = 0; // Reset state
       } else {
         state.lastTap = currentTime; // First tap
         // Delayed single tap execution
-        state.tapTimeout = setTimeout(() => {
+        state.tapTimeout = window.setTimeout(() => {
           if (state.lastTap === currentTime) {
             // If no double tap occurred
             params.onMainAction?.();
@@ -520,7 +690,7 @@
           node.removeEventListener("click", handleClick);
         }
 
-        clearTimeout(state.tapTimeout); // Cleanup timeout
+        window.clearTimeout(state.tapTimeout); // Cleanup timeout
       },
       update(newParams: DualActionParams) {
         params = newParams;
@@ -548,6 +718,14 @@
         </h1>
         <!-- Buttons Container -->
         <div class="flex items-center gap-2">
+          <!-- Search Button -->
+          <button
+            class="p-2 text-zinc-400 hover:text-zinc-200 transition-colors"
+            onclick={async () => toggleSearch()}
+          >
+            <SearchIcon class="w-6 h-6" />
+          </button>
+
           <!-- Settings Button -->
           <button
             class="p-2 text-zinc-400 hover:text-zinc-200 transition-colors"
@@ -642,6 +820,43 @@
               No summaries yet
             </div>
           {/if}
+
+          <!-- Search Bar -->
+        {:else if searchUIState}
+          <div class="sticky top-0 z-50 p-2 sm:p-3 bg-zinc-800">
+            <div class="flex items-center gap-2">
+              <div class="relative flex flex-1 items-center">
+                <input
+                  class="w-full px-2 sm:px-4 py-2 sm:py-3 rounded border border-zinc-700 focus:outline-none focus:ring-2 focus:ring-zinc-500 text-zinc-200 bg-zinc-900"
+                  placeholder="Enter #N, ID, or search query"
+                  bind:this={searchUIState.ref}
+                  bind:value={searchUIState.query}
+                  oninput={() => {
+                    if (searchUIState) {
+                      searchUIState.currentIndex = -1;
+                      searchUIState.results = [];
+                    }
+                  }}
+                  onkeydown={(e) => onSearch(e)}
+                />
+
+                {#if searchUIState.results.length > 0}
+                  <span
+                    class="absolute right-3 top-1/2 -translate-y-1/2 px-1.5 sm:py-3 py-1 sm:py-2 rounded text-sm font-semibold text-zinc-100 bg-zinc-700/65"
+                  >
+                    {searchUIState.currentIndex + 1}/{searchUIState.results
+                      .length}
+                  </span>
+                {/if}
+              </div>
+              <button
+                class="p-2 text-zinc-400 hover:text-zinc-200 transition-colors"
+                onclick={async () => toggleSearch()}
+              >
+                <XIcon class="w-6 h-6" />
+              </button>
+            </div>
+          </div>
         {/if}
 
         <!-- Summaries List -->
@@ -713,6 +928,7 @@
               <div class="mt-2 sm:mt-4">
                 <textarea
                   class="p-2 sm:p-4 w-full min-h-40 sm:min-h-56 resize-vertical rounded border border-zinc-700 focus:outline-none focus:ring-2 focus:ring-zinc-500 transition-colors text-zinc-200 bg-zinc-900"
+                  bind:this={summaryUIStates[i].originalRef}
                   bind:value={summary.text}
                 >
                 </textarea>
@@ -833,7 +1049,7 @@
 
               <!-- Connected Message IDs -->
               <div class="flex flex-wrap mt-2 sm:mt-4 gap-2">
-                {#each summary.chatMemos as chatMemo}
+                {#each summary.chatMemos as chatMemo, memoIndex}
                   <button
                     class="px-3 py-2 rounded-full text-xs text-zinc-200 hover:bg-zinc-700 transition-colors bg-zinc-900 {isMessageExpanded(
                       i,
@@ -841,6 +1057,7 @@
                     )
                       ? 'ring-2 ring-zinc-500'
                       : ''}"
+                    bind:this={summaryUIStates[i].chatMemoRefs[memoIndex]}
                     onclick={() => toggleExpandMessage(i, chatMemo)}
                   >
                     {chatMemo == null ? "First Message" : chatMemo}

From 2d22e9da5cd2e1962c4b4f4b6d673e9b195e02c8 Mon Sep 17 00:00:00 2001
From: Bo26fhmC5M <88071760+Bo26fhmC5M@users.noreply.github.com>
Date: Wed, 22 Jan 2025 23:49:22 +0900
Subject: [PATCH 14/15] fix: support multiple search results within a single
 summary in HypaV3 modal

---
 src/lib/Others/HypaV3Modal.svelte | 91 +++++++++++++++++--------------
 1 file changed, 49 insertions(+), 42 deletions(-)

diff --git a/src/lib/Others/HypaV3Modal.svelte b/src/lib/Others/HypaV3Modal.svelte
index 8a31c319..579de3a6 100644
--- a/src/lib/Others/HypaV3Modal.svelte
+++ b/src/lib/Others/HypaV3Modal.svelte
@@ -53,6 +53,10 @@
   interface SearchResult {
     element: HTMLElement;
     matchType: "chatMemo" | "summary";
+    summaryPosition?: {
+      start: number;
+      end: number;
+    };
   }
 
   interface SearchUI {
@@ -177,66 +181,69 @@
           summaryUIStates.forEach((summaryUI) => {
             const textAreaText = summaryUI.originalRef.value?.toLowerCase();
 
-            if (textAreaText.includes(normalizedQuery)) {
+            let pos = -1;
+            while (
+              (pos = textAreaText.indexOf(normalizedQuery, pos + 1)) !== -1
+            ) {
               results.push({
                 element: summaryUI.originalRef as HTMLTextAreaElement,
                 matchType: "summary",
+                summaryPosition: {
+                  start: pos,
+                  end: pos + normalizedQuery.length,
+                },
               });
             }
           });
         }
 
         searchUIState.results = results;
-        searchUIState.currentIndex = -1;
       }
 
-      // Rotate search results
-      if (searchUIState.results.length > 0) {
-        searchUIState.currentIndex =
-          (searchUIState.currentIndex + 1) % searchUIState.results.length;
+      if (searchUIState.results.length === 0) return;
 
-        const currentResult = searchUIState.results[searchUIState.currentIndex];
+      // Move to next result
+      searchUIState.currentIndex =
+        (searchUIState.currentIndex + 1) % searchUIState.results.length;
 
-        // Scroll to element
-        currentResult.element.scrollIntoView({
-          behavior: "instant",
-          block: "center",
-        });
+      const result = searchUIState.results[searchUIState.currentIndex];
 
-        if (currentResult.matchType === "chatMemo") {
-          // Simulate focus effect
-          currentResult.element.classList.add("ring-2", "ring-zinc-500");
+      // Scroll to element
+      result.element.scrollIntoView({
+        behavior: "instant",
+        block: "center",
+      });
 
-          // Remove focus effect after a short delay
-          window.setTimeout(() => {
-            currentResult.element.classList.remove("ring-2", "ring-zinc-500");
-          }, 1000);
-        } else {
-          const textarea = currentResult.element as HTMLTextAreaElement;
-          const startIndex = textarea.value
-            .toLowerCase()
-            .indexOf(normalizedQuery);
-          const lineHeight = parseInt(
-            window.getComputedStyle(textarea).lineHeight,
-            10
-          );
+      if (result.matchType === "chatMemo") {
+        // Highlight chatMemo result
+        result.element.classList.add("ring-2", "ring-zinc-500");
 
-          if (startIndex !== -1) {
-            // Select query
-            textarea.setSelectionRange(
-              startIndex,
-              startIndex + normalizedQuery.length
-            );
+        // Remove highlight after a short delay
+        window.setTimeout(() => {
+          result.element.classList.remove("ring-2", "ring-zinc-500");
+        }, 1000);
+      } else {
+        // Handle summary text selection
+        const textarea = result.element as HTMLTextAreaElement;
 
-            // Scroll to the bottom
-            textarea.scrollTop = textarea.scrollHeight;
+        // Make readonly temporarily
+        textarea.readOnly = true;
 
-            textarea.blur(); // Collapse selection
-            textarea.focus(); // This scrolls the textarea
+        // Select query
+        textarea.setSelectionRange(
+          result.summaryPosition.start,
+          result.summaryPosition.end
+        );
 
-            searchUIState.ref.focus(); // Restore focus to search bar
-          }
-        }
+        textarea.scrollTop = textarea.scrollHeight; // Scroll to the bottom
+        textarea.blur(); // Collapse selection
+        textarea.focus(); // This scrolls the textarea
+
+        // Highlight textarea
+        window.setTimeout(() => {
+          searchUIState.ref.focus(); // Restore focus to search bar
+          textarea.readOnly = false; // Remove readonly after focus moved
+        }, 300);
       }
     }
   }
@@ -842,7 +849,7 @@
 
                 {#if searchUIState.results.length > 0}
                   <span
-                    class="absolute right-3 top-1/2 -translate-y-1/2 px-1.5 sm:py-3 py-1 sm:py-2 rounded text-sm font-semibold text-zinc-100 bg-zinc-700/65"
+                    class="absolute right-3 top-1/2 -translate-y-1/2 px-1.5 sm:px-3 py-1 sm:py-2 rounded text-sm font-semibold text-zinc-100 bg-zinc-700/65"
                   >
                     {searchUIState.currentIndex + 1}/{searchUIState.results
                       .length}

From 1c5ed2fe32a9e5c395afe8e0dd7a22cf13f9a683 Mon Sep 17 00:00:00 2001
From: Bo26fhmC5M <88071760+Bo26fhmC5M@users.noreply.github.com>
Date: Thu, 23 Jan 2025 19:48:09 +0900
Subject: [PATCH 15/15] fix: remove instruct35 from HypaV3 supa model list

- Remove outdated model to improve summarization performance
---
 src/lib/Setting/Pages/OtherBotSettings.svelte | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/lib/Setting/Pages/OtherBotSettings.svelte b/src/lib/Setting/Pages/OtherBotSettings.svelte
index a9d611ec..42c05a1f 100644
--- a/src/lib/Setting/Pages/OtherBotSettings.svelte
+++ b/src/lib/Setting/Pages/OtherBotSettings.svelte
@@ -491,7 +491,6 @@
             <span class="text-textcolor mt-4">{language.SuperMemory} {language.model}</span>
             <SelectInput className="mt-2 mb-2" bind:value={DBState.db.supaModelType}>
                 <OptionInput value="distilbart">distilbart-cnn-6-6 (Free/Local)</OptionInput>
-                <OptionInput value="instruct35">OpenAI 3.5 Turbo Instruct</OptionInput>
                 <OptionInput value="subModel">{language.submodel}</OptionInput>
             </SelectInput>
             {#if DBState.db.supaModelType === "instruct35"}