feat: scroll automatically to the latest message

ryands17 · Jun 25, 2024 · 9be9a6d · 9be9a6d
1 parent cf180e7
commit 9be9a6d
Showing 1 changed file with 11 additions and 5 deletions.
diff --git a/components/AutomaticScroller.tsx b/components/AutomaticScroller.tsx
@@ -11,7 +11,7 @@ export default function AutomaticScroller({ children, className }: Props) {
   const ref = useRef<null | HTMLDivElement>(null);
 
   useEffect(() => {
-    const mutationObserver = new MutationObserver(async () => {
+    const mutationObserver = new MutationObserver(() => {
       if (ref.current) {
         ref.current.scroll({ behavior: 'smooth', top: ref.current.scrollHeight });
       }
@@ -21,13 +21,19 @@ export default function AutomaticScroller({ children, className }: Props) {
       mutationObserver.observe(ref.current, {
         childList: true,
       });
-
-      return () => {
-        mutationObserver.disconnect();
-      };
     }
+
+    return () => {
+      mutationObserver.disconnect();
+    };
   }, [ref]);
 
+  useEffect(() => {
+    if (ref.current) {
+      ref.current.scroll({ behavior: 'smooth', top: ref.current.scrollHeight });
+    }
+  }, []);
+
   return (
     <div ref={ref} className={className}>
       {children}