feat: add option to show Hypa modal button in chat menu (#823)

# PR Checklist
- [ ] Have you checked if it works normally in all models? *Ignore this
if it doesn't use models.*
- [ ] Have you checked if it works normally in all web, local, and node
hosted versions? If it doesn't, have you blocked it in those versions?
- [ ] Have you added type definitions?

# Preview

![preview1](https://github.com/user-attachments/assets/daaafcb2-a533-4bf1-b38f-e9b9b54f6769)


![preview2](https://github.com/user-attachments/assets/a632a66d-fc74-4d92-909a-88d450cd41fb)

# Description
This PR introduces following:
- feat: add accessibility setting to control visibility of Hypa V2/V3
modal button in chat menu
- feat: add summarization condition tip to HypaV3 modal

src/lib/ChatScreens/DefaultChatScreen.svelte

@@ -2,7 +2,7 @@
 
     import Suggestion from './Suggestion.svelte';
     import AdvancedChatEditor from './AdvancedChatEditor.svelte';
-    import { CameraIcon, DatabaseIcon, DicesIcon, GlobeIcon, ImagePlusIcon, LanguagesIcon, Laugh, MenuIcon, MicOffIcon, PackageIcon, Plus, RefreshCcwIcon, ReplyIcon, Send, StepForwardIcon, XIcon } from "lucide-svelte";
+    import { CameraIcon, DatabaseIcon, DicesIcon, GlobeIcon, ImagePlusIcon, LanguagesIcon, Laugh, MenuIcon, MicOffIcon, PackageIcon, Plus, RefreshCcwIcon, ReplyIcon, Send, StepForwardIcon, XIcon, BrainIcon } from "lucide-svelte";
     import { selectedCharID, PlaygroundStore, createSimpleCharacter } from "../../ts/stores.svelte";
     import Chat from "./Chat.svelte";
     import { type Message, type character, type groupChat } from "../../ts/storage/database.svelte";
@@ -12,7 +12,7 @@
     import { findCharacterbyId, getUserIconProtrait, messageForm, sleep } from "../../ts/util";
     import { language } from "../../lang";
     import { isExpTranslator, translate } from "../../ts/translator/translator";
-    import { alertError, alertNormal, alertWait } from "../../ts/alert";
+    import { alertError, alertNormal, alertWait, showHypaV2Alert, showHypaV3Alert } from "../../ts/alert";
     import sendSound from '../../etc/send.mp3'
     import { processScript } from "src/ts/process/scripts";
     import CreatorQuote from "./CreatorQuote.svelte";
@@ -803,6 +803,30 @@
                             <span class="ml-2">{language.chatList}</span>
                         </div>
                     {/if}
+
+                    {#if DBState.db.showMenuHypaMemoryModal}
+                        {#if DBState.db.supaModelType !== 'none' && (DBState.db.hypav2 || DBState.db.hypaV3)}
+                            <div class="flex items-center cursor-pointer hover:text-green-500 transition-colors" onclick={() => {
+                                if (DBState.db.hypav2) {
+                                    DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].hypaV2Data ??= {
+                                        lastMainChunkID: 0,
+                                        mainChunks: [],
+                                        chunks: [],
+                                    }
+                                    showHypaV2Alert();
+                                } else if (DBState.db.hypaV3) {
+                                    showHypaV3Alert();
+                                }
+
+                                openMenu = false
+                            }}>
+                                <BrainIcon />
+                                <span class="ml-2">
+                                    {DBState.db.hypav2 ? language.hypaMemoryV2Modal : language.hypaMemoryV3Modal}
+                                </span>
+                            </div>
+                        {/if}
+                    {/if}
                     
                     {#if DBState.db.translator !== ''}
                         <div class={"flex items-center cursor-pointer "+ (DBState.db.useAutoTranslateInput ? 'text-green-500':'lg:hover:text-green-500')} onclick={() => {

src/lib/Others/HypaV3Modal.svelte

@@ -91,6 +91,15 @@
   let showImportantOnly = $state(false);
 
   $effect.pre(() => {
+    untrack(() => {
+      DBState.db.characters[$selectedCharID].chats[
+        DBState.db.characters[$selectedCharID].chatPage
+      ].hypaV3Data ??= {
+        summaries: [],
+        lastSelectedSummaries: [],
+      };
+    });
+
     summaryUIStates = hypaV3DataState.summaries.map((summary) => ({
       originalRef: null,
       isTranslating: false,
@@ -1359,14 +1368,18 @@
           {/await}
         </div>
 
-        <!-- No First Message -->
-        {#if !getFirstMessage()}
-          <div class="mt-2 sm:mt-4">
+        <div class="mt-2 sm:mt-4">
+          <div class="mb-2 sm:mb-4 text-sm text-zinc-400">
+            {language.hypaV3Modal.summarizationConditionLabel}
+          </div>
+
+          <!-- No First Message -->
+          {#if !getFirstMessage()}
             <span class="text-sm text-red-400"
               >{language.hypaV3Modal.emptySelectedFirstMessageLabel}</span
             >
-          </div>
-        {/if}
+          {/if}
+        </div>
       </div>
     </div>
   </div>

src/lib/Setting/Pages/AccessibilitySettings.svelte

@@ -43,6 +43,10 @@
     <Check bind:check={DBState.db.showMenuChatList} name={language.showMenuChatList}/>
 </div>
 
+<div class="flex items-center mt-2">
+    <Check bind:check={DBState.db.showMenuHypaMemoryModal} name={language.showMenuHypaMemoryModal}/>
+</div>
+
 <div class="flex items-center mt-2">
     <Check bind:check={DBState.db.goCharacterOnImport} name={language.goCharacterOnImport}/>
 </div>

src/lib/SideBars/CharConfig.svelte

@@ -1101,20 +1101,16 @@
                 }}
                 className="mt-4"
             >
-                {language.HypaMemory} V2 Data
+                {language.hypaMemoryV2Modal}
             </Button>
         {:else if DBState.db.supaModelType !== 'none' && DBState.db.hypaV3}
             <Button
                 onclick={() => {
-                    DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].hypaV3Data ??= {
-                        summaries: [],
-                        lastSelectedSummaries: [],
-                    }
                     showHypaV3Alert()
                 }}
                 className="mt-4"
             >
-                {language.HypaMemory} V3 Data
+                {language.hypaMemoryV3Modal}
             </Button>
         {:else if DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].supaMemoryData && DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].supaMemoryData.length > 4 || DBState.db.characters[$selectedCharID].supaMemory}
             <span class="text-textcolor mt-4">{language.SuperMemory}</span>