feat(messagesList): auto scroll on new message (#1040)

frontend/app/chat/[chatId]/components/ChatMessages/hooks/useChatMessages.ts

@@ -1,3 +1,4 @@
+import _debounce from "lodash/debounce";
 import { useCallback, useEffect, useRef } from "react";
 
 import { useChat } from "@/app/chat/[chatId]/hooks/useChat";
@@ -10,15 +11,17 @@ export const useChatMessages = () => {
   const chatListRef = useRef<HTMLDivElement | null>(null);
   const { history } = useChat();
 
-  const scrollToBottom = useCallback(() => {
-    if (chatListRef.current) {
-      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-      chatListRef.current.scrollTo?.({
-        top: chatListRef.current.scrollHeight,
-        behavior: "smooth",
-      });
-    }
-  }, []);
+  const scrollToBottom = useCallback(
+    _debounce(() => {
+      if (chatListRef.current) {
+        chatListRef.current.scrollTo({
+          top: chatListRef.current.scrollHeight,
+          behavior: "auto",
+        });
+      }
+    }, 100),
+    []
+  );
 
   useEffect(() => {
     const computeCardHeight = () => {

frontend/app/chat/[chatId]/components/ChatMessages/index.tsx

@@ -4,19 +4,22 @@ import { useTranslation } from "react-i18next";
 import { useChatContext } from "@/lib/context";
 
 import { ChatMessage } from "./components/ChatMessage/components/ChatMessage";
+import { useChatMessages } from "./hooks/useChatMessages";
 
 export const ChatMessages = (): JSX.Element => {
   const { history } = useChatContext();
   const { t } = useTranslation(["chat"]);
+  const { chatListRef } = useChatMessages();
 
   return (
     <div
       style={{
         display: "flex",
         flexDirection: "column",
-        flex: 1, // Allow the component to grow within its flex container
-        overflowY: "auto", // Enable vertical scrolling when content overflows
+        flex: 1,
+        overflowY: "auto",
       }}
+      ref={chatListRef}
     >
       {history.length === 0 ? (
         <div

frontend/package.json

@@ -36,6 +36,7 @@
     "@supabase/supabase-js": "^2.22.0",
     "@types/dom-speech-recognition": "^0.0.1",
     "@types/draft-js": "^0.11.12",
+    "@types/lodash": "^4.14.197",
     "@types/node": "20.1.7",
     "@types/react": "18",
     "@types/react-dom": "18",
@@ -55,6 +56,7 @@
     "framer-motion": "^10.15.0",
     "i18next": "^23.4.1",
     "i18next-http-backend": "^2.2.1",
+    "lodash": "^4.17.21",
     "next": "13.4.2",
     "nock": "^13.3.1",
     "postcss": "8.4.23",

frontend/yarn.lock

@@ -2413,7 +2413,7 @@
   resolved "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz"
   integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==
 
-"@types/lodash@^4.14.195":
+"@types/lodash@^4.14.195", "@types/lodash@^4.14.197":
   version "4.14.197"
   resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.197.tgz#e95c5ddcc814ec3e84c891910a01e0c8a378c54b"
   integrity sha512-BMVOiWs0uNxHVlHBgzTIqJYmj+PgCo4euloGF+5m4okL3rEYzM2EEv78mw8zWSMM57dM7kVIgJ2QDvwHSoCI5g==