<ReactMarkdown
remarkPlugins={[remarkGfm]}
rehypePlugins={[rehypeSlug, [rehypeAutolinkHeadings, { behavior: 'wrap' }]]}
components={{
h1: ({node, ...props}) => <h1 className="text-2xl font-bold mt-4 mb-2" {...props} />,
h2: ({node, ...props}) => <h2 className="text-xl font-semibold mt-3 mb-1" {...props} />,
h3: ({node, ...props}) => <h3 className="text-lg font-medium mt-2 mb-1" {...props} />,
p: ({node, ...props}) => <p className="mb-2" {...props} />,
ul: ({node, ...props}) => <ul className="list-disc pl-4 mb-2" {...props} />,
ol: ({node, ...props}) => <ol className="list-decimal pl-4 mb-2" {...props} />,
li: ({node, ...props}) => <li className="mb-1" {...props} />,
blockquote: ({node, ...props}) => <blockquote className="border-l-2 border-gray-300 pl-2 italic my-2" {...props} />,
code: ({node, inline, ...props}) =>
inline
? <code className="bg-gray-200 rounded px-1" {...props} />
: <pre className="bg-gray-200 rounded p-2 overflow-x-auto" {...props} />,
}}
>
{message.content || ''}
</ReactMarkdown>