Jason Woltje
f0d1d4bafa
Co-authored-by: Jason Woltje <jason@diversecanvas.com> Co-committed-by: Jason Woltje <jason@diversecanvas.com>
36 lines
992 B
TypeScript
36 lines
992 B
TypeScript
'use client';
|
|
|
|
import { cn } from '@/lib/cn';
|
|
import type { Message } from '@/lib/types';
|
|
|
|
interface MessageBubbleProps {
|
|
message: Message;
|
|
}
|
|
|
|
export function MessageBubble({ message }: MessageBubbleProps): React.ReactElement {
|
|
const isUser = message.role === 'user';
|
|
|
|
return (
|
|
<div className={cn('flex', isUser ? 'justify-end' : 'justify-start')}>
|
|
<div
|
|
className={cn(
|
|
'max-w-[75%] rounded-xl px-4 py-3 text-sm',
|
|
isUser
|
|
? 'bg-blue-600 text-white'
|
|
: 'border border-surface-border bg-surface-elevated text-text-primary',
|
|
)}
|
|
>
|
|
<div className="whitespace-pre-wrap break-words">{message.content}</div>
|
|
<div
|
|
className={cn('mt-1 text-right text-xs', isUser ? 'text-blue-200' : 'text-text-muted')}
|
|
>
|
|
{new Date(message.createdAt).toLocaleTimeString([], {
|
|
hour: '2-digit',
|
|
minute: '2-digit',
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|