51: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/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.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"] 52: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/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.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"] 53:T399a,"use client"; import { useMemo, type ComponentPropsWithoutRef, type ReactNode } from "react"; import { cva, type VariantProps } from "class-variance-authority"; import { CheckIcon, ChevronDownIcon } from "lucide-react"; import { cn } from "@/lib/utils"; import { Popover, PopoverContent, PopoverTrigger, } from "@/components/ui/popover"; import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, } from "@/components/ui/command"; import { RadioGroup as RadioGroupPrimitive } from "radix-ui"; import { getModelEfforts, ModelSelectorContext, resolveEffort, useControllableState, useLazyFlipSide, useModelSelectorContext, useModelSelectorEfforts, type ModelOption, } from "../utils/model-selection"; export { DEFAULT_EFFORT_OPTIONS, resolveModelEffort, useModelSelectorContext, useModelSelectorEfforts, } from "../utils/model-selection"; export type { ModelOption, ModelSelectorEffortOption, } from "../utils/model-selection"; export type ModelSelectorRootProps = { models: readonly ModelOption[]; value?: string; defaultValue?: string; onValueChange?: (value: string) => void; effort?: string; defaultEffort?: string; onEffortChange?: (effort: string) => void; open?: boolean; defaultOpen?: boolean; onOpenChange?: (open: boolean) => void; children: ReactNode; }; function ModelSelectorRoot({ models, value: valueProp, defaultValue, onValueChange, effort: effortProp, defaultEffort, onEffortChange, open: openProp, defaultOpen, onOpenChange, children, }: ModelSelectorRootProps) { const [value, setValue] = useControllableState({ prop: valueProp, defaultProp: defaultValue ?? models[0]?.id, onChange: onValueChange, }); const [effort, setEffort] = useControllableState({ prop: effortProp, defaultProp: defaultEffort, onChange: onEffortChange, }); const [open, setOpen] = useControllableState({ prop: openProp, defaultProp: defaultOpen ?? false, onChange: onOpenChange, }); const selectedModel = models.find((m) => m.id === value); const efforts = getModelEfforts(selectedModel); const activeEffort = resolveEffort(efforts, effort); const contextValue = useMemo( () => ({ models, value, setValue, selectedModel, efforts, effort: activeEffort, setEffort, open: open ?? false, setOpen, }), [ models, value, setValue, selectedModel, efforts, activeEffort, setEffort, open, setOpen, ], ); return ( {children} ); } export const modelSelectorTriggerVariants = cva( "focus-visible:ring-ring/50 flex w-fit items-center justify-between gap-2 overflow-hidden rounded-md text-sm whitespace-nowrap transition-colors outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5", { variants: { variant: { outline: "border-input hover:bg-accent hover:text-accent-foreground border bg-transparent", ghost: "hover:bg-accent hover:text-accent-foreground", muted: "bg-secondary text-secondary-foreground hover:bg-secondary/80", }, size: { default: "h-9 px-3 py-2", sm: "h-8 px-2.5 py-1.5 text-xs", lg: "h-10 px-4 py-2.5", }, }, defaultVariants: { variant: "outline", size: "default", }, }, ); export type ModelSelectorTriggerProps = ComponentPropsWithoutRef< typeof PopoverTrigger > & VariantProps; function ModelSelectorTrigger({ className, variant, size, children, onKeyDown, ...props }: ModelSelectorTriggerProps) { const { setOpen } = useModelSelectorContext(); return ( ); } export type ModelSelectorValueProps = { placeholder?: ReactNode; /** Show the active effort level next to the model name. */ showEffort?: boolean; className?: string; }; function ModelIcon({ children, className, }: { children: ReactNode; className?: string; }) { return ( {children} ); } function ModelSelectorValue({ placeholder = "Select model", showEffort = true, className, }: ModelSelectorValueProps) { const { selectedModel, efforts, effort } = useModelSelectorContext(); if (!selectedModel) { return ( {placeholder} ); } const effortName = showEffort && effort !== undefined ? efforts?.find((e) => e.id === effort)?.name : undefined; return ( {selectedModel.icon && {selectedModel.icon}} {selectedModel.name} {effortName && ( {effortName} )} ); } export type ModelSelectorContentProps = Omit< ComponentPropsWithoutRef, "side" > & { /** * Preferred side for the initial placement. Once the popover is open, the * rendered side takes over until it closes, so the popup does not jump * between sides while filtering resizes the list. */ side?: ComponentPropsWithoutRef["side"]; searchable?: boolean; }; /** * Hidden input that anchors cmdk's keyboard navigation, keeping the list * keyboard-operable without a visible search box. ModelSelectorContent renders * one automatically when unfiltered. */ function ModelSelectorFocusAnchor() { return (

); } function ModelSelectorContent({ className, align = "start", side, sideOffset = 6, searchable, children, ...props }: ModelSelectorContentProps) { const { value, open } = useModelSelectorContext(); const { side: renderedSide, popupRef } = useLazyFlipSide( open, side ?? "bottom", ); const unfiltered = searchable === false || (!searchable && children === undefined); return ( {unfiltered && } {children ?? ( <> {searchable && } )} ); } export type ModelSelectorSearchProps = ComponentPropsWithoutRef< typeof CommandInput >; function ModelSelectorSearch({ placeholder = "Search models...", ...props }: ModelSelectorSearchProps) { return ( ); } export type ModelSelectorListProps = ComponentPropsWithoutRef< typeof CommandList >; function ModelSelectorList({ className, children, ...props }: ModelSelectorListProps) { const { models } = useModelSelectorContext(); return ( {children ?? ( <> {models.map((model) => ( ))} )} ); } export type ModelSelectorEmptyProps = ComponentPropsWithoutRef< typeof CommandEmpty >; function ModelSelectorEmpty({ children, ...props }: ModelSelectorEmptyProps) { return ( {children ?? "No models found."} ); } export type ModelSelectorGroupProps = ComponentPropsWithoutRef< typeof CommandGroup >; function ModelSelectorGroup(props: ModelSelectorGroupProps) { return ; } export type ModelSelectorSeparatorProps = ComponentPropsWithoutRef< typeof CommandSeparator >; function ModelSelectorSeparator(props: ModelSelectorSeparatorProps) { return ; } export type ModelSelectorItemProps = Omit< ComponentPropsWithoutRef, "value" > & { model: ModelOption; }; function ModelSelectorItem({ model, className, children, onSelect, ...props }: ModelSelectorItemProps) { const { value, setValue, setOpen } = useModelSelectorContext(); const isSelected = value === model.id; return ( { setValue(model.id); setOpen(false); onSelect?.(selectedValue); }} className={cn( "relative items-start gap-2 rounded-lg py-2 ps-3 pe-9 [&_svg:not([class*='size-'])]:size-3.5", className, )} {...props} > {children ?? ( <> {model.icon && ( {model.icon} )} {model.name} {model.description && ( {model.description} )} )} {isSelected && ( )} ); } export type ModelSelectorEffortProps = ComponentPropsWithoutRef<"div"> & { label?: ReactNode; }; function ModelSelectorEffort({ label = "Thinking", className, onKeyDown, ...props }: ModelSelectorEffortProps) { const { efforts, effort, setEffort } = useModelSelectorEfforts(); if (!efforts?.length) return null; return (

{ onKeyDown?.(e); if (e.defaultPrevented) return; // cmdk's Command root claims Home/End to jump the model list; stop // them here so only the radiogroup reacts. if (e.key === "Home" || e.key === "End") e.stopPropagation(); // Vertical arrows refocus cmdk's input before the event bubbles to // the Command root: the same keypress then moves the list highlight, // and Enter selects again (cmdk's Enter is inert while a radio has // focus, so the highlight would otherwise move with no way to act). if (e.key === "ArrowUp" || e.key === "ArrowDown") { e.currentTarget .closest("[cmdk-root]") ?.querySelector("[cmdk-input]") ?.focus(); } }} {...props} > {label} {efforts.map((option) => ( {option.name} ))}

); } export type ModelSelectorProps = Omit & VariantProps & { /** Render a search input above the model list. */ searchable?: boolean; /** Alignment of the dropdown relative to the trigger. Use `"end"` when the * trigger sits at the right edge of its container. */ align?: ModelSelectorContentProps["align"]; className?: string; contentClassName?: string; }; export { ModelSelectorRoot, ModelSelectorTrigger, ModelSelectorValue, ModelSelectorContent, ModelSelectorSearch, ModelSelectorFocusAnchor, ModelSelectorList, ModelSelectorEmpty, ModelSelectorGroup, ModelSelectorSeparator, ModelSelectorItem, ModelSelectorEffort, }; 50:["$","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","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","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":"lucide-react"}]]}]}],["$","li","class-variance-authority",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","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":"class-variance-authority"}]]}]}],["$","li","radix-ui",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/radix-ui","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":"radix-ui"}]]}]}]]}],["$","$L51",null,{"namespace":"@assistant-ui","registryDependencies":["command","popover","https://r.assistant-ui.com/elements-model-selection.json"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"components/assistant-ui/elements/model-selector.tsx","content":"$53","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]