4f:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 50:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 51:T576d,'use client' import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from '@/components/ui/dropdown-menu' import { cn } from '@/lib/utils' import { demoTextMessages, demoImageMessages, demoReactionMessage, demoVoiceMessage } from './demo/messaging' import { Check, CheckCheck, Smile } from 'lucide-react' import { useRef, useState } from 'react' /** * Internal avatar component options. * @interface InternalAvatarOptions * @property {string} [src] - Avatar image URL * @property {string} fallback - Fallback letter when image fails or is missing * @property {string} [className] - Additional CSS classes */ interface InternalAvatarOptions { src?: string fallback: string className?: string } function Avatar({ src, fallback, className }: InternalAvatarOptions) { const [imgError, setImgError] = useState(false) if (src && !imgError) { return (

setImgError(true)} className={cn('h-8 w-8 rounded-full object-cover shrink-0', className)} /> ) } return (

{fallback}

) } /** * ═══════════════════════════════════════════════════════════════════════════ * MessageBubbleProps * ═══════════════════════════════════════════════════════════════════════════ * * Props for configuring a text message bubble in chat interfaces with avatar, * delivery status, and own/other message styling. */ export interface MessageBubbleProps { data?: { /** Message text content to display. */ content?: string /** URL for the sender's avatar image. */ avatarUrl?: string /** Fallback letter to display when avatar image is unavailable. */ avatarFallback?: string /** Display name of the message author. */ author?: string /** Time display string (e.g., "10:30 AM"). */ time?: string } appearance?: { /** * Whether this message is from the current user. * @default false */ isOwn?: boolean } control?: { /** Message delivery status indicator. */ status?: 'sent' | 'delivered' | 'read' } } /** * A single text message bubble for chat interfaces. * Displays avatar, message content, time, and delivery status. * * Features: * - Own/other message styling with color differentiation * - Avatar with image or letter fallback * - Delivery status indicators (sent, delivered, read) * - Time display * * @component * @example * ```tsx * * ``` */ export function MessageBubble({ data, appearance, control }: MessageBubbleProps) { const resolved: NonNullable = data ?? demoTextMessages[0] const content = resolved.content const avatarFallback = resolved.avatarFallback const avatarUrl = resolved.avatarUrl const time = resolved.time const { isOwn = false } = appearance ?? {} const { status } = control ?? {} return (

{!isOwn && avatarFallback && }

{content && (

{content}

)}

{time && {time}} {isOwn && status && ( {status === 'sent' && } {status === 'delivered' && } {status === 'read' && ( )} )}

) } /** * ═══════════════════════════════════════════════════════════════════════════ * ImageMessageBubbleProps * ═══════════════════════════════════════════════════════════════════════════ * * Props for configuring an image message bubble that displays a shared photo * with optional caption and message metadata. */ export interface ImageMessageBubbleProps { data?: { /** URL of the image to display. */ image?: string /** Optional caption text below the image. */ content?: string /** URL for the sender's avatar image. */ avatarUrl?: string /** Fallback letter to display when avatar image is unavailable. */ avatarFallback?: string /** Display name of the message author. */ author?: string /** Time display string (e.g., "10:32 AM"). */ time?: string } appearance?: { /** * Whether this message is from the current user. * @default false */ isOwn?: boolean } control?: { /** Message delivery status indicator. */ status?: 'sent' | 'delivered' | 'read' } } /** * An image message bubble for sharing photos in chat. * Displays an image with optional caption and message metadata. * * Features: * - Image display with max width constraint * - Optional caption below image * - Own/other message styling * - Avatar and delivery status support * * @component * @example * ```tsx * * ``` */ export function ImageMessageBubble({ data, appearance, control }: ImageMessageBubbleProps) { const resolved: NonNullable = data ?? demoImageMessages[0] const image = resolved.image const content = resolved.content const avatarFallback = resolved.avatarFallback const avatarUrl = resolved.avatarUrl const time = resolved.time const { isOwn = false } = appearance ?? {} const { status } = control ?? {} return (

{!isOwn && avatarFallback && }

{image && (

{content && (

{content}

)}

{time && {time}} {isOwn && status && ( {status === 'sent' && } {status === 'delivered' && } {status === 'read' && ( )} )}

) } /** * ═══════════════════════════════════════════════════════════════════════════ * MessageWithReactionsProps * ═══════════════════════════════════════════════════════════════════════════ * * Props for configuring a message bubble with emoji reaction support, * allowing users to add, toggle, and view reactions on messages. */ export interface MessageWithReactionsProps { data?: { /** Message text content to display. */ content?: string /** URL for the sender's avatar image. */ avatarUrl?: string /** Fallback letter to display when avatar image is unavailable. */ avatarFallback?: string /** Display name of the message author. */ author?: string /** Time display string (e.g., "2:45 PM"). */ time?: string /** Array of reactions with emoji and count. */ reactions?: { emoji: string; count: number }[] } actions?: { /** Called when the user adds or toggles a reaction emoji. */ onReact?: (emoji: string) => void } appearance?: { /** * Whether this message is from the current user. * @default false */ isOwn?: boolean } } /** * Available emoji options for reactions. * @constant */ const availableEmojis = [ '❤️', '👍', '👎', '😂', '😮', '😢', '🎉', '🔥', '👏', '💯' ] /** * A message bubble with emoji reaction support. * Allows users to add, toggle, and view reactions on messages. * * Features: * - Emoji reaction picker dropdown * - Toggle reactions on/off * - Reaction count display * - Highlighted user's own reactions * - Full reaction emoji set * * @component * @example * ```tsx * console.log("Reacted with:", emoji) * }} * appearance={{ isOwn: false }} * /> * ``` */ export function MessageWithReactions({ data, actions, appearance }: MessageWithReactionsProps) { const resolved: NonNullable = data ?? demoReactionMessage const content = resolved.content const avatarFallback = resolved.avatarFallback const avatarUrl = resolved.avatarUrl const time = resolved.time const initialReactions = resolved.reactions ?? [] const { onReact } = actions ?? {} const { isOwn = false } = appearance ?? {} const [reactions, setReactions] = useState(initialReactions) // Track which emojis the current user has reacted with const [userReactions, setUserReactions] = useState>(new Set()) const handleReact = (emoji: string) => { const hasUserReacted = userReactions.has(emoji) const existingIndex = reactions.findIndex((r) => r.emoji === emoji) if (hasUserReacted) { // User already reacted - toggle off (decrement) if (existingIndex >= 0) { const updated = [...reactions] if (updated[existingIndex].count <= 1) { // Remove reaction entirely if count would become 0 updated.splice(existingIndex, 1) } else { updated[existingIndex] = { ...updated[existingIndex], count: updated[existingIndex].count - 1 } } setReactions(updated) } // Remove from user's reactions setUserReactions((prev) => { const next = new Set(prev) next.delete(emoji) return next }) } else { // User hasn't reacted - add reaction if (existingIndex >= 0) { const updated = [...reactions] updated[existingIndex] = { ...updated[existingIndex], count: updated[existingIndex].count + 1 } setReactions(updated) } else { setReactions([...reactions, { emoji, count: 1 }]) } // Add to user's reactions setUserReactions((prev) => new Set(prev).add(emoji)) } onReact?.(emoji) } return (

{!isOwn && avatarFallback && }

{content && (

{content}

)}

{reactions && reactions.length > 0 && ( <> {reactions.map((reaction, index) => ( ))} )}

{availableEmojis.map((emoji) => ( ))}

{time && {time}}

) } /** * ═══════════════════════════════════════════════════════════════════════════ * VoiceMessageBubbleProps * ═══════════════════════════════════════════════════════════════════════════ * * Props for configuring a voice/audio message bubble with playback controls, * progress bar, and duration display. */ export interface VoiceMessageBubbleProps { data?: { /** Total duration display string (e.g., "0:42"). */ duration?: string /** URL for the sender's avatar image. */ avatarUrl?: string /** Fallback letter to display when avatar image is unavailable. */ avatarFallback?: string /** Display name of the message author. */ author?: string /** Time display string (e.g., "3:15 PM"). */ time?: string /** URL of the audio file to play. */ audioSrc?: string } appearance?: { /** * Whether this message is from the current user. * @default false */ isOwn?: boolean } control?: { /** Message delivery status indicator. */ status?: 'sent' | 'delivered' | 'read' } } /** * A voice/audio message bubble with playback controls. * Allows users to play, pause, and see progress of audio messages. * * Features: * - Play/pause button with icon toggle * - Progress bar showing playback position * - Duration and current time display * - Own/other message styling * - Delivery status indicators * * @component * @example * ```tsx * * ``` */ export function VoiceMessageBubble({ data, appearance, control }: VoiceMessageBubbleProps) { const resolved: NonNullable = data ?? demoVoiceMessage const duration = resolved.duration const avatarFallback = resolved.avatarFallback const avatarUrl = resolved.avatarUrl const time = resolved.time const audioSrc = resolved.audioSrc const { isOwn = false } = appearance ?? {} const { status } = control ?? {} const [isPlaying, setIsPlaying] = useState(false) const [progress, setProgress] = useState(0) const [currentTime, setCurrentTime] = useState('0:00') const audioRef = useRef(null) const togglePlay = () => { if (audioRef.current) { if (isPlaying) { audioRef.current.pause() } else { audioRef.current.play() } setIsPlaying(!isPlaying) } } const handleTimeUpdate = () => { if (audioRef.current) { const current = audioRef.current.currentTime const total = audioRef.current.duration || 1 setProgress((current / total) * 100) const mins = Math.floor(current / 60) const secs = Math.floor(current % 60) setCurrentTime(`${mins}:${secs.toString().padStart(2, '0')}`) } } const handleEnded = () => { setIsPlaying(false) setProgress(0) setCurrentTime('0:00') } return (