Add markdown rendering to interview-view using Markdown component from ui/markdown

Co-authored-by: GTheMachine <156854865+GTheMachine@users.noreply.github.com>

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;
@@ -100,10 +101,15 @@ export function InterviewView() {
   // Auto-scroll to bottom when messages change
   useEffect(() => {
     if (messagesContainerRef.current) {
-      messagesContainerRef.current.scrollTo({
+      // Use a small delay to ensure DOM is updated
-        top: messagesContainerRef.current.scrollHeight,
+      setTimeout(() => {
-        behavior: "smooth",
+        if (messagesContainerRef.current) {
-      });
+          messagesContainerRef.current.scrollTo({
+            top: messagesContainerRef.current.scrollHeight,
+            behavior: "smooth",
+          });
+        }
+      }, 100);
     }
   }, [messages]);
 
@@ -437,10 +443,15 @@ export function InterviewView() {
               )}
             >
               <CardContent className="p-3">
-                <p className={cn(
+                {message.role === "assistant" ? (
-                  "text-sm whitespace-pre-wrap",
+                  <Markdown className="text-sm text-primary prose-headings:text-primary prose-strong:text-primary prose-code:text-primary">
-                  message.role === "assistant" && "text-primary"
+                    {message.content}
-                )}>{message.content}</p>
+                  </Markdown>
+                ) : (
+                  <p className="text-sm whitespace-pre-wrap">
+                    {message.content}
+                  </p>
+                )}
                 <p
                   className={cn(
                     "text-xs mt-2",