ModelSelect

1"use client";
2 
3import { Select as SelectPrimitive } from "@base-ui/react/select";
4import { Search01Icon } from "@hugeicons/core-free-icons";
5import { HugeiconsIcon } from "@hugeicons/react";
6import { domAnimation, LazyMotion, m } from "motion/react";
7import type { ComponentProps, KeyboardEvent, ReactNode } from "react";
8import { useEffect, useRef, useState } from "react";
9 
10import {
11  Select,
12  SelectGroup,
13  SelectItem,
14  SelectLabel,
15  SelectTrigger,
16  SelectValue,
17} from "@/components/ui/select";
18import { cn } from "@/lib/utils";
19 
20export interface AiModel {
21  /** Gateway model id in short form, e.g. "gpt-5-2" or "gemini-3-pro". */
22  id: string;
23  /** Human-readable name, e.g. "GPT-5.2". */
24  name: string;
25  /** Provider name used for grouping, e.g. "OpenAI". */
26  provider: string;
27  /** Whether the model supports extended reasoning (reasoning_effort). */
28  reasoning?: boolean;
29  /** Mark a model as not yet available; it renders dimmed and unselectable. */
30  disabled?: boolean;
31  /** Optional short capability tag, e.g. "fast" or "open". */
32  tag?: string;
33}
34 
35export type ModelSelectSize = "sm" | "md" | "lg";
36 
37export type ModelSelectProps = Omit<
38  ComponentProps<typeof SelectTrigger>,
39  "children" | "value" | "size"
40> & {
41  /** Models to choose from; grouped by provider in listed order. */
42  models: AiModel[];
43  /** Controlled selected model id. */
44  value?: string;
45  /** Uncontrolled initial model id. */
46  defaultValue?: string;
47  onValueChange?: (value: string) => void;
48  placeholder?: ReactNode;
49  /** Trigger size: compact, default, or roomy. */
50  size?: ModelSelectSize;
51  /** Provider logos keyed by provider name; without a logo no mark is shown. */
52  logos?: Record<string, ReactNode>;
53  /** Model ids to hide from the list. */
54  excludeModels?: string[];
55  /**
56   * Controlled usage only: when the current value is not in `models`
57   * (e.g. a hardcoded default this gateway has not enabled), call
58   * `onValueChange` with the first available model instead of sitting
59   * on a placeholder.
60   */
61  fallbackToFirst?: boolean;
62  /** Extra content rendered after the model name in the trigger. */
63  valueSuffix?: ReactNode;
64  /** Pinned footer rendered below the scrolling list inside the popup. */
65  footer?: ReactNode;
66  /** Runs before the popup's built-in key handling; preventDefault to claim a key. */
67  onPopupKeyDown?: (event: KeyboardEvent<HTMLDivElement>) => void;
68  /** Mount the popup inside a specific element, e.g. a themed subtree. */
69// … truncated