{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "chat",
  "title": "Chat",
  "description": "A set of composable chat UI components with container query support.",
  "dependencies": [
    "@radix-ui/react-avatar"
  ],
  "registryDependencies": [
    "avatar",
    "button",
    "textarea"
  ],
  "files": [
    {
      "path": "registry/new-york/chat/chat.tsx",
      "content": "/**\n * @module chat\n *\n * Root container for the chat UI. Provides a flex column layout with\n * container query support (`@container/chat`) so child components can\n * adapt to the available width.\n *\n * **Important:** Give `Chat` or its parent a defined height or max-height (e.g. via\n * `className=\"h-screen\"`) to enable proper scrolling in `ChatMessages`.\n *\n * @see {@link ChatHeader} for the sticky top header.\n * @see {@link ChatMessages} for the scrollable message area.\n * @see {@link ChatToolbar} for the sticky bottom input area.\n */\n\nimport { cn } from \"@/lib/utils\";\n\nexport interface ChatProps extends React.ComponentProps<\"div\"> {\n  children?: React.ReactNode;\n}\n\n/**\n * Root container component that establishes the chat layout structure\n * with container queries and flex column layout for header, messages,\n * and toolbar sections.\n *\n * Uses container queries (e.g. `@md/chat:`, `@2xl/chat:`) to adapt\n * layout based on available width rather than viewport size.\n *\n * @example\n * ```tsx\n * <Chat className=\"h-screen\">\n *   <ChatHeader>\n *     Header Content\n *   </ChatHeader>\n *\n *   <ChatMessages>\n *     Messages Content\n *   </ChatMessages>\n *\n *   <ChatToolbar>\n *     Toolbar Content\n *   </ChatToolbar>\n * </Chat>\n * ```\n */\nexport function Chat({ children, className, ...props }: ChatProps) {\n  return (\n    <div\n      data-slot=\"chat\"\n      className={cn(\n        \"h-full overflow-hidden flex flex-col @container/chat\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n",
      "type": "registry:file",
      "target": "components/chat/chat.tsx"
    },
    {
      "path": "registry/new-york/chat/chat-header.tsx",
      "content": "/**\n * @module chat-header\n *\n * Sticky header components for the chat UI. Compose `ChatHeaderMain`,\n * `ChatHeaderAddon`, `ChatHeaderAvatar`, and `ChatHeaderButton` inside\n * a `ChatHeader` container to build the header layout.\n *\n * Typical structure:\n * ```\n * ChatHeader\n * ├── ChatHeaderAddon          ← left-side items (avatar, back button)\n * ├── ChatHeaderMain           ← center content (takes remaining space)\n * └── ChatHeaderAddon          ← right-side items (action buttons)\n * ```\n */\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport {\n  AvatarFallbackProps,\n  AvatarImageProps,\n  AvatarProps,\n} from \"@radix-ui/react-avatar\";\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/new-york/ui/avatar\";\nimport { Button } from \"@/registry/new-york/ui/button\";\n\nexport interface ChatHeaderProps extends React.ComponentProps<\"div\"> {\n  children?: React.ReactNode;\n}\n\n/**\n * Sticky header container for the chat. Renders as a flex row pinned\n * to the top of the `Chat` container.\n *\n * @example\n * ```tsx\n * <ChatHeader className=\"border-b\">\n *   <ChatHeaderAddon>\n *     <ChatHeaderAvatar src=\"/avatar.png\" alt=\"@user\" fallback=\"AS\" />\n *   </ChatHeaderAddon>\n *   <ChatHeaderMain>\n *     <span className=\"font-medium\">Ann Smith</span>\n *   </ChatHeaderMain>\n *   <ChatHeaderAddon>\n *     <ChatHeaderButton><PhoneIcon /></ChatHeaderButton>\n *     <ChatHeaderButton><MoreHorizontalIcon /></ChatHeaderButton>\n *   </ChatHeaderAddon>\n * </ChatHeader>\n * ```\n */\nexport function ChatHeader({ children, className, ...props }: ChatHeaderProps) {\n  return (\n    <div\n      data-slot=\"chat-header\"\n      className={cn(\n        \"sticky top-0 z-10 p-2 bg-background flex items-center gap-2\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport interface ChatHeaderMainProps extends React.ComponentProps<\"div\"> {\n  children?: React.ReactNode;\n}\n\n/**\n * Primary content area of the header. Uses `flex-1` to take remaining\n * horizontal space between `ChatHeaderAddon` groups.\n *\n * @example\n * ```tsx\n * <ChatHeaderMain>\n *   <span className=\"font-medium\">Ann Smith</span>\n *   <span className=\"flex-1 grid\">\n *     <span className=\"text-sm font-medium truncate\">Front-end developer</span>\n *   </span>\n * </ChatHeaderMain>\n * ```\n */\nexport function ChatHeaderMain({\n  children,\n  className,\n  ...props\n}: ChatHeaderMainProps) {\n  return (\n    <div data-slot=\"chat-header-main\" className={cn(\"flex-1 flex items-center gap-2\", className)} {...props}>\n      {children}\n    </div>\n  );\n}\n\nexport interface ChatHeaderAddonProps extends React.ComponentProps<\"div\"> {\n  children?: React.ReactNode;\n}\n\n/**\n * Groups supplementary items (avatars, buttons, inputs) on either side\n * of the header. Place one before `ChatHeaderMain` for the left side\n * and one after for the right side.\n *\n * @example\n * ```tsx\n * // Left side\n * <ChatHeaderAddon>\n *   <ChatHeaderAvatar src=\"/avatar.png\" alt=\"@user\" fallback=\"AS\" />\n * </ChatHeaderAddon>\n *\n * // Right side\n * <ChatHeaderAddon>\n *   <ChatHeaderButton><PhoneIcon /></ChatHeaderButton>\n *   <ChatHeaderButton><VideoIcon /></ChatHeaderButton>\n * </ChatHeaderAddon>\n * ```\n */\nexport function ChatHeaderAddon({\n  children,\n  className,\n  ...props\n}: ChatHeaderAddonProps) {\n  return (\n    <div data-slot=\"chat-header-addon\" className={cn(\"flex items-center gap-2\", className)} {...props}>\n      {children}\n    </div>\n  );\n}\n\nexport interface ChatHeaderAvatarProps extends AvatarProps {\n  className?: string;\n  /** Image URL for the avatar. */\n  src?: AvatarImageProps[\"src\"];\n  /** Alt text for the avatar image. */\n  alt?: string;\n  /** Fallback content shown while the image loads or if it fails (e.g. initials). */\n  fallback?: React.ReactNode;\n  /** Additional props forwarded to the inner `AvatarImage`. */\n  imageProps?: AvatarImageProps;\n  /** Additional props forwarded to the inner `AvatarFallback`. */\n  fallbackProps?: AvatarFallbackProps;\n}\n\n/**\n * Avatar component sized for the header. Built on Radix UI Avatar\n * primitives with rounded styling.\n *\n * @example\n * ```tsx\n * <ChatHeaderAvatar\n *   src=\"https://example.com/avatar.png\"\n *   alt=\"@annsmith\"\n *   fallback=\"AS\"\n * />\n * ```\n */\nexport function ChatHeaderAvatar({\n  className,\n  src,\n  alt,\n  fallback,\n  imageProps,\n  fallbackProps,\n  ...props\n}: ChatHeaderAvatarProps) {\n  return (\n    <Avatar data-slot=\"chat-header-avatar\" className={cn(\"rounded-full\", className)} {...props}>\n      <AvatarImage src={src} alt={alt} {...imageProps} />\n      {fallback && (\n        <AvatarFallback {...fallbackProps}>{fallback}</AvatarFallback>\n      )}\n    </Avatar>\n  );\n}\n\nexport interface ChatHeaderButtonProps extends React.ComponentProps<\n  typeof Button\n> {\n  children?: React.ReactNode;\n}\n\n/**\n * Pre-styled ghost icon button for header actions (phone, video, menu, etc.).\n * Uses `variant=\"ghost\"` and `size=\"icon-sm\"`.\n *\n * @example\n * ```tsx\n * <ChatHeaderButton>\n *   <MoreHorizontalIcon />\n * </ChatHeaderButton>\n * ```\n */\nexport function ChatHeaderButton({\n  children,\n  className,\n  ...props\n}: ChatHeaderButtonProps) {\n  return (\n    <Button data-slot=\"chat-header-button\" variant=\"ghost\" size=\"icon-sm\" className={cn(className)} {...props}>\n      {children}\n    </Button>\n  );\n}\n",
      "type": "registry:file",
      "target": "components/chat/chat-header.tsx"
    },
    {
      "path": "registry/new-york/chat/chat-messages.tsx",
      "content": "/**\n * @module chat-messages\n *\n * Scrollable message container for the chat UI. Uses `flex-col-reverse`\n * to display messages bottom-to-top and automatically scroll to the\n * latest message. Fills all available vertical space between the header\n * and toolbar.\n *\n * **Important:** The parent `Chat` component or its parent must have a defined height\n * for overflow scrolling to work correctly.\n *\n * @see {@link ChatEvent} for rendering individual messages inside this container.\n */\n\nimport { cn } from \"@/lib/utils\";\n\nexport type ChatMessagesProps = React.ComponentProps<\"div\">;\n\n/**\n * Scrollable flex container with reverse column direction that\n * displays chat messages from bottom to top, automatically handling\n * overflow.\n *\n * Render `ChatEvent` items (or custom message components built from\n * them) as direct children. Because of `flex-col-reverse`, the first\n * child in the DOM appears at the **bottom** of the visible area.\n *\n * @example\n * ```tsx\n * <ChatMessages>\n *   {messages.map((msg) => (\n *     <ChatEvent key={msg.id}>\n *       <ChatEventAddon>\n *         <ChatEventAvatar src={msg.sender.avatarUrl} fallback=\"AB\" />\n *       </ChatEventAddon>\n *       <ChatEventBody>\n *         <ChatEventTitle>\n *           <span className=\"font-medium\">{msg.sender.name}</span>\n *           <ChatEventTime timestamp={msg.timestamp} />\n *         </ChatEventTitle>\n *         <ChatEventContent>{msg.content}</ChatEventContent>\n *       </ChatEventBody>\n *     </ChatEvent>\n *   ))}\n * </ChatMessages>\n * ```\n */\nexport function ChatMessages({\n  children,\n  className,\n  ...props\n}: ChatMessagesProps) {\n  return (\n    <div\n      data-slot=\"chat-messages\"\n      role=\"log\"\n      aria-label=\"Chat messages\"\n      className={cn(\n        \"flex-1 flex flex-col-reverse overflow-auto py-2\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n",
      "type": "registry:file",
      "target": "components/chat/chat-messages.tsx"
    },
    {
      "path": "registry/new-york/chat/chat-toolbar.tsx",
      "content": "/**\n * @module chat-toolbar\n *\n * Sticky bottom input area for message composition. Compose\n * `ChatToolbarTextarea`, `ChatToolbarAddon`, and `ChatToolbarButton`\n * inside a `ChatToolbar` container.\n *\n * Typical structure:\n * ```\n * ChatToolbar\n * ├── ChatToolbarAddon (align=\"inline-start\")  ← left button(s)\n * │   └── ChatToolbarButton\n * ├── ChatToolbarTextarea                       ← auto-growing input\n * └── ChatToolbarAddon (align=\"inline-end\")     ← right button(s)\n *     └── ChatToolbarButton (×N)\n * ```\n *\n * The `align` prop on `ChatToolbarAddon` controls position via CSS\n * `order`:\n * - `\"inline-start\"` → left of the textarea\n * - `\"inline-end\"` → right of the textarea\n * - `\"block-start\"` → full-width row above the textarea\n * - `\"block-end\"` → full-width row below the textarea\n */\n\n\"use client\";\n\nimport * as React from \"react\";\nimport { FileTextIcon, PaperclipIcon, XIcon } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport { Textarea } from \"@/registry/new-york/ui/textarea\";\nimport { Button } from \"@/registry/new-york/ui/button\";\n\nexport interface ChatToolbarProps extends React.ComponentProps<\"div\"> {\n  children?: React.ReactNode;\n}\n\n/**\n * Sticky bottom container for the message input and action buttons.\n * Renders a bordered, rounded inner wrapper with flex-wrap layout.\n *\n * @example\n * ```tsx\n * <ChatToolbar>\n *   <ChatToolbarAddon align=\"inline-start\">\n *     <ChatToolbarButton><PlusIcon /></ChatToolbarButton>\n *   </ChatToolbarAddon>\n *\n *   <ChatToolbarTextarea\n *     value={message}\n *     onChange={(e) => setMessage(e.target.value)}\n *     onSubmit={() => handleSendMessage()}\n *   />\n *\n *   <ChatToolbarAddon align=\"inline-end\">\n *     <ChatToolbarButton><GiftIcon /></ChatToolbarButton>\n *     <ChatToolbarButton><SendIcon /></ChatToolbarButton>\n *   </ChatToolbarAddon>\n * </ChatToolbar>\n * ```\n */\nexport function ChatToolbar({\n  children,\n  className,\n  ...props\n}: ChatToolbarProps) {\n  return (\n    <div\n      data-slot=\"chat-toolbar\"\n      className={cn(\"sticky bottom-0 p-2 pt-0 bg-background\", className)}\n      {...props}\n    >\n      <div\n        className={cn(\n          \"border rounded-md p-2\",\n          \"flex flex-wrap items-start gap-x-2\",\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  );\n}\n\n/** Modifier key that allows inserting a new line instead of submitting */\nconst NEWLINE_MODIFIER_KEY = \"shiftKey\" as const;\n\nexport interface ChatToolbarTextareaProps extends React.ComponentProps<\n  typeof Textarea\n> {\n  /** Called when the user presses Enter (without Shift). Use this to trigger message sending. */\n  onSubmit?: () => void;\n}\n\n/**\n * Auto-growing textarea with built-in submit handling.\n *\n * - **Enter** → calls `onSubmit()`\n * - **Shift+Enter** → inserts a new line\n *\n * Accepts all standard `<textarea>` / shadcn `Textarea` props\n * (`value`, `onChange`, `placeholder`, etc.).\n *\n * @example\n * ```tsx\n * const [message, setMessage] = useState(\"\");\n *\n * <ChatToolbarTextarea\n *   value={message}\n *   onChange={(e) => setMessage(e.target.value)}\n *   onSubmit={() => {\n *     sendMessage(message);\n *     setMessage(\"\");\n *   }}\n * />\n * ```\n */\nexport function ChatToolbarTextarea({\n  className,\n  onSubmit,\n  onKeyDown,\n  ...props\n}: ChatToolbarTextareaProps) {\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {\n    if (e.key === \"Enter\" && !e[NEWLINE_MODIFIER_KEY]) {\n      e.preventDefault();\n      onSubmit?.();\n    }\n    onKeyDown?.(e);\n  };\n\n  return (\n    <div data-slot=\"chat-toolbar-textarea\" className=\"flex-1 min-w-0 order-2 grid\">\n      <Textarea\n        id=\"toolbar-input\"\n        placeholder=\"Type your message...\"\n        className={cn(\n          \"h-fit min-h-10 max-h-30 px-1 @md/chat:text-base\",\n          \"border-none shadow-none focus-visible:border-none focus-visible:ring-0 placeholder:whitespace-nowrap resize-none\",\n          className,\n        )}\n        rows={1}\n        onKeyDown={handleKeyDown}\n        {...props}\n      />\n    </div>\n  );\n}\n\nconst chatToolbarAddonAlignStyles = {\n  \"inline-start\": \"order-1\",\n  \"inline-end\": \"order-3\",\n  \"block-start\": \"order-0 w-full h-auto\",\n  \"block-end\": \"order-4 w-full h-auto\",\n};\n\nexport interface ChatToolbarAddonProps extends React.ComponentProps<\"div\"> {\n  children?: React.ReactNode;\n  /**\n   * Position of this addon relative to the textarea.\n   * - `\"inline-start\"` — left of the textarea (default)\n   * - `\"inline-end\"` — right of the textarea\n   * - `\"block-start\"` — full-width row above the textarea\n   * - `\"block-end\"` — full-width row below the textarea\n   */\n  align?: \"inline-start\" | \"inline-end\" | \"block-start\" | \"block-end\";\n}\n\n/**\n * Groups action buttons at a specific position within the toolbar.\n * Use the `align` prop to control placement relative to the textarea.\n *\n * @example\n * ```tsx\n * // Left side\n * <ChatToolbarAddon align=\"inline-start\">\n *   <ChatToolbarButton><PlusIcon /></ChatToolbarButton>\n * </ChatToolbarAddon>\n *\n * // Right side\n * <ChatToolbarAddon align=\"inline-end\">\n *   <ChatToolbarButton><SendIcon /></ChatToolbarButton>\n * </ChatToolbarAddon>\n *\n * // Full-width row above\n * <ChatToolbarAddon align=\"block-start\">\n *   <ChatToolbarButton><AttachIcon /></ChatToolbarButton>\n * </ChatToolbarAddon>\n * ```\n */\nexport function ChatToolbarAddon({\n  children,\n  className,\n  align = \"inline-start\",\n  ...props\n}: ChatToolbarAddonProps) {\n  return (\n    <div\n      data-slot=\"chat-toolbar-addon\"\n      className={cn(\n        \"h-10 flex items-center gap-1.5\",\n        chatToolbarAddonAlignStyles[align],\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport interface ChatToolbarButtonProps extends React.ComponentProps<\n  typeof Button\n> {\n  children?: React.ReactNode;\n}\n\n/**\n * Pre-styled ghost icon button for toolbar actions. Responsive sizing\n * via container queries. SVG icons inside are automatically sized.\n *\n * @example\n * ```tsx\n * <ChatToolbarButton>\n *   <SendIcon />\n * </ChatToolbarButton>\n * ```\n */\nexport function ChatToolbarButton({\n  children,\n  className,\n  ...props\n}: ChatToolbarButtonProps) {\n  return (\n    <Button\n      data-slot=\"chat-toolbar-button\"\n      variant=\"ghost\"\n      className={cn(\n        \"size-9 @md/chat:size-9 [&_svg:not([class*='size-'])]:size-5 [&_svg:not([class*='size-'])]:@md/chat:size-5 [&_svg]:stroke-[1.7px]\",\n        className,\n      )}\n      type=\"button\"\n      {...props}\n    >\n      {children}\n    </Button>\n  );\n}\n\nexport interface ChatToolbarAttachmentButtonProps extends Omit<\n  ChatToolbarButtonProps,\n  \"onClick\"\n> {\n  /** Called with the selected files when the user picks one or more files. */\n  onFilesSelected?: (files: File[]) => void;\n  /** Comma-separated MIME types or extensions to accept (e.g. `\"image/*,.pdf\"`). */\n  accept?: string;\n  /** Allow selecting multiple files. Defaults to `true`. */\n  multiple?: boolean;\n}\n\n/**\n * Toolbar button that opens a native file picker on click.\n * Renders a hidden `<input type=\"file\">` and forwards selected files\n * via the `onFilesSelected` callback.\n *\n * @example\n * ```tsx\n * <ChatToolbarAttachmentButton\n *   accept=\"image/*,.pdf\"\n *   onFilesSelected={(files) => setAttachments(files)}\n * />\n * ```\n */\nexport interface ChatToolbarAttachmentProps extends React.ComponentProps<\"div\"> {\n  /** The file name to display. */\n  fileName: string;\n  /** Called when the user clicks the remove button. */\n  onRemove?: () => void;\n}\n\n/**\n * Displays a file attachment preview as a square card with a file icon,\n * file name, and a small remove button in the top-right corner.\n * Discord-style attachment preview for the toolbar.\n *\n * @example\n * ```tsx\n * <ChatToolbarAddon align=\"block-start\">\n *   {files.map((file, i) => (\n *     <ChatToolbarAttachment\n *       key={i}\n *       file={file}\n *       onRemove={() => removeFile(i)}\n *     />\n *   ))}\n * </ChatToolbarAddon>\n * ```\n */\nexport function ChatToolbarAttachment({\n  fileName,\n  onRemove,\n  className,\n  ...props\n}: ChatToolbarAttachmentProps) {\n  return (\n    <div\n      data-slot=\"chat-toolbar-attachment\"\n      className={cn(\n        \"relative group size-20 @md/chat:size-30 rounded-md border bg-muted flex flex-col items-center justify-center gap-1 shrink-0\",\n        className,\n      )}\n      {...props}\n    >\n      <FileTextIcon className=\"size-5 @md/chat:size-6 text-muted-foreground stroke-[1.5px]\" />\n      <span className=\"text-[10px] @md/chat:text-xs text-muted-foreground leading-tight max-w-[calc(100%-8px)] truncate\">\n        {fileName}\n      </span>\n      {onRemove && (\n        <button\n          type=\"button\"\n          onClick={onRemove}\n          aria-label={`Remove ${fileName}`}\n          className=\"absolute top-0 right-0 size-4 @md/chat:size-5 rounded-full bg-foreground text-background flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity\"\n        >\n          <XIcon className=\"size-2.5 @md/chat:size-3\" />\n        </button>\n      )}\n    </div>\n  );\n}\n\nexport function ChatToolbarAttachmentButton({\n  children,\n  onFilesSelected,\n  accept,\n  multiple = true,\n  ...props\n}: ChatToolbarAttachmentButtonProps) {\n  const inputRef = React.useRef<HTMLInputElement>(null);\n\n  const handleClick = () => {\n    inputRef.current?.click();\n  };\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const files = e.target.files;\n    if (files && files.length > 0) {\n      onFilesSelected?.(Array.from(files));\n    }\n    // Reset so the same file can be re-selected\n    e.target.value = \"\";\n  };\n\n  return (\n    <>\n      <ChatToolbarButton onClick={handleClick} {...props}>\n        {children ?? <PaperclipIcon />}\n      </ChatToolbarButton>\n      <input\n        ref={inputRef}\n        type=\"file\"\n        className=\"hidden\"\n        accept={accept}\n        multiple={multiple}\n        onChange={handleChange}\n      />\n    </>\n  );\n}\n",
      "type": "registry:file",
      "target": "components/chat/chat-toolbar.tsx"
    },
    {
      "path": "registry/new-york/chat/chat-event.tsx",
      "content": "/**\n * @module chat-event\n *\n * Composable components for rendering a single message or event row\n * inside `ChatMessages`. Build different message layouts (primary\n * messages, follow-ups, date separators) by combining these primitives.\n *\n * Typical structure for a primary message:\n * ```\n * ChatEvent\n * ├── ChatEventAddon   ← side column (avatar)\n * │   └── ChatEventAvatar\n * └── ChatEventBody    ← main content (flex-1)\n *     ├── ChatEventTitle\n *     │   ├── sender name\n *     │   └── ChatEventTime\n *     └── ChatEventContent\n * ```\n *\n * Typical structure for a follow-up (additional) message:\n * ```\n * ChatEvent\n * ├── ChatEventAddon   ← side column (hover timestamp)\n * │   └── ChatEventTime (visible on group-hover)\n * └── ChatEventBody\n *     └── ChatEventContent\n * ```\n *\n * Typical structure for a date separator:\n * ```\n * ChatEvent\n * ├── Separator\n * ├── ChatEventTime (format=\"longDate\")\n * └── Separator\n * ```\n *\n * @see {@link ChatMessages} for the parent scrollable container.\n */\n\nimport { cn } from \"@/lib/utils\";\nimport {\n  AvatarFallbackProps,\n  AvatarImageProps,\n  AvatarProps,\n} from \"@radix-ui/react-avatar\";\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/new-york/ui/avatar\";\nimport { Button } from \"@/registry/new-york/ui/button\";\nimport { useMemo } from \"react\";\n\n/**\n * Preset format names for `ChatEventTime`.\n *\n * - `\"time\"` — short time only (e.g. \"12:30 PM\")\n * - `\"date\"` — medium date (e.g. \"Jan 1, 2024\")\n * - `\"dateTime\"` — date + time (e.g. \"Jan 1, 2024, 12:30 PM\")\n * - `\"longDate\"` — long date (e.g. \"January 1, 2024\")\n * - `\"relative\"` — relative time (e.g. \"2 hours ago\", \"yesterday\")\n */\nexport type ChatEventTimeFormat =\n  | \"time\"\n  | \"date\"\n  | \"dateTime\"\n  | \"longDate\"\n  | \"relative\";\n\nexport interface ChatEventTimeProps extends React.ComponentProps<\"time\"> {\n  /** Unix timestamp (ms) or Date object. */\n  timestamp: number | Date;\n  /** Preset display format. Defaults to `\"dateTime\"`. */\n  format?: ChatEventTimeFormat;\n  /** BCP 47 locale string. Defaults to the browser locale. */\n  locale?: string;\n  /** Custom `Intl.DateTimeFormat` options — overrides the `format` preset. */\n  formatOptions?: Intl.DateTimeFormatOptions;\n}\n\nconst FORMAT_PRESETS: Record<ChatEventTimeFormat, Intl.DateTimeFormatOptions> =\n  {\n    time: { timeStyle: \"short\" },\n    date: { dateStyle: \"medium\" },\n    dateTime: { dateStyle: \"medium\", timeStyle: \"short\" },\n    longDate: { dateStyle: \"long\" },\n    relative: { dateStyle: \"medium\", timeStyle: \"short\" },\n  };\n\nexport type ChatEventProps = React.ComponentProps<\"div\">;\n\n/**\n * Flex row wrapper for a single message or event. Each event typically\n * contains a `ChatEventAddon` (side column) and a `ChatEventBody`\n * (main content area).\n *\n * @example\n * ```tsx\n * // Primary message\n * <ChatEvent className=\"hover:bg-accent\">\n *   <ChatEventAddon>\n *     <ChatEventAvatar src=\"/avatar.png\" alt=\"@user\" fallback=\"AS\" />\n *   </ChatEventAddon>\n *   <ChatEventBody>\n *     <ChatEventTitle>\n *       <span className=\"font-medium\">Ann Smith</span>\n *       <ChatEventTime timestamp={1700000000000} />\n *     </ChatEventTitle>\n *     <ChatEventContent>Hello, world!</ChatEventContent>\n *   </ChatEventBody>\n * </ChatEvent>\n *\n * // Follow-up message (same sender, no avatar)\n * <ChatEvent className=\"hover:bg-accent\">\n *   <ChatEventAddon>\n *     <ChatEventTime\n *       timestamp={1700000000000}\n *       format=\"time\"\n *       className=\"text-right text-[8px] group-hover/event:visible invisible\"\n *     />\n *   </ChatEventAddon>\n *   <ChatEventBody>\n *     <ChatEventContent>Another message from the same sender.</ChatEventContent>\n *   </ChatEventBody>\n *   <ChatEventHoverActions>\n *     ...\n *   </ChatEventHoverActions>\n * </ChatEvent>\n *\n * // Date separator\n * <ChatEvent className=\"items-center gap-1 my-4\">\n *   <Separator className=\"flex-1\" />\n *   <ChatEventTime\n *     timestamp={1700000000000}\n *     format=\"longDate\"\n *     className=\"font-semibold min-w-max\"\n *   />\n *   <Separator className=\"flex-1\" />\n * </ChatEvent>\n * ```\n */\nexport function ChatEvent({ children, className, ...props }: ChatEventProps) {\n  return (\n    <div\n      data-slot=\"chat-event\"\n      role=\"article\"\n      className={cn(\n        \"flex gap-2 px-2 relative group/event hover:z-10\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport type ChatEventAddonProps = React.ComponentProps<\"div\">;\n\n/**\n * Fixed-width side column within a `ChatEvent`. Typically holds a\n * `ChatEventAvatar` for primary messages or a `ChatEventTime` for\n * follow-up messages. Responsive width via container queries.\n *\n * @example\n * ```tsx\n * <ChatEventAddon>\n *   <ChatEventAvatar src=\"/avatar.png\" fallback=\"AS\" />\n * </ChatEventAddon>\n * ```\n */\nexport function ChatEventAddon({\n  children,\n  className,\n  ...props\n}: ChatEventAddonProps) {\n  return (\n    <div\n      data-slot=\"chat-event-addon\"\n      className={cn(\n        \"w-10 @md/chat:w-12 h-full flex justify-center pt-1 shrink-0\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport type ChatEventBodyProps = React.ComponentProps<\"div\">;\n\n/**\n * Main content area within a `ChatEvent`. Uses `flex-1` to fill the\n * remaining space beside `ChatEventAddon`. Contains `ChatEventTitle`\n * and `ChatEventContent`.\n *\n * @example\n * ```tsx\n * <ChatEventBody>\n *   <ChatEventTitle>\n *     <span className=\"font-medium\">Ann Smith</span>\n *     <ChatEventTime timestamp={1700000000000} />\n *   </ChatEventTitle>\n *   <ChatEventContent>Hello, world!</ChatEventContent>\n * </ChatEventBody>\n * ```\n */\nexport function ChatEventBody({\n  children,\n  className,\n  ...props\n}: ChatEventBodyProps) {\n  return (\n    <div data-slot=\"chat-event-body\" className={cn(\"flex-1 flex flex-col\", className)} {...props}>\n      {children}\n    </div>\n  );\n}\n\nexport type ChatEventContentProps = React.ComponentProps<\"div\">;\n\n/**\n * Message text container with responsive text sizing via container\n * queries (`text-sm` → `@md/chat:text-base`).\n *\n * @example\n * ```tsx\n * <ChatEventContent>Hello, world!</ChatEventContent>\n * ```\n */\nexport function ChatEventContent({\n  children,\n  className,\n  ...props\n}: ChatEventContentProps) {\n  return (\n    <div\n      data-slot=\"chat-event-content\"\n      className={cn(\n        \"text-sm @md/chat:text-base whitespace-pre-wrap\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport type ChatEventTitleProps = React.ComponentProps<\"div\">;\n\n/**\n * Row for the sender name and metadata (e.g. timestamp, badges).\n * Typically the first child of `ChatEventBody`.\n *\n * @example\n * ```tsx\n * <ChatEventTitle>\n *   <span className=\"font-medium\">Ann Smith</span>\n *   <ChatEventTime timestamp={1700000000000} />\n * </ChatEventTitle>\n * ```\n */\nexport function ChatEventTitle({\n  children,\n  className,\n  ...props\n}: ChatEventTitleProps) {\n  return (\n    <div\n      data-slot=\"chat-event-title\"\n      className={cn(\"flex items-center gap-2 text-sm\", className)}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport interface ChatEventAvatarProps extends AvatarProps {\n  className?: string;\n  /** Image URL for the avatar. */\n  src?: AvatarImageProps[\"src\"];\n  /** Alt text for the avatar image. */\n  alt?: string;\n  /** Fallback content shown while the image loads or if it fails (e.g. initials). */\n  fallback?: React.ReactNode;\n  /** Additional props forwarded to the inner `AvatarImage`. */\n  imageProps?: AvatarImageProps;\n  /** Additional props forwarded to the inner `AvatarFallback`. */\n  fallbackProps?: AvatarFallbackProps;\n}\n\n/**\n * Avatar sized for message rows. Responsive sizing via container\n * queries (`size-8` → `@md/chat:size-10`). Built on Radix UI Avatar\n * primitives.\n *\n * @example\n * ```tsx\n * <ChatEventAvatar\n *   src=\"https://example.com/avatar.png\"\n *   alt=\"@annsmith\"\n *   fallback=\"AS\"\n * />\n * ```\n */\nexport function ChatEventAvatar({\n  className,\n  src,\n  alt,\n  fallback,\n  imageProps,\n  fallbackProps,\n  ...props\n}: ChatEventAvatarProps) {\n  return (\n    <Avatar\n      data-slot=\"chat-event-avatar\"\n      className={cn(\"rounded-full size-8 @md/chat:size-10\", className)}\n      {...props}\n    >\n      <AvatarImage src={src} alt={alt} {...imageProps} />\n      {fallback && (\n        <AvatarFallback {...fallbackProps}>{fallback}</AvatarFallback>\n      )}\n    </Avatar>\n  );\n}\n\nfunction getRelativeTimeString(date: Date, locale: string): string {\n  const now = new Date();\n  const diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1000);\n\n  const rtf = new Intl.RelativeTimeFormat(locale, { numeric: \"auto\" });\n\n  if (diffInSeconds < 60) {\n    return rtf.format(-diffInSeconds, \"second\");\n  }\n\n  const diffInMinutes = Math.floor(diffInSeconds / 60);\n  if (diffInMinutes < 60) {\n    return rtf.format(-diffInMinutes, \"minute\");\n  }\n\n  const diffInHours = Math.floor(diffInMinutes / 60);\n  if (diffInHours < 24) {\n    return rtf.format(-diffInHours, \"hour\");\n  }\n\n  const diffInDays = Math.floor(diffInHours / 24);\n  if (diffInDays < 7) {\n    return rtf.format(-diffInDays, \"day\");\n  }\n\n  return new Intl.DateTimeFormat(locale, {\n    dateStyle: \"medium\",\n    timeStyle: \"short\",\n  }).format(date);\n}\n\n/**\n * Locale-aware timestamp display with preset and custom formatting.\n * Renders a semantic `<time>` element with an ISO `dateTime` attribute.\n *\n * Preset formats:\n * - `\"time\"` — short time (e.g. \"12:30 PM\")\n * - `\"date\"` — medium date (e.g. \"Jan 1, 2024\")\n * - `\"dateTime\"` — date + time (e.g. \"Jan 1, 2024, 12:30 PM\") **(default)**\n * - `\"longDate\"` — long date (e.g. \"January 1, 2024\")\n * - `\"relative\"` — relative time (e.g. \"2 hours ago\", \"yesterday\")\n *\n * @example\n * ```tsx\n * // Inline timestamp in a title row\n * <ChatEventTime timestamp={1700000000000} />\n *\n * // Time-only format for follow-up messages\n * <ChatEventTime\n *   timestamp={1700000000000}\n *   format=\"time\"\n *   className=\"text-right text-[8px] group-hover/event:visible invisible\"\n * />\n *\n * // Long date format for date separators\n * <ChatEventTime\n *   timestamp={1700000000000}\n *   format=\"longDate\"\n *   className=\"font-semibold min-w-max\"\n * />\n * ```\n */\nexport function ChatEventTime({\n  timestamp,\n  format = \"dateTime\",\n  locale,\n  formatOptions,\n  className,\n  ...props\n}: ChatEventTimeProps) {\n  const date = useMemo(\n    () => (timestamp instanceof Date ? timestamp : new Date(timestamp)),\n    [timestamp],\n  );\n\n  const resolvedLocale =\n    locale ?? (typeof navigator !== \"undefined\" ? navigator.language : \"en-US\");\n\n  const formattedTime = useMemo(() => {\n    if (format === \"relative\") {\n      return getRelativeTimeString(date, resolvedLocale);\n    }\n\n    const options = formatOptions ?? FORMAT_PRESETS[format];\n    return new Intl.DateTimeFormat(resolvedLocale, options).format(date);\n  }, [date, format, formatOptions, resolvedLocale]);\n\n  const isoString = useMemo(() => date.toISOString(), [date]);\n\n  return (\n    <time\n      data-slot=\"chat-event-time\"\n      dateTime={isoString}\n      className={cn(\"text-xs text-muted-foreground\", className)}\n      {...props}\n    >\n      {formattedTime}\n    </time>\n  );\n}\n\nexport type ChatEventHoverActionsProps = React.ComponentProps<\"div\">;\n\n/**\n * Container for hover action buttons. Appears absolutely positioned at the\n * top-right of the `ChatEvent` row when it is hovered. Place as a direct\n * child of `ChatEvent`, after `ChatEventBody`.\n *\n * `ChatEvent` provides the named group (`group/event`) and `relative`\n * positioning required for this component to work.\n *\n * @example\n * ```tsx\n * <ChatEvent className=\"hover:bg-accent\">\n *   <ChatEventBody>...</ChatEventBody>\n *   <ChatEventHoverActions>\n *     <Button variant=\"ghost\" size=\"icon\" className=\"size-7 [&_svg]:size-3.5\">\n *       <SmilePlusIcon />\n *     </Button>\n *     <Button variant=\"ghost\" size=\"icon\" className=\"size-7 [&_svg]:size-3.5\">\n *       <MoreHorizontalIcon />\n *     </Button>\n *   </ChatEventHoverActions>\n * </ChatEvent>\n * ```\n */\nexport function ChatEventHoverActions({\n  children,\n  className,\n  ...props\n}: ChatEventHoverActionsProps) {\n  return (\n    <div\n      data-slot=\"chat-event-hover-actions\"\n      className={cn(\n        \"opacity-0 group-hover/event:opacity-100 pointer-events-none group-hover/event:pointer-events-auto\",\n        \"[&:has([data-state=open])]:opacity-100 [&:has([data-state=open])]:pointer-events-auto\",\n        \"absolute right-2 -top-4\",\n        \"bg-background border rounded-md shadow-sm\",\n        \"flex items-center gap-0.5 p-0.5\",\n        \"z-15\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport type ChatEventHoverActionsButtonProps = React.ComponentProps<\n  typeof Button\n>;\n\n/**\n * Pre-styled ghost icon button for use inside `ChatEventHoverActions`.\n * Applies `variant=\"ghost\"`, `size=\"icon\"`, and the standard size classes\n * (`size-7 [&_svg]:size-3.5`) so every action button is consistent.\n *\n * @example\n * ```tsx\n * <ChatEventHoverActions>\n *   <ChatEventHoverActionsButton aria-label=\"Add reaction\">\n *     <SmilePlusIcon />\n *   </ChatEventHoverActionsButton>\n * </ChatEventHoverActions>\n * ```\n */\nexport function ChatEventHoverActionsButton({\n  className,\n  children,\n  ...props\n}: ChatEventHoverActionsButtonProps) {\n  return (\n    <Button\n      data-slot=\"chat-event-hover-actions-button\"\n      variant=\"ghost\"\n      size=\"icon\"\n      className={cn(\"size-7 [&_svg]:size-3.5\", className)}\n      {...props}\n    >\n      {children}\n    </Button>\n  );\n}\n",
      "type": "registry:file",
      "target": "components/chat/chat-event.tsx"
    }
  ],
  "type": "registry:component"
}