{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "openai-compose",
  "type": "registry:block",
  "title": "ChatGPT Compose",
  "description": "A faithful ChatGPT compose stage with the collapsible rail, rounded prompt bar, and public chrome.",
  "author": "Agent UI",
  "dependencies": [
    "@agent-ui/react",
    "lucide-react"
  ],
  "categories": [
    "ai",
    "chat",
    "compose"
  ],
  "docs": "https://agent-ui-27t.pages.dev/docs/compose-openai",
  "files": [
    {
      "path": "components/blocks/composes/openai-compose.tsx",
      "type": "registry:component",
      "target": "components/blocks/composes/openai-compose.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport {\n  ArrowUp,\n  ChevronDown,\n  ExternalLink,\n  Image as ImageIcon,\n  Mic,\n  PanelLeft,\n  Plus,\n  Puzzle,\n  Settings,\n  SquarePen,\n  Telescope,\n} from \"lucide-react\";\nimport {\n  ComposeDisclaimer,\n  ComposeSendButton,\n  ComposeTextarea,\n  createCompose,\n  useCompose,\n  type ComposeProps,\n} from \"@agent-ui/react\";\n\nconst Root = createCompose({\n  id: \"openai\",\n  maxWidth: \"max-w-none\",\n  placeholder: \"Ask ChatGPT\",\n});\n\nconst NAV = [\n  { icon: SquarePen, label: \"New chat\" },\n  { icon: ImageIcon, label: \"Images\" },\n  { icon: Puzzle, label: \"Plugins\" },\n  { icon: Telescope, label: \"Deep research\" },\n  { icon: Settings, label: \"Settings\" },\n];\n\n/** ChatGPT logged-out home: warm grey rail + airy white canvas + capsule composer. */\nfunction OpenAIComposeLayout() {\n  const { send } = useCompose();\n  return (\n    <div className=\"flex min-h-[400px] w-full bg-white text-[13px] text-[#0d0d0d]\">\n      <aside className=\"hidden w-[172px] shrink-0 flex-col @[560px]:flex border-r border-black/[0.06] bg-[#f9f9f9] px-2.5 py-3\">\n        <div className=\"flex items-center justify-between px-1\">\n          <button\n            type=\"button\"\n            className=\"flex items-center gap-1 text-[13px] font-semibold tracking-tight\"\n          >\n            ChatGPT <ChevronDown className=\"h-3 w-3 opacity-60\" />\n          </button>\n          <PanelLeft className=\"h-4 w-4 opacity-50\" aria-hidden=\"true\" />\n        </div>\n        <nav className=\"mt-4 flex flex-col gap-0.5\">\n          {NAV.map(({ icon: Icon, label }) => (\n            <button\n              key={label}\n              type=\"button\"\n              className=\"flex items-center gap-2.5 rounded-lg px-2 py-[6px] text-left text-[12px] text-[#202020] transition-colors hover:bg-black/[0.05]\"\n            >\n              <Icon className=\"h-[15px] w-[15px] opacity-80\" aria-hidden=\"true\" />\n              {label}\n            </button>\n          ))}\n          <button\n            type=\"button\"\n            className=\"flex items-center gap-2.5 rounded-lg px-2 py-[6px] text-left text-[12px] text-[#202020] transition-colors hover:bg-black/[0.05]\"\n          >\n            <ExternalLink className=\"h-[15px] w-[15px] opacity-80\" aria-hidden=\"true\" />\n            See plans and pricing\n          </button>\n        </nav>\n        <div className=\"mt-auto rounded-xl px-1 pt-4\">\n          <p className=\"text-[12px] font-semibold leading-snug\">Get responses tailored to you</p>\n          <p className=\"mt-1 text-[10px] leading-snug text-black/50\">\n            Log in to get answers based on saved chats, plus create images and upload files.\n          </p>\n          <button\n            type=\"button\"\n            className=\"mt-2 w-full rounded-full bg-[#ececec] py-1.5 text-[11.5px] font-medium text-[#0d0d0d] transition-colors hover:bg-[#e3e3e3]\"\n          >\n            Log in\n          </button>\n        </div>\n      </aside>\n\n      <div className=\"relative flex min-w-0 flex-1 flex-col items-center justify-center px-5 pb-8 pt-4\">\n        <div className=\"mb-6 flex items-center gap-2 self-end text-[11px]\">\n          <button\n            type=\"button\"\n            className=\"rounded-full bg-[#0d0d0d] px-3 py-1.5 font-medium text-white\"\n          >\n            Log in\n          </button>\n          <button\n            type=\"button\"\n            className=\"rounded-full border border-black/10 px-3 py-1.5 font-medium\"\n          >\n            Sign up for free\n          </button>\n        </div>\n\n        <h1 className=\"text-center text-[23px] font-normal tracking-[-0.01em] text-[#0d0d0d]\">\n          Where should we begin?\n        </h1>\n\n        <div\n          data-agent-id=\"compose-card\"\n          className=\"mt-5 flex w-full max-w-[430px] items-center gap-1 rounded-full border border-black/10 bg-white py-2 pl-3.5 pr-2 shadow-[0_2px_10px_rgba(0,0,0,0.06)] transition-shadow focus-within:shadow-[0_2px_14px_rgba(0,0,0,0.1)]\"\n        >\n          <Plus className=\"h-[18px] w-[18px] shrink-0 text-[#0d0d0d]\" aria-hidden=\"true\" />\n          <ComposeTextarea\n            aria-label=\"Chat with ChatGPT\"\n            placeholder=\"Ask ChatGPT\"\n            rows={1}\n            className=\"min-w-0 flex-1 px-2 py-1 text-[14.5px] leading-5 text-[#0d0d0d] placeholder:text-black/45\"\n          />\n          <button\n            type=\"button\"\n            aria-label=\"Start dictation\"\n            className=\"grid h-8 w-8 shrink-0 place-items-center rounded-full text-[#0d0d0d] transition-colors hover:bg-black/5\"\n          >\n            <Mic className=\"h-[17px] w-[17px]\" aria-hidden=\"true\" />\n          </button>\n          <ComposeSendButton\n            aria-label=\"Send message\"\n            className=\"h-8 w-8 shrink-0 bg-[#a8c6f8] text-white hover:bg-[#8fb6f6] disabled:bg-[#a8c6f8] disabled:text-white disabled:opacity-100\"\n            icon={<ArrowUp className=\"h-[17px] w-[17px]\" strokeWidth={2.4} />}\n          />\n        </div>\n\n        <button\n          type=\"button\"\n          onClick={() => send(\"What can you do?\")}\n          className=\"mt-3 rounded-full border border-black/10 bg-white px-4 py-1.5 text-[12px] text-[#0d0d0d] shadow-[0_1px_2px_rgba(0,0,0,0.04)] transition-colors hover:bg-[#f7f7f7]\"\n        >\n          What can you do?\n        </button>\n\n        <div className=\"absolute inset-x-0 bottom-2\">\n          <ComposeDisclaimer className=\"mt-0 text-[9.5px] text-black/45\">\n            ChatGPT is AI. By using it, you agree to our{\" \"}\n            <a href=\"#\" className=\"underline\">\n              Terms\n            </a>{\" \"}\n            &amp;{\" \"}\n            <a href=\"#\" className=\"underline\">\n              Privacy Policy\n            </a>\n            .\n          </ComposeDisclaimer>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport function OpenAICompose(props: ComposeProps) {\n  return (\n    <Root {...props}>\n      <OpenAIComposeLayout />\n    </Root>\n  );\n}\n"
    }
  ]
}