{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "select-ai-agent",
  "type": "registry:component",
  "title": "Select AI Agent",
  "description": "Choose an AI agent quickly with options and smooth feedback.",
  "dependencies": [
    "@hugeicons/core-free-icons",
    "@hugeicons/react",
    "lucide-react",
    "motion"
  ],
  "files": [
    {
      "path": "components/watermelon/select-ai-agent.tsx",
      "type": "registry:component",
      "content": "'use client';\n\nimport React, { useState } from 'react';\nimport { motion, AnimatePresence, LayoutGroup } from 'motion/react';\nimport { ArrowRight, ChevronUp, ChevronDown } from 'lucide-react';\nimport { HugeiconsIcon } from '@hugeicons/react';\nimport {\n  ChatGptIcon,\n  ClaudeIcon,\n  GoogleGeminiIcon,\n} from '@hugeicons/core-free-icons';\n\nexport interface AIAgent {\n  id: string;\n  name: string;\n  icon: React.ReactNode;\n}\n\ninterface SelectAIAgentProps {\n  agents?: AIAgent[];\n  onSendMessage?: (message: string, agentId: string) => void;\n  className?: string;\n}\n\nconst AGENTS = [\n  {\n    id: 'chatgpt',\n    name: 'Chatgpt',\n    icon: (\n      <HugeiconsIcon\n        icon={ChatGptIcon}\n        size={24}\n        color=\"currentColor\"\n        strokeWidth={1.5}\n      />\n    ),\n  },\n  {\n    id: 'gemini',\n    name: 'Gemini',\n    icon: (\n      <HugeiconsIcon\n        icon={GoogleGeminiIcon}\n        size={24}\n        color=\"currentColor\"\n        strokeWidth={1.5}\n      />\n    ),\n  },\n  {\n    id: 'claude',\n    name: 'Claude',\n    icon: (\n      <HugeiconsIcon\n        icon={ClaudeIcon}\n        size={24}\n        color=\"currentColor\"\n        strokeWidth={1.5}\n      />\n    ),\n  },\n];\n\nexport const SelectAIAgent: React.FC<SelectAIAgentProps> = ({\n  agents = AGENTS,\n  onSendMessage,\n  className = '',\n}) => {\n  const [selectedAgent, setSelectedAgent] = useState<AIAgent>(agents[0]);\n  const [isMenuOpen, setIsMenuOpen] = useState(false);\n  const [message, setMessage] = useState('');\n  const [appType, setAppType] = useState<'Web App' | 'Mobile App'>('Web App');\n\n  return (\n    <div\n      className={`flex w-full flex-col items-center justify-center p-4 antialiased select-none sm:p-6 ${className}`}\n    >\n      <div className=\"relative z-40 w-full max-w-[95%] sm:max-w-110\">\n        <LayoutGroup>\n          <AnimatePresence>\n            {isMenuOpen && (\n              <motion.div\n                initial={{ opacity: 0, y: 10, filter: 'blur(8px)' }}\n                animate={{ opacity: 1, y: 0, filter: 'blur(0px)' }}\n                exit={{ opacity: 0, y: 20, filter: 'blur(8px)' }}\n                transition={{\n                  type: 'spring',\n                  stiffness: 400,\n                  damping: 30,\n                  mass: 0.8,\n                }}\n                className=\"absolute -top-16 left-0 z-0 flex w-fit origin-bottom-left gap-1 rounded-full border-[1.6px] border-[#E8E7ED] bg-white/90 p-1.5 backdrop-blur-xl sm:gap-2 dark:border-white/10 dark:bg-neutral-900/95\"\n              >\n                {agents.map((agent) => (\n                  <button\n                    key={agent.id}\n                    onClick={() => {\n                      setSelectedAgent(agent);\n                      setIsMenuOpen(false);\n                    }}\n                    className={`flex h-10 w-10 shrink-0 items-center justify-center rounded-full transition-all active:scale-95 sm:h-11 sm:w-11 dark:brightness-150 ${\n                      selectedAgent.id === agent.id\n                        ? 'border-[1.8px] border-[#E9E8EB] bg-white shadow-sm dark:border-white/20 dark:bg-white'\n                        : 'text-neutral-500 hover:bg-neutral-50 dark:text-neutral-400 dark:hover:bg-white/5'\n                    }`}\n                  >\n                    <div className=\"scale-110 sm:scale-125\">{agent.icon}</div>\n                  </button>\n                ))}\n              </motion.div>\n            )}\n          </AnimatePresence>\n\n          <motion.div\n            layout\n            className=\"rounded-[28px] border border-[#E8E7EF]/70 bg-neutral-100 p-4 shadow-sm transition-all sm:rounded-[36px] sm:p-5 dark:border-white/10 dark:bg-neutral-900\"\n          >\n            <div className=\"flex items-start gap-3 sm:gap-4\">\n              <motion.button\n                layoutId={`agent-${selectedAgent.id}`}\n                onClick={() => setIsMenuOpen(!isMenuOpen)}\n                className=\"mt-1 flex h-8 w-8 shrink-0 cursor-pointer items-center justify-center\"\n              >\n                <div className=\"dark:brightness- scale-[1.4] text-neutral-800 sm:scale-[1.6] dark:text-neutral-100 dark:brightness-125\">\n                  {selectedAgent.icon}\n                </div>\n              </motion.button>\n\n              <div className=\"ml-1 flex h-14 flex-1 flex-col gap-3 sm:h-18 sm:gap-5\">\n                <input\n                  type=\"text\"\n                  placeholder=\"Start a new project\"\n                  value={message}\n                  onChange={(e) => setMessage(e.target.value)}\n                  className=\"w-full border-none bg-transparent pt-1 text-lg font-medium text-black outline-none placeholder:text-[#C6C5CA] sm:text-[20px] dark:text-white dark:placeholder:text-neutral-600\"\n                />\n              </div>\n            </div>\n\n            <div className=\"mt-6 flex w-full items-center justify-between sm:mt-8\">\n              <motion.button\n                onClick={() =>\n                  setAppType((t) =>\n                    t === 'Web App' ? 'Mobile App' : 'Web App',\n                  )\n                }\n                className=\"flex items-center gap-2 overflow-hidden rounded-full border-[1.8px] border-[#E8E7EF] bg-white px-4 py-1.5 shadow-xs transition-all hover:bg-neutral-50 active:scale-95 sm:px-5 sm:py-2 dark:border-white/5 dark:bg-neutral-800 dark:hover:bg-neutral-800/50\"\n              >\n                <div className=\"relative h-5 overflow-hidden sm:h-6\">\n                  <AnimatedText\n                    text={appType}\n                    className=\"text-sm font-semibold whitespace-nowrap text-[#535256] sm:text-base dark:text-neutral-300\"\n                  />\n                </div>\n\n                <motion.div\n                  layout\n                  transition={{\n                    type: 'spring',\n                    stiffness: 260,\n                    damping: 26,\n                  }}\n                  className=\"flex flex-col -space-y-1 text-[#BDBCC3] dark:text-neutral-600\"\n                >\n                  <ChevronUp size={14} strokeWidth={3} />\n                  <ChevronDown size={14} strokeWidth={3} />\n                </motion.div>\n              </motion.button>\n\n              <button\n                title=\"send\"\n                onClick={() => onSendMessage?.(message, selectedAgent.id)}\n                className=\"flex h-10 w-10 items-center justify-center rounded-full bg-neutral-900 text-white shadow-md transition-all hover:scale-105 active:scale-90 sm:h-11 sm:w-11 dark:bg-white dark:text-black\"\n              >\n                <ArrowRight size={20} strokeWidth={2.5} />\n              </button>\n            </div>\n          </motion.div>\n        </LayoutGroup>\n      </div>\n    </div>\n  );\n};\n\nfunction AnimatedText({\n  text,\n  className,\n  delayStep = 0.014,\n}: {\n  text: string;\n  className?: string;\n  delayStep?: number;\n}) {\n  const chars = text.split('');\n\n  return (\n    <span className={className} style={{ display: 'inline-flex' }}>\n      <AnimatePresence mode=\"popLayout\" initial={false}>\n        <motion.span key={text} style={{ display: 'inline-flex ' }}>\n          {chars.map((char, i) => (\n            <motion.span\n              key={i}\n              initial={{\n                y: 10,\n                opacity: 0,\n                scale: 0.5,\n                filter: 'blur(2px)',\n              }}\n              animate={{\n                y: 0,\n                opacity: 1,\n                scale: 1,\n                filter: 'blur(0px)',\n              }}\n              exit={{\n                y: -10,\n                opacity: 0,\n                scale: 0.5,\n                filter: 'blur(2px)',\n              }}\n              transition={{\n                type: 'spring',\n                stiffness: 240,\n                damping: 16,\n                mass: 1.2,\n                delay: i * delayStep,\n              }}\n              style={{\n                display: 'inline-block',\n                whiteSpace: char === ' ' ? 'pre' : undefined,\n                willChange: 'transform',\n              }}\n            >\n              {char}\n            </motion.span>\n          ))}\n        </motion.span>\n      </AnimatePresence>\n    </span>\n  );\n}\n"
    }
  ]
}