[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={() => {

src/lib/UI/ProomptItem.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+    import type { Proompt } from "src/ts/process/proompt";
+    import OptionInput from "./GUI/OptionInput.svelte";
+    import TextAreaInput from "./GUI/TextAreaInput.svelte";
+    import SelectInput from "./GUI/SelectInput.svelte";
+    import { language } from "src/lang";
+    import NumberInput from "./GUI/NumberInput.svelte";
+    import CheckInput from "./GUI/CheckInput.svelte";
+    import { XIcon } from "lucide-svelte";
+    export let proompt:Proompt
+    export let onRemove:() => void = () => {}
+    
+</script>
+
+<div class="flex flex-col first:pt-0 first:mt-0 first:border-0 pt-2 mt-2 border-t border-t-selected">
+    <span>{language.type}   <button class="float-right" on:click={onRemove}><XIcon /></button></span>
+    <SelectInput bind:value={proompt.type} on:change={() => {
+        if(proompt.type === 'plain' || proompt.type === 'jailbreak'){
+            proompt.text = ""
+            proompt.role = "bot"
+        }
+        if(proompt.type === 'chat'){
+            proompt.rangeStart = 0
+            proompt.rangeEnd = 'end'
+        }
+    }} >
+        <OptionInput value="plain">{language.formating.plain}</OptionInput>
+        <OptionInput value="jailbreak">{language.formating.jailbreak}</OptionInput>
+        <OptionInput value="chat">{language.Chat}</OptionInput>
+        <OptionInput value="persona">{language.formating.personaPrompt}</OptionInput>
+        <OptionInput value="description">{language.formating.description}</OptionInput>
+        <OptionInput value="authornote">{language.formating.authorNote}</OptionInput>
+        <OptionInput value="lorebook">{language.formating.lorebook}</OptionInput>
+    </SelectInput>
+
+    {#if proompt.type === 'plain' || proompt.type === 'jailbreak'}
+        <span>{language.prompt}</span>
+        <TextAreaInput bind:value={proompt.text} />
+        <span>{language.role}</span>
+        <SelectInput bind:value={proompt.role}>
+            <OptionInput value="plain">{language.user}</OptionInput>
+            <OptionInput value="jailbreak">{language.character}</OptionInput>
+            <OptionInput value="system">{language.systemPrompt}</OptionInput>
+        </SelectInput>
+    {/if}
+    {#if proompt.type === 'chat'}
+        <span>{language.rangeStart}</span>
+        <NumberInput bind:value={proompt.rangeStart} />
+        <span>{language.rangeEnd}</span>
+        {#if proompt.rangeEnd === 'end'}
+            <CheckInput name={language.untilChatEnd} check={true} onChange={() => {
+                if(proompt.type === 'chat'){
+                    proompt.rangeEnd = 0
+                }
+            }} />
+        {:else}
+            <NumberInput bind:value={proompt.rangeEnd} marginBottom />
+            <CheckInput name={language.untilChatEnd} check={false} onChange={() => {
+                if(proompt.type === 'chat'){
+                    proompt.rangeEnd = 'end'
+                }
+            }} />
+        {/if}
+    {/if}
+</div>