Rework other bots gui

src/lib/Setting/Pages/OtherBotSettings.svelte

@@ -34,11 +34,39 @@
             $DataBase.NAIImgConfig.sm_dyn = false
         }
     }
+
+    let submenu = $DataBase.useLegacyGUI ? -1 : 0
 </script>
 <h2 class="mb-2 text-2xl font-bold mt-2">{language.otherBots}</h2>
 
 
-<Arcodion name={language.imageGeneration}  styled>
+{#if submenu !== -1}
+    <div class="flex w-full rounded-md border border-darkborderc mb-4">
+        <button on:click={() => {
+            submenu = 0
+        }} class="p-2 flex-1 border-r border-darkborderc" class:bg-darkbutton={submenu === 0}>
+            <span>{language.longTermMemory}</span>
+        </button>
+        <button on:click={() => {
+            submenu = 1
+        }} class="p2 flex-1 border-r border-darkborderc" class:bg-darkbutton={submenu === 1}>
+            <span>TTS</span>
+        </button>
+        <button on:click={() => {
+            submenu = 2
+        }} class="p-2 flex-1 border-r border-darkborderc" class:bg-darkbutton={submenu === 2}>
+            <span>{language.emotionImage}</span>
+        </button>
+        <button on:click={() => {
+            submenu = 3
+        }} class="p-2 flex-1" class:bg-darkbutton={submenu === 3}>
+            <span>{language.imageGeneration}</span>
+        </button>
+    </div>
+{/if}
+
+{#if submenu === 3 || submenu === -1}
+    <Arcodion name={language.imageGeneration} styled disabled={submenu !== -1}>
         <span class="text-textcolor mt-2">{language.imageGeneration} {language.provider} <Help key="sdProvider"/></span>
         <SelectInput className="mt-2 mb-4" bind:value={$DataBase.sdProvider}>
             <OptionInput value="" >None</OptionInput>
@@ -267,8 +295,10 @@
             <NumberInput size="sm" marginBottom bind:value={$DataBase.comfyConfig.timeout} min={1} max={120} />
         {/if}
     </Arcodion>
+{/if}
 
-<Arcodion name="TTS" styled>
+{#if submenu === 1 || submenu === -1}
+<Arcodion name="TTS" styled disabled={submenu !== -1}>
     <span class="text-textcolor mt-2">ElevenLabs API key</span>
     <TextInput size="sm" marginBottom bind:value={$DataBase.elevenLabKey}/>
     
@@ -285,8 +315,10 @@
     <TextInput size="sm" marginBottom bind:value={$DataBase.huggingfaceKey} placeholder="hf_..."/>
 
 </Arcodion>
+{/if}
 
-<Arcodion name={language.emotionImage} styled>
+{#if submenu === 2 || submenu === -1}
+<Arcodion name={language.emotionImage} styled disabled={submenu !== -1}>
     <span class="text-textcolor mt-2">{language.emotionMethod}</span>
 
     <SelectInput className="mt-2 mb-4" bind:value={$DataBase.emotionProcesser}>
@@ -294,8 +326,10 @@
         <OptionInput value="embedding" >MiniLM-L6-v2</OptionInput>
     </SelectInput>
 </Arcodion>
+{/if}
 
-<Arcodion name={language.longTermMemory} styled>
+{#if submenu === 0 || submenu === -1}
+    <Arcodion name={language.longTermMemory} styled disabled={submenu !== -1}>
         <span class="text-textcolor mt-4">{language.type}</span>
 
         <SelectInput value={
@@ -393,4 +427,6 @@
                 <Check bind:check={$DataBase.hypaMemory} name={language.enable + ' ' + language.HypaMemory}/>
             </div>
         {/if}
+
     </Arcodion>
+{/if}

src/lib/UI/Arcodion.svelte

@@ -6,10 +6,11 @@
     let open = false
     export let styled = false
     export let help: (keyof (typeof language.help))|'' = ''
-
+    export let disabled = false
 </script>
-
+{#if disabled}
-{#if styled}
+    <slot />
+{:else if styled}
     <div class="flex flex-col mt-2">
         <button class="hover:bg-selected px-6 py-2 text-lg rounded-t-md border-selected border"
             class:bg-selected={open}