60 lines
2.0 KiB
TypeScript
60 lines
2.0 KiB
TypeScript
|
import React from 'react';
|
||
|
|
import ReactMarkdown from 'react-markdown';
|
||
|
|
import type { MessageBlock } from '@/store/commStore';
|
||
|
|
|
||
|
|
interface MarkdownBlockProps {
|
||
|
|
block: MessageBlock;
|
||
|
|
}
|
||
|
|
|
||
|
|
const MarkdownBlock: React.FC<MarkdownBlockProps> = ({ block }) => {
|
||
|
|
const markdown: string = block.block_data.markdown || block.block_data.content || '';
|
||
|
|
|
||
|
|
if (!markdown) {
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="prose prose-sm max-w-none text-inherit">
|
||
|
|
<ReactMarkdown
|
||
|
|
components={{
|
||
|
|
p: ({ children }) => <p className="mb-1 last:mb-0">{children}</p>,
|
||
|
|
ul: ({ children }) => <ul className="list-disc pl-4 mb-1">{children}</ul>,
|
||
|
|
ol: ({ children }) => <ol className="list-decimal pl-4 mb-1">{children}</ol>,
|
||
|
|
code: ({ children, className }) => {
|
||
|
|
const isInline = !className;
|
||
|
|
if (isInline) {
|
||
|
|
return (
|
||
|
|
<code className="px-1 py-0.5 rounded bg-black/10 text-xs font-mono">
|
||
|
|
{children}
|
||
|
|
</code>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
return (
|
||
|
|
<pre className="p-2 rounded bg-black/10 overflow-x-auto">
|
||
|
|
<code className="text-xs font-mono">{children}</code>
|
||
|
|
</pre>
|
||
|
|
);
|
||
|
|
},
|
||
|
|
h1: ({ children }) => <h1 className="text-base font-bold mb-1">{children}</h1>,
|
||
|
|
h2: ({ children }) => <h2 className="text-sm font-bold mb-1">{children}</h2>,
|
||
|
|
h3: ({ children }) => <h3 className="text-sm font-semibold mb-1">{children}</h3>,
|
||
|
|
a: ({ children, href }) => (
|
||
|
|
<a href={href} target="_blank" rel="noopener noreferrer" className="underline">
|
||
|
|
{children}
|
||
|
|
</a>
|
||
|
|
),
|
||
|
|
blockquote: ({ children }) => (
|
||
|
|
<blockquote className="border-l-2 border-current/30 pl-2 italic opacity-80">
|
||
|
|
{children}
|
||
|
|
</blockquote>
|
||
|
|
),
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{markdown}
|
||
|
|
</ReactMarkdown>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default MarkdownBlock;
|