52:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 53:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 54:T2efe,"use client"; import { ComponentProps, ReactNode, useMemo, useState } from "react"; import { BrainIcon, CodeIcon, EyeIcon, FileSearch2Icon, LanguagesIcon, LayersIcon, SpeechIcon, VariableIcon, VideoIcon, Wand2Icon, WrenchIcon, } from "lucide-react"; import { cn } from "@/lib/utils"; import { Swap } from "@/components/gsap/swap"; import { Button } from "@/components/ui/button"; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { ScrollArea } from "@/components/ui/scroll-area"; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"; type ModalCapability = | "vision" | "thinking" | "code" | "speech" | "search" | "tools" | "multimodal" | "video" | "math" | "multilingual" | "creativity"; export type ModalOption = { value: string; image: string; name: string; darkInvertImage?: boolean; description: string; capabilities: ModalCapability[]; }; type ModalSelectorProps = ComponentProps & { showCapabilities?: boolean; showDescription?: boolean; }; const modals: ModalOption[] = [ { value: "openai-gpt-4o", image: "https://unpkg.com/@lobehub/icons-static-svg@latest/icons/openai.svg", name: "GPT-4o", darkInvertImage: true, description: "Omni model supporting seamless text, audio, and vision integration.", capabilities: ["vision", "code", "speech", "tools", "multimodal"], }, { value: "google-gemini-2-0-pro", image: "https://unpkg.com/@lobehub/icons-static-svg@latest/icons/gemini-color.svg", name: "Gemini 2.0 Pro", description: "Next-generation performance with ultra-long context windows.", capabilities: ["vision", "thinking", "speech", "tools", "video"], }, { value: "anthropic-claude-3-5-sonnet", image: "https://unpkg.com/@lobehub/icons-static-svg@latest/icons/claude-color.svg", name: "Claude 3.5 Sonnet", description: "Industry-leading intelligence with a focus on coding and nuance.", capabilities: ["thinking", "code", "vision", "tools"], }, { value: "xai-grok-3", image: "https://unpkg.com/@lobehub/icons-static-svg@latest/icons/grok.svg", name: "Grok-3", darkInvertImage: true, description: "Real-time information processing with enhanced logical reasoning.", capabilities: ["thinking", "search", "code"], }, { value: "deepseek-v3", image: "https://unpkg.com/@lobehub/icons-static-svg@latest/icons/deepseek-color.svg", name: "DeepSeek-V3", description: "High-performance Mixture-of-Experts model for advanced logic.", capabilities: ["thinking", "code", "math"], }, { value: "meta-llama-3-1-405b", image: "https://unpkg.com/@lobehub/icons-static-svg@latest/icons/meta-color.svg", name: "Llama 3.1 (405B)", description: "The premier open-source model for complex reasoning and scale.", capabilities: ["thinking", "code", "tools"], }, { value: "mistral-large-latest", image: "https://unpkg.com/@lobehub/icons-static-svg@latest/icons/mistral-color.svg", name: "Mistral Large", description: "European powerhouse optimized for multilingual reasoning.", capabilities: ["thinking", "code", "multilingual"], }, { value: "stability-sd3-ultra", image: "https://unpkg.com/@lobehub/icons-static-svg@latest/icons/stability-color.svg", name: "Stable Diffusion 3 Ultra", description: "State-of-the-art text-to-image with superior prompt adherence.", capabilities: ["vision", "creativity"], }, { value: "midjourney-v6-1", image: "https://unpkg.com/@lobehub/icons-static-svg@latest/icons/midjourney.svg", name: "Midjourney v6.1", darkInvertImage: true, description: "Highly aesthetic and photorealistic image generation.", capabilities: ["vision", "creativity"], }, { value: "perplexity-sonar-pro", image: "https://unpkg.com/@lobehub/icons-static-svg@latest/icons/perplexity-color.svg", name: "Sonar Pro", description: "Search-centric model designed for cited, real-time factual answers.", capabilities: ["search", "thinking"], }, ]; const CapabilityBadge = ({ capability }: { capability: ModalCapability }) => { const styles: Record = { thinking: { color: "bg-purple-500/10 hover:bg-purple-500/20 text-purple-500", text: "Thinking", icon: , }, code: { color: "bg-cyan-500/10 hover:bg-cyan-500/20 text-cyan-500", text: "Code", icon: , }, vision: { color: "bg-green-500/10 hover:bg-green-500/20 text-green-500", text: "Vision", icon: , }, creativity: { color: "bg-orange-500/10 hover:bg-orange-500/20 text-orange-500", text: "Creativity", icon: , }, search: { color: "bg-teal-500/10 hover:bg-teal-500/20 text-teal-500", text: "Search", icon: , }, speech: { color: "bg-pink-500/10 hover:bg-pink-500/20 text-pink-500", text: "Speech", icon: , }, tools: { color: "bg-blue-500/10 hover:bg-blue-500/20 text-blue-500", text: "Tools", icon: , }, video: { color: "bg-rose-500/10 hover:bg-rose-500/20 text-rose-500", text: "Video", icon: , }, multilingual: { color: "bg-amber-500/10 hover:bg-amber-500/20 text-amber-500", text: "Global", icon: , }, multimodal: { color: "bg-indigo-500/10 hover:bg-indigo-500/20 text-indigo-500", text: "Multimodal", icon: , }, math: { color: "bg-slate-500/10 hover:bg-slate-500/20 text-slate-500", text: "Math", icon: , }, }; const defaultStyle = { color: "bg-purple-500/10 hover:bg-purple-500/20 text-purple-500", text: "Thinking", icon: , }; const { color, text, icon } = styles[capability] ?? defaultStyle; return ( {icon}}>

{text}

); }; export const AiModalSelector = ({ showDescription = true, showCapabilities = true, variant = "outline", className, ...props }: ModalSelectorProps) => { const [selectedModal, setSelectedModal] = useState(modals[0].value); const selectedModalItem = useMemo(() => { return modals.find((item) => item.value === selectedModal) ?? modals[0]; }, [selectedModal]); return ( {(state) => (

{state.name}

{showCapabilities && (

{state.capabilities.map((capability) => ( ))}

)}

)} }>

{modals.map((item) => ( setSelectedModal(item.value)} className={cn("group relative cursor-pointer gap-3", { "bg-accent": selectedModal === item.value, })}> {`${item.name}

{item.name}

{showDescription && (

{item.description}

)}

{showCapabilities && (

{item.capabilities.map((capability) => ( ))}

)} ))}

); }; 51:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","gsap",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/gsap","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"gsap"}]]}]}],["$","li","@gsap/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40gsap%2Freact","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@gsap/react"}]]}]}]]}],["$","$L52",null,{"namespace":"@paceui-gsap","registryDependencies":["@paceui-gsap/swap","button"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"components/gsap/ai-modal-selector.tsx","content":"$54","type":"registry:ui","target":"~/components/gsap/ai-modal-selector.tsx"}],"className":"h-[70svh] min-h-80"}]]}]