fde1e0eacb
- ChatMarkdownMessage: renders markdown with rehype-highlight syntax highlighting - ChatCodeBlock: pre override with language label and copy button (1500ms success state) - Uses ExtraProps from react-markdown for correct TypeScript types - All tests pass, TypeScript compiles without errors
26 lines
665 B
TypeScript
26 lines
665 B
TypeScript
import Markdown from "react-markdown";
|
|
import remarkGfm from "remark-gfm";
|
|
import rehypeHighlight from "rehype-highlight";
|
|
import { ChatCodeBlock } from "./ChatCodeBlock";
|
|
import { cn } from "../lib/utils";
|
|
|
|
interface ChatMarkdownMessageProps {
|
|
content: string;
|
|
className?: string;
|
|
}
|
|
|
|
export function ChatMarkdownMessage({ content, className }: ChatMarkdownMessageProps) {
|
|
return (
|
|
<div className={cn("paperclip-markdown", className)}>
|
|
<Markdown
|
|
remarkPlugins={[remarkGfm]}
|
|
rehypePlugins={[rehypeHighlight]}
|
|
components={{
|
|
pre: ChatCodeBlock,
|
|
}}
|
|
>
|
|
{content}
|
|
</Markdown>
|
|
</div>
|
|
);
|
|
}
|