feat: Implement auto-scrolling to the bottom of chat messages and a scroll-to-bottom button that appears when scrolled up.

src/app/(agent)/agent/message/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState } from 'react';
+import { useState, useRef, useEffect } from 'react';
 import Image from 'next/image';
 import { ChatHeader, MessageInput } from './component';
 
@@ -209,12 +209,36 @@ const messages = [
 export default function MessagePage() {
   const [selectedConversation, setSelectedConversation] = useState<string | null>('1');
   const [searchQuery, setSearchQuery] = useState('');
+  const [showScrollButton, setShowScrollButton] = useState(false);
+  const messagesContainerRef = useRef<HTMLDivElement>(null);
 
   const handleSendMessage = (message: string) => {
     console.log('Sending message:', message);
     // In production, this would send the message to the API
   };
 
+  const handleScroll = () => {
+    if (messagesContainerRef.current) {
+      const { scrollTop, scrollHeight, clientHeight } = messagesContainerRef.current;
+      // Show button if not at bottom (with 100px threshold)
+      setShowScrollButton(scrollHeight - scrollTop - clientHeight > 100);
+    }
+  };
+
+  const scrollToBottom = () => {
+    if (messagesContainerRef.current) {
+      messagesContainerRef.current.scrollTo({
+        top: messagesContainerRef.current.scrollHeight,
+        behavior: 'smooth'
+      });
+    }
+  };
+
+  useEffect(() => {
+    // Scroll to bottom on initial load
+    scrollToBottom();
+  }, [selectedConversation]);
+
   const filteredConversations = conversations.filter((conv) =>
     conv.name.toLowerCase().includes(searchQuery.toLowerCase())
   );
@@ -329,8 +353,13 @@ export default function MessagePage() {
               {/* Chat header */}
               <ChatHeader {...selectedUserData} />
 
-              {/* Messages area */}
+              {/* Messages area wrapper */}
-              <div className="flex-1 overflow-y-auto py-4 relative custom-scrollbar">
+              <div className="flex-1 relative">
+                <div
+                  ref={messagesContainerRef}
+                  onScroll={handleScroll}
+                  className="absolute inset-0 overflow-y-auto py-4 custom-scrollbar"
+                >
                   <div className="space-y-4 px-2">
                     {messages.map((message) => (
                       <div
@@ -358,10 +387,14 @@ export default function MessagePage() {
                       </div>
                     ))}
                   </div>
+                </div>
 
-                {/* Scroll to bottom button */}
+                {/* Scroll to bottom button - only shows when scrolled up */}
-                <div className="absolute bottom-4 right-4">
+                {showScrollButton && (
-                  <button className="w-[50px] h-[50px] bg-[#00293d]/10 rounded-full flex items-center justify-center hover:bg-[#00293d]/20 transition-colors cursor-pointer">
+                  <button
+                    onClick={scrollToBottom}
+                    className="absolute bottom-4 right-4 w-[50px] h-[50px] bg-[#00293d]/10 rounded-full flex items-center justify-center hover:bg-[#00293d]/20 transition-all cursor-pointer shadow-lg z-10"
+                  >
                     <Image
                       src="/assets/icons/arrow-down-icon.svg"
                       alt="Scroll to bottom"
@@ -369,7 +402,7 @@ export default function MessagePage() {
                       height={20}
                     />
                   </button>
-                </div>
+                )}
               </div>
 
               {/* Message input */}