chatgpt.json — ui Source File

Source Code

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "chatgpt",
  "title": "ChatGPT",
  "registryDependencies": [
    "alert",
    "alert-dialog",
    "badge",
    "button",
    "card",
    "dropdown-menu",
    "field",
    "input-group",
    "item",
    "kbd",
    "popover",
    "tooltip",
    "example"
  ],
  "files": [
    {
      "path": "registry/radix-maia/blocks/chatgpt.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport { Alert, AlertDescription } from \"@/registry/radix-maia/ui/alert\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/radix-maia/ui/alert-dialog\"\nimport { Badge } from \"@/registry/radix-maia/ui/badge\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-maia/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-maia/ui/dropdown-menu\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/radix-maia/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupTextarea,\n} from \"@/registry/radix-maia/ui/input-group\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/radix-maia/ui/item\"\nimport { Kbd } from \"@/registry/radix-maia/ui/kbd\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/radix-maia/ui/popover\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-maia/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ChatGPTBlock() {\n  return (\n    <ExampleWrapper>\n      <PromptForm />\n      <ModelSelector />\n      <GroupChatDialog />\n      <CreateProjectForm />\n    </ExampleWrapper>\n  )\n}\n\nfunction PromptForm() {\n  const [dictateEnabled, setDictateEnabled] = React.useState(false)\n\n  return (\n    <Example title=\"Prompt Form\">\n      <Field>\n        <FieldLabel htmlFor=\"prompt\" className=\"sr-only\">\n          Prompt\n        </FieldLabel>\n        <InputGroup>\n          <InputGroupTextarea id=\"prompt\" placeholder=\"Ask anything\" />\n          <InputGroupAddon align=\"block-end\">\n            <DropdownMenu>\n              <Tooltip>\n                <DropdownMenuTrigger asChild>\n                  <TooltipTrigger asChild>\n                    <InputGroupButton\n                      variant=\"ghost\"\n                      size=\"icon-sm\"\n                      onClick={() => setDictateEnabled(!dictateEnabled)}\n                      className=\"rounded-4xl\"\n                    >\n                      <IconPlaceholder\n                        lucide=\"PlusIcon\"\n                        tabler=\"IconPlus\"\n                        hugeicons=\"PlusSignIcon\"\n                        phosphor=\"PlusIcon\"\n                        remixicon=\"RiAddLine\"\n                      />\n                    </InputGroupButton>\n                  </TooltipTrigger>\n                </DropdownMenuTrigger>\n                <TooltipContent>\n                  Add files and more <Kbd>/</Kbd>\n                </TooltipContent>\n              </Tooltip>\n              <DropdownMenuContent\n                className=\"w-56\"\n                onCloseAutoFocus={(e) => e.preventDefault()}\n              >\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"PaperclipIcon\"\n                    tabler=\"IconPaperclip\"\n                    hugeicons=\"AttachmentIcon\"\n                    phosphor=\"PaperclipIcon\"\n                    remixicon=\"RiAttachmentLine\"\n                  />\n                  Add photos & files\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"SparklesIcon\"\n                    tabler=\"IconSparkles\"\n                    hugeicons=\"SparklesIcon\"\n                    phosphor=\"SparkleIcon\"\n                    remixicon=\"RiSparklingLine\"\n                  />\n                  Deep research\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ShoppingBagIcon\"\n                    tabler=\"IconShoppingBag\"\n                    hugeicons=\"ShoppingBag01Icon\"\n                    phosphor=\"BagIcon\"\n                    remixicon=\"RiShoppingBagLine\"\n                  />\n                  Shopping research\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"WandIcon\"\n                    tabler=\"IconWand\"\n                    hugeicons=\"MagicWand05Icon\"\n                    phosphor=\"MagicWandIcon\"\n                    remixicon=\"RiMagicLine\"\n                  />\n                  Create image\n                </DropdownMenuItem>\n                <Tooltip>\n                  <TooltipTrigger asChild>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MousePointerIcon\"\n                        tabler=\"IconPointer\"\n                        hugeicons=\"Cursor01Icon\"\n                        phosphor=\"HandPointingIcon\"\n                        remixicon=\"RiHand\"\n                      />\n                      Agent mode\n                    </DropdownMenuItem>\n                  </TooltipTrigger>\n                  <TooltipContent side=\"right\">\n                    <div className=\"font-medium\">35 left</div>\n                    <div className=\"text-primary-foreground/80 text-xs\">\n                      More available for purchase\n                    </div>\n                  </TooltipContent>\n                </Tooltip>\n                <DropdownMenuSub>\n                  <DropdownMenuSubTrigger>\n                    <IconPlaceholder\n                      lucide=\"MoreHorizontalIcon\"\n                      tabler=\"IconDots\"\n                      hugeicons=\"MoreHorizontalCircle01Icon\"\n                      phosphor=\"DotsThreeOutlineIcon\"\n                      remixicon=\"RiMoreLine\"\n                    />\n                    More\n                  </DropdownMenuSubTrigger>\n                  <DropdownMenuSubContent>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShareIcon\"\n                        tabler=\"IconShare\"\n                        hugeicons=\"Share03Icon\"\n                        phosphor=\"ShareIcon\"\n                        remixicon=\"RiShareLine\"\n                      />\n                      Add sources\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"BookOpenIcon\"\n                        tabler=\"IconBook\"\n                        hugeicons=\"BookIcon\"\n                        phosphor=\"BookOpenIcon\"\n                        remixicon=\"RiBookOpenLine\"\n                      />\n                      Study and learn\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"GlobeIcon\"\n                        tabler=\"IconWorld\"\n                        hugeicons=\"GlobalIcon\"\n                        phosphor=\"GlobeIcon\"\n                        remixicon=\"RiGlobeLine\"\n                      />\n                      Web search\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"PenToolIcon\"\n                        tabler=\"IconPencil\"\n                        hugeicons=\"PenIcon\"\n                        phosphor=\"PencilIcon\"\n                        remixicon=\"RiPencilLine\"\n                      />\n                      Canvas\n                    </DropdownMenuItem>\n                  </DropdownMenuSubContent>\n                </DropdownMenuSub>\n              </DropdownMenuContent>\n            </DropdownMenu>\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <InputGroupButton\n                  variant=\"ghost\"\n                  size=\"icon-sm\"\n                  onClick={() => setDictateEnabled(!dictateEnabled)}\n                  className=\"ml-auto rounded-4xl\"\n                >\n                  <IconPlaceholder\n                    lucide=\"AudioLinesIcon\"\n                    tabler=\"IconMicrophone\"\n                    hugeicons=\"AudioWave01Icon\"\n                    phosphor=\"MicrophoneIcon\"\n                    remixicon=\"RiMicLine\"\n                  />\n                </InputGroupButton>\n              </TooltipTrigger>\n              <TooltipContent>Dictate</TooltipContent>\n            </Tooltip>\n            <InputGroupButton\n              size=\"icon-sm\"\n              variant=\"default\"\n              className=\"rounded-4xl\"\n            >\n              <IconPlaceholder\n                lucide=\"ArrowUpIcon\"\n                tabler=\"IconArrowUp\"\n                hugeicons=\"ArrowUp02Icon\"\n                phosphor=\"ArrowUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n            </InputGroupButton>\n          </InputGroupAddon>\n        </InputGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ModelSelector() {\n  const [mode, setMode] = React.useState(\"auto\")\n  const [model, setModel] = React.useState(\"gpt-5.1\")\n\n  return (\n    <Example title=\"Model Selector\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"ghost\" className=\"gap-2\">\n            ChatGPT 5.1\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              className=\"text-muted-foreground size-4\"\n            />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-60\" align=\"start\">\n          <DropdownMenuLabel className=\"text-muted-foreground text-xs font-normal\">\n            GPT-5.1\n          </DropdownMenuLabel>\n          <DropdownMenuRadioGroup value={mode} onValueChange={setMode}>\n            <DropdownMenuRadioItem value=\"auto\">\n              <Item size=\"xs\" className=\"p-0\">\n                <ItemContent>\n                  <ItemTitle>Auto</ItemTitle>\n                  <ItemDescription className=\"text-xs\">\n                    Decides how long to think\n                  </ItemDescription>\n                </ItemContent>\n              </Item>\n            </DropdownMenuRadioItem>\n            <DropdownMenuRadioItem value=\"instant\">\n              <Item size=\"xs\" className=\"p-0\">\n                <ItemContent>\n                  <ItemTitle>Instant</ItemTitle>\n                  <ItemDescription className=\"text-xs\">\n                    Answers right away\n                  </ItemDescription>\n                </ItemContent>\n              </Item>\n            </DropdownMenuRadioItem>\n            <DropdownMenuRadioItem value=\"thinking\">\n              <Item size=\"xs\" className=\"p-0\">\n                <ItemContent>\n                  <ItemTitle>Thinking</ItemTitle>\n                  <ItemDescription className=\"text-xs\">\n                    Thinks longer for better answers\n                  </ItemDescription>\n                </ItemContent>\n              </Item>\n            </DropdownMenuRadioItem>\n          </DropdownMenuRadioGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>\n              <span className=\"font-medium\">Legacy models</span>\n            </DropdownMenuSubTrigger>\n            <DropdownMenuSubContent>\n              <DropdownMenuRadioGroup value={model} onValueChange={setModel}>\n                <DropdownMenuRadioItem value=\"gpt-4\">\n                  GPT-4\n                </DropdownMenuRadioItem>\n                <DropdownMenuRadioItem value=\"gpt-4-turbo\">\n                  GPT-4 Turbo\n                </DropdownMenuRadioItem>\n                <DropdownMenuRadioItem value=\"gpt-3.5\">\n                  GPT-3.5\n                </DropdownMenuRadioItem>\n              </DropdownMenuRadioGroup>\n            </DropdownMenuSubContent>\n          </DropdownMenuSub>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction GroupChatDialog() {\n  return (\n    <Example title=\"Group Chat Dialog\" className=\"items-center justify-center\">\n      <AlertDialog>\n        <AlertDialogTrigger asChild>\n          <Button>Start Group Chat</Button>\n        </AlertDialogTrigger>\n        <AlertDialogContent>\n          <AlertDialogHeader>\n            <AlertDialogTitle>Use ChatGPT together</AlertDialogTitle>\n            <AlertDialogDescription>\n              Add people to your chats to plan, share ideas, and get creative.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter className=\"flex-row items-center justify-between sm:justify-between\">\n            <a\n              href=\"#\"\n              className=\"text-muted-foreground hover:text-foreground text-sm underline underline-offset-4\"\n            >\n              Learn more\n            </a>\n            <div className=\"flex gap-2\">\n              <AlertDialogCancel>Cancel</AlertDialogCancel>\n              <AlertDialogAction>Start group chat</AlertDialogAction>\n            </div>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nconst categories = [\n  {\n    id: \"homework\",\n    label: \"Homework\",\n  },\n  {\n    id: \"writing\",\n    label: \"Writing\",\n  },\n  {\n    id: \"health\",\n    label: \"Health\",\n  },\n  {\n    id: \"travel\",\n    label: \"Travel\",\n  },\n]\n\nfunction CreateProjectForm() {\n  const [projectName, setProjectName] = React.useState(\"\")\n  const [selectedCategory, setSelectedCategory] = React.useState<string | null>(\n    categories[0].id\n  )\n  const [memorySetting, setMemorySetting] = React.useState<\n    \"default\" | \"project-only\"\n  >(\"default\")\n  const [selectedColor, setSelectedColor] = React.useState<string | null>(\n    \"var(--foreground)\"\n  )\n\n  return (\n    <Example title=\"Create Project\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Create Project</CardTitle>\n          <CardDescription>\n            Start a new project to keep chats, files, and custom instructions in\n            one place.\n          </CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button variant=\"ghost\" size=\"icon\">\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"Settings01Icon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span className=\"sr-only\">Memory</span>\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-72\">\n                <DropdownMenuRadioGroup\n                  value={memorySetting}\n                  onValueChange={(value) => {\n                    setMemorySetting(value as \"default\" | \"project-only\")\n                  }}\n                >\n                  <DropdownMenuRadioItem value=\"default\">\n                    <Item size=\"xs\">\n                      <ItemContent>\n                        <ItemTitle>Default</ItemTitle>\n                        <ItemDescription className=\"text-xs\">\n                          Project can access memories from outside chats, and\n                          vice versa.\n                        </ItemDescription>\n                      </ItemContent>\n                    </Item>\n                  </DropdownMenuRadioItem>\n                  <DropdownMenuRadioItem value=\"project-only\">\n                    <Item size=\"xs\">\n                      <ItemContent>\n                        <ItemTitle>Project Only</ItemTitle>\n                        <ItemDescription className=\"text-xs\">\n                          Project can only access its own memories. Its memories\n                          are hidden from outside chats.\n                        </ItemDescription>\n                      </ItemContent>\n                    </Item>\n                  </DropdownMenuRadioItem>\n                </DropdownMenuRadioGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuLabel>\n                  Note that this setting can&apos;t be changed later.\n                </DropdownMenuLabel>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"project-name\" className=\"sr-only\">\n                Project Name\n              </FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"project-name\"\n                  placeholder=\"Copenhagen Trip\"\n                  value={projectName}\n                  onChange={(e) => {\n                    setProjectName(e.target.value)\n                  }}\n                />\n                <InputGroupAddon>\n                  <Popover>\n                    <PopoverTrigger asChild>\n                      <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                        <IconPlaceholder\n                          style={\n                            { \"--color\": selectedColor } as React.CSSProperties\n                          }\n                          lucide=\"FolderIcon\"\n                          phosphor=\"FolderIcon\"\n                          remixicon=\"RiFolderLine\"\n                          tabler=\"IconFolder\"\n                          hugeicons=\"FolderIcon\"\n                          className=\"text-(--color)\"\n                        />\n                      </InputGroupButton>\n                    </PopoverTrigger>\n                    <PopoverContent align=\"start\" className=\"w-60 p-3\">\n                      <div className=\"flex flex-wrap gap-2\">\n                        {[\n                          \"var(--foreground)\",\n                          \"#fa423e\",\n                          \"#f59e0b\",\n                          \"#8b5cf6\",\n                          \"#ec4899\",\n                          \"#10b981\",\n                          \"#6366f1\",\n                          \"#14b8a6\",\n                          \"#f97316\",\n                          \"#fbbc04\",\n                        ].map((color) => (\n                          <Button\n                            key={color}\n                            size=\"icon\"\n                            variant=\"ghost\"\n                            className=\"rounded-full p-1\"\n                            style={{ \"--color\": color } as React.CSSProperties}\n                            data-checked={selectedColor === color}\n                            onClick={() => {\n                              setSelectedColor(color)\n                            }}\n                          >\n                            <span className=\"group-data-[checked=true]/button:ring-offset-background size-5 rounded-full bg-(--color) ring-2 ring-transparent ring-offset-2 ring-offset-(--color) group-data-[checked=true]/button:ring-(--color)\" />\n                            <span className=\"sr-only\">{color}</span>\n                          </Button>\n                        ))}\n                      </div>\n                    </PopoverContent>\n                  </Popover>\n                </InputGroupAddon>\n              </InputGroup>\n              <FieldDescription className=\"flex flex-wrap gap-2\">\n                {categories.map((category) => (\n                  <Badge\n                    key={category.id}\n                    variant={\n                      selectedCategory === category.id ? \"default\" : \"outline\"\n                    }\n                    data-checked={selectedCategory === category.id}\n                    asChild\n                  >\n                    <button\n                      onClick={() => {\n                        setSelectedCategory(\n                          selectedCategory === category.id ? null : category.id\n                        )\n                      }}\n                    >\n                      <IconPlaceholder\n                        lucide=\"CircleCheckIcon\"\n                        tabler=\"IconCircleCheck\"\n                        hugeicons=\"CheckmarkCircle02Icon\"\n                        phosphor=\"CheckCircleIcon\"\n                        remixicon=\"RiCheckboxCircleLine\"\n                        data-icon=\"inline-start\"\n                        className=\"hidden group-data-[checked=true]/badge:inline\"\n                      />\n                      {category.label}\n                    </button>\n                  </Badge>\n                ))}\n              </FieldDescription>\n            </Field>\n            <Field>\n              <Alert className=\"bg-muted\">\n                <IconPlaceholder\n                  lucide=\"LightbulbIcon\"\n                  tabler=\"IconBulb\"\n                  hugeicons=\"BulbIcon\"\n                  phosphor=\"LightbulbIcon\"\n                  remixicon=\"RiLightbulbLine\"\n                />\n                <AlertDescription className=\"text-xs\">\n                  Projects keep chats, files, and custom instructions in one\n                  place. Use them for ongoing work, or just to keep things tidy.\n                </AlertDescription>\n              </Alert>\n            </Field>\n          </FieldGroup>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
      "type": "registry:block"
    }
  ],
  "type": "registry:block"
}