feat(chat): autoscroll to bottom

src/routes/chat/+page.svelte

@@ -4,12 +4,26 @@
   import ChatInput from "$lib/components/share/ChatInput.svelte";
   import { stateStore } from "$lib/stores/StateStore"
   import { Author } from "$lib/types/Chat"
+  import { afterUpdate } from "svelte"
 
   $: history = $stateStore.history
+
+  let historyElement: HTMLDivElement
+
+  afterUpdate(() => {
+    autoScrollToBottom(historyElement)
+  })
+
+  const autoScrollToBottom = async (node: HTMLElement) => {
+    node.scroll({
+      top: node.scrollHeight,
+      behavior: "smooth"
+    })
+  }
 </script>
 
 <div id="chat-page">
-  <div id="chat-history">
+  <div id="chat-history" bind:this={historyElement}>
     {#each history as ctx}
       {#if ctx.author === Author.Assistant}
         <AssistantMessage message={ctx.message} />
@@ -38,7 +52,7 @@
     flex-direction: column;
     height: 100%;
     width: 100%;
-    overflow-y: auto;
+    overflow: auto;
     margin-bottom: 2%;
   }
 </style>