ModelSelector() — ui Function Reference

Architecture documentation for the ModelSelector() function in chatgpt.tsx from the ui codebase.

Function tsx ComponentRegistry UIPrimitives

Entity Profile

ComponentRegistry→ UIPrimitives→ ModelSelector() — ui Function Reference

Dependency Diagram

graph TD
  faced4a7_bc72_40a1_bff3_7bb234c43b6d["ModelSelector()"]
  1a8eb712_9ad3_8ee1_f665_9fe11916369f["chatgpt.tsx"]
  faced4a7_bc72_40a1_bff3_7bb234c43b6d -->|defined in| 1a8eb712_9ad3_8ee1_f665_9fe11916369f
  style faced4a7_bc72_40a1_bff3_7bb234c43b6d fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/base/blocks/chatgpt.tsx lines 295–383

function ModelSelector() {
  const [mode, setMode] = React.useState("auto")
  const [model, setModel] = React.useState("gpt-5.1")

  return (
    <Example title="Model Selector">
      <DropdownMenu>
        <DropdownMenuTrigger
          render={<Button variant="ghost" className="gap-2" />}
        >
          ChatGPT 5.1
          <IconPlaceholder
            lucide="ChevronDownIcon"
            tabler="IconChevronDown"
            hugeicons="ArrowDown01Icon"
            phosphor="CaretDownIcon"
            remixicon="RiArrowDownSLine"
            className="text-muted-foreground size-4"
          />
        </DropdownMenuTrigger>
        <DropdownMenuContent className="w-60" align="start">
          <DropdownMenuGroup>
            <DropdownMenuLabel className="text-muted-foreground text-xs font-normal">
              GPT-5.1
            </DropdownMenuLabel>
            <DropdownMenuRadioGroup value={mode} onValueChange={setMode}>
              <DropdownMenuRadioItem value="auto">
                <Item size="xs" className="p-0">
                  <ItemContent>
                    <ItemTitle>Auto</ItemTitle>
                    <ItemDescription className="text-xs">
                      Decides how long to think
                    </ItemDescription>
                  </ItemContent>
                </Item>
              </DropdownMenuRadioItem>
              <DropdownMenuRadioItem value="instant">
                <Item size="xs" className="p-0">
                  <ItemContent>
                    <ItemTitle>Instant</ItemTitle>
                    <ItemDescription className="text-xs">
                      Answers right away
                    </ItemDescription>
                  </ItemContent>
                </Item>
              </DropdownMenuRadioItem>
              <DropdownMenuRadioItem value="thinking">
                <Item size="xs" className="p-0">
                  <ItemContent>
                    <ItemTitle>Thinking</ItemTitle>
                    <ItemDescription className="text-xs">
                      Thinks longer for better answers
                    </ItemDescription>
                  </ItemContent>
                </Item>
              </DropdownMenuRadioItem>
            </DropdownMenuRadioGroup>
          </DropdownMenuGroup>
          <DropdownMenuSeparator />
          <DropdownMenuSub>
            <DropdownMenuSubTrigger>
              <span className="font-medium">Legacy models</span>
            </DropdownMenuSubTrigger>
            <DropdownMenuPortal>
              <DropdownMenuSubContent>
                <DropdownMenuGroup>
                  <DropdownMenuRadioGroup
                    value={model}
                    onValueChange={setModel}
                  >
                    <DropdownMenuRadioItem value="gpt-4">
                      GPT-4
                    </DropdownMenuRadioItem>
                    <DropdownMenuRadioItem value="gpt-4-turbo">
                      GPT-4 Turbo
                    </DropdownMenuRadioItem>
                    <DropdownMenuRadioItem value="gpt-3.5">
                      GPT-3.5
                    </DropdownMenuRadioItem>
                  </DropdownMenuRadioGroup>
                </DropdownMenuGroup>