[UX] settings close floating button, fix tokens position auto suggest prompt, AutoSuggest minor bugs (#149)

# PR Checklist
- [ - ] Did you check if it works normally in all models? *ignore this
when it dosen't uses models*
- [ O ] Did you check if it works normally in all of web, local and node
hosted versions? if it dosen't, did you blocked it in those versions?
- [ O ] Did you added a type def?

# Description
There are many users who can't find the character deletion, so it has
been changed so that it is clearly visible in the header.
![스크린샷 2023-06-03
004117](https://github.com/kwaroran/RisuAI/assets/11344967/adffd92c-5e5e-47aa-bc83-3670dbf0e8bd)
![스크린샷 2023-06-03
004122](https://github.com/kwaroran/RisuAI/assets/11344967/7a49f183-6f22-47bf-96a3-e40597b0dec8)

It is inconvenient to scroll up and close the long settings window when
scrolling, so it is fixed at the top.
![스크린샷 2023-06-03
002151](https://github.com/kwaroran/RisuAI/assets/11344967/a51d9275-8ae1-4412-ad89-73825698b4b3)

Modify tokens count position not moved together auto suggest prompt.
![스크린샷 2023-06-03
002350](https://github.com/kwaroran/RisuAI/assets/11344967/b8d7797a-fd0e-4279-9a65-7dd189086454)

Fixed the problem that auto-suggestion does not work for firstMessage
Fixed the problem that auto-suggestion is not saved

src/lib/ChatScreens/Suggestion.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { requestChatData } from "src/ts/process/request";
     import { doingChat, type OpenAIChat } from "../../ts/process/index";
-    import { DataBase, type character } from "../../ts/storage/database";
+    import { DataBase, setDatabase, type character, type Message, type groupChat, type Database } from "../../ts/storage/database";
     import { selectedCharID } from "../../ts/stores";
     import { translate } from "src/ts/translator/translator";
     import { CopyIcon, LanguagesIcon, RefreshCcwIcon } from "lucide-svelte";
@@ -9,12 +9,14 @@
     import { language } from "src/lang";
     import { replacePlaceholders } from "../../ts/util";
     import { onDestroy } from 'svelte';
+    import { processScript } from "src/ts/process/scripts";
+    import { get } from "svelte/store";
 
     export let send: () => any;
     export let messageInput:(string:string) => any;
-    let suggestMessages = $DataBase.characters[$selectedCharID]?.chats[$DataBase.characters[$selectedCharID].chatPage]?.suggestMessages
+    let suggestMessages:string[] = $DataBase.characters[$selectedCharID]?.chats[$DataBase.characters[$selectedCharID].chatPage]?.suggestMessages
     let suggestMessagesTranslated:string[]
-    let toggleTranslate = $DataBase.autoTranslate
+    let toggleTranslate:boolean = $DataBase.autoTranslate
     let progress:boolean;
     let progressChatPage=-1;
     let abortController:AbortController;
@@ -45,9 +47,20 @@
             suggestMessages = []
         }
         if(!v && $selectedCharID > -1 && (!suggestMessages || suggestMessages.length === 0) && !progress){
-            let currentChar = $DataBase.characters[$selectedCharID] as character;
+            let currentChar:character|groupChat = $DataBase.characters[$selectedCharID];
-            let messages = currentChar.chats[currentChar.chatPage].message;
+            let messages:Message[] = []
-            let lastMessages = messages.slice(Math.max(messages.length - 10, 0));
+            
+            if(currentChar.type !== 'group'){
+                const firstMsg:string = currentChar.firstMsgIndex === -1 ? currentChar.firstMessage : currentChar.alternateGreetings[currentChar.firstMsgIndex]
+                messages.push({
+                    role: 'char',
+                    data: processScript(currentChar,
+                        replacePlaceholders(firstMsg, currentChar.name),
+                    'editprocess')
+                })
+            }
+            messages = [...messages, ...currentChar.chats[currentChar.chatPage].message];
+            let lastMessages:Message[] = messages.slice(Math.max(messages.length - 10, 0));
             if(lastMessages.length === 0)
                 return
             const promptbody:OpenAIChat[] = [
@@ -58,7 +71,7 @@
             ,
             {
                 role: 'user', 
-                content: lastMessages.map(b=>b.role+":"+b.data).reduce((a,b)=>a+','+b)
+                content: lastMessages.map(b=>(b.role==='char'? 'assistant' : 'user')+":"+b.data).reduce((a,b)=>a+','+b)
             }
             ]
 
@@ -68,11 +81,13 @@
             requestChatData({
                 formated: promptbody,
                 bias: {},
-                currentChar
+                currentChar : currentChar as character
             }, 'submodel', abortController.signal).then(rq2=>{
                 if(rq2.type !== 'fail' && rq2.type !== 'streaming' && progress){
                     var suggestMessagesNew = rq2.result.split('\n').filter(msg => msg.startsWith('-')).map(msg => msg.replace('-','').trim())
-                    currentChar.chats[currentChar.chatPage].suggestMessages = suggestMessagesNew
+                    const db:Database = get(DataBase);
+                    db.characters[$selectedCharID].chats[currentChar.chatPage].suggestMessages = suggestMessagesNew
+                    setDatabase(db)
                     suggestMessages = suggestMessagesNew
                 }
                 progress = false

src/lib/Setting/Pages/BotSettings.svelte

@@ -147,7 +147,6 @@
     <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>    
-    <span class="text-gray-400 mb-6 text-sm">{tokens.autoSuggest} {language.tokens}</span>
 
     <span class="text-neutral-200">{language.maxContextSize}</span>
 {#if $DataBase.aiModel === 'gpt35'}
@@ -175,8 +174,9 @@
 <input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected text-sm"bind:value={$DataBase.forceReplaceUrl} placeholder="Leave blank to not replace url">
 <span class="text-neutral-200 mt-2">{language.submodel} {language.forceReplaceUrl} <Help key="forceUrl"/></span>
 <input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected text-sm"bind:value={$DataBase.forceReplaceUrl2} placeholder="Leave blank to not replace url">
-<span class="text-neutral-200">{language.autoSuggest} <Help key="autoSuggest"/></span>
+<span class="text-neutral-200 mt-2">{language.autoSuggest} <Help key="autoSuggest"/></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.autoSuggestPrompt}></textarea>
+<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>
+<span class="text-gray-400 mb-6 text-sm">{tokens.autoSuggest} {language.tokens}</span>
 
 {/if}
 

src/lib/Setting/Settings.svelte

@@ -25,7 +25,7 @@
 
 </script>
 <div class="h-full w-full flex justify-center setting-bg">
-    <div class="h-full max-w-screen-lg w-full flex">
+    <div class="h-full max-w-screen-lg w-full flex relative">
         {#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}>
@@ -135,7 +135,8 @@
                 {:else if selected === 11}
                     <AccessibilitySettings/>
                 {/if}
-                <button class="absolute top-2 right-2 hover:text-green-500" on:click={() => {
+            </div>
+            <button class="absolute top-2 right-2 hover:text-green-500 text-white" on:click={() => {
                 if(window.innerWidth >= 700){
                     settingsOpen.set(false)
                 }
@@ -145,7 +146,6 @@
             }}>
                 <XCircleIcon />
             </button>            
-            </div>
         {/if}
     </div>
 </div>