ui Architecture Docs
Home / File/ model-selector.tsx — ui Source File

model-selector.tsx — ui Source File

Architecture documentation for model-selector.tsx, a tsx file in the ui codebase. 13 imports, 1 dependents.

File tsx ComponentRegistry UIPrimitives 13 imports 1 dependents 3 functions

Entity Profile

Dependency Diagram

graph LR
  c9ff8f7d_3661_b534_3ddc_912a75766464["model-selector.tsx"]
  e37860a4_9df0_2f2b_5ed8_f9df66b35c24["models.ts"]
  c9ff8f7d_3661_b534_3ddc_912a75766464 --> e37860a4_9df0_2f2b_5ed8_f9df66b35c24
  5a80a5be_c4b0_527b_a207_23266053d93c["Model"]
  c9ff8f7d_3661_b534_3ddc_912a75766464 --> 5a80a5be_c4b0_527b_a207_23266053d93c
  982c05e1_457a_7775_0a61_f444fdaa6b7a["ModelType"]
  c9ff8f7d_3661_b534_3ddc_912a75766464 --> 982c05e1_457a_7775_0a61_f444fdaa6b7a
  1d141819_425e_b5fd_4c8e_32f7c6a42cf2["react"]
  c9ff8f7d_3661_b534_3ddc_912a75766464 --> 1d141819_425e_b5fd_4c8e_32f7c6a42cf2
  83796271_4368_20bb_9a9c_e1714e7440de["react-popover"]
  c9ff8f7d_3661_b534_3ddc_912a75766464 --> 83796271_4368_20bb_9a9c_e1714e7440de
  d39cd1e4_1b2d_9aa2_1d29_fd0b4bfb61c3["lucide-react"]
  c9ff8f7d_3661_b534_3ddc_912a75766464 --> d39cd1e4_1b2d_9aa2_1d29_fd0b4bfb61c3
  79081a1f_55a3_945a_fb8c_d53d6d3eab81["utils"]
  c9ff8f7d_3661_b534_3ddc_912a75766464 --> 79081a1f_55a3_945a_fb8c_d53d6d3eab81
  9314e41b_b7ea_95cf_6b0c_62b297b3ebf4["use-mutation-observer"]
  c9ff8f7d_3661_b534_3ddc_912a75766464 --> 9314e41b_b7ea_95cf_6b0c_62b297b3ebf4
  aa2f3ec6_f291_3763_88ec_65a3f5ad5939["button"]
  c9ff8f7d_3661_b534_3ddc_912a75766464 --> aa2f3ec6_f291_3763_88ec_65a3f5ad5939
  64c05bed_da32_06a4_3b53_12b3830eb50b["command"]
  c9ff8f7d_3661_b534_3ddc_912a75766464 --> 64c05bed_da32_06a4_3b53_12b3830eb50b
  38b1acca_615d_e193_0056_cac3d67bbd99["hover-card"]
  c9ff8f7d_3661_b534_3ddc_912a75766464 --> 38b1acca_615d_e193_0056_cac3d67bbd99
  fa665cdb_5f79_b81a_95ab_12ba182fc175["label"]
  c9ff8f7d_3661_b534_3ddc_912a75766464 --> fa665cdb_5f79_b81a_95ab_12ba182fc175
  e33b0d79_0534_28ec_a112_ac16ee736e09["popover"]
  c9ff8f7d_3661_b534_3ddc_912a75766464 --> e33b0d79_0534_28ec_a112_ac16ee736e09
  f546dde4_68c5_f623_9286_65aeda13ccc5["page.tsx"]
  f546dde4_68c5_f623_9286_65aeda13ccc5 --> c9ff8f7d_3661_b534_3ddc_912a75766464
  style c9ff8f7d_3661_b534_3ddc_912a75766464 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

"use client"

import * as React from "react"
import { PopoverProps } from "@radix-ui/react-popover"
import { Check, ChevronsUpDown } from "lucide-react"

import { cn } from "@/lib/utils"
import { useMutationObserver } from "@/hooks/use-mutation-observer"
import { Button } from "@/registry/new-york/ui/button"
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from "@/registry/new-york/ui/command"
import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@/registry/new-york/ui/hover-card"
import { Label } from "@/registry/new-york/ui/label"
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/registry/new-york/ui/popover"

import { Model, ModelType } from "../data/models"

interface ModelSelectorProps extends PopoverProps {
  types: readonly ModelType[]
  models: Model[]
}

export function ModelSelector({ models, types, ...props }: ModelSelectorProps) {
  const [open, setOpen] = React.useState(false)
  const [selectedModel, setSelectedModel] = React.useState<Model>(models[0])
  const [peekedModel, setPeekedModel] = React.useState<Model>(models[0])

  return (
    <div className="grid gap-2">
      <HoverCard openDelay={200}>
        <HoverCardTrigger asChild>
          <Label htmlFor="model">Model</Label>
        </HoverCardTrigger>
        <HoverCardContent
          align="start"
          className="w-[260px] text-sm"
          side="left"
        >
          The model which will generate the completion. Some models are suitable
          for natural language tasks, others specialize in code. Learn more.
        </HoverCardContent>
      </HoverCard>
      <Popover open={open} onOpenChange={setOpen} {...props}>
        <PopoverTrigger asChild>
          <Button
            variant="outline"
// ... (103 more lines)

Domain

Subdomains

Functions

Types

Dependencies

Imported By

Source

Frequently Asked Questions

What does model-selector.tsx do?
model-selector.tsx is a source file in the ui codebase, written in tsx. It belongs to the ComponentRegistry domain, UIPrimitives subdomain.
What functions are defined in model-selector.tsx?
model-selector.tsx defines 3 function(s): ModelItem, ModelSelector, model.
What does model-selector.tsx depend on?
model-selector.tsx imports 13 module(s): Model, ModelType, button, command, hover-card, label, lucide-react, models.ts, and 5 more.
What files import model-selector.tsx?
model-selector.tsx is imported by 1 file(s): page.tsx.
Where is model-selector.tsx in the architecture?
model-selector.tsx is located at deprecated/www/app/(app)/examples/playground/components/model-selector.tsx (domain: ComponentRegistry, subdomain: UIPrimitives, directory: deprecated/www/app/(app)/examples/playground/components).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free