[feat] better nai

src/lib/Setting/Pages/BotSettings.svelte

@@ -15,11 +15,11 @@
     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";
-  import { openRouterModels } from "src/ts/model/openrouter";
-  import { novelLogin } from "src/ts/process/models/nai";
+    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";
+    import { openRouterModels } from "src/ts/model/openrouter";
+    import { novelLogin } from "src/ts/process/models/nai";
 
     let tokens = {
         mainPrompt: 0,
@@ -35,6 +35,7 @@
         autoSuggest: ''
     }
     export let openPresetList =false
+    export let goPromptTemplate = () => {}
 
     async function loadTokenize(){
         tokens.mainPrompt = await tokenize($DataBase.mainPrompt)
@@ -309,6 +310,12 @@
 
     <Check bind:check={$DataBase.autoSuggestClean} name={`${language.autoSuggest} suffix removal`}/>
 {:else if $DataBase.aiModel.startsWith('novelai')}
+    <div class="flex flex-col p-3 bg-darkbg mt-4">
+        <span class="text-textcolor">Starter</span>
+        <TextInput bind:value={$DataBase.NAIsettings.starter} placeholder={'[conversation: start]\\n***'} />
+        <span class="text-textcolor">Seperator</span>
+        <TextInput bind:value={$DataBase.NAIsettings.seperator} placeholder={"\\n"}/>
+    </div>
     <span class="text-textcolor">Top P</span>
     <SliderInput min={0} max={1} step={0.01} bind:value={$DataBase.NAIsettings.topP}/>
     <span class="text-textcolor2 mb-6 text-sm">{($DataBase.NAIsettings.topP).toFixed(2)}</span>
@@ -434,6 +441,12 @@
             }}/>
         {/if}
     </div>
-<Button on:click={() => {openPresetList = true}} className="mt-4">{language.presets}</Button>
+
+    {#if ($DataBase.promptTemplate)}
+        <div class="mt-2">
+            <Button on:click={goPromptTemplate} size="sm">{language.promptTemplate}</Button>
+        </div>
+    {/if}
+    <Button on:click={() => {openPresetList = true}} className="mt-4">{language.presets}</Button>
 
 {/if}

src/lib/Setting/Pages/PromptSettings.svelte

@@ -1,24 +1,23 @@
 <script lang="ts">
-    import { PlusIcon } from "lucide-svelte";
+    import { ArrowLeft, 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";
+    import { DataBase } from "src/ts/storage/database";
 
     let sorted = 0
     let opened = 0
-
-    const onOpen = () => {
-        opened += 1
-    }
-    const onClose = () => {
-        opened -= 1
-    }
+    export let onGoBack: () => void = () => {}
 
 </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">
+<h2 class="mb-2 text-2xl font-bold mt-2 items-center flex">
+    <button class="mr-2 text-textcolor2 hover:text-textcolor" on:click={onGoBack}>
+        <ArrowLeft />
+    </button>
+    {language.promptTemplate}
+</h2>
+<div class="contain w-full max-w-full mt-4 flex flex-col p-3 rounded-md">
     {#if $DataBase.promptTemplate.length === 0}
             <div class="text-textcolor2">No Format</div>
     {/if}
@@ -28,7 +27,25 @@
                 let templates = $DataBase.promptTemplate
                 templates.splice(i, 1)
                 $DataBase.promptTemplate = templates
-            }}  />
+            }} moveDown={() => {
+                if(i === $DataBase.promptTemplate.length - 1){
+                    return
+                }
+                let templates = $DataBase.promptTemplate
+                let temp = templates[i]
+                templates[i] = templates[i + 1]
+                templates[i + 1] = temp
+                $DataBase.promptTemplate = templates
+            }} moveUp={() => {
+                if(i === 0){
+                    return
+                }
+                let templates = $DataBase.promptTemplate
+                let temp = templates[i]
+                templates[i] = templates[i - 1]
+                templates[i - 1] = temp
+                $DataBase.promptTemplate = templates
+            }} />
         {/each}
     {/key}
 </div>

src/lib/Setting/Settings.svelte

@@ -33,25 +33,15 @@
             <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="flex gap-2 items-center hover:text-textcolor"
-                    class:text-textcolor={selected === 1}
-                    class:text-textcolor2={selected !== 1}
+                    class:text-textcolor={selected === 1 || selected === 13}
+                    class:text-textcolor2={selected !== 1 && selected !== 13}
                     on:click={() => {
                         selected = 1
+                        
                 }}>
                     <BotIcon />
                     <span>{language.chatBot}</span>
                 </button>
-                {#if $DataBase.promptTemplate}
-                    <button class="flex gap-2 items-center hover:text-textcolor"
-                    class:text-textcolor={selected === 13}
-                    class:text-textcolor2={selected !== 13}
-                    on:click={() => {
-                        selected = 13
-                }}>
-                        <ScrollTextIcon />
-                        <span>{language.prompt}</span>
-                    </button>
-                {/if}
                 <button class="flex gap-2 items-center hover:text-textcolor"
                     class:text-textcolor={selected === 12}
                     class:text-textcolor2={selected !== 12}
@@ -159,37 +149,43 @@
             </div>
         {/if}
         {#if window.innerWidth >= 700 || selected !== -1}
-            <div class="flex-grow p-4 bg-bgcolor flex flex-col text-textcolor overflow-y-auto relative">
-                {#if selected === 0}
-                    <UserSettings />
-                {:else if selected === 1}
-                    <BotSettings bind:openPresetList />
-                {:else if selected === 2}
-                    <OtherBotSettings />
-                {:else if selected === 3}
-                    <DisplaySettings />
-                {:else if selected === 4}
-                    <PluginSettings />
-                {:else if selected === 5}
-                    <FilesSettings />
-                {:else if selected === 6}
-                    <AdvancedSettings />
-                {:else if selected === 7}
-                    <Communities />
-                {:else if selected === 8}
-                    <GlobalLoreBookSettings bind:openLoreList />
-                {:else if selected === 9}
-                    <GlobalRegex/>
-                {:else if selected === 10}
-                    <LanguageSettings/>
-                {:else if selected === 11}
-                    <AccessibilitySettings/>
-                {:else if selected === 12}
-                    <PersonaSettings/>
-                {:else if selected === 13}
-                    <PromptSettings/>
-                {/if}
+            {#key selected}
+                <div class="flex-grow p-4 bg-bgcolor flex flex-col text-textcolor overflow-y-auto relative">
+                    {#if selected === 0}
+                        <UserSettings />
+                    {:else if selected === 1}
+                        <BotSettings bind:openPresetList goPromptTemplate={() => {
+                            selected = 13
+                        }} />
+                    {:else if selected === 2}
+                        <OtherBotSettings />
+                    {:else if selected === 3}
+                        <DisplaySettings />
+                    {:else if selected === 4}
+                        <PluginSettings />
+                    {:else if selected === 5}
+                        <FilesSettings />
+                    {:else if selected === 6}
+                        <AdvancedSettings />
+                    {:else if selected === 7}
+                        <Communities />
+                    {:else if selected === 8}
+                        <GlobalLoreBookSettings bind:openLoreList />
+                    {:else if selected === 9}
+                        <GlobalRegex/>
+                    {:else if selected === 10}
+                        <LanguageSettings/>
+                    {:else if selected === 11}
+                        <AccessibilitySettings/>
+                    {:else if selected === 12}
+                        <PersonaSettings/>
+                    {:else if selected === 13}
+                        <PromptSettings onGoBack={() => {
+                            selected = 1
+                        }}/>
+                    {/if}
             </div>
+            {/key}
             <button class="absolute top-2 right-2 hover:text-green-500 text-textcolor" on:click={() => {
                 if(window.innerWidth >= 700){
                     settingsOpen.set(false)

src/lib/UI/GUI/CheckInput.svelte

@@ -6,10 +6,11 @@
     export let margin = true
     export let name = ''
     export let hiddenName = false
+    export let className = ""
 </script>
 
 <label 
-    class="flex items-center space-x-2 cursor-pointer text-textcolor"
+    class={"flex items-center space-x-2 cursor-pointer text-textcolor" + (className ? " " + className : "")}
     class:mr-2={margin}
     aria-describedby="{name} {check ? 'abled' : 'disabled'}"
 >

src/lib/UI/ProomptItem.svelte

@@ -6,18 +6,27 @@
     import { language } from "src/lang";
     import NumberInput from "./GUI/NumberInput.svelte";
     import CheckInput from "./GUI/CheckInput.svelte";
-    import { XIcon } from "lucide-svelte";
+    import { ArrowDown, ArrowUp, XIcon } from "lucide-svelte";
+  import TextInput from "./GUI/TextInput.svelte";
     export let proompt:Proompt
     export let onRemove:() => void = () => {}
-    
+    export let moveUp:() => void = () => {}
+    export let moveDown:() => 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>
+<div class="flex flex-col first:mt-0 mt-2 border border-selected p-4 rounded-md bg-darkbg">
+    <span class="mb-2">
+        <button class="float-right" on:click={onRemove}><XIcon /></button>
+        <button class="float-right" on:click={moveDown}><ArrowDown /></button>
+        <button class="float-right" on:click={moveUp}><ArrowUp /></button>
+    </span>
+    <span>{language.type}
+    </span>
     <SelectInput bind:value={proompt.type} on:change={() => {
         if(proompt.type === 'plain' || proompt.type === 'jailbreak'){
             proompt.text = ""
-            proompt.role = "bot"
+            proompt.role = "system"
         }
         if(proompt.type === 'chat'){
             proompt.rangeStart = 0
@@ -68,4 +77,21 @@
             }} />
         {/if}
     {/if}
+    {#if proompt.type === 'persona' || proompt.type === 'description'}
+        {#if !proompt.innerFormat}
+            <CheckInput name={language.customInnerFormat} check={false} className="mt-2" onChange={() => {
+                if(proompt.type === 'persona' || proompt.type === 'description'){
+                    proompt.innerFormat = "{{slot}}"
+                }
+            }} />
+        {:else}
+            <span>{language.innerFormat}</span>
+            <TextAreaInput bind:value={proompt.innerFormat}/>
+            <CheckInput name={language.customInnerFormat} check={true} className="mt-2" onChange={() => {
+                if(proompt.type === 'persona' || proompt.type === 'description'){
+                    proompt.innerFormat = null
+                }
+            }} />
+        {/if}
+    {/if}
 </div>