4e: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"] 4f: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"] 50:T1689,"use client"; import { ArrowUpIcon } from "lucide-react"; import type { ReactElement, ReactNode, RefObject } from "react"; import { useId, useMemo } from "react"; import { useMediaQuery } from "@/registry/default/hooks/use-media-query"; import { cn } from "@/registry/default/lib/utils"; import { Button } from "@/registry/default/ui/button"; import { Composer, ComposerActionGroup, ComposerActions, ComposerInput, ComposerItem, type ComposerItemValue, ComposerList, ComposerPopup, ComposerSubmit, type ComposerTrigger, type ComposerValue, } from "@/registry/default/ui/composer"; import { Tooltip, TooltipPopup, TooltipTrigger, } from "@/registry/default/ui/tooltip"; import { ChatMemberAvatar } from "./chat-demo-message"; import type { MemberId } from "./chat-demo-state"; import { CHAT_MEMBERS } from "./chat-demo-state"; function isMemberId(id: string): id is MemberId { return Object.hasOwn(CHAT_MEMBERS, id); } function mentionMatchesHandle(item: ComposerItemValue, query: string): boolean { return item.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()); } export function ChatDemoComposer({ className, value, onValueChange, replyAuthor, placeholder = "Message the group…", showKeyboardHint = true, startAction, mentionMembers, onSend, inputRef, notice, disabled = false, }: { className?: string; value: ComposerValue; onValueChange: (value: ComposerValue) => void; replyAuthor?: string; placeholder?: string; showKeyboardHint?: boolean; startAction?: ReactNode; mentionMembers: readonly MemberId[]; onSend: () => void; inputRef: RefObject; notice: string; disabled?: boolean; }): ReactElement { const hintId = useId(); const touchInput = useMediaQuery({ pointer: "coarse" }); const triggers = useMemo( () => [ { character: "@", filter: mentionMatchesHandle, items: mentionMembers.map((id) => ({ id, label: CHAT_MEMBERS[id].handle, })), }, ], [mentionMembers], ); return (

{(item: ComposerItemValue) => { if (!isMemberId(item.id)) return null; return ( {CHAT_MEMBERS[item.id].name} ); }} {startAction && ( {startAction} )}

{notice} {showKeyboardHint && !touchInput && ( Enter to send / Shift + Enter for a new line )}

); } 51:T130c,"use client"; import { ArrowLeftIcon, CheckCheckIcon, ClockIcon } from "lucide-react"; import type { ReactElement, RefObject } from "react"; import { useRef } from "react"; import { cn } from "@/registry/default/lib/utils"; import { Button } from "@/registry/default/ui/button"; import { Drawer, DrawerClose, DrawerDescription, DrawerHeader, DrawerPanel, DrawerPopup, DrawerTitle, } from "@/registry/default/ui/drawer"; import { ChatDeliveryIndicator } from "../chat/chat-delivery-indicator"; import { ChatMessageBubble } from "../chat/chat-message-bubble"; import { ChatMessageInfo as ChatMessageInfoView } from "../chat/chat-message-info"; import { ChatDemoMessageBody, ChatMemberAvatar } from "./chat-demo-message"; import { DELIVERY_LABELS, getMessageDelivery, groupMessageReceipts, } from "./chat-demo-receipts"; import type { ChatMessage, MemberId } from "./chat-demo-state"; import { CHAT_MEMBERS } from "./chat-demo-state"; const RECEIPT_SECTIONS = [ { key: "read", label: "Read by", icon: CheckCheckIcon }, { key: "delivered", label: "Delivered to", icon: CheckCheckIcon, }, { key: "pending", label: "Pending delivery", icon: ClockIcon, }, ] as const; export function ChatMessageInfo({ message, recipients, replyMessage, position, open, onOpenChange, onClosed, returnFocusRef, }: { message?: ChatMessage; recipients: readonly MemberId[]; replyMessage?: ChatMessage; position: "bottom" | "right"; open: boolean; onOpenChange: (open: boolean) => void; onClosed: () => void; returnFocusRef: RefObject; }): ReactElement { const backRef = useRef(null); const groups = message ? groupMessageReceipts(message, recipients) : { read: [], delivered: [], pending: [] }; const visibleSections = RECEIPT_SECTIONS.filter( ({ key }) => groups[key].length > 0, ); const delivery = message ? getMessageDelivery(message, recipients) : "sent"; return ( { if (!isOpen) onClosed(); }} > {message && (

} >

Message info The studio

} metadata={ <> {message.dateLabel}, {message.time} } groups={visibleSections.map(({ key, label, icon: Icon }) => ({ id: key, label, icon: ( ), members: groups[key].map((receipt) => ({ id: receipt.member, name: CHAT_MEMBERS[receipt.member].name, avatar: , action: ( {receipt.readAt ?? receipt.deliveredAt ?? "Pending"} ), })), }))} /> )} ); } 52:T2ac0,"use client"; import { CopyIcon, InfoIcon, PinIcon, Trash2Icon } from "lucide-react"; import type { ReactElement } from "react"; import { useRef, useState } from "react"; import { cn } from "@/registry/default/lib/utils"; import { Avatar, AvatarFallback } from "@/registry/default/ui/avatar"; import { Badge } from "@/registry/default/ui/badge"; import { Button } from "@/registry/default/ui/button"; import { MenuItem, MenuSeparator } from "@/registry/default/ui/menu"; import { ChatCollapsibleMessage } from "../chat/chat-collapsible-message"; import { ChatDeliveryIndicator } from "../chat/chat-delivery-indicator"; import { ChatMessage as ChatMessageView } from "../chat/chat-message"; import { ChatMessageActionToolbar } from "../chat/chat-message-actions"; import { ChatMessageText } from "../chat/chat-message-text"; import { ChatReactionChip } from "../chat/chat-reaction-chip"; import { ChatReactionPicker } from "../chat/chat-reaction-picker"; import { ChatReplyReference } from "../chat/chat-reply-reference"; import { DELIVERY_LABELS, getMessageDelivery } from "./chat-demo-receipts"; import type { ChatMessage, MemberId } from "./chat-demo-state"; import { CHAT_EMOJI, CHAT_MEMBERS, getMessageDeletionReason, getMessagePreview, } from "./chat-demo-state"; export function ChatMemberAvatar({ member, className, }: { member: MemberId; className?: string; }): ReactElement { return ( ); } export function ChatDemoMessageBody({ message, replyMessage, onJump, defaultOpen, open, onOpenChange, }: { message: ChatMessage; replyMessage?: ChatMessage; onJump?: (id: number) => void; defaultOpen?: boolean; open?: boolean; onOpenChange?: (open: boolean) => void; }): ReactElement { const own = message.author === "you"; return ( <> {message.forwarded && ( Forwarded )} {message.replyTo && ( onJump?.(message.replyTo ?? message.id)} disabled={!replyMessage || !onJump} /> )} ( member.handle, )} /> )} /> ); } export function ChatDemoMessage({ message, recipients, entering, onEntranceEnd, replyMessage, grouped, groupEnd, pinned, highlighted, replyLifted, domId, onReply, onReact, onPin, onDelete, onCopy, onJump, onRetry, onInfo, }: { message: ChatMessage; recipients: readonly MemberId[]; entering: boolean; onEntranceEnd: () => void; replyMessage?: ChatMessage; grouped: boolean; groupEnd: boolean; pinned: boolean; highlighted: boolean; replyLifted: boolean; domId: string; onReply: ( id: number, source: HTMLDivElement, firstInGroup: boolean, expanded: boolean, ) => void; onReact: (id: number, emoji: string) => void; onPin: (id: number) => void; onDelete: (id: number, trigger: HTMLElement | null) => void; onCopy: (text: string) => void; onJump: (id: number) => void; onRetry: (id: number) => void; onInfo: (id: number, trigger: HTMLElement | null) => void; }): ReactElement { const [expanded, setExpanded] = useState(false); const moreTriggerRef = useRef(null); const suppressMenuFocusRef = useRef(false); const bubbleRef = useRef(null); const replyToMessage = (): void => { if (bubbleRef.current) onReply(message.id, bubbleRef.current, !grouped, expanded); }; const initialReactions = useRef( new Set(message.reactions.map((reaction) => reaction.emoji)), ); const delivery = getMessageDelivery(message, recipients); const own = message.author === "you"; const member = CHAT_MEMBERS[message.author]; return ( } grouped={grouped} lifted={replyLifted} bubble={!message.deletedReason} bubbleProps={{ ref: bubbleRef }} animateEntrance={entering} onAnimationComplete={entering ? onEntranceEnd : undefined} highlighted={highlighted} actions={ ( reaction.members.includes("you")) .map((reaction) => reaction.emoji)} triggerLabel="React to message" triggerTooltip="React" popupLabel="Choose a reaction" popupAlign={own ? "start" : "end"} popupAnchor={toolbarRef} onSelect={(emoji) => onReact(message.id, emoji)} /> )} replyLabel={`Reply to ${member.name}`} replyTooltip="Reply" onReply={replyToMessage} moreLabel={`More actions for ${member.name}'s message`} moreTooltip="More actions" menuFinalFocus={() => { if (!suppressMenuFocusRef.current) return true; suppressMenuFocusRef.current = false; return false; }} menuChildren={ <> onCopy(message.text)}> Copy text onPin(message.id)}> {pinned ? "Unpin message" : "Pin message"} {own && ( { suppressMenuFocusRef.current = true; onInfo(message.id, moreTriggerRef.current); }} > Message info )} {getMessageDeletionReason(message) && ( <> { suppressMenuFocusRef.current = true; onDelete(message.id, moreTriggerRef.current); }} > Delete message )} } /> } reactions={ message.reactions.length > 0 && !message.deletedReason ? message.reactions.map((reaction) => ( {reaction.members.map((member) => (

{CHAT_MEMBERS[member].name} {member === "you" && ( You )}

))} } onClick={() => onReact(message.id, reaction.emoji)} /> )) : undefined } footer={ groupEnd || message.delivery ? ( <> {pinned && !message.deletedReason && ( )} {message.time} {own && !message.deletedReason && ( <> {message.delivery === "failed" && ( )} )} ) : undefined } > {message.deletedReason ? (

) : ( )} ); } 53:T823,import type { ChatMessage, ChatReceipt, MemberId } from "./chat-demo-state"; import { OTHER_MEMBERS } from "./chat-demo-state"; export type MessageDelivery = NonNullable; export const DELIVERY_LABELS: Record = { sending: "Sending", sent: "Sent", delivered: "Delivered to everyone", read: "Read by everyone", failed: "Not sent", }; export function getMessageReceipts( message: ChatMessage, recipients: readonly MemberId[] = OTHER_MEMBERS, ): ChatReceipt[] { if (message.receipts) { const receiptsByMember = new Map( message.receipts.map((receipt) => [receipt.member, receipt]), ); return recipients.map( (member) => receiptsByMember.get(member) ?? { member }, ); } return recipients.map((member) => ({ member, deliveredAt: message.delivery === "delivered" || message.delivery === "read" ? message.time : undefined, readAt: message.delivery === "read" ? message.time : undefined, })); } export function getMessageDelivery( message: ChatMessage, recipients?: readonly MemberId[], ): MessageDelivery { if (message.delivery === "sending" || message.delivery === "failed") return message.delivery; const receipts = getMessageReceipts(message, recipients); if (receipts.length && receipts.every((receipt) => receipt.readAt)) return "read"; if ( receipts.length && receipts.every((receipt) => receipt.deliveredAt || receipt.readAt) ) return "delivered"; return "sent"; } export function groupMessageReceipts( message: ChatMessage, recipients?: readonly MemberId[], ): { read: ChatReceipt[]; delivered: ChatReceipt[]; pending: ChatReceipt[]; } { const groups: ReturnType = { read: [], delivered: [], pending: [], }; for (const receipt of getMessageReceipts(message, recipients)) { if (receipt.readAt) groups.read.push(receipt); else if (receipt.deliveredAt) groups.delivered.push(receipt); else groups.pending.push(receipt); } return groups; } 54:T573,"use client"; import type { ReactElement, RefObject } from "react"; import { ChatReplyPreview, type ChatReplyTarget, } from "../chat/chat-reply-preview"; import { ChatDemoMessageBody, ChatMemberAvatar } from "./chat-demo-message"; import type { ChatMessage } from "./chat-demo-state"; import { CHAT_MEMBERS } from "./chat-demo-state"; export type ChatReplyFocusTarget = ChatReplyTarget & { messageId: number; expanded: boolean; }; export function ChatDemoReplyFocus({ target, message, replyMessage, dismissalRef, onCancel, }: { target: ChatReplyFocusTarget; message: ChatMessage; replyMessage?: ChatMessage; dismissalRef: RefObject<"cancel" | "send">; onCancel: () => void; }): ReactElement { const own = message.author === "you"; return ( } author={own ? "your message" : CHAT_MEMBERS[message.author].name} replyLabel={ own ? "Reply to your message" : `Reply to ${CHAT_MEMBERS[message.author].name}` } cancelLabel="Cancel reply" dismissalRef={dismissalRef} onCancel={onCancel} > ); } 55:Tcde,"use client"; import { BanIcon, CircleAlertIcon, LockIcon, LogOutIcon, MessageCircleIcon, UserXIcon, } from "lucide-react"; import type { ReactElement } from "react"; import { Button } from "@/registry/default/ui/button"; import { ChatEmptyState, ChatLoadingState } from "../chat/chat-states"; import type { ChatScenario } from "./chat-demo-state"; export function ChatTimelineState({ scenario, onRecover, memberCount, joined, onJoin, }: { scenario: ChatScenario; onRecover: () => void; memberCount: number; joined: boolean; onJoin: () => void; }): ReactElement | null { if (scenario === "loading") return ( ); const content = { empty: { title: joined ? "A little hello goes a long way" : "Join the event chat", description: joined ? "Start the conversation. Everyone in the group can join in." : "Talk with the host and other guests who are going. Only people who join can read or send messages.", Icon: MessageCircleIcon, }, error: { title: "Couldn’t load the conversation", description: "Your draft is safe. Try loading the messages again.", Icon: CircleAlertIcon, }, "access-lost": { title: "This conversation is no longer available", description: "You no longer have access. Contact the group admin if this seems wrong.", Icon: LockIcon, }, removed: { title: "You were removed from this chat", description: "A host removed you. You can rejoin through your ticket invitation. Your ticket for the event is still valid.", Icon: UserXIcon, }, banned: { title: "You were banned from this chat", description: "You can’t rejoin unless a host lifts the ban. Your ticket for the event is still valid.", Icon: BanIcon, }, left: { title: "You left this chat", description: "You’ll no longer receive messages from this group. Your ticket for the event is still valid.", Icon: LogOutIcon, }, }; if ( scenario !== "empty" && scenario !== "error" && scenario !== "access-lost" && scenario !== "removed" && scenario !== "banned" && scenario !== "left" ) return null; const { title, description, Icon } = content[scenario]; return ( } > {scenario === "empty" && !joined && (

{memberCount} {memberCount === 1 ? "person is" : "people are"}{" "} already in the chat

)} {scenario === "error" && ( )} {(scenario === "left" || scenario === "removed") && ( )} ); } 56:T2296,export type MemberId = "maya" | "jordan" | "alex" | "you"; export const CHAT_MEMBERS = { maya: { role: "host", name: "Maya Chen", handle: "Maya", initials: "MC", color: "bg-orange-100 text-orange-800 dark:bg-orange-950 dark:text-orange-200", }, jordan: { role: "co-host", name: "Jordan Lee", handle: "Jordan", initials: "JL", color: "bg-violet-100 text-violet-800 dark:bg-violet-950 dark:text-violet-200", }, alex: { role: "guest", name: "Alex Morgan", handle: "Alex", initials: "AM", color: "bg-sky-100 text-sky-800 dark:bg-sky-950 dark:text-sky-200", }, you: { role: "co-host", name: "Sam Rivera", handle: "You", initials: "SR", color: "bg-primary text-primary-foreground", }, } satisfies Record< MemberId, { role: "host" | "co-host" | "guest"; name: string; handle: string; initials: string; color: string; } >; export const OTHER_MEMBERS: MemberId[] = ["maya", "jordan", "alex"]; export function getTypingLabel(members: readonly MemberId[]): string { const [first, second] = members; if (!first) return ""; const firstName = CHAT_MEMBERS[first].handle; if (members.length === 1) return `${firstName} is typing`; if (members.length === 2 && second) return `${firstName} and ${CHAT_MEMBERS[second].handle} are typing`; return `${firstName} and ${members.length - 1} others are typing`; } export const CHAT_EMOJI = [ { emoji: "👍", label: "Thumbs up" }, { emoji: "❤️", label: "Heart" }, { emoji: "😂", label: "Laugh" }, { emoji: "😮", label: "Surprised" }, { emoji: "😢", label: "Sad" }, { emoji: "🙏", label: "Thanks" }, ]; export type ChatReaction = { emoji: string; members: MemberId[] }; export type ChatReceipt = { member: MemberId; deliveredAt?: string; readAt?: string; }; export type ChatMessage = { id: number; author: MemberId; text: string; dateLabel: string; time: string; replyTo?: number; reactions: ChatReaction[]; deletedReason?: "sender" | "moderator"; forwarded?: boolean; receipts?: ChatReceipt[]; delivery?: "sending" | "sent" | "delivered" | "read" | "failed"; }; export function getMessageDeletionReason( message: ChatMessage, viewer: MemberId = "you", ): ChatMessage["deletedReason"] { if (message.deletedReason) return undefined; if (message.author === viewer) return "sender"; if ( CHAT_MEMBERS[viewer].role !== "guest" && CHAT_MEMBERS[message.author].role === "guest" ) { return "moderator"; } return undefined; } export function deleteChatMessage( message: ChatMessage, viewer: MemberId = "you", ): ChatMessage { const deletedReason = getMessageDeletionReason(message, viewer); if (!deletedReason) return message; return { ...message, text: "", reactions: [], deletedReason }; } export function getMessagePreview(message: ChatMessage): string { if (message.deletedReason === "moderator") return "Removed by a host"; if (message.deletedReason === "sender") return "Message deleted"; return message.text; } export const INITIAL_CHAT_MESSAGES: ChatMessage[] = [ { id: 1, author: "maya", text: "The new direction is ready for a first look.", dateLabel: "Thursday, September 10", time: "10:42", reactions: [], forwarded: true, }, { id: 2, author: "maya", text: "Would love your eyes on the little details before we share it.", dateLabel: "Friday, September 11", time: "10:42", reactions: [], }, { id: 3, author: "jordan", text: "Much calmer. The spacing makes all the difference ✨", dateLabel: "Friday, September 11", time: "10:44", reactions: [{ emoji: "❤️", members: ["maya", "alex"] }], }, { id: 4, author: "you", text: "Agreed. Everything has a little more room to breathe.", dateLabel: "Today", time: "10:46", reactions: [], delivery: "read", }, { id: 5, author: "alex", text: "Quick walkthrough at 2? @You would love your take on the final flow.", dateLabel: "Today", time: "10:48", reactions: [], }, { id: 6, author: "you", text: "Sounds good — see you then.", dateLabel: "Today", time: "10:49", replyTo: 5, reactions: [{ emoji: "👍", members: ["jordan"] }], receipts: [ { member: "maya", deliveredAt: "10:49", readAt: "10:50" }, { member: "jordan", deliveredAt: "10:49" }, { member: "alex" }, ], }, { id: 7, author: "maya", text: "Perfect. I’ll bring the coffee ☕", dateLabel: "Today", time: "10:50", reactions: [], }, { id: 9, author: "jordan", text: "See you at two. I’ll bring the notes.", dateLabel: "Today", time: "10:51", replyTo: 6, reactions: [], }, ]; const LONG_CHAT_MESSAGE: ChatMessage = { id: 8, author: "maya", text: [ "I wrote down the full walkthrough so everyone can review it before we meet. First, we’ll look at the event page as a guest and make sure the date, location, and group details are easy to find. Then we’ll open the chat and check that the conversation feels useful without taking over the page.", "After that, let’s try a few everyday situations: catching up on older messages, replying to a specific note, mentioning someone, and finding a pinned update. I’d also like us to check what happens when several people are typing and when a message takes a moment to send.", "Finally, we should look at the narrow layout together. The drawer needs to leave enough room for actions beside each bubble, keep the composer comfortable to use, and make long notes like this one easy to skim. If anything feels crowded, we can simplify it before sharing the pattern with other teams.", "One more thing for the review: please try the same conversation with a few messages arriving while the drawer is open. We should check whether the reading position stays predictable, whether the latest message control is easy to find, and whether the date markers still make sense as we move through older parts of the conversation. If you notice any confusing transitions, leave a note so we can refine the behavior before this pattern is reused elsewhere in the app.", ].join("\n\n"), dateLabel: "Today", time: "10:52", reactions: [], }; export function toggleReaction( reactions: ChatReaction[], emoji: string, ): ChatReaction[] { const existing = reactions.find((reaction) => reaction.emoji === emoji); if (!existing) return [...reactions, { emoji, members: ["you"] }]; return reactions.flatMap((reaction) => { if (reaction.emoji !== emoji) return [reaction]; const members: MemberId[] = reaction.members.includes("you") ? reaction.members.filter((member) => member !== "you") : [...reaction.members, "you"]; if (members.length === 0) return []; return [{ ...reaction, members }]; }); } export const CHAT_SCENARIOS = [ { value: "conversation", label: "Conversation" }, { value: "long-message", label: "Long message" }, { value: "pinned", label: "Pinned message" }, { value: "typing", label: "Someone typing" }, { value: "typing-multiple", label: "Multiple people typing" }, { value: "empty", label: "First message" }, { value: "loading", label: "Loading conversation" }, { value: "error", label: "History error" }, { value: "offline", label: "Disconnected" }, { value: "access-lost", label: "Access lost" }, { value: "removed", label: "Removed from chat" }, { value: "banned", label: "Banned from chat" }, { value: "left", label: "Left chat" }, { value: "unread", label: "Unread messages" }, { value: "receipts", label: "Delivery & retry" }, ] as const; export type ChatScenario = | (typeof CHAT_SCENARIOS)[number]["value"] | "reconnecting"; export function getScenarioMessages(scenario: ChatScenario): ChatMessage[] { if ( [ "empty", "loading", "error", "access-lost", "removed", "banned", "left", ].includes(scenario) ) return []; if (scenario === "long-message") return [...INITIAL_CHAT_MESSAGES, LONG_CHAT_MESSAGE]; if (scenario !== "receipts") return INITIAL_CHAT_MESSAGES; return [ ...INITIAL_CHAT_MESSAGES.slice(0, 1), ...(["sending", "sent", "delivered", "read", "failed"] as const).map( (delivery, index) => ({ id: 20 + index, author: "you" as const, text: [ "Sending the latest update…", "The notes are on their way.", "The group has received the notes.", "Ready for our next review.", "Shall we meet at two?", ][index] ?? "A new update.", dateLabel: "Today", time: "10:51", reactions: [], delivery, }), ), ]; } 57:Ta5ad,"use client"; import { ArrowLeftIcon, BanIcon, ChevronRightIcon, EllipsisIcon, LockIcon, LogOutIcon, MicIcon, MicOffIcon, PinIcon, UserXIcon, } from "lucide-react"; import { AnimatePresence } from "motion/react"; import type { ReactElement, ReactNode, RefObject } from "react"; import { Fragment, useEffect, useId, useRef, useState } from "react"; import { useMediaQuery } from "@/registry/default/hooks/use-media-query"; import { cn } from "@/registry/default/lib/utils"; import { AlertDialog, AlertDialogClose, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPopup, AlertDialogTitle, AlertDialogTrigger, } from "@/registry/default/ui/alert-dialog"; import { Badge } from "@/registry/default/ui/badge"; import { Button } from "@/registry/default/ui/button"; import { type ComposerValue, getComposerText, } from "@/registry/default/ui/composer"; import { Drawer, DrawerClose, DrawerDescription, DrawerFooter, DrawerHeader, DrawerPanel, DrawerPopup, DrawerTitle, DrawerTrigger, } from "@/registry/default/ui/drawer"; import { Menu, MenuItem, MenuPopup, MenuTrigger, } from "@/registry/default/ui/menu"; import { TooltipProvider } from "@/registry/default/ui/tooltip"; import { ChatConversation } from "../chat/chat-conversation"; import { ChatDatePill } from "../chat/chat-date-pill"; import { ChatMemberSection } from "../chat/chat-members"; import { ChatStatusBar } from "../chat/chat-states"; import { ChatTypingIndicator } from "../chat/chat-typing-indicator"; import { ChatUnreadDivider } from "../chat/chat-unread-divider"; import { useChatScroll } from "../chat/hooks/use-chat-scroll"; import { ChatDemoComposer } from "./chat-demo-composer"; import { ChatDemoMessage, ChatMemberAvatar } from "./chat-demo-message"; import { ChatMessageInfo } from "./chat-demo-message-info"; import { getMessageReceipts } from "./chat-demo-receipts"; import type { ChatReplyFocusTarget } from "./chat-demo-reply-focus"; import { ChatDemoReplyFocus } from "./chat-demo-reply-focus"; import { ChatTimelineState } from "./chat-demo-scenarios"; import type { ChatMessage, ChatScenario, MemberId } from "./chat-demo-state"; import { CHAT_MEMBERS, deleteChatMessage, getMessageDeletionReason, getMessagePreview, getScenarioMessages, getTypingLabel, INITIAL_CHAT_MESSAGES, OTHER_MEMBERS, toggleReaction, } from "./chat-demo-state"; const DEMO_REPLIES = [ "Thanks for sharing! I’ll take a look ✨", "Love that. Let’s pick it up in the walkthrough.", "Noted — I’ll bring this back to the group.", ]; // `focus()` on a contenteditable puts the caret at the start of an existing draft. function focusAtEnd(input: HTMLElement | null): void { if (!input) return; input.focus({ preventScroll: true }); const selection = window.getSelection(); selection?.selectAllChildren(input); selection?.collapseToEnd(); } function GroupDetails({ open, onOpenChange, onClosed, position, activeMembers, mutedMembers, bannedMembers, onToggleMute, onRemove, onBan, onUnban, canLeave, onLeave, conversationFocusRef, }: { open: boolean; onOpenChange: (open: boolean) => void; onClosed: () => void; position: "bottom" | "right"; activeMembers: readonly MemberId[]; mutedMembers: readonly MemberId[]; bannedMembers: readonly MemberId[]; onToggleMute: (member: MemberId) => void; onRemove: (member: MemberId) => void; onBan: (member: MemberId) => void; onUnban: (member: MemberId) => void; canLeave: boolean; onLeave: () => void; conversationFocusRef: RefObject; }): ReactElement { const memberNames = activeMembers .map((member) => CHAT_MEMBERS[member].name) .join(", "); const previewNames = activeMembers .slice(0, 3) .map((member) => CHAT_MEMBERS[member].name) .join(", "); const [pendingRemoval, setPendingRemoval] = useState(null); const [moderationAction, setModerationAction] = useState<"remove" | "ban">( "remove", ); const [confirmOpen, setConfirmOpen] = useState(false); const [leaveConfirmOpen, setLeaveConfirmOpen] = useState(false); const [restoredMember, setRestoredMember] = useState(null); const triggerRef = useRef(null); const backRef = useRef(null); const leaveTriggerRef = useRef(null); const leaveRequestedRef = useRef(false); const editRefs = useRef>>({}); const unbanRefs = useRef>>({}); useEffect(() => { if (!restoredMember || !activeMembers.includes(restoredMember)) return; editRefs.current[restoredMember]?.focus(); setRestoredMember(null); }, [activeMembers, restoredMember]); return ( { if (!isOpen) onClosed(); }} > {previewNames} {activeMembers.length > 3 ? " and others" : ""}

} >

Group members The studio · {activeMembers.length} members

({ id: member, name: CHAT_MEMBERS[member].name, avatar: , badges: ( <> {member === "you" && You} {CHAT_MEMBERS[member].role === "host" && ( Host )} {CHAT_MEMBERS[member].role === "co-host" && ( Co-host )} {mutedMembers.includes(member) && ( )} ), action: CHAT_MEMBERS[member].role === "guest" ? ( { editRefs.current[member] = node ?? undefined; }} variant="ghost" size="icon-sm" aria-label={`More actions for ${CHAT_MEMBERS[member].name}`} /> } > onToggleMute(member)}> {mutedMembers.includes(member) ? ( <> { setPendingRemoval(member); setModerationAction("remove"); setConfirmOpen(true); }} > { setPendingRemoval(member); setModerationAction("ban"); setConfirmOpen(true); }} > ) : undefined, }))} /> ({ id: member, name: CHAT_MEMBERS[member].name, avatar: , dimmed: true, action: ( ), }))} />

{canLeave && ( { if (nextOpen) leaveRequestedRef.current = false; setLeaveConfirmOpen(nextOpen); }} onOpenChangeComplete={(isOpen) => { if (!isOpen && leaveRequestedRef.current) onLeave(); }} > } > leaveRequestedRef.current ? conversationFocusRef.current : leaveTriggerRef.current } > Leave this chat? You’ll stop receiving messages from this group. Your ticket for the event stays valid. }> Cancel } onClick={() => { leaveRequestedRef.current = true; }} > Leave chat )} { if (!pendingRemoval) return backRef.current; return ( (bannedMembers.includes(pendingRemoval) ? unbanRefs.current[pendingRemoval] : editRefs.current[pendingRemoval]) ?? backRef.current ); }} > {moderationAction === "ban" ? "Ban" : "Remove"}{" "} {pendingRemoval ? CHAT_MEMBERS[pendingRemoval].name : "member"}{" "} from the chat? {moderationAction === "ban" ? "They won’t be able to rejoin until you lift the ban. Their ticket stays valid." : "They’ll leave the chat but can rejoin through their ticket invitation. Their ticket stays valid."} }> Cancel ); } export function ChatDemo({ renderTriggers, }: { renderTriggers: (select: (scenario: ChatScenario) => void) => ReactNode; }): ReactElement { const id = useId(); const position = useMediaQuery("md") ? "right" : "bottom"; const [infoOpen, setInfoOpen] = useState(false); const [membersOpen, setMembersOpen] = useState(false); const [infoMessageId, setInfoMessageId] = useState(null); const [deleteMessageId, setDeleteMessageId] = useState(null); const [deleteOpen, setDeleteOpen] = useState(false); const [scenario, setScenario] = useState("conversation"); const [joinedChat, setJoinedChat] = useState(false); const [unreadCount, setUnreadCount] = useState(0); const [unreadFrom, setUnreadFrom] = useState(null); const [open, setOpen] = useState(false); const [messages, setMessages] = useState( INITIAL_CHAT_MESSAGES, ); const [enteringMessageIds, setEnteringMessageIds] = useState([]); const [draftValue, setDraftValue] = useState([]); const draft = getComposerText(draftValue); const [replyTo, setReplyTo] = useState(null); const [replyFocus, setReplyFocus] = useState( null, ); const replyDismissalRef = useRef<"cancel" | "send">("cancel"); const [pinnedId, setPinnedId] = useState(null); const [typingMembers, setTypingMembers] = useState([]); const [mutedMembers, setMutedMembers] = useState([]); const [members, setMembers] = useState([...OTHER_MEMBERS, "you"]); const [bannedMembers, setBannedMembers] = useState([]); const [notice, setNotice] = useState(""); const [highlightedId, setHighlightedId] = useState(null); const infoReturnFocusRef = useRef(null); const deleteReturnFocusRef = useRef(null); const composerRef = useRef(null); const focusComposerAfterRestoreRef = useRef(false); const scroll = useChatScroll({ active: open, paused: infoOpen || membersOpen || deleteOpen || replyFocus !== null, itemCount: messages.length, layoutKey: `${typingMembers.length}-${scenario}`, onReachEnd: () => setUnreadCount(0), }); const { viewportRef: timelineRef, atBottomRef } = scroll; const nextIdRef = useRef(30); const replyIndexRef = useRef(0); const retryTimerRef = useRef(undefined); const reconnectTimerRef = useRef(undefined); const replyTimerRef = useRef(undefined); const noticeTimerRef = useRef(undefined); const highlightTimerRef = useRef(undefined); const cancelJumpRef = useRef<(() => void) | undefined>(undefined); const messagesById = new Map( messages.map((message) => [message.id, message]), ); const dateGroups = messages.reduce< Array<{ dateLabel: string; entries: Array<{ message: ChatMessage; index: number }>; }> >((groups, message, index) => { const currentGroup = groups.at(-1); if (currentGroup?.dateLabel === message.dateLabel) { currentGroup.entries.push({ message, index }); } else { groups.push({ dateLabel: message.dateLabel, entries: [{ message, index }], }); } return groups; }, []); const infoMessage = infoMessageId === null ? undefined : messagesById.get(infoMessageId); const replyMessage = replyTo === null ? undefined : messagesById.get(replyTo); const pinnedMessage = pinnedId === null ? undefined : messagesById.get(pinnedId); const activeOtherMembers = members.filter((member) => member !== "you"); const composerDisabled = [ "loading", "error", "offline", "reconnecting", "access-lost", "removed", "banned", "left", ].includes(scenario); useEffect(() => { if (open && scenario === "empty" && joinedChat) focusAtEnd(composerRef.current); if ( open && scenario === "conversation" && focusComposerAfterRestoreRef.current ) { focusComposerAfterRestoreRef.current = false; focusAtEnd(composerRef.current); } }, [open, scenario, joinedChat]); const openMessageInfo = ( messageId: number, trigger: HTMLElement | null, ): void => { infoReturnFocusRef.current = trigger; atBottomRef.current = false; setInfoMessageId(messageId); setInfoOpen(true); }; const finishNestedDrawerClose = scroll.updatePosition; const changeScenario = (next: ChatScenario): void => { window.clearTimeout(replyTimerRef.current); window.clearTimeout(retryTimerRef.current); window.clearTimeout(reconnectTimerRef.current); window.clearTimeout(noticeTimerRef.current); window.clearTimeout(highlightTimerRef.current); cancelJumpRef.current?.(); setInfoOpen(false); setMembersOpen(false); setInfoMessageId(null); setDeleteOpen(false); setDeleteMessageId(null); setScenario(next); setJoinedChat(false); setMessages(getScenarioMessages(next)); setEnteringMessageIds([]); setTypingMembers( next === "typing" ? activeOtherMembers.filter((member) => member === "maya") : next === "typing-multiple" ? activeOtherMembers : [], ); setReplyTo(null); setReplyFocus(null); setHighlightedId(null); setNotice(""); setPinnedId(next === "pinned" ? 5 : null); nextIdRef.current = 30; setUnreadCount(next === "unread" ? 3 : 0); setUnreadFrom(next === "unread" ? 5 : null); scroll.resetScroll(next !== "unread"); }; const retryMessage = (messageId: number): void => { setMessages((current) => current.map((message) => message.id === messageId ? { ...message, delivery: "sending" } : message, ), ); window.clearTimeout(retryTimerRef.current); retryTimerRef.current = window.setTimeout(() => { setMessages((current) => current.map((message) => message.id === messageId ? { ...message, delivery: "delivered", receipts: undefined } : message, ), ); announce("Message delivered"); }, 1200); }; useEffect( () => () => { window.clearTimeout(replyTimerRef.current); window.clearTimeout(retryTimerRef.current); window.clearTimeout(reconnectTimerRef.current); window.clearTimeout(noticeTimerRef.current); window.clearTimeout(highlightTimerRef.current); cancelJumpRef.current?.(); }, [], ); const announce = (text: string): void => { setNotice(text); window.clearTimeout(noticeTimerRef.current); noticeTimerRef.current = window.setTimeout(() => setNotice(""), 3000); }; const sendMessage = (): void => { const text = draft.trim(); if (!text || composerDisabled) return; if ( scenario === "empty" || scenario === "typing" || scenario === "typing-multiple" ) setScenario("conversation"); const time = new Intl.DateTimeFormat("en", { hour: "2-digit", minute: "2-digit", hourCycle: "h23", }).format(new Date()); const message: ChatMessage = { id: nextIdRef.current++, author: "you", text, dateLabel: "Today", time, replyTo: replyTo ?? undefined, reactions: [], }; atBottomRef.current = true; setEnteringMessageIds((current) => [...current, message.id]); setMessages((current) => [...current, message]); setDraftValue([]); replyDismissalRef.current = "send"; setReplyTo(null); setTypingMembers(["maya"]); window.clearTimeout(replyTimerRef.current); replyTimerRef.current = window.setTimeout(() => { const response: ChatMessage = { id: nextIdRef.current++, author: "maya", text: DEMO_REPLIES[replyIndexRef.current++ % DEMO_REPLIES.length] ?? "Thanks for sharing!", dateLabel: "Today", time, reactions: [], }; if (!atBottomRef.current) { setUnreadCount((count) => count + 1); setUnreadFrom((first) => first ?? response.id); } if (timelineRef.current && atBottomRef.current) { setEnteringMessageIds((current) => [...current, response.id]); } setMessages((current) => [ ...current.map((item) => item.author === "you" && item.delivery !== "failed" && item.delivery !== "sending" ? { ...item, delivery: "read" as const, receipts: undefined } : item, ), response, ]); setTypingMembers([]); }, 1800); }; const onReply = ( messageId: number, source: HTMLDivElement, firstInGroup: boolean, expanded: boolean, ): void => { cancelJumpRef.current?.(); setHighlightedId(null); atBottomRef.current = false; replyDismissalRef.current = "cancel"; setReplyFocus({ messageId, source, width: source.getBoundingClientRect().width, firstInGroup, expanded, }); setReplyTo(messageId); focusAtEnd(composerRef.current); }; const cancelReply = (): void => { replyDismissalRef.current = "cancel"; setReplyTo(null); }; const onReact = (messageId: number, emoji: string): void => { setMessages((current) => current.map((message) => message.id === messageId ? { ...message, reactions: toggleReaction(message.reactions, emoji) } : message, ), ); }; const requestDelete = ( messageId: number, trigger: HTMLElement | null, ): void => { const message = messagesById.get(messageId); if (!message || !getMessageDeletionReason(message)) return; deleteReturnFocusRef.current = trigger; setDeleteMessageId(messageId); setDeleteOpen(true); }; const confirmDelete = (): void => { if (deleteMessageId === null) return; const message = messagesById.get(deleteMessageId); if (!message || !getMessageDeletionReason(message)) return; setMessages((current) => current.map((message) => message.id === deleteMessageId ? deleteChatMessage(message) : message, ), ); if (pinnedId === deleteMessageId) setPinnedId(null); if (replyTo === deleteMessageId) setReplyTo(null); announce(getMessagePreview(deleteChatMessage(message))); }; const onCopy = async (text: string): Promise => { try { await navigator.clipboard.writeText(text); announce("Message copied"); } catch { announce("Couldn’t copy. Select the message text to copy it."); } }; const removeMember = (member: MemberId): void => { setMembers((current) => current.filter((id) => id !== member)); setTypingMembers((current) => current.filter((id) => id !== member)); setMessages((current) => current.map((message) => ({ ...message, receipts: getMessageReceipts(message, activeOtherMembers).filter( (receipt) => receipt.member !== member, ), })), ); }; const onPin = (messageId: number): void => { setPinnedId((current) => (current === messageId ? null : messageId)); announce(pinnedId === messageId ? "Message unpinned" : "Message pinned"); }; const onJump = (messageId: number): void => { const target = document.getElementById(`${id}-message-${messageId}`); if (!target) return; atBottomRef.current = false; cancelJumpRef.current?.(); window.clearTimeout(highlightTimerRef.current); setHighlightedId(null); const timeline = timelineRef.current; const reveal = (): void => { cancelJumpRef.current?.(); setHighlightedId(messageId); highlightTimerRef.current = window.setTimeout( () => setHighlightedId(null), 420, ); }; const waitForScroll = (): void => { window.clearTimeout(highlightTimerRef.current); highlightTimerRef.current = window.setTimeout(reveal, 100); }; timeline?.addEventListener("scroll", waitForScroll, { passive: true }); cancelJumpRef.current = () => { timeline?.removeEventListener("scroll", waitForScroll); window.clearTimeout(highlightTimerRef.current); }; waitForScroll(); target.scrollIntoView({ block: "center", behavior: window.matchMedia("(prefers-reduced-motion: reduce)").matches ? "auto" : "smooth", }); target.focus({ preventScroll: true }); }; return ( { if ( !nextOpen && details.reason === "escape-key" && replyTo !== null ) { details.cancel(); cancelReply(); return; } setOpen(nextOpen); setEnteringMessageIds([]); if (!nextOpen) { cancelJumpRef.current?.(); setHighlightedId(null); setInfoOpen(false); setMembersOpen(false); } }} onOpenChangeComplete={(isOpen) => { if (isOpen) return; setReplyTo(null); setReplyFocus(null); }} > {renderTriggers(changeScenario)} The studio {scenario === "removed" ? ( "You were removed from this chat" ) : scenario === "banned" ? ( "You were banned from this chat" ) : scenario === "left" ? ( "You left this chat" ) : ( { if (nextOpen) atBottomRef.current = false; setMembersOpen(nextOpen); }} onClosed={finishNestedDrawerClose} position={position} activeMembers={members} mutedMembers={mutedMembers} bannedMembers={bannedMembers} onToggleMute={(member) => setMutedMembers((current) => current.includes(member) ? current.filter((id) => id !== member) : [...current, member], ) } onRemove={removeMember} onBan={(member) => { setBannedMembers((current) => [...current, member]); removeMember(member); }} onUnban={(member) => { setBannedMembers((current) => current.filter((id) => id !== member), ); setMembers((current) => current.includes(member) ? current : [...current, member], ); }} canLeave={scenario !== "access-lost"} onLeave={() => { changeScenario("left"); setDraftValue([]); }} conversationFocusRef={timelineRef} /> )} {pinnedMessage && !pinnedMessage.deletedReason && ( )} {(scenario === "offline" || scenario === "reconnecting") && ( { setScenario("reconnecting"); window.clearTimeout(reconnectTimerRef.current); reconnectTimerRef.current = window.setTimeout(() => { focusComposerAfterRestoreRef.current = true; setScenario("conversation"); announce("Connected"); }, 1200); }} > Reconnect } /> )} { setReplyFocus(null); finishNestedDrawerClose(); }} > {replyMessage && replyFocus && ( )} } > { if (scenario === "left" || scenario === "removed") focusComposerAfterRestoreRef.current = true; changeScenario("conversation"); }} memberCount={activeOtherMembers.length} joined={joinedChat} onJoin={() => setJoinedChat(true)} />

{dateGroups.map((group) => (

{group.dateLabel && ( {group.dateLabel} )}

{group.entries.map(({ message, index }, entryIndex) => { const previousMessage = messages[index - 1]; const grouped = previousMessage?.author === message.author && previousMessage.dateLabel === message.dateLabel && !message.deletedReason && !previousMessage.deletedReason; const followsSeparator = entryIndex === 0 || message.id === unreadFrom; return ( {message.id === unreadFrom && ( New messages )}

setEnteringMessageIds((current) => current.filter((id) => id !== message.id), ) } replyMessage={messagesById.get( message.replyTo ?? -1, )} grouped={grouped} groupEnd={ messages[index + 1]?.author !== message.author || messages[index + 1]?.dateLabel !== message.dateLabel || Boolean( message.deletedReason || messages[index + 1]?.deletedReason, ) } pinned={pinnedId === message.id} highlighted={highlightedId === message.id} replyLifted={ replyFocus?.messageId === message.id } domId={`${id}-message-${message.id}`} onReply={onReply} onReact={onReact} onPin={onPin} onDelete={requestDelete} onCopy={onCopy} onJump={onJump} onRetry={retryMessage} onInfo={openMessageInfo} />

); })}

))}

0} label={getTypingLabel(typingMembers)} className="ps-9 pt-5" /> {scenario === "empty" && !joinedChat && (

)} {scenario !== "removed" && scenario !== "banned" && scenario !== "left" && scenario !== "error" && scenario !== "access-lost" && (scenario !== "empty" || joinedChat) && ( )} { if (deleteReturnFocusRef.current?.isConnected) return deleteReturnFocusRef.current; return ( document.getElementById(`${id}-message-${deleteMessageId}`) ?? timelineRef.current ); }} > Delete this message? This message will be deleted for everyone. This can’t be undone. }> Cancel } onClick={confirmDelete} > Delete message ); } 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion@14.0.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion@14.0.0"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L4e",null,{"namespace":"@coss","registryDependencies":["@coss/alert-dialog","@coss/avatar","@coss/badge","@coss/button","@coss/composer","@coss/drawer","@coss/menu","@coss/tooltip","@coss/use-media-query","@coss/utils","@coss/chat"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/default/chat-demo/chat-demo-composer.tsx","content":"$50","type":"registry:component","target":"@components/chat-demo/chat-demo-composer.tsx"},{"path":"registry/default/chat-demo/chat-demo-message-info.tsx","content":"$51","type":"registry:component","target":"@components/chat-demo/chat-demo-message-info.tsx"},{"path":"registry/default/chat-demo/chat-demo-message.tsx","content":"$52","type":"registry:component","target":"@components/chat-demo/chat-demo-message.tsx"},{"path":"registry/default/chat-demo/chat-demo-receipts.ts","content":"$53","type":"registry:component","target":"@components/chat-demo/chat-demo-receipts.ts"},{"path":"registry/default/chat-demo/chat-demo-reply-focus.tsx","content":"$54","type":"registry:component","target":"@components/chat-demo/chat-demo-reply-focus.tsx"},{"path":"registry/default/chat-demo/chat-demo-scenarios.tsx","content":"$55","type":"registry:component","target":"@components/chat-demo/chat-demo-scenarios.tsx"},{"path":"registry/default/chat-demo/chat-demo-state.ts","content":"$56","type":"registry:component","target":"@components/chat-demo/chat-demo-state.ts"},{"path":"registry/default/chat-demo/chat-demo.tsx","content":"$57","type":"registry:component","target":"@components/chat-demo/chat-demo.tsx"}],"className":"h-[70svh] min-h-80"}]]}]