feat!: BIG FEATURE <FAKE MESSAGE GENERATOR> IS OUT 2023 FREE

src/lib/components/Sidebar.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import FakeMessageGenerator from "$lib/components/debug/FakeMessageGenerator.svelte"
   import Profile from "$lib/components/sidebar/Profile.svelte"
   import SettingsButton from "$lib/components/sidebar/SettingsButton.svelte"
   import SideButton from "$lib/components/sidebar/SideButton.svelte"
@@ -59,6 +60,7 @@
         {/if}
       </SideButton>
     </ul>
+    <FakeMessageGenerator />
   </div>
   <!--  -->
   <div class="side-bottom">

src/lib/components/debug/FakeMessageGenerator.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import { client } from "$lib/client/Client"
+  import { stateStore } from "$lib/stores/StateStore"
+  import { Author } from "$lib/types/Chat"
+
+  let isBot: boolean = false
+  let content: string = ""
+
+  const sendAs = async () => {
+    await client.appendHistory(isBot ? Author.Assistant : Author.User, content)
+  }
+</script>
+
+{#if $stateStore.debug}
+  <div id="fmsg">
+    <div id="fmsg-is-this">
+      <h3>Is this a bot?</h3>
+      <input type="checkbox" bind:value={isBot} />
+    </div>
+    <div id="fmsg-is-this">
+      <input bind:value={content} />
+      <button on:click={sendAs}>Send</button>
+    </div>
+  </div>
+{/if}
+
+<style>
+  #fmsg-is-this {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+
+  #fmsg {
+    display: flex;
+    flex-direction: column;
+    color: #f2f2f2;
+  }
+</style>