{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "chat-message",
  "title": "Chat Message",
  "description": "A single chat transcript entry with baked-in entrance and layout motion. Right-aligned accent bubble for the user, left-aligned muted bubble for the assistant, with optional file attachments. Adapts to the global shape setting.",
  "dependencies": [
    "framer-motion"
  ],
  "registryDependencies": [
    "https://zeron-ui.vercel.app/r/surfaces.json",
    "utils",
    "https://zeron-ui.vercel.app/r/springs.json",
    "https://zeron-ui.vercel.app/r/shape-context.json",
    "https://zeron-ui.vercel.app/r/use-touch-primary.json",
    "https://zeron-ui.vercel.app/r/file-thumbnail.json"
  ],
  "files": [
    {
      "path": "src/components/ui/chat-message.tsx",
      "content": "\"use client\";\n\nimport { forwardRef, type ReactNode } from \"react\";\nimport { motion, type HTMLMotionProps } from \"framer-motion\";\nimport { cn } from \"@/lib/utils\";\nimport { spring } from \"@/lib/springs\";\nimport { useShape } from \"@/lib/shape-context\";\nimport { useTouchPrimary } from \"@/hooks/use-touch-primary\";\nimport { FileThumbnail } from \"@/components/ui/file-thumbnail\";\n\ninterface ChatMessageProps\n  extends Omit<HTMLMotionProps<\"div\">, \"children\"> {\n  /** Who sent the message. Drives alignment and bubble colour:\n   *  `user` → right-aligned emphasis bubble, `assistant` → left-aligned plain text. */\n  from: \"user\" | \"assistant\";\n  /** Optional attachments rendered as square thumbnails above the bubble. */\n  files?: File[];\n  /** Side length of each attachment thumbnail in pixels. Defaults to 64. */\n  thumbnailSize?: number;\n  /** Timestamp shown in the hover-revealed meta row, before the actions.\n   *  User-message only — ignored on assistant replies. Caller pre-formats it\n   *  (e.g. `\"Wednesday 6:08 PM\"`). */\n  time?: ReactNode;\n  /** Icon-only action buttons shown in the hover-revealed meta row (e.g. copy,\n   *  edit, regenerate). Rendered next to the timestamp. */\n  actions?: ReactNode;\n  /** Message body. When omitted the text bubble is dropped (attachment-only message). */\n  children?: ReactNode;\n}\n\n// ─── ChatMessage ──────────────────────────────────────────────────────────\n// A single transcript entry with baked-in entrance + layout motion. Pairs with\n// InputMessage's onSend: render one per sent/received message. `layout=\"position\"`\n// lets earlier messages slide up smoothly when a new one is appended.\nconst ChatMessage = forwardRef<HTMLDivElement, ChatMessageProps>(\n  (\n    { from, files, thumbnailSize = 64, time, actions, children, className, ...props },\n    ref\n  ) => {\n    const shape = useShape();\n    const isUser = from === \"user\";\n    // Hover-reveal is unreachable on touch — keep the meta row visible there.\n    const isTouch = useTouchPrimary();\n    // Timestamps are a user-message affordance; assistant replies show actions only.\n    const showTime = isUser && time != null;\n\n    return (\n      <motion.div\n        ref={ref}\n        layout=\"position\"\n        initial={{ opacity: 0, y: 8, scale: 0.96 }}\n        animate={{ opacity: 1, y: 0, scale: 1 }}\n        transition={spring.moderate}\n        style={{ transformOrigin: isUser ? \"bottom right\" : \"bottom left\" }}\n        className={cn(\n          \"group flex max-w-[80%] flex-col gap-1.5\",\n          isUser ? \"items-end self-end\" : \"items-start self-start\",\n          className\n        )}\n        {...props}\n      >\n        {files && files.length > 0 && (\n          <div\n            className={cn(\n              \"flex flex-wrap gap-1.5\",\n              isUser ? \"justify-end\" : \"justify-start\"\n            )}\n          >\n            {files.map((file, i) => (\n              <FileThumbnail\n                key={`${file.name}-${file.size}-${file.lastModified}-${i}`}\n                file={file}\n                size={thumbnailSize}\n              />\n            ))}\n          </div>\n        )}\n        {children != null && children !== \"\" && (\n          <div\n            className={cn(\n              \"py-2 text-body whitespace-pre-wrap break-words\",\n              // User keeps the bubble chrome (rounded fill + horizontal padding);\n              // the assistant reply is flush-left plain text with no background.\n              isUser\n                ? cn(\n                    shape.bg,\n                    // `text-pretty` is reserved for settled user bubbles. On the\n                    // assistant reply it's left off on purpose: `text-wrap: pretty`\n                    // re-balances the last lines on every content change, so a\n                    // word-by-word stream visibly reflows earlier words to new\n                    // lines. Default (normal) wrapping appends left-to-right and\n                    // stays put as the text grows.\n                    \"px-3.5 text-pretty bg-emphasis text-fg-default\"\n                  )\n                : \"text-fg-default\"\n            )}\n          >\n            {children}\n          </div>\n        )}\n        {(showTime || actions != null) && (\n          // Meta row: timestamp + icon-only actions. Always rendered (so it\n          // reserves its height and the gap between bubbles never shifts) but\n          // hidden until the message is hovered or an action is focused.\n          // The timestamp is a user-message affordance only — assistant replies\n          // show their actions alone. User rows read date → icons left-to-right.\n          <div\n            className={cn(\n              \"flex items-center gap-2 px-1 text-label leading-none text-fg-muted select-none\",\n              !isTouch && [\n                \"opacity-0 pointer-events-none transition-opacity duration-moderate\",\n                \"group-hover:opacity-100 group-hover:pointer-events-auto\",\n                \"group-focus-within:opacity-100 group-focus-within:pointer-events-auto\",\n              ]\n            )}\n          >\n            {showTime && <span className=\"tabular-nums\">{time}</span>}\n            {actions != null && (\n              <span className=\"flex items-center gap-0.5\">{actions}</span>\n            )}\n          </div>\n        )}\n      </motion.div>\n    );\n  }\n);\n\nChatMessage.displayName = \"ChatMessage\";\n\nexport { ChatMessage };\nexport type { ChatMessageProps };\nexport default ChatMessage;\n",
      "type": "registry:ui",
      "target": "components/ui/chat-message.tsx"
    }
  ],
  "type": "registry:ui"
}