[feat] prompt template

src/lib/Setting/Pages/BotSettings.svelte

@@ -417,7 +417,17 @@
     <div class="flex items-center mt-4">
         <Check bind:check={$DataBase.promptPreprocess} name={language.promptPreprocess}/>
     </div>
-
+    <div class="flex items-center mt-4">
+        {#if $DataBase.promptTemplate}
+            <Check check={true} name={language.usePromptTemplate} onChange={()=>{
+                $DataBase.promptTemplate = undefined
+            }}/>
+        {:else}
+            <Check check={false} name={language.usePromptTemplate} onChange={() => {
+                $DataBase.promptTemplate = []
+            }}/>
+        {/if}
+    </div>
 <Button on:click={() => {openPresetList = true}} className="mt-4">{language.presets}</Button>
 
 {/if}

src/lib/Setting/Pages/PromptSettings.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+    import { PlusIcon } from "lucide-svelte";
+    import { language } from "src/lang";
+    import ProomptItem from "src/lib/UI/ProomptItem.svelte";
+    import type { Proompt } from "src/ts/process/proompt";
+  import { DataBase } from "src/ts/storage/database";
+
+    let sorted = 0
+    let opened = 0
+
+    const onOpen = () => {
+        opened += 1
+    }
+    const onClose = () => {
+        opened -= 1
+    }
+
+</script>
+
+<h2 class="mb-2 text-2xl font-bold mt-2">{language.prompt}</h2>
+<div class="contain w-full max-w-full mt-4 flex flex-col p-3 border-selected border-1 bg-darkbg rounded-md">
+    {#if $DataBase.promptTemplate.length === 0}
+            <div class="text-textcolor2">No Format</div>
+    {/if}
+    {#key sorted}
+        {#each $DataBase.promptTemplate as proompt, i}
+            <ProomptItem bind:proompt={proompt} onRemove={() => {
+                let templates = $DataBase.promptTemplate
+                templates.splice(i, 1)
+                $DataBase.promptTemplate = templates
+            }}  />
+        {/each}
+    {/key}
+</div>
+
+<button class="font-medium cursor-pointer hover:text-green-500" on:click={() => {
+    let value = $DataBase.promptTemplate ?? []
+    value.push({
+        type: "plain",
+        text: "",
+        role: "bot",
+        type2: 'normal'
+    })
+    $DataBase.promptTemplate = value
+}}><PlusIcon /></button>

src/lib/Setting/Settings.svelte

@@ -17,6 +17,8 @@
     import LanguageSettings from "./Pages/LanguageSettings.svelte";
     import AccessibilitySettings from "./Pages/AccessibilitySettings.svelte";
     import PersonaSettings from "./Pages/PersonaSettings.svelte";
+  import PromptSettings from "./Pages/PromptSettings.svelte";
+  import { DataBase } from "src/ts/storage/database";
     let selected = -1
     let openPresetList = false
     let openLoreList = false
@@ -30,12 +32,23 @@
         {#if window.innerWidth >= 700 || selected === -1}
             <div class="flex h-full flex-col p-4 pt-8 bg-darkbg gap-2 overflow-y-auto relative"
                 class:w-full={window.innerWidth < 700}>
-                <button class="text-textcolor2 flex gap-2 items-center hover:text-textcolor" class:text-textcolor={selected === 1} on:click={() => {
+                <button class="flex gap-2 items-center hover:text-textcolor"
+                    class:text-textcolor={selected === 1}
+                    class:text-textcolor2={selected !== 1}
+                on:click={() => {
                     selected = 1
                 }}>
                     <BotIcon />
                     <span>{language.chatBot}</span>
                 </button>
+                {#if $DataBase.promptTemplate}
+                    <button class="text-textcolor2 flex gap-2 items-center hover:text-textcolor" class:text-textcolor={selected === 13} on:click={() => {
+                        selected = 13
+                    }}>
+                        <BotIcon />
+                        <span>{language.prompt}</span>
+                    </button>
+                {/if}
                 <button class="text-textcolor2 flex gap-2 items-center hover:text-textcolor" class:text-textcolor={selected === 12} on:click={() => {
                     selected = 12
                 }}>
@@ -137,6 +150,8 @@
                     <AccessibilitySettings/>
                 {:else if selected === 12}
                     <PersonaSettings/>
+                {:else if selected === 13}
+                    <PromptSettings/>
                 {/if}
             </div>
             <button class="absolute top-2 right-2 hover:text-green-500 text-textcolor" on:click={() => {