{
  "$schema": "https://blode.co/ui/schema/registry-item.json",
  "name": "message",
  "title": "Message",
  "author": "Matthew Blode",
  "description": "A row primitive for chat transcripts, pairing an avatar with content, header, and footer, aligned to the start or end.",
  "files": [
    {
      "path": "ui/message.tsx",
      "content": "import type * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst MessageGroup = ({ className, ...props }: React.ComponentProps<\"div\">) => (\n  <div\n    className={cn(\"flex min-w-0 flex-col gap-2\", className)}\n    data-slot=\"message-group\"\n    {...props}\n  />\n);\n\nconst Message = ({\n  className,\n  align = \"start\",\n  ...props\n}: React.ComponentProps<\"div\"> & { align?: \"start\" | \"end\" }) => (\n  <div\n    className={cn(\n      \"group/message relative flex w-full min-w-0 gap-2 text-sm data-[align=end]:flex-row-reverse\",\n      className,\n    )}\n    data-align={align}\n    data-slot=\"message\"\n    {...props}\n  />\n);\n\nconst MessageAvatar = ({ className, ...props }: React.ComponentProps<\"div\">) => (\n  <div\n    className={cn(\n      \"flex w-fit min-w-8 shrink-0 items-center justify-center self-end overflow-hidden rounded-full bg-muted group-has-data-[slot=message-footer]/message:-translate-y-8\",\n      className,\n    )}\n    data-slot=\"message-avatar\"\n    {...props}\n  />\n);\n\nconst MessageContent = ({ className, ...props }: React.ComponentProps<\"div\">) => (\n  <div\n    className={cn(\n      \"flex w-full min-w-0 flex-col gap-2.5 wrap-break-word group-data-[align=end]/message:*:data-slot:self-end\",\n      className,\n    )}\n    data-slot=\"message-content\"\n    {...props}\n  />\n);\n\nconst MessageHeader = ({ className, ...props }: React.ComponentProps<\"div\">) => (\n  <div\n    className={cn(\n      \"flex max-w-full min-w-0 items-center px-3 text-xs font-medium text-muted-foreground group-has-data-[variant=ghost]/message:px-0\",\n      className,\n    )}\n    data-slot=\"message-header\"\n    {...props}\n  />\n);\n\nconst MessageFooter = ({ className, ...props }: React.ComponentProps<\"div\">) => (\n  <div\n    className={cn(\n      \"flex max-w-full min-w-0 items-center px-3 text-xs font-medium text-muted-foreground group-has-data-[variant=ghost]/message:px-0 group-data-[align=end]/message:justify-end\",\n      className,\n    )}\n    data-slot=\"message-footer\"\n    {...props}\n  />\n);\n\nexport { MessageGroup, Message, MessageAvatar, MessageContent, MessageFooter, MessageHeader };\n",
      "type": "registry:ui",
      "target": ""
    }
  ],
  "type": "registry:ui"
}