From e28d77cdd6334c112458239465a79494a66f0018 Mon Sep 17 00:00:00 2001
From: Heesu Suh <hssuh96@gmail.com>
Date: Fri, 11 Oct 2024 20:31:21 +0900
Subject: [PATCH] fix scroll bug (#2)

---
 src/components/Chat.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/Chat.tsx b/src/components/Chat.tsx
index ed5d127..1d1947a 100644
--- a/src/components/Chat.tsx
+++ b/src/components/Chat.tsx
@@ -6,7 +6,6 @@ import {
   useCallback,
   useEffect,
   useImperativeHandle,
-  useLayoutEffect,
   useRef,
   useState,
 } from 'react'
@@ -112,14 +111,14 @@ const Chat = forwardRef<ChatRef, ChatProps>((props, ref) => {
     }
   }
 
-  useLayoutEffect(() => {
+  const handleScrollToBottom = () => {
     if (chatMessagesRef.current) {
       const scrollContainer = chatMessagesRef.current
       if (scrollContainer.scrollTop !== scrollContainer.scrollHeight) {
         scrollContainer.scrollTop = scrollContainer.scrollHeight
       }
     }
-  }, [chatMessages])
+  }
 
   const abortActiveStreams = () => {
     for (const abortController of activeStreamAbortControllersRef.current) {
@@ -194,6 +193,7 @@ const Chat = forwardRef<ChatRef, ChatProps>((props, ref) => {
                 : message,
             ),
           )
+          handleScrollToBottom()
         }
       } catch (error) {
         if (error.name === 'AbortError') {
@@ -488,6 +488,7 @@ const Chat = forwardRef<ChatRef, ChatProps>((props, ref) => {
           handleSubmit([...chatMessages, { ...inputMessage, content }])
           chatUserInputRefs.current.get(inputMessage.id)?.clear()
           setInputMessage(getNewInputMessage(app))
+          handleScrollToBottom()
         }}
         onFocus={() => {
           setFocusedMessageId(inputMessage.id)