'use client';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
import type { Message } from '@/types';
interface Props {
message: Message;
}
export default function MessageBubble({ message }: Props) {
const isUser = message.role === 'user';
if (isUser) {
return (
);
}
return (
}
language={match![1]}
PreTag="div"
customStyle={{ margin: '0.5rem 0', borderRadius: '0.375rem', fontSize: '0.8rem' }}
>
{String(children).replace(/\n$/, '')}
) : (
{children}
);
},
p: ({ children }) => {children}
,
ul: ({ children }) => ,
ol: ({ children }) => {children}
,
li: ({ children }) => {children},
h1: ({ children }) => {children}
,
h2: ({ children }) => {children}
,
h3: ({ children }) => {children}
,
strong: ({ children }) => {children},
blockquote: ({ children }) => (
{children}
),
}}
>
{message.content}
);
}