From b410ec399cefc78b7313ff387537edbe87ef4235 Mon Sep 17 00:00:00 2001
From: Kadxy <2230318258@qq.com>
Date: Thu, 9 Jan 2025 20:02:27 +0800
Subject: [PATCH] feat: auto scroll to bottom when MCP response

---
 app/components/chat.tsx | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/app/components/chat.tsx b/app/components/chat.tsx
index 75120041c..bbc4444f6 100644
--- a/app/components/chat.tsx
+++ b/app/components/chat.tsx
@@ -421,12 +421,11 @@ export function ChatAction(props: {
 function useScrollToBottom(
   scrollRef: RefObject<HTMLDivElement>,
   detach: boolean = false,
+  messages: ChatMessage[],
 ) {
   // for auto-scroll
-
   const [autoScroll, setAutoScroll] = useState(true);
-
-  function scrollDomToBottom() {
+  const scrollDomToBottom = useCallback(() => {
     const dom = scrollRef.current;
     if (dom) {
       requestAnimationFrame(() => {
@@ -434,7 +433,7 @@ function useScrollToBottom(
         dom.scrollTo(0, dom.scrollHeight);
       });
     }
-  }
+  }, [scrollRef]);
 
   // auto scroll
   useEffect(() => {
@@ -443,6 +442,15 @@ function useScrollToBottom(
     }
   });
 
+  // auto scroll when messages length changes
+  const lastMessagesLength = useRef(messages.length);
+  useEffect(() => {
+    if (messages.length > lastMessagesLength.current && !detach) {
+      scrollDomToBottom();
+    }
+    lastMessagesLength.current = messages.length;
+  }, [messages.length, detach, scrollDomToBottom]);
+
   return {
     scrollRef,
     autoScroll,
@@ -978,6 +986,7 @@ function _Chat() {
   const { setAutoScroll, scrollDomToBottom } = useScrollToBottom(
     scrollRef,
     (isScrolledToBottom || isAttachWithTop) && !isTyping,
+    session.messages,
   );
   const [hitBottom, setHitBottom] = useState(true);
   const isMobileScreen = useMobileScreen();