devaine/CodeRED-Astra
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

"auto-scroll down when new messages appear "

Browse source
This commit is contained in:
yenminh269 2025-10-18 16:11:14 -05:00
commit 5c744c2987
2 changed files with 10 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

0
src/components/layouts/dashboard-layout.jsx Normal file
View file

11
src/components/ui/ChatWindow.jsx
View file

@ -1,5 +1,5 @@
import React from "react"; import React from "react";
import { useRef } from "react";
function MessageBubble({ message }) { function MessageBubble({ message }) {
const isUser = message.role === "user"; const isUser = message.role === "user";
return ( return (
@ -16,6 +16,15 @@ function MessageBubble({ message }) {
} }
export default function ChatWindow({ messages }) { 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 ( return (
<main className="flex-1 overflow-auto p-2 bg-gradient-to-b from-slate-900 to-slate-800"> <main className="flex-1 overflow-auto p-2 bg-gradient-to-b from-slate-900 to-slate-800">
<div className="space-y-2"> <div className="space-y-2">