From 64bd6d59e293f569e5979fd3fa43423593273c0d Mon Sep 17 00:00:00 2001
From: Emmanuel Rizky <emmanuel.rizky@kediritechnopark.com>
Date: Sun, 3 Aug 2025 13:07:34 +0700
Subject: [PATCH] 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 | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/adventure-rental-app/src/ChatbotPage.jsx b/adventure-rental-app/src/ChatbotPage.jsx
index 316f7af..19ee6df 100644
--- a/adventure-rental-app/src/ChatbotPage.jsx
+++ b/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 */}