[feat] added features in spec v2

2023-05-12 20:14:03 +09:00
parent 52bd20d3fb
commit c4d44d2031
15 changed files with 353 additions and 162 deletions
--- a/src/lib/ChatScreens/Chat.svelte
+++ b/src/lib/ChatScreens/Chat.svelte
@@ -10,13 +10,14 @@
    import { replacePlaceholders } from "../../ts/util";
    export let message = ''
    export let name = ''
-    export let img = ''
+    export let img:string|Promise<string> = ''
    export let idx = -1
    export let rerollIcon = false
    export let onReroll = () => {}
    export let unReroll = () => {}
    let translating = false
    let editMode = false
+    export let altGreeting = false

    let msgDisplay = ''

@@ -60,15 +61,13 @@

    $: displaya(message)
 </script>
-<div class="flex">
+<div class="flex max-w-full">
    <div class="text-neutral-200 mt-2 p-2 bg-transparent flex-grow ml-4 mr-4 border-t-gray-900 border-opacity-30 border-transparent flexium items-start">
-        {#if img === ''}
-            <div class="rounded-md shadow-lg bg-gray-500 mt-2" style={`height:${$DataBase.iconsize * 3.5 / 100}rem;width:${$DataBase.iconsize * 3.5 / 100}rem`}>
-            
-            </div>
-        {:else}
-            <div class="rounded-md shadow-lg bg-gray-500 mt-2" style={img + `height:${$DataBase.iconsize * 3.5 / 100}rem;width:${$DataBase.iconsize * 3.5 / 100}rem`} />
-        {/if}
+        {#await img}
+            <div class="rounded-md shadow-lg bg-gray-500 mt-2" style={`height:${$DataBase.iconsize * 3.5 / 100}rem;width:${$DataBase.iconsize * 3.5 / 100}rem`} />
+        {:then m}
+            <div class="rounded-md shadow-lg bg-gray-500 mt-2" style={m + `height:${$DataBase.iconsize * 3.5 / 100}rem;width:${$DataBase.iconsize * 3.5 / 100}rem`} />
+        {/await}
        <span class="flex flex-col ml-4 w-full">
            <div class="flexium items-center chat">
                <span class="chat text-xl unmargin">{name}</span>
@@ -106,8 +105,8 @@
                            <LanguagesIcon />
                        </button>
                    {/if}
-                    {#if rerollIcon}
-                        {#if $DataBase.swipe}
+                    {#if rerollIcon || altGreeting}
+                        {#if $DataBase.swipe || altGreeting}
                            <button class="ml-2 hover:text-green-500 transition-colors" on:click={unReroll}>
                                <ArrowLeft size={22}/>
                            </button>
--- a/src/lib/ChatScreens/CreatorQuote.svelte
+++ b/src/lib/ChatScreens/CreatorQuote.svelte
@@ -0,0 +1,19 @@
+<div class="flex w-full justify-center">
+    <div class="w-3xl max-w-80p bg-darkbg rounded-md p-3 text-white text-sm">
+        <h1 class="text-xl font-bold mb-2">Creator's Quote
+            <button class="float-right" on:click={onRemove}>
+                <XIcon />
+            </button>
+        </h1>
+        <div class="ml-2 max-w-full break-words text chat chattext prose prose-invert">
+            {@html ParseMarkdown(quote)}
+        </div>
+    </div>
+</div>
+<script lang="ts">
+    import { XIcon } from "lucide-svelte";
+  import { ParseMarkdown } from "src/ts/parser";
+
+    export let onRemove: () => void
+    export let quote:string
+</script>
--- a/src/lib/ChatScreens/DefaultChatScreen.svelte
+++ b/src/lib/ChatScreens/DefaultChatScreen.svelte
@@ -13,6 +13,7 @@
    import {cloneDeep} from 'lodash'
     import { processScript } from "src/ts/process/scripts";
  import GithubStars from "../Others/GithubStars.svelte";
+  import CreatorQuote from "./CreatorQuote.svelte";

    let messageInput = ''
    let openMenu = false
@@ -237,88 +238,81 @@
            {#each messageForm($DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message, loadPages) as chat, i}
                {#if chat.role === 'char'}
                    {#if $DataBase.characters[$selectedCharID].type !== 'group'}
-                        {#await getCharImage($DataBase.characters[$selectedCharID].image, 'css')}
-                            <Chat
-                                idx={chat.index}
-                                name={$DataBase.characters[$selectedCharID].name} 
-                                message={chat.data}
-                                img={''}
-                                rerollIcon={i === 0}
-                                onReroll={reroll}
-                                unReroll={unReroll}
-                            />
-                        {:then im} 
-                            <Chat
-                                idx={chat.index}
-                                name={$DataBase.characters[$selectedCharID].name} 
-                                message={chat.data}
-                                img={im}
-                                rerollIcon={i === 0}
-                                onReroll={reroll}
-                                unReroll={unReroll}
-
-                            />
-                        {/await}
+                        <Chat
+                            idx={chat.index}
+                            name={$DataBase.characters[$selectedCharID].name} 
+                            message={chat.data}
+                            img={getCharImage($DataBase.characters[$selectedCharID].image, 'css')}
+                            rerollIcon={i === 0}
+                            onReroll={reroll}
+                            unReroll={unReroll}
+                        />
                    {:else}
-                        {#await getCharImage(findCharacterbyId(chat.saying).image, 'css')}
-                            <Chat
-                                idx={chat.index}
-                                name={findCharacterbyId(chat.saying).name} 
-                                message={chat.data}
-                                rerollIcon={i === 0}
-                                onReroll={reroll}
-                                unReroll={unReroll}
-                                img={''}
-                            />
-                        {:then im} 
-                            <Chat
-                                idx={chat.index}
-                                name={findCharacterbyId(chat.saying).name} 
-                                rerollIcon={i === 0}
-                                message={chat.data}
-                                onReroll={reroll}
-                                unReroll={unReroll}
-                                img={im}
-                            />
-                        {/await}
+                        <Chat
+                            idx={chat.index}
+                            name={findCharacterbyId(chat.saying).name} 
+                            rerollIcon={i === 0}
+                            message={chat.data}
+                            onReroll={reroll}
+                            unReroll={unReroll}
+                            img={getCharImage(findCharacterbyId(chat.saying).image, 'css')}
+                        />
                    {/if}
                {:else}
-                    {#await getCharImage($DataBase.userIcon, 'css')}
-                        <Chat
-                            idx={chat.index}
-                            name={$DataBase.username} 
-                            message={chat.data}
-                            img={''}
-                        />
-                    {:then im}
-                        <Chat
-                            idx={chat.index}
-                            name={$DataBase.username} 
-                            message={chat.data}
-                            img={im}
-                        />
-                    {/await}
+                    <Chat
+                        idx={chat.index}
+                        name={$DataBase.username} 
+                        message={chat.data}
+                        img={getCharImage($DataBase.userIcon, 'css')}
+                    />
                {/if}
            {/each}
            {#if $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message.length <= loadPages}
                {#if $DataBase.characters[$selectedCharID].type !== 'group'}
-                    {#await getCharImage($DataBase.characters[$selectedCharID].image, 'css')}
-                        <Chat
-                            name={$DataBase.characters[$selectedCharID].name}
-                            message={ $DataBase.characters[$selectedCharID].firstMessage}
-                            img={''}
-                            idx={-1}
-                        />      
-                    {:then im}
-                        <Chat
-                            name={$DataBase.characters[$selectedCharID].name}
-                            message={ $DataBase.characters[$selectedCharID].firstMessage}
-                            img={im}
-                            idx={-1}
-                        />
-                    {/await}
+                    <Chat
+                        name={$DataBase.characters[$selectedCharID].name}
+                        message={$DataBase.characters[$selectedCharID].firstMsgIndex === -1 ? $DataBase.characters[$selectedCharID].firstMessage :
+                            $DataBase.characters[$selectedCharID].alternateGreetings[$DataBase.characters[$selectedCharID].firstMsgIndex]}
+                        img={getCharImage($DataBase.characters[$selectedCharID].image, 'css')}
+                        idx={-1}
+                        altGreeting={$DataBase.characters[$selectedCharID].alternateGreetings.length > 0}
+                        onReroll={() => {
+                            const cha = $DataBase.characters[$selectedCharID]
+                            if(cha.type !== 'group'){
+                                if (cha.firstMsgIndex >= (cha.alternateGreetings.length - 1)){
+                                    cha.firstMsgIndex = -1
+                                }
+                                else{
+                                    cha.firstMsgIndex += 1
+                                }
+                            }
+                            $DataBase.characters[$selectedCharID] = cha
+                        }}
+                        unReroll={() => {
+                            const cha = $DataBase.characters[$selectedCharID]
+                            if(cha.type !== 'group'){
+                                if (cha.firstMsgIndex === -1){
+                                    cha.firstMsgIndex = (cha.alternateGreetings.length - 1)
+                                }
+                                else{
+                                    cha.firstMsgIndex -= 1
+                                }
+                            }
+                            $DataBase.characters[$selectedCharID] = cha
+                        }}
+                    />
+                    {#if !$DataBase.characters[$selectedCharID].removedQuotes && $DataBase.characters[$selectedCharID].creatorNotes.length >= 2}
+                        <CreatorQuote quote={$DataBase.characters[$selectedCharID].creatorNotes} onRemove={() => {
+                            const cha = $DataBase.characters[$selectedCharID]
+                            if(cha.type !== 'group'){
+                                cha.removedQuotes = true
+                            }
+                            $DataBase.characters[$selectedCharID] = cha
+                        }} />
+                    {/if}
                {/if}
            {/if}
+
            {#if openMenu}
                <div class="absolute right-2 bottom-16 p-5 bg-darkbg flex flex-col gap-3 text-gray-200" on:click={(e) => {
                    e.stopPropagation()
--- a/src/lib/Others/Help.svelte
+++ b/src/lib/Others/Help.svelte
@@ -5,15 +5,20 @@
 }}>
    {#if key === "experimental"}
        <FlaskConicalIcon size={14} />
+    {:else if unrecommended}
+        <div class="text-red-500 hover:text-green-500">
+            <AlertTriangle size={14} />
+        </div>
    {:else}
        <HelpCircleIcon size={14} />
    {/if}
 </button>

 <script lang="ts">
-    import { FlaskConicalIcon, HelpCircleIcon } from "lucide-svelte";
+    import { AlertTriangle, FlaskConicalIcon, HelpCircleIcon } from "lucide-svelte";
    import { language } from "src/lang";
    import { alertMd } from "src/ts/alert";

+    export let unrecommended = false
    export let key: (keyof (typeof language.help))
 </script>
--- a/src/lib/SideBars/CharConfig.svelte
+++ b/src/lib/SideBars/CharConfig.svelte
@@ -22,13 +22,15 @@
    let tokens = {
        desc: 0,
        firstMsg: 0,
-        localNote: 0
+        localNote: 0,
+        charaNote: 0
    }

    let lasttokens = {
        desc: '',
        firstMsg: '',
-        localNote: ''
+        localNote: '',
+        charaNote: ''
    }

    async function loadTokenize(chara){
@@ -45,12 +47,18 @@
                lasttokens.firstMsg = chara.firstMessage
                tokens.firstMsg = await tokenize(chara.firstMessage)
            }
+            if(lasttokens.charaNote !== chara.postHistoryInstructions){
+            lasttokens.charaNote = chara.postHistoryInstructions
+            tokens.charaNote = await tokenize(chara.postHistoryInstructions)
+        
+        }
        }
        if(lasttokens.localNote !== currentChar.data.chats[currentChar.data.chatPage].note){
            lasttokens.localNote = currentChar.data.chats[currentChar.data.chatPage].note
            tokens.localNote = await tokenize(currentChar.data.chats[currentChar.data.chatPage].note)
        
        }
+
    }


@@ -163,6 +171,10 @@
        <span class="text-neutral-200">{language.firstMessage} <Help key="charFirstMessage"/></span>
        <textarea class="bg-transparent input-text mt-2 mb-2 text-gray-200 text-xs resize-none h-20 focus:bg-selected" autocomplete="off" bind:value={currentChar.data.firstMessage}></textarea>
        <span class="text-gray-400 mb-6 text-sm">{tokens.firstMsg} {language.tokens}</span>
+        <span class="text-neutral-200">{language.authorNote} <Help key="charNote"/></span>
+        <textarea class="bg-transparent input-text mt-2 mb-2 text-gray-200 resize-none h-20 focus:bg-selected text-xs" autocomplete="off" bind:value={currentChar.data.postHistoryInstructions}></textarea>
+        <span class="text-gray-400 mb-6 text-sm">{tokens.charaNote} {language.tokens}</span>
+     
    {:else}
        <input class="text-neutral-200 mt-2 mb-4 p-2 bg-transparent input-text text-xl focus:bg-selected" placeholder="Group Name" bind:value={currentChar.data.name}>
        <span class="text-neutral-200">{language.character}</span>
@@ -191,11 +203,13 @@
            </button>
        </div>

+        <span class="text-neutral-200">{language.chatNotes} <Help key="charNote"/></span>
+        <textarea class="bg-transparent input-text mt-2 mb-2 text-gray-200 resize-none h-20 focus:bg-selected text-xs" autocomplete="off" bind:value={currentChar.data.chats[currentChar.data.chatPage].note}></textarea>
+        <span class="text-gray-400 mb-6 text-sm">{tokens.localNote} {language.tokens}</span>
+        
+
    {/if}
-    <span class="text-neutral-200">{language.authorNote} <Help key="charNote"/></span>
-    <textarea class="bg-transparent input-text mt-2 mb-2 text-gray-200 resize-none h-20 focus:bg-selected text-xs" autocomplete="off" bind:value={currentChar.data.chats[currentChar.data.chatPage].note}></textarea>
-    <span class="text-gray-400 mb-6 text-sm">{tokens.localNote} {language.tokens}</span>
-                       
+                      
    <div class="flex mt-6 items-center">
        <Check bind:check={$DataBase.jailbreakToggle}/>
        <span class="text-neutral-200 ml-2">{language.jailbreakToggle}</span>
@@ -359,6 +373,30 @@
 {:else if subMenu === 2}
    <h2 class="mb-2 text-2xl font-bold mt-2">{language.advancedSettings}</h2>
    {#if currentChar.type !== 'group'}
+        <span class="text-neutral-200">{language.exampleMessage} <Help key="exampleMessage"/></span>
+        <textarea class="bg-transparent input-text mt-2 mb-2 text-gray-200 text-xs resize-none h-20 focus:bg-selected" autocomplete="off" bind:value={currentChar.data.exampleMessage}></textarea>
+
+        <span class="text-neutral-200">{language.creatorNotes} <Help key="creatorQuotes"/></span>
+        <textarea class="bg-transparent input-text mt-2 mb-2 text-gray-200 text-xs resize-none h-20 focus:bg-selected" autocomplete="off" bind:value={currentChar.data.creatorNotes} on:input={() => {
+            currentChar.data.removedQuotes = false
+        }}></textarea>
+
+        <span class="text-neutral-200">{language.systemPrompt} <Help key="systemPrompt"/></span>
+        <textarea class="bg-transparent input-text mt-2 mb-2 text-gray-200 text-xs resize-none h-20 focus:bg-selected" autocomplete="off" bind:value={currentChar.data.systemPrompt}></textarea>
+
+        <span class="text-neutral-200">{language.chatNotes} <Help key="chatNote"/></span>
+        <textarea class="bg-transparent input-text mt-2 mb-2 text-gray-200 resize-none h-20 focus:bg-selected text-xs" autocomplete="off" bind:value={currentChar.data.chats[currentChar.data.chatPage].note}></textarea>
+        <span class="text-gray-400 mb-6 text-sm">{tokens.localNote} {language.tokens}</span>
+        
+        {#if $DataBase.showUnrecommended || currentChar.data.personality.length > 3}
+            <span class="text-neutral-200">{language.personality} <Help key="personality" unrecommended/></span>
+            <textarea class="bg-transparent input-text mt-2 mb-2 text-gray-200 text-xs resize-none h-20 focus:bg-selected" autocomplete="off" bind:value={currentChar.data.personality}></textarea>
+        {/if}
+        {#if $DataBase.showUnrecommended || currentChar.data.scenario.length > 3}
+            <span class="text-neutral-200">{language.scenario} <Help key="scenario" unrecommended/></span>
+            <textarea class="bg-transparent input-text mt-2 mb-2 text-gray-200 text-xs resize-none h-20 focus:bg-selected" autocomplete="off" bind:value={currentChar.data.scenario}></textarea>
+        {/if}
+
        <span class="text-neutral-200 mt-2">Bias <Help key="bias"/></span>
        <table class="contain w-full max-w-full tabler mt-2">
            <tr>
@@ -374,7 +412,7 @@
            </tr>
            {#if currentChar.data.bias.length === 0}
                <tr>
-                    <div class="text-gray-500">{language.noBias}</div>
+                    <div class="text-gray-500"> {language.noBias}</div>
                </tr>
            {/if}
            {#each currentChar.data.bias as bias, i}
@@ -395,6 +433,49 @@
                </tr>
            {/each}
        </table>
+
+        <span class="text-neutral-200 mt-2">{language.altGreet} <Help key="bias"/></span>
+        <table class="contain w-full max-w-full tabler mt-2">
+            <tr>
+                <th class="font-medium">{language.value}</th>
+                <th class="font-medium cursor-pointer w-10">
+                    <button class="hover:text-green-500" on:click={() => {
+                        if(currentChar.type === 'character'){
+                            let alternateGreetings = currentChar.data.alternateGreetings
+                            alternateGreetings.push('')
+                            currentChar.data.alternateGreetings = alternateGreetings
+                        }
+                    }}>
+                        <PlusIcon />
+                    </button>
+                </th>
+            </tr>
+            {#if currentChar.data.alternateGreetings.length === 0}
+                <tr>
+                    <div class="text-gray-500"> No Messages</div>
+                </tr>
+            {/if}
+            {#each currentChar.data.alternateGreetings as bias, i}
+                <tr>
+                    <td class="font-medium truncate">
+                        <textarea class="text-neutral-200 mt-2 mb-4 p-2 bg-transparent input-text focus:bg-selected w-full resize-none" bind:value={currentChar.data.alternateGreetings[i]} placeholder="..." />
+                    </td>
+                    <th class="font-medium cursor-pointer w-10">
+                        <button class="hover:text-green-500" on:click={() => {
+                            if(currentChar.type === 'character'){
+                                currentChar.data.firstMsgIndex = -1
+                                let alternateGreetings = currentChar.data.alternateGreetings
+                                alternateGreetings.splice(i, 1)
+                                currentChar.data.alternateGreetings = alternateGreetings
+                            }
+                        }}>
+                            <TrashIcon />
+                        </button>
+                    </th>
+                </tr>
+            {/each}
+        </table>
+
        <span class="text-neutral-200 mt-4">{language.regexScript} <Help key="regexScript"/></span>
        <table class="contain w-full max-w-full tabler mt-2 flex flex-col p-2 gap-2">
            {#if currentChar.data.customscript.length === 0}
@@ -410,7 +491,7 @@
                }}/>
            {/each}
        </table>
-        <th class="font-medium cursor-pointer hover:text-green-500" on:click={() => {
+        <button class="font-medium cursor-pointer hover:text-green-500 mb-2" on:click={() => {
            if(currentChar.type === 'character'){
                let script = currentChar.data.customscript
                script.push({
@@ -421,27 +502,14 @@
                })
                currentChar.data.customscript = script
            }
-        }}><PlusIcon /></th>
-        <div class="flex items-center mt-4">
-            <Check bind:check={currentChar.data.utilityBot}/>
-            <span>{language.utilityBot}</span>
-        </div>
-
-        <span class="text-neutral-200">{language.exampleMessage}</span>
-        <textarea class="bg-transparent input-text mt-2 mb-2 text-gray-200 text-xs resize-none h-20 focus:bg-selected" autocomplete="off" bind:value={currentChar.data.exampleMessage}></textarea>
-
-        <span class="text-neutral-200">{language.creatorNotes} <Help key="charFirstMessage"/></span>
-        <textarea class="bg-transparent input-text mt-2 mb-2 text-gray-200 text-xs resize-none h-20 focus:bg-selected" autocomplete="off" bind:value={currentChar.data.firstMessage}></textarea>
-
-        <span class="text-neutral-200">{language.systemPrompt} <Help key="charFirstMessage"/></span>
-        <textarea class="bg-transparent input-text mt-2 mb-2 text-gray-200 text-xs resize-none h-20 focus:bg-selected" autocomplete="off" bind:value={currentChar.data.firstMessage}></textarea>
-
-        <span class="text-neutral-200">{language.characterNotes} <Help key="charFirstMessage"/></span>
-        <textarea class="bg-transparent input-text mt-2 mb-2 text-gray-200 text-xs resize-none h-20 focus:bg-selected" autocomplete="off" bind:value={currentChar.data.firstMessage}></textarea>
-
-        <span class="text-neutral-200">{language.personality} <Help key="charFirstMessage"/></span>
-        <textarea class="bg-transparent input-text mt-2 mb-2 text-gray-200 text-xs resize-none h-20 focus:bg-selected" autocomplete="off" bind:value={currentChar.data.firstMessage}></textarea>
-
+        }}><PlusIcon /></button>
+      
+        {#if $DataBase.showUnrecommended || currentChar.data.utilityBot}
+            <div class="flex items-center mt-4">
+                <Check bind:check={currentChar.data.utilityBot}/>
+                <span>{language.utilityBot} <Help key="utilityBot" unrecommended/></span>
+            </div>
+        {/if}

        <button on:click={async () => {
            exportChar($selectedCharID)
@@ -449,10 +517,10 @@
    
    {:else}

-    <div class="flex mb-2 items-center">
-        <Check bind:check={currentChar.data.useCharacterLore}/>
-        <span class="text-neutral-200 ml-2">{language.useCharLorebook} <Help key="experimental"/></span>
-    </div>
+        <div class="flex mb-2 items-center">
+            <Check bind:check={currentChar.data.useCharacterLore}/>
+            <span class="text-neutral-200 ml-2">{language.useCharLorebook} <Help key="experimental"/></span>
+        </div>
    
    {/if}
    <button on:click={async () => {
--- a/src/lib/SideBars/Settings.svelte
+++ b/src/lib/SideBars/Settings.svelte
@@ -499,7 +499,10 @@
        <Check bind:check={$DataBase.useSayNothing}/>
        <span>{language.sayNothing}</span>
    </div>
-
+    <div class="flex items-center mt-4">
+        <Check bind:check={$DataBase.showUnrecommended}/>
+        <span>{language.showUnrecommended}</span>
+    </div>
    <button
        on:click={async () => {
            alertMd(getRequestLog())