feat(chat): auto-scroll to latest message

Implement an auto-scrolling feature for the chat window.

This uses the `useEffect` and `useRef` hooks to automatically scroll the message container to the bottom whenever new messages are added or the typing indicator appears, ensuring the latest content is always in view.

adventure-rental-app/src/ChatbotPage.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { FiCamera, FiSend, FiUser } from 'react-icons/fi';
 
 const ChatbotPage = () => {
@@ -7,6 +7,17 @@ const ChatbotPage = () => {
   ]);
   const [inputMessage, setInputMessage] = useState('');
   const [isTyping, setIsTyping] = useState(false);
+  const messagesEndRef = useRef(null);
+
+  const scrollToBottom = () => {
+    setTimeout(() => {
+      messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+    }, 0);
+  };
+
+  useEffect(() => {
+    scrollToBottom();
+  }, [messages, isTyping]);
 
   const handleSendMessage = () => {
     if (inputMessage.trim() === '') return;
@@ -92,6 +103,7 @@ const ChatbotPage = () => {
               </div>
             </div>
           )}
+          <div ref={messagesEndRef} />
         </div>
 
         {/* Input Area */}