Add Chat playground

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/>