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:T7d7,"use client"; import "./message-bubble.css"; import { cn } from "@/lib/utils"; export interface MessageBubbleProps { message: string; variant?: "sent" | "received"; grouped?: "first" | "middle" | "last" | "none"; className?: string; children?: React.ReactNode; } export function MessageBubble({ message, variant = "received", grouped = "none", className, children, }: MessageBubbleProps) { const groupedClasses = grouped === "first" ? "imessage-grouped-first mb-1.5" : grouped === "last" ? "imessage-grouped-last" : grouped === "middle" ? "imessage-grouped-middle mb-1.5" : ""; return (

{children ||

{message}

}

); } export interface ChatMessageProps { timestamp?: string; messages: string[]; variant?: "sent" | "received"; className?: string; showTimestamp?: boolean; } export function ChatMessage({ timestamp, messages, variant = "received", className, showTimestamp = true, }: ChatMessageProps) { const hasMultipleMessages = messages.length > 1; const getGroupedType = (index: number, total: number) => { if (total === 1) return "none"; if (index === 0) return "first"; if (index === total - 1) return "last"; return "middle"; }; return (

{messages.map((message, index) => ( ))}

{showTimestamp && timestamp && ( {timestamp} )}

); } 52:Tacf,/* iOS-style message bubbles */ .imessage-bubble { word-wrap: break-word; line-height: 24px; position: relative; padding: 8px 20px; max-width: 60vw; border-radius: 20px; } .imessage-bubble::before, .imessage-bubble::after { content: ""; position: absolute; bottom: 0; height: 18px; } /* Grouped messages have tighter corner radii on the stacking side */ /* Received messages (left side) - tight corners on left side */ .imessage-grouped-first.imessage-from-them { /* biome-ignore lint/complexity/noImportantStyles: need to override radius */ border-radius: 20px 20px 20px 5px !important; } .imessage-grouped-middle.imessage-from-them { /* biome-ignore lint/complexity/noImportantStyles: need to override radius */ border-radius: 5px 20px 20px 5px !important; } .imessage-grouped-last.imessage-from-them { /* biome-ignore lint/complexity/noImportantStyles: need to override radius */ border-radius: 5px 20px 20px 20px !important; } .imessage-grouped-last.imessage-from-them { /* biome-ignore lint/complexity/noImportantStyles: need to override radius */ border-radius: 5px 20px 20px 20px !important; } /* Sent messages (right side) - tight corners on right side */ .imessage-grouped-first.imessage-from-me { /* biome-ignore lint/complexity/noImportantStyles: need to override radius */ border-radius: 20px 20px 5px 20px !important; } .imessage-grouped-middle.imessage-from-me { /* biome-ignore lint/complexity/noImportantStyles: need to override radius */ border-radius: 20px 5px 5px 20px !important; } .imessage-grouped-last.imessage-from-me { /* biome-ignore lint/complexity/noImportantStyles: need to override radius */ border-radius: 20px 5px 20px 20px !important; } /* Bot messages (from-them style) */ .imessage-from-them { background-color: var(--color-zinc-300); color: black; align-self: flex-start; } .imessage-from-them::before { left: -7px; width: 20px; background-color: var(--color-zinc-300); border-bottom-right-radius: 16px; } .imessage-from-them::after { left: -26px; width: 26px; background-color: var(--color-background); border-bottom-right-radius: 10px; } /* User messages (from-me style) */ .imessage-from-me { color: black; background: #00bbff; align-self: flex-end; } .imessage-from-me::before { right: -7px; width: 20px; background-color: #00bbff; border-bottom-left-radius: 16px 14px; } .imessage-from-me::after { right: -26px; width: 26px; background-color: var(--color-background); border-bottom-left-radius: 10px; } /* Grouped iMessage bubbles for NEW_MESSAGE_BREAK */ /* Hide tails for grouped messages except the last one */ .imessage-grouped-first::before, .imessage-grouped-first::after, .imessage-grouped-middle::before, .imessage-grouped-middle::after { display: none; } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L50",null,{"files":[{"path":"registry/new-york/ui/message-bubble.tsx","content":"$51","type":"registry:ui"},{"path":"registry/new-york/ui/message-bubble.css","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]