{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "message",
  "title": "Message",
  "description": "One conversation turn: user bubble or assistant document, with hover actions.",
  "dependencies": [],
  "registryDependencies": [
    "utils",
    "https://ui.cuelark.com/r/theme.json",
    "https://ui.cuelark.com/r/motion.json",
    "https://ui.cuelark.com/r/tooltip.json"
  ],
  "files": [
    {
      "path": "src/registry/cuelark/ui/message.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport { enterOnce } from \"@/lib/motion\";\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"@/registry/cuelark/ui/tooltip\";\nimport { cn } from \"@/lib/utils\";\n\ntype From = \"user\" | \"assistant\";\nconst MessageContext = React.createContext<From>(\"assistant\");\n\n/**\n * One turn in a conversation. User turns sit in a bubble on the right; assistant turns read as a document on the\n * left, full width, with actions that appear on hover. New messages rise in once.\n */\nfunction Message({ className, from = \"assistant\", ref, ...props }: React.ComponentProps<\"div\"> & { from?: From }) {\n  const enter = React.useCallback((node: HTMLDivElement | null) => enterOnce(node, (s) => ({ opacity: 0, y: 8 * s }), { duration: 0.35 }), []);\n  return (\n    <MessageContext.Provider value={from}>\n      <div\n        ref={(node) => {\n          enter(node);\n          if (typeof ref === \"function\") ref(node);\n          else if (ref) ref.current = node;\n        }}\n        data-slot=\"message\"\n        data-from={from}\n        className={cn(\"group/message flex w-full gap-3\", from === \"user\" ? \"flex-row-reverse\" : \"flex-row\", className)}\n        {...props}\n      />\n    </MessageContext.Provider>\n  );\n}\n\nfunction MessageAvatar({ className, children, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"message-avatar\"\n      className={cn(\"grid size-7 shrink-0 place-items-center overflow-hidden rounded-full bg-muted text-xs font-medium ring-1 ring-border [&_img]:size-full [&_img]:object-cover [&_svg]:size-3.5\", className)}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\nfunction MessageContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  const from = React.useContext(MessageContext);\n  return (\n    <div\n      data-slot=\"message-content\"\n      className={cn(\n        \"grid min-w-0 gap-3 text-sm leading-relaxed\",\n        from === \"user\" ? \"max-w-[80%] rounded-2xl rounded-se-md bg-secondary px-4 py-2.5 text-secondary-foreground\" : \"flex-1 pt-0.5\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A row of quiet icon actions (copy, retry, rate) that fades in when the message is hovered or focused. */\nfunction MessageActions({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"message-actions\"\n      className={cn(\"-ms-1.5 flex items-center gap-0.5 opacity-0 transition-opacity duration-150 group-hover/message:opacity-100 group-focus-within/message:opacity-100 [@media(hover:none)]:opacity-100\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction MessageAction({ label, className, children, ...props }: React.ComponentProps<\"button\"> & { label: string }) {\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>\n        <button\n          type=\"button\"\n          aria-label={label}\n          className={cn(\n            \"grid size-7 place-items-center rounded-md text-muted-foreground outline-none transition-[background-color,color,scale] duration-150 hover:bg-muted hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring/50 active:scale-90 [&_svg]:size-3.5\",\n            className,\n          )}\n          {...props}\n        >\n          {children}\n        </button>\n      </TooltipTrigger>\n      <TooltipContent>{label}</TooltipContent>\n    </Tooltip>\n  );\n}\n\nexport { Message, MessageAvatar, MessageContent, MessageActions, MessageAction };\n",
      "type": "registry:ui"
    }
  ],
  "docs": "Docs and examples: https://ui.cuelark.com/components/message",
  "categories": [
    "agents"
  ],
  "type": "registry:ui"
}