From a795fe190d4daa399788293bf7e3faa93c15e8d7 Mon Sep 17 00:00:00 2001
From: PleahMaCaka <pleahmacaka@gmail.com>
Date: Thu, 2 Nov 2023 17:18:13 +0900
Subject: [PATCH] feat(chat): autoscroll to bottom

---
 src/routes/chat/+page.svelte | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/routes/chat/+page.svelte b/src/routes/chat/+page.svelte
index d3c7a5e..36070d7 100644
--- a/src/routes/chat/+page.svelte
+++ b/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>
\ No newline at end of file