, h2: ({node, ...props}) =>
, h3: ({node, ...props}) => , p: ({node, ...props}) => , ul: ({node, ...props}) =>, h2: ({node, ...props}) => , h3: ({node, ...props}) => , p: ({node, ...props}) => , ul: ({node, ...props}) =>, ol: ({node, ...props}) =>
, li: ({node, ...props}) => , blockquote: ({node, ...props}) =>
, h2: ({node, ...props}) => , h3: ({node, ...props}) => , p: ({node, ...props}) => , ul: ({node, ...props}) =>, ol: ({node, ...props}) =>
, li: ({node, ...props}) => , blockquote: ({node, ...props}) =>
<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>