{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "message-bubble",
  "type": "registry:ui",
  "title": "Message bubble",
  "description": "A React chat message for user, assistant and system roles: user turns sit in a right aligned capsule, assistant replies read as prose, with a streaming cursor.",
  "dependencies": [],
  "registryDependencies": [
    "https://ui.minidev.pro/r/streaming-cursor.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/message-bubble.tsx",
      "type": "registry:ui",
      "target": "components/ui/message-bubble.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\nimport { StreamingCursor } from \"@/components/ui/streaming-cursor\"\n\n/**\n * MessageBubble — user turns sit in a sunken capsule; assistant turns are\n * plain prose (the way the best AI products render them). System is a quiet rule.\n */\nfunction MessageBubble({\n  role = \"assistant\",\n  streaming,\n  children,\n  className,\n}: {\n  role?: \"user\" | \"assistant\" | \"system\"\n  streaming?: boolean\n  children: React.ReactNode\n  className?: string\n}) {\n  const mine = role === \"user\"\n  return (\n    <div\n      data-slot=\"message-bubble\"\n      data-role={role}\n      className={cn(\"flex w-full animate-[rise-in_220ms_var(--ease-hairline)_both]\", mine ? \"justify-end\" : \"justify-start\", className)}\n    >\n      <div\n        className={cn(\n          \"text-sm leading-[1.6]\",\n          mine && \"max-w-[85%] rounded-2xl rounded-br-md border border-border bg-sunken px-3.5 py-2 text-fg\",\n          role === \"assistant\" && \"max-w-[92%] py-0.5 text-fg\",\n          role === \"system\" && \"w-full border-y border-dashed border-border py-2 text-center text-xs text-fg-subtle\"\n        )}\n      >\n        {children}\n        {streaming ? <StreamingCursor /> : null}\n      </div>\n    </div>\n  )\n}\nexport { MessageBubble }\n"
    }
  ]
}