Realtime Chat

1import { cn } from '@/lib/utils'
2import type { ChatMessage } from '@/registry/default/blocks/realtime-chat/hooks/use-realtime-chat'
3 
4interface ChatMessageItemProps {
5  message: ChatMessage
6  isOwnMessage: boolean
7  showHeader: boolean
8}
9 
10export const ChatMessageItem = ({ message, isOwnMessage, showHeader }: ChatMessageItemProps) => {
11  return (
12    <div className={`flex mt-2 ${isOwnMessage ? 'justify-end' : 'justify-start'}`}>
13      <div
14        className={cn('max-w-[75%] w-fit flex flex-col gap-1', {
15          'items-end': isOwnMessage,
16        })}
17      >
18        {showHeader && (
19          <div
20            className={cn('flex items-center gap-2 text-xs px-3', {
21              'justify-end flex-row-reverse': isOwnMessage,
22            })}
23          >
24            <span className={'font-medium'}>{message.user.name}</span>
25            <span className="text-foreground/50 text-xs">
26              {new Date(message.createdAt).toLocaleTimeString('en-US', {
27                hour: '2-digit',
28                minute: '2-digit',
29                hour12: true,
30              })}
31            </span>
32          </div>
33        )}
34        <div
35          className={cn(
36            'py-2 px-3 rounded-xl text-sm w-fit',
37            isOwnMessage ? 'bg-primary text-primary-foreground' : 'bg-muted text-foreground'
38          )}
39        >
40          {message.content}
41        </div>
42      </div>
43    </div>
44  )
45}