[feat] new gui

2023-07-18 23:05:47 +09:00
parent c0622c4f0d
commit cbb203dd44
29 changed files with 679 additions and 450 deletions
--- a/src/lib/Setting/Pages/AccessibilitySettings.svelte
+++ b/src/lib/Setting/Pages/AccessibilitySettings.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import Check from "src/lib/Others/Check.svelte";
+    import Check from "src/lib/UI/GUI/Check.svelte";
    import { language } from "src/lang";
    import { DataBase } from "src/ts/storage/database";

--- a/src/lib/Setting/Pages/AdvancedSettings.svelte
+++ b/src/lib/Setting/Pages/AdvancedSettings.svelte
@@ -1,11 +1,14 @@
 <script lang="ts">
-    import Check from "src/lib/Others/Check.svelte";
+    import Check from "src/lib/UI/GUI/Check.svelte";
    import { language } from "src/lang";
    import { DataBase } from "src/ts/storage/database";
    import { alertMd } from "src/ts/alert";
    import { getRequestLog, isTauri } from "src/ts/storage/globalApi";
    import NumberInput from "src/lib/UI/GUI/NumberInput.svelte";
-  import TextInput from "src/lib/UI/GUI/TextInput.svelte";
+    import TextInput from "src/lib/UI/GUI/TextInput.svelte";
+    import SelectInput from "src/lib/UI/GUI/SelectInput.svelte";
+  import OptionInput from "src/lib/UI/GUI/OptionInput.svelte";
+
 </script>
 <h2 class="text-2xl font-bold mt-2">{language.advancedSettings}</h2>
 <span class="text-draculared text-xs mb-2">{language.advancedSettingsWarn}</span>
@@ -27,10 +30,10 @@
 <NumberInput marginBottom={true} size={"sm"} min={0} max={20} bind:value={$DataBase.requestRetrys}/>

 <span class="text-neutral-200">Request Lib</span>
-<select class="bg-transparent input-text text-gray-200 appearance-none text-sm" bind:value={$DataBase.requester}>
-    <option value="new" class="bg-darkbg appearance-none">Reqwest</option>
-    <option value="old" class="bg-darkbg appearance-none">Tauri</option>
-</select>
+<SelectInput bind:value={$DataBase.requester}>
+    <OptionInput value="new">Reqwest</OptionInput>
+    <OptionInput value="old">Tauri</OptionInput>
+</SelectInput>

 <div class="flex items-center mt-4">
    <Check bind:check={$DataBase.useSayNothing} name={language.sayNothing}/>
--- a/src/lib/Setting/Pages/BotSettings.svelte
+++ b/src/lib/Setting/Pages/BotSettings.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import Check from "src/lib/Others/Check.svelte";
+    import Check from "src/lib/UI/GUI/Check.svelte";
    import { language } from "src/lang";
    import Help from "src/lib/Others/Help.svelte";
    import { DataBase } from "src/ts/storage/database";
@@ -10,10 +10,15 @@
    import DropList from "src/lib/SideBars/DropList.svelte";
    import { PlusIcon, TrashIcon } from "lucide-svelte";
    import { onDestroy } from "svelte";
-  import { recommendedPresetExist, setRecommended } from "src/ts/process/templates/getRecomended";
-  import TextInput from "src/lib/UI/GUI/TextInput.svelte";
-  import NumberInput from "src/lib/UI/GUI/NumberInput.svelte";
-  import SliderInput from "src/lib/UI/GUI/SliderInput.svelte";
+    import { recommendedPresetExist, setRecommended } from "src/ts/process/templates/getRecomended";
+    import TextInput from "src/lib/UI/GUI/TextInput.svelte";
+    import NumberInput from "src/lib/UI/GUI/NumberInput.svelte";
+    import SliderInput from "src/lib/UI/GUI/SliderInput.svelte";
+    import TextAreaInput from "src/lib/UI/GUI/TextAreaInput.svelte";
+  import Button from "src/lib/UI/GUI/Button.svelte";
+  import SelectInput from "src/lib/UI/GUI/SelectInput.svelte";
+  import OptionInput from "src/lib/UI/GUI/OptionInput.svelte";
+
    let tokens = {
        mainPrompt: 0,
        jailbreak: 0,
@@ -97,7 +102,7 @@

 {#if advancedBotSettings && recommendedPresetExist($DataBase.aiModel)}
    <div>
-        <button class="bg-darkbg hover:ring p-1 text-sm mb-2 rounded-md" on:click={() => {setRecommended($DataBase.aiModel, 'ask')}}>{language.recommendedPreset}</button>
+        <Button size="sm" className="mb-2" on:click={() => {setRecommended($DataBase.aiModel, 'ask')}}>{language.recommendedPreset}</Button>
    </div>
 {/if}
 {#if $DataBase.aiModel === 'palm2' || $DataBase.subModel === 'palm2'}
@@ -119,34 +124,34 @@
    <span class="text-neutral-200 mt-4"> {language.proxyAPIKey}</span>
    <TextInput marginBottom={false} size={"sm"} placeholder="leave it blank if it hasn't password" bind:value={$DataBase.proxyKey} />
    <span class="text-neutral-200 mt-4"> {language.proxyRequestModel}</span>
-    <select class="bg-transparent input-text mt-2 mb-4 text-gray-200 appearance-none text-sm" bind:value={$DataBase.proxyRequestModel}>
-        <option value="" class="bg-darkbg appearance-none">None</option>
-        <option value="gpt35" class="bg-darkbg appearance-none">GPT 3.5</option>
-        <option value="gpt35_16k" class="bg-darkbg appearance-none">GPT 3.5 16k</option>
-        <option value="gpt4" class="bg-darkbg appearance-none">GPT-4</option>
-        <option value="gpt4_32k" class="bg-darkbg appearance-none">GPT-4 32k</option>
-        <option value="gpt35_0301" class="bg-darkbg appearance-none">GPT-3.5 0301</option>
-        <option value="gpt4_0301" class="bg-darkbg appearance-none">GPT-4 0301</option>
-        <option value="gpt4_0613" class="bg-darkbg appearance-none">GPT-4 0613</option>
-    </select>
+    <SelectInput className="mt-2 mb-4" bind:value={$DataBase.proxyRequestModel}>
+        <OptionInput value="">None</OptionInput>
+        <OptionInput value="gpt35">GPT 3.5</OptionInput>
+        <OptionInput value="gpt35_16k">GPT 3.5 16k</OptionInput>
+        <OptionInput value="gpt4">GPT-4</OptionInput>
+        <OptionInput value="gpt4_32k">GPT-4 32k</OptionInput>
+        <OptionInput value="gpt35_0301">GPT-3.5 0301</OptionInput>
+        <OptionInput value="gpt4_0301">GPT-4 0301</OptionInput>
+        <OptionInput value="gpt4_0613">GPT-4 0613</OptionInput>
+    </SelectInput>
 {/if}
 {#if $DataBase.aiModel === 'openrouter' || $DataBase.subModel === 'openrouter'}
    <span class="text-neutral-200 mt-4">Openrouter Key</span>
    <TextInput marginBottom={false} size={"sm"} bind:value={$DataBase.openrouterKey} />

    <span class="text-neutral-200 mt-4">Openrouter Model</span>
-    <select class="bg-transparent input-text mt-2 mb-4 text-gray-200 appearance-none text-sm" bind:value={$DataBase.openrouterRequestModel}>
-        <option value="openai/gpt-3.5-turbo" class="bg-darkbg appearance-none">GPT 3.5</option>
-        <option value="openai/gpt-3.5-turbo-16k" class="bg-darkbg appearance-none">GPT 3.5 16k</option>
-        <option value="openai/gpt-4" class="bg-darkbg appearance-none">GPT-4</option>
-        <option value="openai/gpt-4-32k" class="bg-darkbg appearance-none">GPT-4 32k</option>
-        <option value="anthropic/claude-2" class="bg-darkbg appearance-none">Claude 2</option>
-        <option value="anthropic/claude-instant-v1" class="bg-darkbg appearance-none">Claude Instant v1</option>
-        <option value="anthropic/claude-instant-v1-100k" class="bg-darkbg appearance-none">Claude Instant v1 100k</option>
-        <option value="anthropic/claude-v1" class="bg-darkbg appearance-none">Claude v1</option>
-        <option value="anthropic/claude-v1-100k" class="bg-darkbg appearance-none">Claude v1 100k</option>
-        <option value="anthropic/claude-1.2" class="bg-darkbg appearance-none">Claude v1.2</option>
-    </select>
+    <SelectInput className="mt-2 mb-4" bind:value={$DataBase.openrouterRequestModel}>
+        <OptionInput value="openai/gpt-3.5-turbo">GPT 3.5</OptionInput>
+        <OptionInput value="openai/gpt-3.5-turbo-16k">GPT 3.5 16k</OptionInput>
+        <OptionInput value="openai/gpt-4">GPT-4</OptionInput>
+        <OptionInput value="openai/gpt-4-32k">GPT-4 32k</OptionInput>
+        <OptionInput value="anthropic/claude-2">Claude 2</OptionInput>
+        <OptionInput value="anthropic/claude-instant-v1">Claude Instant v1</OptionInput>
+        <OptionInput value="anthropic/claude-instant-v1-100k">Claude Instant v1 100k</OptionInput>
+        <OptionInput value="anthropic/claude-v1">Claude v1</OptionInput>
+        <OptionInput value="anthropic/claude-v1-100k">Claude v1 100k</OptionInput>
+        <OptionInput value="anthropic/claude-1.2">Claude v1.2</OptionInput>
+    </SelectInput>
 {/if}
 {#if $DataBase.aiModel.startsWith('gpt') || $DataBase.subModel.startsWith('gpt')}
    <span class="text-neutral-200">OpenAI {language.apiKey} <Help key="oaiapikey"/></span>
@@ -161,12 +166,12 @@

 {#if $DataBase.aiModel === 'custom'}
    <span class="text-neutral-200 mt-2">{language.plugin}</span>
-    <select class="bg-transparent input-text mt-2 mb-4 text-gray-200 appearance-none text-sm" bind:value={$DataBase.currentPluginProvider}>
-        <option value="" class="bg-darkbg appearance-none">None</option>
+    <SelectInput className="mt-2 mb-4" bind:value={$DataBase.currentPluginProvider}>
+        <OptionInput value="">None</OptionInput>
        {#each $customProviderStore as plugin}
-            <option value={plugin} class="bg-darkbg appearance-none">{plugin}</option>
+            <OptionInput value={plugin}>{plugin}</OptionInput>
        {/each}
-    </select>
+    </SelectInput>
 {/if}
 {#if $DataBase.aiModel === "novelai" || $DataBase.subModel === "novelai"}
    <span class="text-neutral-200">NovelAI Bearer Token</span>
@@ -196,14 +201,14 @@
 {/if}
 {#if advancedBotSettings}
    <span class="text-neutral-200">{language.mainPrompt} <Help key="mainprompt"/></span>
-    <textarea class="bg-transparent input-text mt-2 mb-2 text-gray-200 resize-none h-20 min-h-20 focus:bg-selected text-xs w-full" autocomplete="off" bind:value={$DataBase.mainPrompt}></textarea>
-    <span class="text-gray-400 mb-6 text-sm">{tokens.mainPrompt} {language.tokens}</span>
+    <TextAreaInput fullwidth autocomplete="off" height={"32"} bind:value={$DataBase.mainPrompt}></TextAreaInput>
+    <span class="text-gray-400 mb-6 text-sm mt-2">{tokens.mainPrompt} {language.tokens}</span>
    <span class="text-neutral-200">{language.jailbreakPrompt} <Help key="jailbreak"/></span>
-    <textarea class="bg-transparent input-text mt-2 mb-2 text-gray-200 resize-none h-20 min-h-20 focus:bg-selected text-xs w-full" autocomplete="off" bind:value={$DataBase.jailbreak}></textarea>
-    <span class="text-gray-400 mb-6 text-sm">{tokens.jailbreak} {language.tokens}</span>
+    <TextAreaInput fullwidth autocomplete="off" height={"32"} bind:value={$DataBase.jailbreak}></TextAreaInput>
+    <span class="text-gray-400 mb-6 text-sm mt-2">{tokens.jailbreak} {language.tokens}</span>
    <span class="text-neutral-200">{language.globalNote} <Help key="globalNote"/></span>
-    <textarea class="bg-transparent input-text mt-2 mb-2 text-gray-200 resize-none h-20 min-h-20 focus:bg-selected text-xs w-full" autocomplete="off" bind:value={$DataBase.globalNote}></textarea>
-    <span class="text-gray-400 mb-6 text-sm">{tokens.globalNote} {language.tokens}</span>    
+    <TextAreaInput fullwidth autocomplete="off" height={"32"} bind:value={$DataBase.globalNote}></TextAreaInput>
+    <span class="text-gray-400 mb-6 text-sm mt-2">{tokens.globalNote} {language.tokens}</span>    

    <span class="text-neutral-200">{language.maxContextSize}</span>
    <NumberInput min={0} max={getModelMaxContext($DataBase.aiModel)} marginBottom={true} bind:value={$DataBase.maxContext}/>
@@ -303,7 +308,7 @@
    <span class="text-gray-400 mb-6 text-sm">{($DataBase.PresensePenalty / 100).toFixed(2)}</span>

    <span class="text-neutral-200 mt-2">{language.autoSuggest} <Help key="autoSuggest"/></span>
-    <textarea class="bg-transparent input-text mb-2 text-gray-200 resize-none h-20 min-h-20 focus:bg-selected text-xs w-full" autocomplete="off" bind:value={$DataBase.autoSuggestPrompt}></textarea>
+    <TextAreaInput height="20" autocomplete="off" bind:value={$DataBase.autoSuggestPrompt} />
    <span class="text-gray-400 mb-6 text-sm">{tokens.autoSuggest} {language.tokens}</span>
 {/if}
 {/if}
@@ -354,6 +359,6 @@
        <Check bind:check={$DataBase.promptPreprocess} name={language.promptPreprocess}/>
    </div>

-<button on:click={() => {openPresetList = true}} class="mt-4 drop-shadow-lg p-3 border-borderc border-solid flex justify-center items-center ml-2 mr-2 border-1 hover:bg-selected">{language.presets}</button>
+<Button onClick={() => {openPresetList = true}} className="mt-4">{language.presets}</Button>

 {/if}
--- a/src/lib/Setting/Pages/DisplaySettings.svelte
+++ b/src/lib/Setting/Pages/DisplaySettings.svelte
@@ -2,20 +2,21 @@
    import { language } from "src/lang";
    import { DataBase, saveImage, updateTextTheme } from "src/ts/storage/database";
    import { changeFullscreen, selectSingleFile, sleep } from "src/ts/util";
-    import Check from "src/lib/Others/Check.svelte";
+    import Check from "src/lib/UI/GUI/Check.svelte";
    import Help from "src/lib/Others/Help.svelte";
  import SliderInput from "src/lib/UI/GUI/SliderInput.svelte";
+  import SelectInput from "src/lib/UI/GUI/SelectInput.svelte";
+  import OptionInput from "src/lib/UI/GUI/OptionInput.svelte";
 </script>

 <h2 class="mb-2 text-2xl font-bold mt-2">{language.display}</h2>

 <span class="text-neutral-200 mt-4">{language.theme}</span>
-<select class="bg-transparent input-text mt-2 text-gray-200 appearance-none text-sm" bind:value={$DataBase.theme}>
-    <option value="" class="bg-darkbg appearance-none">Standard Risu</option>
-    <option value="waifu" class="bg-darkbg appearance-none">Waifulike</option>
-    <option value="waifuMobile" class="bg-darkbg appearance-none">WaifuCut</option>
-    <!-- <option value="free" class="bg-darkbg appearance-none">Freestyle</option> -->
-</select>
+<SelectInput className="mt-2" bind:value={$DataBase.theme}>
+    <OptionInput value="" >Standard Risu</OptionInput>
+    <OptionInput value="waifu" >Waifulike</OptionInput>
+    <OptionInput value="waifuMobile" >WaifuCut</OptionInput>
+</SelectInput>


 {#if $DataBase.theme === "waifu"}
@@ -29,11 +30,11 @@
 {/if}

 <span class="text-neutral-200 mt-4">{language.textColor}</span>
-<select class="bg-transparent input-text mt-2 text-gray-200 appearance-none" bind:value={$DataBase.textTheme} on:change={updateTextTheme}>
-    <option value="standard" class="bg-darkbg appearance-none">{language.classicRisu}</option>
-    <option value="highcontrast" class="bg-darkbg appearance-none">{language.highcontrast}</option>
-    <option value="custom" class="bg-darkbg appearance-none">Custom</option>
-</select>
+<SelectInput className="mt-2" bind:value={$DataBase.textTheme} on:change={updateTextTheme}>
+    <OptionInput value="standard" >{language.classicRisu}</OptionInput>
+    <OptionInput value="highcontrast" >{language.highcontrast}</OptionInput>
+    <OptionInput value="custom" >Custom</OptionInput>
+</SelectInput>

 {#if $DataBase.textTheme === "custom"}
    <div class="flex items-center mt-2">
--- a/src/lib/Setting/Pages/LanguageSettings.svelte
+++ b/src/lib/Setting/Pages/LanguageSettings.svelte
@@ -1,39 +1,41 @@
 <script lang="ts">
-    import Check from "src/lib/Others/Check.svelte";
+    import Check from "src/lib/UI/GUI/Check.svelte";
 import { changeLanguage, language } from "src/lang";
    import { DataBase } from "src/ts/storage/database";
    import { sleep } from "src/ts/util";
    import Help from "src/lib/Others/Help.svelte";
+  import OptionInput from "src/lib/UI/GUI/OptionInput.svelte";
+  import SelectInput from "src/lib/UI/GUI/SelectInput.svelte";
    let langChanged = false
 </script>
 <h2 class="mb-2 text-2xl font-bold mt-2">{language.language}</h2>

 <span class="text-neutral-200 mt-4">{language.UiLanguage}</span>
-<select class="bg-transparent input-text mt-2 text-gray-200 appearance-none text-sm" bind:value={$DataBase.language} on:change={async () => {
+<SelectInput className="mt-2" bind:value={$DataBase.language} on:change={async () => {
    await sleep(10)
    changeLanguage($DataBase.language)
    langChanged = true
 }}>
-    <option value="en" class="bg-darkbg appearance-none">English</option>
-    <option value="ko" class="bg-darkbg appearance-none">한국어</option>
-    <option value="cn" class="bg-darkbg appearance-none">中文</option>
-</select>
+    <OptionInput value="en" >English</OptionInput>
+    <OptionInput value="ko" >한국어</OptionInput>
+    <OptionInput value="cn" >中文</OptionInput>
+</SelectInput>
 {#if langChanged}
    <span class="bg-red-500 text-sm">Close the settings to take effect</span>
 {/if}
 <span class="text-neutral-200 mt-4">{language.translator}</span>
-<select class="bg-transparent input-text mt-2 mb-4 text-gray-200 appearance-none text-sm" bind:value={$DataBase.translator}>
-    <option value="" class="bg-darkbg appearance-none">{language.disabled}</option>
-    <option value="ko" class="bg-darkbg appearance-none">Korean</option>
-    <option value="ru" class="bg-darkbg appearance-none">Russian</option>
-    <option value="zh" class="bg-darkbg appearance-none">Chinese</option>
-    <option value="ja" class="bg-darkbg appearance-none">Japanese</option>
-    <option value="fr" class="bg-darkbg appearance-none">French</option>
-    <option value="es" class="bg-darkbg appearance-none">Spanish</option>
-    <option value="pt" class="bg-darkbg appearance-none">Portuguese</option>
-    <option value="de" class="bg-darkbg appearance-none">German</option>
+<SelectInput className="mt-2 mb-4" bind:value={$DataBase.translator}>
+    <OptionInput value="" >{language.disabled}</OptionInput>
+    <OptionInput value="ko" >Korean</OptionInput>
+    <OptionInput value="ru" >Russian</OptionInput>
+    <OptionInput value="zh" >Chinese</OptionInput>
+    <OptionInput value="ja" >Japanese</OptionInput>
+    <OptionInput value="fr" >French</OptionInput>
+    <OptionInput value="es" >Spanish</OptionInput>
+    <OptionInput value="pt" >Portuguese</OptionInput>
+    <OptionInput value="de" >German</OptionInput>

-</select>
+</SelectInput>

 {#if $DataBase.translator}
    <div class="flex items-center mt-2">
--- a/src/lib/Setting/Pages/OtherBotSettings.svelte
+++ b/src/lib/Setting/Pages/OtherBotSettings.svelte
@@ -1,11 +1,13 @@
 <script lang="ts">
-    import Check from "src/lib/Others/Check.svelte";
+    import Check from "src/lib/UI/GUI/Check.svelte";
    import { language } from "src/lang";
    import Help from "src/lib/Others/Help.svelte";
    import { DataBase } from "src/ts/storage/database";
    import { isTauri } from "src/ts/storage/globalApi";
-  import NumberInput from "src/lib/UI/GUI/NumberInput.svelte";
-  import TextInput from "src/lib/UI/GUI/TextInput.svelte";
+    import NumberInput from "src/lib/UI/GUI/NumberInput.svelte";
+    import TextInput from "src/lib/UI/GUI/TextInput.svelte";
+    import SelectInput from "src/lib/UI/GUI/SelectInput.svelte";
+    import OptionInput from "src/lib/UI/GUI/OptionInput.svelte";

 </script>
 <h2 class="mb-2 text-2xl font-bold mt-2">{language.otherBots}</h2>
@@ -13,12 +15,12 @@
 <span class="text-neutral-200 mt-4 text-lg font-bold">{language.imageGeneration}</span>

 <span class="text-neutral-200 mt-2">{language.provider} <Help key="sdProvider"/></span>
-<select class="bg-transparent input-text mt-2 mb-4 text-gray-200 appearance-none text-sm" bind:value={$DataBase.sdProvider}>
-    <option value="" class="bg-darkbg appearance-none">None</option>
-    <option value="webui" class="bg-darkbg appearance-none">Stable Diffusion WebUI</option>
+<SelectInput className="mt-2 mb-4" bind:value={$DataBase.sdProvider}>
+    <OptionInput value="" >None</OptionInput>
+    <OptionInput value="webui" >Stable Diffusion WebUI</OptionInput>
    <!-- TODO -->
-    <!-- <option value="runpod" class="bg-darkbg appearance-none">Runpod Serverless</option> -->
-</select>
+    <!-- <OptionInput value="runpod" >Runpod Serverless</OptionInput> -->
+</SelectInput>

 {#if $DataBase.sdProvider === 'webui'}
 <span class="text-draculared text-xs mb-2">You must use WebUI with --api flag</span>
@@ -64,12 +66,12 @@

 <span class="text-neutral-200 mt-4 text-lg font-bold">{language.SuperMemory} <Help key="superMemory" /></span>
 <span class="text-neutral-200 mt-4">{language.SuperMemory} {language.model}</span>
-<select class="bg-transparent input-text mt-2 mb-2 text-gray-200 appearance-none text-sm" bind:value={$DataBase.supaMemoryType}>
-    <option value="none" class="bg-darkbg appearance-none">None</option>
-    <option value="davinci" class="bg-darkbg appearance-none">OpenAI Davinci</option>
-    <option value="curie" class="bg-darkbg appearance-none">OpenAI Curie</option>
-    <option value="subModel" class="bg-darkbg appearance-none">{language.submodel} ({language.unrecommended})</option>
-</select>
+<SelectInput className="mt-2 mb-2" bind:value={$DataBase.supaMemoryType}>
+    <OptionInput value="none" >None</OptionInput>
+    <OptionInput value="davinci" >OpenAI Davinci</OptionInput>
+    <OptionInput value="curie" >OpenAI Curie</OptionInput>
+    <OptionInput value="subModel" >{language.submodel} ({language.unrecommended})</OptionInput>
+</SelectInput>
 {#if $DataBase.supaMemoryType === 'davinci' || $DataBase.supaMemoryType === 'curie'}
    <span class="text-neutral-200">{language.SuperMemory} OpenAI Key</span>
    <TextInput size="sm" marginBottom bind:value={$DataBase.supaMemoryKey}/>
--- a/src/lib/Setting/Pages/PersonaSettings.svelte
+++ b/src/lib/Setting/Pages/PersonaSettings.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
    import { language } from "src/lang";
  import BaseRoundedButton from "src/lib/UI/BaseRoundedButton.svelte";
+  import TextAreaInput from "src/lib/UI/GUI/TextAreaInput.svelte";
  import TextInput from "src/lib/UI/GUI/TextInput.svelte";
  import { alertConfirm, alertError } from "src/ts/alert";
    import { changeUserPersona, getCharImage, saveUserPersona, selectUserImg } from "src/ts/characters";
@@ -74,7 +75,7 @@
        <span class="text-sm text-gray-500">{language.name}</span>
        <TextInput marginBottom size="lg" placeholder="User" bind:value={$DataBase.username} />
        <span class="text-sm text-gray-500">{language.description}</span>
-        <textarea class="bg-transparent input-text mt-2 mb-2 text-gray-200 resize-none h-32 min-h-20 focus:bg-selected text-xs w-full" autocomplete="off" bind:value={$DataBase.personaPrompt} placeholder={`Put the description of this persona here.\nExample: [<user> is a 20 year old girl.]`}></textarea>
+        <TextAreaInput height="32" autocomplete="off" bind:value={$DataBase.personaPrompt} placeholder={`Put the description of this persona here.\nExample: [<user> is a 20 year old girl.]`} />
        <div>
            <button class="float-right rounded-md border border-red-700 p-2 hover:bg-red-700 transition-colors mt-4 text-sm" on:click={async () => {
                if($DataBase.personas.length === 1){
--- a/src/lib/Setting/Pages/PluginSettings.svelte
+++ b/src/lib/Setting/Pages/PluginSettings.svelte
@@ -4,9 +4,11 @@
  import { alertConfirm } from "src/ts/alert";
  import { DataBase } from "src/ts/storage/database";
  import { importPlugin } from "src/ts/plugins/plugins";
-  import Check from "src/lib/Others/Check.svelte";
+  import Check from "src/lib/UI/GUI/Check.svelte";
  import TextInput from "src/lib/UI/GUI/TextInput.svelte";
  import NumberInput from "src/lib/UI/GUI/NumberInput.svelte";
+  import SelectInput from "src/lib/UI/GUI/SelectInput.svelte";
+  import OptionInput from "src/lib/UI/GUI/OptionInput.svelte";

 </script>
 <h2 class="mb-2 text-2xl font-bold mt-2">{language.plugin}</h2>
@@ -44,11 +46,11 @@
                {#each Object.keys(plugin.arguments) as arg}
                    <span>{arg}</span>
                    {#if Array.isArray(plugin.arguments[arg])}
-                        <select class="bg-transparent input-text mt-2 mb-4 text-gray-200 appearance-none" bind:value={$DataBase.plugins[i].realArg[arg]}>
+                        <SelectInput className="mt-2 mb-4" bind:value={$DataBase.plugins[i].realArg[arg]}>
                            {#each plugin.arguments[arg] as a}
-                                <option value={a} class="bg-darkbg appearance-none">a</option>
+                                <OptionInput value={a}>a</OptionInput>
                            {/each}
-                        </select>
+                        </SelectInput>
                    {:else if plugin.arguments[arg] === 'string'}
                        <TextInput  bind:value={$DataBase.plugins[i].realArg[arg]} />
                    {:else if plugin.arguments[arg] === 'int'}
--- a/src/lib/Setting/Pages/UserSettings.svelte
+++ b/src/lib/Setting/Pages/UserSettings.svelte
@@ -4,7 +4,7 @@
    import { getCharImage, selectUserImg } from "src/ts/characters";
    import { loadRisuAccountData, saveRisuAccountData } from "src/ts/drive/accounter";
    import { DataBase } from "src/ts/storage/database";
-    import Check from "src/lib/Others/Check.svelte";
+    import Check from "src/lib/UI/GUI/Check.svelte";
  import { alertConfirm, alertSelect } from "src/ts/alert";
  import { forageStorage, isNodeServer, isTauri } from "src/ts/storage/globalApi";
  import { unMigrationAccount } from "src/ts/storage/accountStorage";