From f50e5fcd697e28232a88659cc57b58b22a8594ee Mon Sep 17 00:00:00 2001
From: kwaroran <amasio1234@proton.me>
Date: Wed, 24 Apr 2024 22:42:27 +0900
Subject: [PATCH] Add Chat playground

---
 src/lib/ChatScreens/Chat.svelte              | 14 ++++++-
 src/lib/ChatScreens/DefaultChatScreen.svelte | 18 +++++++--
 src/lib/Playground/PlaygroundMenu.svelte     | 42 +++++++++++++++++---
 src/lib/SideBars/SideChatList.svelte         | 38 ++++++++++--------
 src/lib/SideBars/Sidebar.svelte              |  2 +
 5 files changed, 86 insertions(+), 28 deletions(-)

diff --git a/src/lib/ChatScreens/Chat.svelte b/src/lib/ChatScreens/Chat.svelte
index eab7b1f6..6f7265ff 100644
--- a/src/lib/ChatScreens/Chat.svelte
+++ b/src/lib/ChatScreens/Chat.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { ArrowLeft, ArrowRight, PencilIcon, LanguagesIcon, RefreshCcwIcon, TrashIcon, CopyIcon, Volume2Icon, BotIcon } from "lucide-svelte";
+    import { ArrowLeft, ArrowRight, PencilIcon, LanguagesIcon, RefreshCcwIcon, TrashIcon, CopyIcon, Volume2Icon, BotIcon, ArrowLeftRightIcon } from "lucide-svelte";
     import { ParseMarkdown, type simpleCharacterArgument } from "../../ts/parser";
     import AutoresizeArea from "../UI/GUI/TextAreaResizable.svelte";
     import { alertConfirm, alertError, alertRequestData } from "../../ts/alert";
@@ -142,7 +142,17 @@
         {/await}
         <span class="flex flex-col ml-4 w-full max-w-full min-w-0">
             <div class="flexium items-center chat">
-                <span class="chat text-xl unmargin">{name}</span>
+                {#if $CurrentCharacter.chaId === "§playground"}
+                    <span class="chat text-xl border-darkborderc flex items-center">
+                        <span>{name === 'assistant' ? 'Assistant' : 'User'}</span>
+                        <button class="ml-2 text-textcolor2 hover:text-textcolor" on:click={() => {
+                            $CurrentChat.message[idx].role = $CurrentChat.message[idx].role === 'char' ? 'user' : 'char'
+                            $CurrentChat = $CurrentChat
+                        }}><ArrowLeftRightIcon size="18" /></button>
+                    </span>
+                {:else}
+                    <span class="chat text-xl unmargin">{name}</span>
+                {/if}
                 <div class="flex-grow flex items-center justify-end text-textcolor2">
                     <span class="text-xs">{statusMessage}</span>
                     {#if $DataBase.useChatCopy}
diff --git a/src/lib/ChatScreens/DefaultChatScreen.svelte b/src/lib/ChatScreens/DefaultChatScreen.svelte
index 81201cc4..22c3881d 100644
--- a/src/lib/ChatScreens/DefaultChatScreen.svelte
+++ b/src/lib/ChatScreens/DefaultChatScreen.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import Suggestion from './Suggestion.svelte';
 	import AdvancedChatEditor from './AdvancedChatEditor.svelte';
-    import { CameraIcon, DatabaseIcon, DicesIcon, GlobeIcon, ImagePlusIcon, LanguagesIcon, Laugh, MenuIcon, MicOffIcon, PackageIcon, RefreshCcwIcon, ReplyIcon, Send, StepForwardIcon } from "lucide-svelte";
+    import { CameraIcon, DatabaseIcon, DicesIcon, GlobeIcon, ImagePlusIcon, LanguagesIcon, Laugh, MenuIcon, MicOffIcon, PackageIcon, Plus, RefreshCcwIcon, ReplyIcon, Send, StepForwardIcon } from "lucide-svelte";
     import { CurrentCharacter, CurrentChat, CurrentUsername, selectedCharID, CurrentUserIcon, CurrentShowMemoryLimit,CurrentSimpleCharacter, PlaygroundStore } from "../../ts/stores";
     import Chat from "./Chat.svelte";
     import { DataBase, type Message, type character, type groupChat } from "../../ts/storage/database";
@@ -452,14 +452,26 @@
                         class="mr-2 bg-textcolor2 flex justify-center items-center text-gray-100 w-12 h-12 rounded-md hover:bg-green-500 transition-colors"><Send />
                     </div>
                 {/if}
+                {#if $CurrentCharacter.chaId !== '§playground'}
                     <div on:click={(e) => {
                         openMenu = !openMenu
                         e.stopPropagation()
                     }}
                     class="mr-2 bg-textcolor2 flex justify-center items-center text-gray-100 w-12 h-12 rounded-md hover:bg-green-500 transition-colors"><MenuIcon />
                     </div>
+                {:else}
+                    <div on:click={(e) => {
+                        $CurrentChat.message.push({
+                            role: 'char',
+                            data: ''
+                        })
+                        $CurrentChat = $CurrentChat
+                    }}
+                        class="mr-2 bg-textcolor2 flex justify-center items-center text-gray-100 w-12 h-12 rounded-md hover:bg-green-500 transition-colors"><Plus />
+                    </div>
+                {/if}
             </div>
-            {#if $DataBase.useAutoTranslateInput && !$DataBase.useAdvancedEditor}
+            {#if $DataBase.useAutoTranslateInput && !$DataBase.useAdvancedEditor && $CurrentCharacter.chaId !== '§playground'}
                 <div class="flex items-center mt-2 mb-2">
                     <label for='messageInputTranslate' class="text-textcolor ml-4">
                         <LanguagesIcon />
@@ -567,7 +579,7 @@
                 {/if}
             {/each}
             {#if $CurrentChat.message.length <= loadPages}
-                {#if $CurrentCharacter.type !== 'group'}
+                {#if $CurrentCharacter.type !== 'group' && $CurrentCharacter.chaId !== '§playground'}
                     <Chat
                         character={$CurrentSimpleCharacter}
                         name={$CurrentCharacter.name}
diff --git a/src/lib/Playground/PlaygroundMenu.svelte b/src/lib/Playground/PlaygroundMenu.svelte
index 2deb3e8c..da6b84d7 100644
--- a/src/lib/Playground/PlaygroundMenu.svelte
+++ b/src/lib/Playground/PlaygroundMenu.svelte
@@ -1,20 +1,50 @@
 <script lang="ts">
     import { ArrowLeft } from "lucide-svelte";
     import { language } from "src/lang";
-    import { PlaygroundStore, SizeStore } from "src/ts/stores";
+    import { PlaygroundStore, SizeStore, selectedCharID } from "src/ts/stores";
     import PlaygroundEmbedding from "./PlaygroundEmbedding.svelte";
     import PlaygroundTokenizer from "./PlaygroundTokenizer.svelte";
     import PlaygroundJinja from "./PlaygroundJinja.svelte";
     import PlaygroundSyntax from "./PlaygroundSyntax.svelte";
-    import PlaygroundRegex from "./PlaygroundRegex.svelte";
+    import { findCharacterIndexbyId } from "src/ts/util";
+    import { characterFormatUpdate, createBlankChar } from "src/ts/characters";
+    import { get } from "svelte/store";
+    import { DataBase, setDatabase, type character } from "src/ts/storage/database";
+
+    const playgroundChat = () => {
+        let db = get(DataBase)
+        const charIndex = findCharacterIndexbyId('§playground')
+        PlaygroundStore.set(2)
+
+        if (charIndex !== -1) {
+
+            const char = db.characters[charIndex] as character
+            char.utilityBot = true
+            char.name = 'assistant'
+            db.characters[charIndex] = char
+            characterFormatUpdate(charIndex)
+
+            selectedCharID.set(charIndex)
+            return
+        }
+
+        const character = createBlankChar()
+        character.chaId = '§playground'
+
+        db.characters.push(character)
+        setDatabase(db)
+
+        playgroundChat()
+
+    }
 </script>
 
 <div class="h-full w-full flex flex-col overflow-y-auto items-center">
     {#if $PlaygroundStore === 1}
         <h2 class="text-4xl text-textcolor my-6 font-black relative">{language.playground}</h2>
-        <div class="grid grid-cols-1 gap-4 md:grid-cols-2 w-full max-w-4xl">
-            <button class="bg-darkbg rounded-md p-6 flex flex-col transition-shadow hover:ring-1" on:click={() => {
-                PlaygroundStore.set(2)
+        <div class="grid grid-cols-1 gap-4 md:grid-cols-2 w-full max-w-4xl p-2">
+            <button class="bg-darkbg rounded-md p-6 flex flex-col transition-shadow hover:ring-1 md:col-span-2" on:click={() => {
+                playgroundChat()
             }}>
                 <h1 class="text-2xl font-bold text-start">{language.Chat}</h1>
             </button>
@@ -43,7 +73,7 @@
         {#if $SizeStore.w < 1024}
             <div class="mt-14"></div>
         {/if}
-        <div class="w-full max-w-4xl flex flex-col">
+        <div class="w-full max-w-4xl flex flex-col p-2">
             <div class="flex items-center mt-4">
                 <button class="mr-2 text-textcolor2 hover:text-green-500" on:click={() => ($PlaygroundStore = 1)}>
                 <ArrowLeft/>
diff --git a/src/lib/SideBars/SideChatList.svelte b/src/lib/SideBars/SideChatList.svelte
index 228c27a9..ccb2c044 100644
--- a/src/lib/SideBars/SideChatList.svelte
+++ b/src/lib/SideBars/SideChatList.svelte
@@ -10,6 +10,7 @@
     import { findCharacterbyId } from "src/ts/util";
     import CheckInput from "../UI/GUI/CheckInput.svelte";
   import { createMultiuserRoom } from "src/ts/sync/multiuser";
+  import { CurrentCharacter } from "src/ts/stores";
     export let chara:character|groupChat
     let editMode = false
 </script>
@@ -103,23 +104,26 @@
                 <EditIcon size={18}/>
             </button>
         </div>
-        <div class="flex mt-2 items-center">
-            <CheckInput bind:check={$DataBase.jailbreakToggle} name={language.jailbreakToggle}/>
-        </div>
-        
-        {#if $DataBase.supaMemoryType !== 'none' || $DataBase.hanuraiEnable}
-            {#if $DataBase.hanuraiEnable}
-                <div class="flex mt-2 items-center">
-                    <CheckInput bind:check={chara.supaMemory} name={ language.hanuraiMemory}/>
-                </div>
-            {:else if $DataBase.hypaMemory}
-                <div class="flex mt-2 items-center">
-                    <CheckInput bind:check={chara.supaMemory} name={language.ToggleHypaMemory}/>
-                </div>
-            {:else}
-                <div class="flex mt-2 items-center">
-                    <CheckInput bind:check={chara.supaMemory} name={language.ToggleSuperMemory}/>
-                </div>
+
+        {#if $CurrentCharacter.chaId !== '§playground'}
+            <div class="flex mt-2 items-center">
+                <CheckInput bind:check={$DataBase.jailbreakToggle} name={language.jailbreakToggle}/>
+            </div>
+            
+            {#if $DataBase.supaMemoryType !== 'none' || $DataBase.hanuraiEnable}
+                {#if $DataBase.hanuraiEnable}
+                    <div class="flex mt-2 items-center">
+                        <CheckInput bind:check={chara.supaMemory} name={ language.hanuraiMemory}/>
+                    </div>
+                {:else if $DataBase.hypaMemory}
+                    <div class="flex mt-2 items-center">
+                        <CheckInput bind:check={chara.supaMemory} name={language.ToggleHypaMemory}/>
+                    </div>
+                {:else}
+                    <div class="flex mt-2 items-center">
+                        <CheckInput bind:check={chara.supaMemory} name={language.ToggleSuperMemory}/>
+                    </div>
+                {/if}
             {/if}
         {/if}
     </div>
diff --git a/src/lib/SideBars/Sidebar.svelte b/src/lib/SideBars/Sidebar.svelte
index 88acb617..5fe72017 100644
--- a/src/lib/SideBars/Sidebar.svelte
+++ b/src/lib/SideBars/Sidebar.svelte
@@ -652,6 +652,8 @@
         <h1 class="text-xl">Welcome to RisuAI!</h1>
         <span class="text-xs text-textcolor2">Select a bot to start chating</span>
       </div>
+    {:else if $CurrentCharacter.chaId === '§playground'}
+      <SideChatList bind:chara={ $CurrentCharacter} />
     {:else}
       <div class="w-full h-8 min-h-8 border-l border-b border-r border-selected relative bottom-6 rounded-b-md flex">
         <button on:click={() => {botMakerMode.set(false)}} class="flex-grow border-r border-r-selected rounded-bl-md" class:text-textcolor2={$botMakerMode}>{language.Chat}</button>