{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "elements-launcher-bubble",
  "type": "registry:component",
  "title": "Launcher",
  "description": "The floating entry point, and the panel it opens into.",
  "registryDependencies": [
    "https://r.assistant-ui.com/elements-surfaces.json"
  ],
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "type": "registry:component",
      "path": "components/assistant-ui/elements/launcher-bubble.tsx",
      "sourcePath": "packages/ui/src/components/react/assistant-ui/elements/launcher-bubble.tsx",
      "content": "\"use client\";\n\nimport type { ComponentProps } from \"react\";\nimport { MessageCircleIcon, XIcon } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport { field, floating, inkButton, mono } from \"./surfaces\";\n\nexport function LauncherBubble({\n  open,\n  unread,\n  greeting,\n  prompts,\n  onToggle,\n  onPick,\n  onStart,\n  className,\n  ...props\n}: Omit<\n  ComponentProps<\"div\">,\n  | \"children\"\n  | \"open\"\n  | \"unread\"\n  | \"greeting\"\n  | \"prompts\"\n  | \"onToggle\"\n  | \"onPick\"\n  | \"onStart\"\n> & {\n  open: boolean;\n  unread: number;\n  greeting: string;\n  prompts: readonly string[];\n  onToggle?: () => void;\n  onPick?: (prompt: string) => void;\n  onStart?: () => void;\n}) {\n  return (\n    <div\n      data-slot=\"launcher-bubble\"\n      className={cn(\n        \"flex w-full max-w-[19rem] flex-col items-end gap-2.5\",\n        className,\n      )}\n\n      {...props}\n    >\n      {open && (\n        <div\n          className={cn(\n            floating,\n            \"fade-in zoom-in-95 slide-in-from-bottom-2 animate-in flex w-full flex-col gap-3 rounded-[20px] p-4 duration-200\",\n          )}\n        >\n          <div className=\"flex flex-col gap-1\">\n            <span className=\"text-[13.5px] font-medium\">{greeting}</span>\n            <span className={cn(mono, \"text-foreground/30\")}>\n              typically replies in a minute\n            </span>\n          </div>\n\n          <div className=\"flex flex-col gap-1.5\">\n            {prompts.map((prompt) => (\n              <button\n                key={prompt}\n                type=\"button\"\n                onClick={() => onPick?.(prompt)}\n                className={cn(\n                  field,\n                  \"hover:bg-foreground/[0.07] text-foreground/70 rounded-xl px-3 py-2 text-start text-[13px] transition-colors\",\n                )}\n              >\n                {prompt}\n              </button>\n            ))}\n          </div>\n\n          <button\n            type=\"button\"\n            onClick={onStart}\n            className={cn(\n              inkButton,\n              \"flex h-8 items-center justify-center rounded-full text-xs font-medium\",\n            )}\n          >\n            Start a conversation\n          </button>\n        </div>\n      )}\n\n      <button\n        type=\"button\"\n        aria-expanded={open}\n        aria-label={open ? \"Close the assistant\" : \"Open the assistant\"}\n        onClick={onToggle}\n        className={cn(\n          inkButton,\n          \"relative flex size-12 shrink-0 items-center justify-center rounded-full\",\n        )}\n      >\n        <span className=\"grid\">\n          <MessageCircleIcon\n            className={cn(\n              \"size-5 transition-[opacity,rotate] duration-200 [grid-area:1/1]\",\n              open && \"rotate-90 opacity-0\",\n            )}\n          />\n          <XIcon\n            className={cn(\n              \"size-5 transition-[opacity,rotate] duration-200 [grid-area:1/1]\",\n              !open && \"-rotate-90 opacity-0\",\n            )}\n          />\n        </span>\n\n        {unread > 0 && !open && (\n          <span\n            className={cn(\n              mono,\n              \"bg-background text-foreground absolute -top-0.5 -right-0.5 flex size-4 items-center justify-center rounded-full tabular-nums\",\n            )}\n          >\n            {unread}\n          </span>\n        )}\n      </button>\n    </div>\n  );\n}\n"
    }
  ]
}