ModelSelector() — ui Function Reference

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

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ ModelSelector() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

apps/v4/registry/bases/radix/blocks/chatgpt.tsx lines 282–361

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

  return (
    <Example title="Model Selector">
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <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"
            />
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent className="w-60" align="start">
          <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>
          <DropdownMenuSeparator />
          <DropdownMenuSub>
            <DropdownMenuSubTrigger>
              <span className="font-medium">Legacy models</span>
            </DropdownMenuSubTrigger>
            <DropdownMenuSubContent>
              <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>
            </DropdownMenuSubContent>
          </DropdownMenuSub>
        </DropdownMenuContent>
      </DropdownMenu>
    </Example>
  )
}