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/base-nova/blocks/chatgpt.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-nova/components/example\"\nimport { Alert, AlertDescription } from \"@/registry/base-nova/ui/alert\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/base-nova/ui/alert-dialog\"\nimport { Badge } from \"@/registry/base-nova/ui/badge\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-nova/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/base-nova/ui/dropdown-menu\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/base-nova/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupTextarea,\n} from \"@/registry/base-nova/ui/input-group\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-nova/ui/item\"\nimport { Kbd } from \"@/registry/base-nova/ui/kbd\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/base-nova/ui/popover\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-nova/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                <TooltipTrigger\n                  render={\n                    <DropdownMenuTrigger\n                      render={\n                        <InputGroupButton\n                          variant=\"ghost\"\n                          size=\"icon-sm\"\n                          onClick={() => setDictateEnabled(!dictateEnabled)}\n                          className=\"rounded-4xl\"\n                        />\n                      }\n                    />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </TooltipTrigger>\n                <TooltipContent>\n                  Add files and more <Kbd>/</Kbd>\n                </TooltipContent>\n              </Tooltip>\n              <DropdownMenuContent className=\"w-56\">\n                <DropdownMenuGroup>\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\n                      render={\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                      }\n                    />\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                </DropdownMenuGroup>\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                  <DropdownMenuPortal>\n                    <DropdownMenuSubContent>\n                      <DropdownMenuGroup>\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                      </DropdownMenuGroup>\n                    </DropdownMenuSubContent>\n                  </DropdownMenuPortal>\n                </DropdownMenuSub>\n              </DropdownMenuContent>\n            </DropdownMenu>\n            <Tooltip>\n              <TooltipTrigger\n                render={\n                  <InputGroupButton\n                    variant=\"ghost\"\n                    size=\"icon-sm\"\n                    onClick={() => setDictateEnabled(!dictateEnabled)}\n                    className=\"ml-auto rounded-4xl\"\n                  />\n                }\n              >\n                <IconPlaceholder\n                  lucide=\"AudioLinesIcon\"\n                  tabler=\"IconMicrophone\"\n                  hugeicons=\"AudioWave01Icon\"\n                  phosphor=\"MicrophoneIcon\"\n                  remixicon=\"RiMicLine\"\n                />\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\n          render={<Button variant=\"ghost\" className=\"gap-2\" />}\n        >\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        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-60\" align=\"start\">\n          <DropdownMenuGroup>\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          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>\n              <span className=\"font-medium\">Legacy models</span>\n            </DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuGroup>\n                  <DropdownMenuRadioGroup\n                    value={model}\n                    onValueChange={setModel}\n                  >\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                </DropdownMenuGroup>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\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 render={<Button />}>\n          Start Group Chat\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\n                render={<Button variant=\"ghost\" size=\"icon\" />}\n              >\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              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-72\">\n                <DropdownMenuGroup>\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\n                            memories are hidden from outside chats.\n                          </ItemDescription>\n                        </ItemContent>\n                      </Item>\n                    </DropdownMenuRadioItem>\n                  </DropdownMenuRadioGroup>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>\n                    Note that this setting can&apos;t be changed later.\n                  </DropdownMenuLabel>\n                </DropdownMenuGroup>\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\n                      render={\n                        <InputGroupButton variant=\"ghost\" size=\"icon-xs\" />\n                      }\n                    >\n                      <IconPlaceholder\n                        style={\n                          { \"--color\": selectedColor } as React.CSSProperties\n                        }\n                        lucide=\"FolderIcon\"\n                        tabler=\"IconFolder\"\n                        hugeicons=\"FolderIcon\"\n                        phosphor=\"FolderIcon\"\n                        remixicon=\"RiFolderLine\"\n                        className=\"text-(--color)\"\n                      />\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                    render={\n                      <button\n                        onClick={() => {\n                          setSelectedCategory(\n                            selectedCategory === category.id\n                              ? null\n                              : category.id\n                          )\n                        }}\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                  </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"
}