fix scroll to bottom

Author: tcm390

client/src/components/chat.tsx

@@ -8,7 +8,7 @@ import { ChatInput } from "@/components/ui/chat/chat-input";
 import { ChatMessageList } from "@/components/ui/chat/chat-message-list";
 import { useTransition, animated, type AnimatedProps } from "@react-spring/web";
 import { Paperclip, Send, X } from "lucide-react";
-import { useEffect, useRef, useState, useCallback } from "react";
+import { useEffect, useRef, useState } from "react";
 import type { Content, UUID } from "@elizaos/core";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { apiClient } from "@/lib/api";
@@ -22,6 +22,7 @@ import AIWriter from "react-aiwriter";
 import type { IAttachment } from "@/types";
 import { AudioRecorder } from "./audio-recorder";
 import { Badge } from "./ui/badge";
+import { useAutoScroll } from "./ui/chat/hooks/useAutoScroll";
 
 type ExtraContentFields = {
     user: string;
@@ -39,7 +40,6 @@ export default function Page({ agentId }: { agentId: UUID }) {
     const { toast } = useToast();
     const [selectedFile, setSelectedFile] = useState<File | null>(null);
     const [input, setInput] = useState("");
-    const messagesContainerRef = useRef<HTMLDivElement>(null);
     const inputRef = useRef<HTMLTextAreaElement>(null);
     const fileInputRef = useRef<HTMLInputElement>(null);
     const formRef = useRef<HTMLFormElement>(null);
@@ -49,13 +49,10 @@ export default function Page({ agentId }: { agentId: UUID }) {
     const getMessageVariant = (role: string) =>
         role !== "user" ? "received" : "sent";
 
-    const scrollToBottom = useCallback(() => {
-        if (messagesContainerRef.current) {
-            messagesContainerRef.current.scrollTop =
-                messagesContainerRef.current.scrollHeight;
-        }
-    }, []);
-
+    const { scrollRef, isAtBottom, scrollToBottom, disableAutoScroll } = useAutoScroll({
+        smooth: true,
+    });
+   
     useEffect(() => {
         scrollToBottom();
     }, [queryClient.getQueryData(["messages", agentId])]);
@@ -176,7 +173,12 @@ export default function Page({ agentId }: { agentId: UUID }) {
     return (
         <div className="flex flex-col w-full h-[calc(100dvh)] p-4">
             <div className="flex-1 overflow-y-auto">
-                <ChatMessageList ref={messagesContainerRef}>
+                <ChatMessageList 
+                    scrollRef={scrollRef}
+                    isAtBottom={isAtBottom}
+                    scrollToBottom={scrollToBottom}
+                    disableAutoScroll={disableAutoScroll}
+                >
                     {transitions((style, message: ContentWithUser) => {
                         const variant = getMessageVariant(message?.user);
                         return (

client/src/components/ui/chat/chat-message-list.tsx

@@ -1,20 +1,17 @@
 import * as React from "react";
 import { ArrowDown } from "lucide-react";
 import { Button } from "@/components/ui/button";
-import { useAutoScroll } from "@/components/ui/chat/hooks/useAutoScroll";
 
 interface ChatMessageListProps extends React.HTMLAttributes<HTMLDivElement> {
+    scrollRef: React.RefObject<HTMLDivElement | null>;
+    isAtBottom: boolean;
+    scrollToBottom: () => void;
+    disableAutoScroll: () => void;
     smooth?: boolean;
 }
 
 const ChatMessageList = React.forwardRef<HTMLDivElement, ChatMessageListProps>(
-    ({ className, children, smooth = false, ...props }, _ref) => {
-        const { scrollRef, isAtBottom, scrollToBottom, disableAutoScroll } =
-            useAutoScroll({
-                smooth,
-                content: children,
-            });
-
+    ({ className, children, scrollRef, isAtBottom, scrollToBottom, disableAutoScroll, ...props }) => {
         return (
             <div className="relative w-full h-full">
                 <div