Message Chat Item

1'use client';
2 
3import React from 'react';
4import { Timestamp } from './timestamp';
5import { cn } from '@/lib/utils/deso';
6import { UserInfo } from './user-info';
7import { PostReactionList, PostReactionTrigger, Reaction } from './post-reactions';
8 
9export interface MessageChatItemProps {
10  publicKey: string;
11  message: string;
12  timestamp?: string | Date;
13  isSent?: boolean;
14  className?: string;
15  showUserInfo?: boolean;
16  bubbleVariant?: 'rounded' | 'square';
17  reactions?: Reaction[];
18  onReactionClick?: (emoji: string) => void;
19}
20 
21export function MessageChatItem({
22  publicKey,
23  message,
24  timestamp,
25  isSent = false,
26  className,
27  showUserInfo = true,
28  bubbleVariant = 'rounded',
29  reactions,
30  onReactionClick,
31}: MessageChatItemProps) {
32  const hasReactions = reactions && reactions.length > 0 && onReactionClick;
33  return (
34    <div className={cn(
35      'flex items-start gap-2',
36      isSent ? 'justify-end' : 'justify-start',
37      className
38    )}>
39      {/* Bubble and username group */}
40      <div className={cn(
41        'flex flex-col gap-1',
42        isSent ? 'items-end' : 'items-start'
43      )}>
44        {showUserInfo && (
45          <UserInfo
46            publicKey={publicKey}
47            showPublicKey
48            showCopyButton={false}
49            className={cn(
50              'mb-1',
51              isSent ? 'justify-end text-right gap-2' : 'justify-start text-left gap-2'
52            )}
53            layout={isSent ? 'row-reverse' : 'row'}
54            usernameVariant="social"
55          />
56        )}
57        <div className={cn(
58          isSent ? 'mr-12 text-right' : 'ml-12 text-left',
59          'relative max-w-[80%]'
60        )}>
61          <div className={cn(
62            'px-4 py-2 text-sm',
63            bubbleVariant === 'rounded' 
64              ? 'rounded-2xl' 
65              : 'rounded-none',
66            isSent 
67              ? 'bg-primary text-primary-foreground' 
68              : 'bg-muted'
69          )}>
70            {message}
71          </div>
72          {/* Reactions under the bubble */}
73          {hasReactions && (
74            <PostReactionList
75              reactions={reactions}
76              onReactionClick={onReactionClick}
77              className={cn('mt-2 mb-1', isSent ? 'justify-end' : 'justify-start')}
78            />
79          )}
80          {/* Timestamp */}
81          {timestamp && (
82            <Timestamp 
83              timestamp={timestamp} 
84              format="relative"
85              className="text-xs text-muted-foreground"
86            />
87// … truncated