message-item.tsx•1.7 kB
'use client';
import { Message } from '@/lib/supabase/queries';
import { cn } from '@/lib/utils';
import ReactMarkdown from 'react-markdown';
interface MessageItemProps {
message: Message;
}
export function MessageItem({ message }: MessageItemProps) {
const isUser = message.fromUser;
return (
<div
className={cn(
"flex w-full",
isUser ? "justify-end" : "justify-start"
)}
>
<div
className={cn(
"relative max-w-[80%] rounded-lg px-4 py-3",
isUser
? "bg-primary text-primary-foreground"
: "bg-muted text-muted-foreground",
"shadow-sm",
isUser ? "rounded-br-none" : "rounded-bl-none"
)}
>
<div className="break-words">
<ReactMarkdown
components={{
code(props) {
const { children, className, ...rest } = props
return (
<code
className={cn(
"whitespace-pre-wrap break-words",
className
)}
{...rest}>
{children}
</code>
)
}
}}
>
{message.text}
</ReactMarkdown>
</div>
<div
className={cn(
"absolute bottom-0 h-4 w-4",
isUser
? "-right-2 border-primary"
: "-left-2 border-muted",
isUser
? "border-r border-t bg-primary"
: "border-l border-t bg-muted",
"transform rotate-45"
)}
/>
</div>
</div >
);
}