diff --git a/app/src/components/views/interview-view.tsx b/app/src/components/views/interview-view.tsx index 941d0ec8..01cefa21 100644 --- a/app/src/components/views/interview-view.tsx +++ b/app/src/components/views/interview-view.tsx @@ -17,6 +17,7 @@ import { } from "lucide-react"; import { cn } from "@/lib/utils"; import { getElectronAPI } from "@/lib/electron"; +import { Markdown } from "@/components/ui/markdown"; interface InterviewMessage { id: string; @@ -99,12 +100,23 @@ export function InterviewView() { // Auto-scroll to bottom when messages change useEffect(() => { + let timeoutId: NodeJS.Timeout | undefined; if (messagesContainerRef.current) { - messagesContainerRef.current.scrollTo({ - top: messagesContainerRef.current.scrollHeight, - behavior: "smooth", - }); + // Use a small delay to ensure DOM is updated + timeoutId = setTimeout(() => { + if (messagesContainerRef.current) { + messagesContainerRef.current.scrollTo({ + top: messagesContainerRef.current.scrollHeight, + behavior: "smooth", + }); + } + }, 100); } + return () => { + if (timeoutId) { + clearTimeout(timeoutId); + } + }; }, [messages]); // Auto-focus input @@ -353,7 +365,7 @@ export function InterviewView() { return (
{message.content}
+ {message.role === "assistant" ? ( ++ {message.content} +
+ )}