"use client";
import ReactMarkdown from "react-markdown";
interface ChatMessageProps {
role: "user" | "assistant";
content: string;
}
export function ChatMessage({ role, content }: ChatMessageProps) {
const isUser = role === "user";
return (
<div
className={`flex ${isUser ? "justify-end" : "justify-start"} mb-4`}
>
<div
className={`max-w-[80%] rounded-2xl px-4 py-3 ${
isUser
? "bg-blue-600 text-white rounded-br-md"
: "bg-gray-100 text-gray-900 rounded-bl-md"
}`}
>
{isUser ? (
<p className="whitespace-pre-wrap">{content}</p>
) : (
<div className="prose prose-sm max-w-none">
<ReactMarkdown
components={{
// Style code blocks
code: ({ className, children, ...props }) => {
const isInline = !className;
return isInline ? (
<code
className="bg-gray-200 px-1 py-0.5 rounded text-sm font-mono"
{...props}
>
{children}
</code>
) : (
<code
className="block bg-gray-800 text-green-400 p-3 rounded-lg overflow-x-auto text-sm font-mono"
{...props}
>
{children}
</code>
);
},
// Style links
a: ({ href, children }) => (
<a
href={href}
target="_blank"
rel="noopener noreferrer"
className="text-blue-600 hover:underline"
>
{children}
</a>
),
// Style lists
ul: ({ children }) => (
<ul className="list-disc list-inside my-2">{children}</ul>
),
ol: ({ children }) => (
<ol className="list-decimal list-inside my-2">{children}</ol>
),
// Style paragraphs
p: ({ children }) => <p className="mb-2 last:mb-0">{children}</p>,
}}
>
{content}
</ReactMarkdown>
</div>
)}
</div>
</div>
);
}
