Message Bubble

1'use client'
2 
3import {
4  DropdownMenu,
5  DropdownMenuContent,
6  DropdownMenuTrigger
7} from '@/components/ui/dropdown-menu'
8import { cn } from '@/lib/utils'
9import { demoTextMessages, demoImageMessages, demoReactionMessage, demoVoiceMessage } from './demo/messaging'
10import { Check, CheckCheck, Smile } from 'lucide-react'
11import { useRef, useState } from 'react'
12 
13/**
14 * Internal avatar component options.
15 * @interface InternalAvatarOptions
16 * @property {string} [src] - Avatar image URL
17 * @property {string} fallback - Fallback letter when image fails or is missing
18 * @property {string} [className] - Additional CSS classes
19 */
20interface InternalAvatarOptions {
21  src?: string
22  fallback: string
23  className?: string
24}
25 
26function Avatar({ src, fallback, className }: InternalAvatarOptions) {
27  const [imgError, setImgError] = useState(false)
28 
29  if (src && !imgError) {
30    return (
31      <img
32        src={src}
33        alt={fallback}
34        onError={() => setImgError(true)}
35        className={cn('h-8 w-8 rounded-full object-cover shrink-0', className)}
36      />
37    )
38  }
39 
40  return (
41    <div
42      className={cn(
43        'h-8 w-8 rounded-full bg-primary text-primary-foreground flex items-center justify-center text-xs font-semibold shrink-0',
44        className
45      )}
46    >
47      {fallback}
48    </div>
49  )
50}
51 
52/**
53 * ═══════════════════════════════════════════════════════════════════════════
54 * MessageBubbleProps
55 * ═══════════════════════════════════════════════════════════════════════════
56 *
57 * Props for configuring a text message bubble in chat interfaces with avatar,
58 * delivery status, and own/other message styling.
59 */
60export interface MessageBubbleProps {
61  data?: {
62    /** Message text content to display. */
63    content?: string
64    /** URL for the sender's avatar image. */
65    avatarUrl?: string
66    /** Fallback letter to display when avatar image is unavailable. */
67    avatarFallback?: string
68    /** Display name of the message author. */
69    author?: string
70    /** Time display string (e.g., "10:30 AM"). */
71    time?: string
72  }
73  appearance?: {
74    /**
75     * Whether this message is from the current user.
76     * @default false
77     */
78    isOwn?: boolean
79  }
80// … truncated