{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "chat-bubble",
  "title": "Chat Bubble",
  "description": "iChat gradient bubbles with sculpted tails, in blue and orange.",
  "files": [
    {
      "path": "registry/aqua/ui/chat-bubble.tsx",
      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction ChatPanel({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"chat-panel\"\n      className={cn(\n        \"flex w-full flex-col gap-2.5 overflow-hidden rounded-xl border border-[#c9ccd1] bg-[#f4f5f8] p-5 [--chat-panel:#f4f5f8]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst chatBubbleVariants = cva(\n  \"relative w-fit max-w-[85%] rounded-[18px] px-4 py-2.5 text-[15px] leading-[1.35] before:absolute before:top-0 before:bottom-[-2px] before:w-5 before:[clip-path:inset(calc(100%_-_22px)_0_0_0)] before:content-[''] after:absolute after:bottom-[-2px] after:h-6 after:w-[26px] after:bg-[var(--chat-panel,#f4f5f8)] after:content-['']\",\n  {\n    variants: {\n      from: {\n        me: \"self-start bg-[linear-gradient(180deg,#e4f1fd_0%,#b8d8f7_55%,#8dbdf0_100%)] text-[#1a2a44] shadow-[inset_0_1px_0_rgba(255,255,255,0.8),0_1px_2px_rgba(30,60,110,0.18)] before:left-[-7px] before:rounded-br-[16px_14px] before:bg-[linear-gradient(180deg,#e4f1fd_0%,#b8d8f7_55%,#8dbdf0_100%)] after:left-[-26px] after:rounded-br-[10px]\",\n        them: \"self-end bg-[linear-gradient(180deg,#fde8d2_0%,#f8c99a_55%,#f2ae6e_100%)] text-[#4a2a10] shadow-[inset_0_1px_0_rgba(255,255,255,0.7),0_1px_2px_rgba(120,70,20,0.18)] before:right-[-7px] before:rounded-bl-[16px_14px] before:bg-[linear-gradient(180deg,#fde8d2_0%,#f8c99a_55%,#f2ae6e_100%)] after:right-[-26px] after:rounded-bl-[10px]\",\n      },\n    },\n    defaultVariants: {\n      from: \"me\",\n    },\n  }\n)\n\nfunction ChatBubble({\n  className,\n  from,\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof chatBubbleVariants>) {\n  return (\n    <div\n      data-slot=\"chat-bubble\"\n      className={cn(chatBubbleVariants({ from, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { ChatPanel, ChatBubble, chatBubbleVariants }\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}