From 1da5f8e083af768133ab06084ef4583fd8150612 Mon Sep 17 00:00:00 2001
From: yenminh269 <hhyenminh2001@gmail.com>
Date: Sat, 18 Oct 2025 16:11:14 -0500
Subject: [PATCH] "auto-scroll down when new messages appear "

---
 src/components/layouts/dashboard-layout.jsx |  0
 src/components/ui/ChatWindow.jsx            | 11 ++++++++++-
 2 files changed, 10 insertions(+), 1 deletion(-)
 create mode 100644 src/components/layouts/dashboard-layout.jsx

diff --git a/src/components/layouts/dashboard-layout.jsx b/src/components/layouts/dashboard-layout.jsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/ui/ChatWindow.jsx b/src/components/ui/ChatWindow.jsx
index 649180f..9f35aba 100644
--- a/src/components/ui/ChatWindow.jsx
+++ b/src/components/ui/ChatWindow.jsx
@@ -1,5 +1,5 @@
 import React from "react";
-
+import { useRef } from "react";
 function MessageBubble({ message }) {
   const isUser = message.role === "user";
   return (
@@ -16,6 +16,15 @@ function MessageBubble({ message }) {
 }
 
 export default function ChatWindow({ messages }) {
+  const chatRef = useRef(null);
+  // Auto-scroll to bottom when new messages appear
+  useEffect(() => {
+    chatRef.current?.scrollTo({
+      top: chatRef.current.scrollHeight,
+      behavior: "smooth",
+    });
+  }, [messages]);
+
   return (
     <main className="flex-1 overflow-auto p-2 bg-gradient-to-b from-slate-900 to-slate-800">
       <div className="space-y-2">