diff --git a/ui/app/(prowler)/lighthouse/chat.tsx b/ui/app/(prowler)/lighthouse/chat.tsx index 8c6f839e46..5912b738e1 100644 --- a/ui/app/(prowler)/lighthouse/chat.tsx +++ b/ui/app/(prowler)/lighthouse/chat.tsx @@ -1,7 +1,7 @@ "use client"; import { useChat } from "@ai-sdk/react"; -import { useRef } from "react"; +import { useRef, useEffect } from "react"; import { MemoizedMarkdown } from "@/components/memoized-markdown"; @@ -52,6 +52,17 @@ export default function Chat() { ]; const textareaRef = useRef(null); + const messagesContainerRef = useRef(null); + const latestUserMsgRef = useRef(null); + + useEffect(() => { + if (messagesContainerRef.current && latestUserMsgRef.current) { + const container = messagesContainerRef.current; + const userMsg = latestUserMsgRef.current; + const containerPadding = 16; // p-4 in Tailwind = 16px + container.scrollTop = userMsg.offsetTop - container.offsetTop - containerPadding; + } + }, [messages]); const handleAutoResizeInputChange = (e: React.ChangeEvent) => { handleInputChange(e); @@ -93,29 +104,37 @@ export default function Chat() { ) : ( -
- {messages.map((message) => ( -
+
+ {messages.map((message, idx) => { + const lastUserIdx = messages + .map((m, i) => (m.role === "user" ? i : -1)) + .filter(i => i !== -1) + .pop(); + const isLatestUserMsg = message.role === "user" && lastUserIdx === idx; + return (
- +
+ +
-
- ))} + ); + })} {status === "submitted" && (