60:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 61:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 62:T1b34,"use client"; import * as React from "react"; import { Combobox } from "@base-ui/react/combobox"; import { cn } from "@/lib/utils"; export type ModelCapability = "vision" | "reasoning" | "tools" | "fast"; export type Model = { /** Unique id sent to your backend, e.g. "claude-sonnet-5-5". */ value: string; /** Display name. */ label: string; provider: string; description?: string; /** Context window in tokens. */ contextWindow?: number; capabilities?: ModelCapability[]; }; type ModelGroup = { value: string; items: Model[] }; const capabilityLabel: Record = { vision: "Vision", reasoning: "Reasoning", tools: "Tools", fast: "Fast", }; function formatContext(tokens: number) { return tokens >= 1_000_000 ? `${+(tokens / 1_000_000).toFixed(1)}M` : `${Math.round(tokens / 1000)}K`; } function ProviderMark({ provider, className }: { provider: string; className?: string }) { return ( {provider.charAt(0)} ); } function matches(model: Model, query: string) { const q = query.trim().toLowerCase(); if (!q) return true; return [model.label, model.provider, model.description ?? "", ...(model.capabilities ?? [])] .join(" ") .toLowerCase() .includes(q); } export function ModelPicker({ models, value, defaultValue, onValueChange, placeholder = "Select model", groupByProvider = true, disabled, className, }: { models: Model[]; value?: string; defaultValue?: string; onValueChange?: (value: string) => void; placeholder?: string; /** Group the list under provider headings. */ groupByProvider?: boolean; disabled?: boolean; className?: string; }) { const [inner, setInner] = React.useState(defaultValue ?? null); const current = value !== undefined ? value : inner; const selected = models.find((m) => m.value === current) ?? null; const items = React.useMemo(() => { if (!groupByProvider) return models; const map = new Map(); for (const m of models) map.set(m.provider, [...(map.get(m.provider) ?? []), m]); return [...map].map(([provider, list]) => ({ value: provider, items: list })); }, [models, groupByProvider]); const renderItem = (model: Model) => (

{model.label} {model.contextWindow && ( {formatContext(model.contextWindow)} ctx )}

{model.description &&

{model.description}

} {!!model.capabilities?.length && (

{model.capabilities.map((c) => ( {capabilityLabel[c]} ))}

)}

); return ( { if (!m) return; setInner(m.value); onValueChange?.(m.value); }} isItemEqualToValue={(a: Model, b: Model) => a.value === b.value} filter={(item: Model, query: string) => matches(item, query)} disabled={disabled} > {selected && } {selected ? selected.label : placeholder}

No models found.

{groupByProvider ? (group: ModelGroup) => ( {group.value} {renderItem} ) : renderItem} ); } 5f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@base-ui/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40base-ui%2Freact","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@base-ui/react"}]]}]}]]}],["$","$L60",null,{"namespace":"@turn","registryDependencies":["utils"]}]]}],null]}],["$","$L61",null,{"files":[{"path":"src/registry/ui/model-picker.tsx","content":"$62","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]