"use client"; import { Check, ChevronDown, Gauge, Image as ImageIcon, Rocket, Search, Sparkles, Zap, } from "lucide-react"; import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { cn } from "@/lib/utils"; import { Button } from "@/registry/new-york/ui/button"; import { CommandMenu, CommandMenuContent, CommandMenuInput, CommandMenuItem, CommandMenuList, CommandMenuSeparator, CommandMenuTrigger, useCommandMenu, useCommandMenuShortcut, } from "@/registry/new-york/ui/command-menu"; import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, } from "@/registry/new-york/ui/empty"; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "@/registry/new-york/ui/tooltip"; 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; ariaLabel: string; } const PROVIDER_CONFIGS: Record = { openai: { name: "OpenAI", ariaLabel: "OpenAI provider", icon: ( ), }, anthropic: { name: "Anthropic", ariaLabel: "Anthropic provider", icon: ( ), }, google: { name: "Google", ariaLabel: "Google provider", icon: ( ), }, meta: { name: "Meta", ariaLabel: "Meta provider", icon: ( ), }, mistral: { name: "Mistral", ariaLabel: "Mistral provider", 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", }; const DEFAULT_MODELS: AIModel[] = [ { 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: "gpt-4o-2024-11-20", name: "GPT-4o (2024-11-20)", provider: "openai", description: "Latest GPT-4o snapshot", features: ["fast", "multimodal", "long-context"], }, { id: "o1", name: "o1", provider: "openai", description: "Advanced reasoning", features: ["reasoning"], }, { id: "o1-preview", name: "o1 Preview", provider: "openai", description: "Advanced reasoning preview", features: ["reasoning"], isPreview: true, }, { id: "o1-mini", name: "o1 Mini", provider: "openai", description: "Fast reasoning", features: ["fast", "reasoning"], }, { id: "o1-mini-preview", name: "o1 Mini Preview", provider: "openai", description: "Fast reasoning preview", features: ["fast", "reasoning"], isPreview: true, }, { id: "gpt-4-turbo", name: "GPT-4 Turbo", provider: "openai", description: "High performance model", features: ["turbo", "multimodal", "long-context"], }, { id: "gpt-4-turbo-preview", name: "GPT-4 Turbo Preview", provider: "openai", description: "Latest GPT-4 Turbo", features: ["turbo", "multimodal", "long-context"], isPreview: true, }, { id: "gpt-4", name: "GPT-4", provider: "openai", description: "Original GPT-4 model", features: ["multimodal", "long-context"], }, { id: "gpt-4-32k", name: "GPT-4 32K", provider: "openai", description: "GPT-4 with extended context", features: ["long-context"], }, { id: "gpt-3.5-turbo", name: "GPT-3.5 Turbo", provider: "openai", description: "Fast and efficient", features: ["turbo"], }, { id: "gpt-3.5-turbo-16k", name: "GPT-3.5 Turbo 16K", provider: "openai", description: "GPT-3.5 with extended context", features: ["turbo", "long-context"], }, { 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.5-sonnet-20241022", name: "Claude 3.5 Sonnet (2024-10-22)", provider: "anthropic", description: "Latest Claude 3.5 Sonnet", features: ["fast", "multimodal"], }, { id: "claude-3.5-haiku", name: "Claude 3.5 Haiku", provider: "anthropic", description: "Fastest Claude model", 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-sonnet", name: "Claude 3 Sonnet", provider: "anthropic", description: "Balanced Claude 3", features: ["multimodal", "long-context"], }, { id: "claude-3-haiku", name: "Claude 3 Haiku", provider: "anthropic", description: "Fast and cost-effective", features: ["fast", "multimodal"], }, { id: "claude-3-5-sonnet-20240620", name: "Claude 3.5 Sonnet (2024-06-20)", provider: "anthropic", description: "Claude 3.5 Sonnet snapshot", features: ["fast", "multimodal"], }, { id: "gemini-2.0-pro", name: "Gemini 2.0 Pro", provider: "google", description: "Advanced capabilities", features: ["multimodal", "long-context"], isPreview: true, }, { id: "gemini-2.0-flash", name: "Gemini 2.0 Flash", provider: "google", description: "Fast Gemini 2.0", features: ["fast", "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-pro-latest", name: "Gemini 1.5 Pro Latest", provider: "google", description: "Latest Gemini 1.5 Pro", 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-1.5-flash-8b", name: "Gemini 1.5 Flash 8B", provider: "google", description: "Lightweight Flash model", features: ["fast", "multimodal"], }, { id: "gemini-1.0-pro", name: "Gemini 1.0 Pro", provider: "google", description: "Original Gemini Pro", features: ["multimodal"], }, { id: "gemini-ultra", name: "Gemini Ultra", provider: "google", description: "Most capable model", features: ["reasoning", "multimodal", "long-context"], isPreview: true, }, { 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.1-8b", name: "Llama 3.1 8B", provider: "meta", description: "Lightweight model", features: ["fast"], }, { id: "llama-3.2", name: "Llama 3.2", provider: "meta", description: "Latest open source", features: ["fast"], isNew: true, }, { id: "llama-3.2-3b", name: "Llama 3.2 3B", provider: "meta", description: "Ultra-lightweight", features: ["fast"], isNew: true, }, { id: "llama-3.2-1b", name: "Llama 3.2 1B", provider: "meta", description: "Smallest Llama model", features: ["fast"], isNew: true, }, { id: "llama-3-70b", name: "Llama 3 70B", provider: "meta", description: "Llama 3 base model", features: ["fast"], }, { id: "llama-3-8b", name: "Llama 3 8B", provider: "meta", description: "Llama 3 lightweight", features: ["fast"], }, { id: "mistral-large", name: "Mistral Large", provider: "mistral", description: "High performance", features: ["fast", "long-context"], }, { id: "mistral-large-2407", name: "Mistral Large 2407", provider: "mistral", description: "Mistral Large snapshot", features: ["fast", "long-context"], }, { id: "mistral-large-2402", name: "Mistral Large 2402", provider: "mistral", description: "Mistral Large snapshot", 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"], }, { id: "mistral-small-2402", name: "Mistral Small 2402", provider: "mistral", description: "Mistral Small snapshot", features: ["fast"], }, { id: "mistral-tiny", name: "Mistral Tiny", provider: "mistral", description: "Ultra-fast model", features: ["fast"], }, { id: "pixtral-large", name: "Pixtral Large", provider: "mistral", description: "Multimodal vision model", features: ["multimodal", "long-context"], isNew: true, }, { id: "pixtral-12b", name: "Pixtral 12B", provider: "mistral", description: "Efficient vision model", features: ["fast", "multimodal"], isNew: true, }, ]; export interface AIModelSelectorProps { models?: AIModel[]; selectedModelId?: string; onModelSelect?: (model: AIModel) => void; trigger?: React.ReactNode; className?: string; isLoading?: boolean; } interface ModelFeatureBadgeProps { feature: ModelFeature; } function ModelFeatureBadge({ feature }: ModelFeatureBadgeProps) { return (

{FEATURE_ICONS[feature]}

{FEATURE_LABELS[feature]}

); } interface ModelBadgeProps { label: string; variant: "new" | "preview"; } function ModelBadge({ label, variant }: ModelBadgeProps) { return ( {label} ); } interface ModelItemProps { model: AIModel; isSelected: boolean; index: number; onSelect: () => void; } function ModelItem({ model, isSelected, index, onSelect }: ModelItemProps) { return (

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

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

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

); } interface ProviderGroupHeaderProps { provider: AIProvider; } function ProviderGroupHeader({ provider }: ProviderGroupHeaderProps) { const config = PROVIDER_CONFIGS[provider]; return (

{config.name}

); } interface EmptyStateProps { searchQuery: string; } function EmptyState({ searchQuery }: EmptyStateProps) { return ( {searchQuery ? "No models found" : "No models available"} {searchQuery ? `No models match "${searchQuery}". Try a different search term.` : "There are no AI models available at this time."} ); } interface ModelListProps { models: AIModel[]; selectedModelId?: string; onSelect: (model: AIModel) => void; isLoading: boolean; } function ModelList({ models, selectedModelId, onSelect, isLoading, }: ModelListProps) { const { value: searchValue } = useCommandMenu(); const filteredModels = useMemo(() => { if (!searchValue.trim()) return models; const query = searchValue.toLowerCase().trim(); 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) || model.features?.some((feature) => FEATURE_LABELS[feature].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( ([, providerModels]) => providerModels.length > 0 ) as [AIProvider, AIModel[]][]; }, [filteredModels]); if (isLoading) { return (

Loading models…

); } if (groupedModels.length === 0) { return ; } return ( <> {groupedModels.map(([provider, providerModels], groupIndex) => { const globalStartIndex = filteredModels.findIndex( (m) => m.provider === provider ); return (

{groupIndex > 0 && } {providerModels.map((model, modelIndex) => { const globalIndex = globalStartIndex + modelIndex; return ( onSelect(model)} /> ); })}

); })} ); } interface DefaultTriggerProps { selectedModel: AIModel | undefined; className?: string; onClick?: () => void; } function DefaultTrigger({ selectedModel, className, onClick, }: DefaultTriggerProps) { return ( ); } export default function AIModelSelector({ models = DEFAULT_MODELS, selectedModelId, onModelSelect, trigger, className, isLoading = false, }: AIModelSelectorProps) { const [open, setOpen] = useState(false); const searchInputRef = useRef(null); useCommandMenuShortcut( useCallback(() => { setOpen((prev) => !prev); }, []) ); useEffect(() => { if (open && searchInputRef.current) { setTimeout(() => { searchInputRef.current?.focus(); }, 100); } }, [open]); const selectedModel = useMemo( () => models.find((m) => m.id === selectedModelId), [models, selectedModelId] ); const handleSelect = useCallback( (model: AIModel) => { onModelSelect?.(model); setOpen(false); }, [onModelSelect] ); const handleOpenChange = useCallback((newOpen: boolean) => { setOpen(newOpen); }, []); const handleTriggerClick = useCallback(() => { setOpen(true); }, []); return ( {trigger ? ( {trigger} ) : ( )} ); }

Example Usage