AI Model Selector

1"use client";
2 
3import {
4  Check,
5  ChevronDown,
6  Gauge,
7  Image as ImageIcon,
8  Rocket,
9  Search,
10  Sparkles,
11  Zap,
12} from "lucide-react";
13import { useCallback, useEffect, useMemo, useRef, useState } from "react";
14import { cn } from "@/lib/utils";
15import { Button } from "@/registry/new-york/ui/button";
16import {
17  CommandMenu,
18  CommandMenuContent,
19  CommandMenuInput,
20  CommandMenuItem,
21  CommandMenuList,
22  CommandMenuSeparator,
23  CommandMenuTrigger,
24  useCommandMenu,
25  useCommandMenuShortcut,
26} from "@/registry/new-york/ui/command-menu";
27import {
28  Empty,
29  EmptyDescription,
30  EmptyHeader,
31  EmptyMedia,
32  EmptyTitle,
33} from "@/registry/new-york/ui/empty";
34import {
35  Tooltip,
36  TooltipContent,
37  TooltipProvider,
38  TooltipTrigger,
39} from "@/registry/new-york/ui/tooltip";
40 
41export type AIProvider = "openai" | "anthropic" | "google" | "meta" | "mistral";
42 
43export interface AIModel {
44  id: string;
45  name: string;
46  provider: AIProvider;
47  description?: string;
48  features?: ModelFeature[];
49  isNew?: boolean;
50  isPreview?: boolean;
51}
52 
53export type ModelFeature =
54  | "fast"
55  | "turbo"
56  | "reasoning"
57  | "multimodal"
58  | "long-context";
59 
60interface ProviderConfig {
61  name: string;
62  icon: React.ReactNode;
63  ariaLabel: string;
64}
65 
66const PROVIDER_CONFIGS: Record<AIProvider, ProviderConfig> = {
67  openai: {
68    name: "OpenAI",
69    ariaLabel: "OpenAI provider",
70    icon: (
71      <svg
72        aria-hidden="true"
73        className="size-4"
74        viewBox="0 0 512 512"
75        xmlns="http://www.w3.org/2000/svg"
76      >
77        <path
78// … truncated