Merge pull request #14 from AutoMaker-Org/copilot/add-markdown-rendering

Fix markdown rendering in New Project Interview view
This commit is contained in:
Web Dev Cody
2025-12-10 19:14:00 -05:00
committed by GitHub

View File

@@ -17,6 +17,7 @@ import {
} from "lucide-react"; } from "lucide-react";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { getElectronAPI } from "@/lib/electron"; import { getElectronAPI } from "@/lib/electron";
import { Markdown } from "@/components/ui/markdown";
interface InterviewMessage { interface InterviewMessage {
id: string; id: string;
@@ -99,12 +100,23 @@ export function InterviewView() {
// Auto-scroll to bottom when messages change // Auto-scroll to bottom when messages change
useEffect(() => { useEffect(() => {
let timeoutId: NodeJS.Timeout | undefined;
if (messagesContainerRef.current) { if (messagesContainerRef.current) {
messagesContainerRef.current.scrollTo({ // Use a small delay to ensure DOM is updated
top: messagesContainerRef.current.scrollHeight, timeoutId = setTimeout(() => {
behavior: "smooth", if (messagesContainerRef.current) {
}); messagesContainerRef.current.scrollTo({
top: messagesContainerRef.current.scrollHeight,
behavior: "smooth",
});
}
}, 100);
} }
return () => {
if (timeoutId) {
clearTimeout(timeoutId);
}
};
}, [messages]); }, [messages]);
// Auto-focus input // Auto-focus input
@@ -353,7 +365,7 @@ export function InterviewView() {
return ( return (
<div <div
className="flex-1 flex flex-col content-bg" className="flex-1 flex flex-col content-bg min-h-0"
data-testid="interview-view" data-testid="interview-view"
> >
{/* Header */} {/* Header */}
@@ -437,10 +449,15 @@ export function InterviewView() {
)} )}
> >
<CardContent className="p-3"> <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 <p
className={cn( className={cn(
"text-xs mt-2", "text-xs mt-2",