Modal Selector

1"use client";
2 
3import { ComponentProps, ReactNode, useMemo, useState } from "react";
4 
5import {
6    BrainIcon,
7    CodeIcon,
8    EyeIcon,
9    FileSearch2Icon,
10    LanguagesIcon,
11    LayersIcon,
12    SpeechIcon,
13    VariableIcon,
14    VideoIcon,
15    Wand2Icon,
16    WrenchIcon,
17} from "lucide-react";
18 
19import { cn } from "@/lib/utils";
20 
21import { Swap } from "@/components/gsap/swap";
22import { Button } from "@/components/ui/button";
23import {
24    DropdownMenu,
25    DropdownMenuContent,
26    DropdownMenuItem,
27    DropdownMenuTrigger,
28} from "@/components/ui/dropdown-menu";
29import { ScrollArea } from "@/components/ui/scroll-area";
30import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
31 
32type ModalCapability =
33    | "vision"
34    | "thinking"
35    | "code"
36    | "speech"
37    | "search"
38    | "tools"
39    | "multimodal"
40    | "video"
41    | "math"
42    | "multilingual"
43    | "creativity";
44 
45export type ModalOption = {
46    value: string;
47    image: string;
48    name: string;
49    darkInvertImage?: boolean;
50    description: string;
51    capabilities: ModalCapability[];
52};
53 
54type ModalSelectorProps = ComponentProps<typeof Button> & {
55    showCapabilities?: boolean;
56    showDescription?: boolean;
57};
58 
59const modals: ModalOption[] = [
60    {
61        value: "openai-gpt-4o",
62        image: "https://unpkg.com/@lobehub/icons-static-svg@latest/icons/openai.svg",
63        name: "GPT-4o",
64        darkInvertImage: true,
65        description: "Omni model supporting seamless text, audio, and vision integration.",
66        capabilities: ["vision", "code", "speech", "tools", "multimodal"],
67    },
68    {
69        value: "google-gemini-2-0-pro",
70        image: "https://unpkg.com/@lobehub/icons-static-svg@latest/icons/gemini-color.svg",
71        name: "Gemini 2.0 Pro",
72        description: "Next-generation performance with ultra-long context windows.",
73        capabilities: ["vision", "thinking", "speech", "tools", "video"],
74    },
75    {
76        value: "anthropic-claude-3-5-sonnet",
77        image: "https://unpkg.com/@lobehub/icons-static-svg@latest/icons/claude-color.svg",
78        name: "Claude 3.5 Sonnet",
79        description: "Industry-leading intelligence with a focus on coding and nuance.",
80        capabilities: ["thinking", "code", "vision", "tools"],
81    },
82    {
83        value: "xai-grok-3",
84        image: "https://unpkg.com/@lobehub/icons-static-svg@latest/icons/grok.svg",
85        name: "Grok-3",
86        darkInvertImage: true,
87// … truncated