"use client"; import { Check, ChevronDown, Gauge, Image as ImageIcon, Rocket, Sparkles, Zap, } from "lucide-react"; import { useMemo, useState } from "react"; import { Button } from "@/components/ui/button"; import { CommandMenu, CommandMenuContent, CommandMenuEmpty, CommandMenuInput, CommandMenuItem, CommandMenuList, CommandMenuSeparator, CommandMenuTrigger, useCommandMenuShortcut, } from "@/components/ui/command-menu"; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "@/components/ui/tooltip"; import { cn } from "@/lib/utils"; export type AIProvider = "openai" | "anthropic" | "google" | "meta" | "mistral"; export interface AIModel { id: string; name: string; provider: AIProvider; description?: string; features?: ModelFeature[]; isNew?: boolean; isPreview?: boolean; } export type ModelFeature = | "fast" | "turbo" | "reasoning" | "multimodal" | "long-context"; interface ProviderConfig { name: string; icon: React.ReactNode; } const PROVIDER_CONFIGS: Record = { openai: { name: "OpenAI", icon: ( ), }, anthropic: { name: "Anthropic", icon: ( ), }, google: { name: "Google", icon: ( ), }, meta: { name: "Meta", icon: ( ), }, mistral: { name: "Mistral", icon: ( ), }, }; const FEATURE_ICONS: Record = { fast: , turbo: , reasoning: , multimodal: , "long-context": , }; const FEATURE_LABELS: Record = { fast: "Fast", turbo: "Turbo", reasoning: "Reasoning", multimodal: "Multimodal", "long-context": "Long context", }; // Default models data const DEFAULT_MODELS: AIModel[] = [ // OpenAI { id: "gpt-4o", name: "GPT-4o", provider: "openai", description: "Most capable model", features: ["fast", "multimodal", "long-context"], }, { id: "gpt-4o-mini", name: "GPT-4o Mini", provider: "openai", description: "Fast and affordable", features: ["fast"], }, { id: "o1", name: "o1", provider: "openai", description: "Advanced reasoning", features: ["reasoning"], }, { id: "o1-mini", name: "o1 Mini", provider: "openai", description: "Fast reasoning", features: ["fast", "reasoning"], }, { id: "gpt-4-turbo", name: "GPT-4 Turbo", provider: "openai", description: "High performance model", features: ["turbo", "multimodal", "long-context"], }, { id: "gpt-3.5-turbo", name: "GPT-3.5 Turbo", provider: "openai", description: "Fast and efficient", features: ["turbo"], }, // Anthropic { id: "claude-4-opus", name: "Claude 4 Opus", provider: "anthropic", description: "Most capable model", features: ["reasoning", "multimodal", "long-context"], isPreview: true, }, { id: "claude-4-sonnet", name: "Claude 4 Sonnet", provider: "anthropic", description: "Balanced performance", features: ["fast", "multimodal", "long-context"], isPreview: true, }, { id: "claude-3.5-sonnet", name: "Claude 3.5 Sonnet", provider: "anthropic", description: "Fast and intelligent", features: ["fast", "multimodal"], }, { id: "claude-3-opus", name: "Claude 3 Opus", provider: "anthropic", description: "Most powerful model", features: ["reasoning", "multimodal", "long-context"], }, { id: "claude-3-haiku", name: "Claude 3 Haiku", provider: "anthropic", description: "Fast and cost-effective", features: ["fast", "multimodal"], }, // Google { id: "gemini-2.0-pro", name: "Gemini 2.0 Pro", provider: "google", description: "Advanced capabilities", features: ["multimodal", "long-context"], isPreview: true, }, { id: "gemini-1.5-pro", name: "Gemini 1.5 Pro", provider: "google", description: "Multimodal model", features: ["multimodal", "long-context"], }, { id: "gemini-1.5-flash", name: "Gemini 1.5 Flash", provider: "google", description: "Fast and efficient", features: ["fast", "multimodal", "long-context"], }, { id: "gemini-ultra", name: "Gemini Ultra", provider: "google", description: "Most capable model", features: ["reasoning", "multimodal", "long-context"], isPreview: true, }, // Meta { id: "llama-3.1-405b", name: "Llama 3.1 405B", provider: "meta", description: "Open source model", features: ["long-context"], }, { id: "llama-3.1-70b", name: "Llama 3.1 70B", provider: "meta", description: "Balanced performance", features: ["fast", "long-context"], }, { id: "llama-3.2", name: "Llama 3.2", provider: "meta", description: "Latest open source", features: ["fast"], isNew: true, }, // Mistral { id: "mistral-large", name: "Mistral Large", provider: "mistral", description: "High performance", features: ["fast", "long-context"], }, { id: "mistral-medium", name: "Mistral Medium", provider: "mistral", description: "Balanced capabilities", features: ["fast"], }, { id: "mistral-small", name: "Mistral Small", provider: "mistral", description: "Fast and efficient", features: ["fast"], }, ]; export interface AIModelSelectorProps { models?: AIModel[]; selectedModelId?: string; onModelSelect?: (model: AIModel) => void; trigger?: React.ReactNode; className?: string; } function ModelFeatureBadge({ feature }: { feature: ModelFeature }) { return (

{FEATURE_ICONS[feature]}

{FEATURE_LABELS[feature]}

); } function ModelItem({ model, isSelected, index, onSelect, }: { model: AIModel; isSelected: boolean; index: number; onSelect: () => void; }) { return (

{model.name} {model.isNew && ( New )} {model.isPreview && ( Preview )}

{model.description && ( {model.description} )}

{model.features?.map((feature) => ( ))} {isSelected && }

); } export default function AIModelSelector({ models = DEFAULT_MODELS, selectedModelId, onModelSelect, trigger, className, }: AIModelSelectorProps) { const [open, setOpen] = useState(false); const [searchValue, setSearchValue] = useState(""); useCommandMenuShortcut(() => { setOpen((prev) => !prev); }); const filteredModels = useMemo(() => { if (!searchValue.trim()) return models; const query = searchValue.toLowerCase(); return models.filter( (model) => model.name.toLowerCase().includes(query) || model.provider.toLowerCase().includes(query) || model.description?.toLowerCase().includes(query) || PROVIDER_CONFIGS[model.provider].name.toLowerCase().includes(query) ); }, [models, searchValue]); const groupedModels = useMemo(() => { const groups: Record = { openai: [], anthropic: [], google: [], meta: [], mistral: [], }; filteredModels.forEach((model) => { if (groups[model.provider]) { groups[model.provider].push(model); } }); return Object.entries(groups).filter(([, models]) => models.length > 0) as [ AIProvider, AIModel[], ][]; }, [filteredModels]); const selectedModel = models.find((m) => m.id === selectedModelId); const handleSelect = (model: AIModel) => { onModelSelect?.(model); setOpen(false); setSearchValue(""); }; return ( {trigger ? ( {trigger} ) : ( )} {groupedModels.length === 0 ? ( No models found. ) : ( groupedModels.map(([provider, providerModels], groupIndex) => { const providerConfig = PROVIDER_CONFIGS[provider]; return (

{groupIndex > 0 && }

{providerConfig.icon}

{providerConfig.name}

{providerModels.map((model, modelIndex) => { const globalIndex = filteredModels.indexOf(model); return ( handleSelect(model)} /> ); })}

); }) )} ); }

Example Usage