{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "ai-input-005",
  "dependencies": [
    "lucide-react",
    "motion",
    "next-themes",
    "react-icons"
  ],
  "files": [
    {
      "path": "src/components/watermelon-ui/ai-input-005.tsx",
      "content": "\"use client\";\n\nimport React, { useState, useRef, useEffect, useCallback } from \"react\";\nimport { ArrowUp, Square } from \"lucide-react\";\nimport { motion, AnimatePresence } from \"motion/react\";\nimport { IoBookOutline } from \"react-icons/io5\";\nimport { useTheme } from \"next-themes\";\n\nexport interface MessageInput {\n  id: string;\n  role: \"user\" | \"assistant\";\n  content: string;\n  isThinking?: boolean;\n}\n\nexport const ThinkingMode = {\n  NORMAL: \"NORMAL\",\n  DEEP: \"DEEP\",\n} as const;\n\nexport type ThinkingMode = (typeof ThinkingMode)[keyof typeof ThinkingMode];\n\nexport interface AiInput005Props {\n  messages: MessageInput[];\n  onSend: (text: string, mode: ThinkingMode) => void;\n  isProcessing: boolean;\n}\n\nexport const AiInput005: React.FC<AiInput005Props> = ({\n  messages,\n  onSend,\n  isProcessing,\n}) => {\n  const [inputValue, setInputValue] = useState(\"\");\n  const [thinkingMode, setThinkingMode] = useState<ThinkingMode>(\n    ThinkingMode.NORMAL\n  );\n  const [isFocused, setIsFocused] = useState(false);\n  const { theme } = useTheme();\n\n  const isDark = theme === \"dark\";\n\n  const textareaRef = useRef<HTMLTextAreaElement>(null);\n  const chatEndRef = useRef<HTMLDivElement>(null);\n\n  const scrollToBottom = useCallback(() => {\n    chatEndRef.current?.scrollIntoView({ behavior: \"smooth\" });\n  }, []);\n\n  useEffect(() => {\n    scrollToBottom();\n  }, [messages, scrollToBottom]);\n\n  useEffect(() => {\n    if (textareaRef.current) {\n      textareaRef.current.style.height = \"auto\";\n      textareaRef.current.style.height = `${Math.min(\n        textareaRef.current.scrollHeight,\n        200\n      )}px`;\n    }\n  }, [inputValue]);\n\n  const handleSend = () => {\n    if (!inputValue.trim() || isProcessing) return;\n\n    onSend(inputValue.trim(), thinkingMode);\n    setInputValue(\"\");\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    if (e.key === \"Enter\" && !e.shiftKey) {\n      e.preventDefault();\n      handleSend();\n    }\n  };\n\n  return (\n    <div className=\"relative flex h-full min-h-screen w-full flex-col overflow-hidden bg-white font-sans text-neutral-900 antialiased selection:bg-black/10 dark:bg-[#000000] dark:text-white dark:selection:bg-white/10\">\n      <div className=\"pointer-events-none absolute inset-0 z-0 overflow-hidden\">\n        <div className=\"absolute top-0 left-1/2 h-[600px] w-[100px] -translate-x-1/2 rounded-full bg-blue-500/10 opacity-50 blur-[120px] dark:bg-blue-500/5\" />\n      </div>\n\n      {/* Messages Scroll Area */}\n      <div className=\"no-scrollbar relative z-10 flex-1 overflow-y-auto px-6\">\n        <div className=\"mx-auto w-full max-w-3xl pt-14 pb-40\">\n          <AnimatePresence initial={false}>\n            {messages.length === 0 ? (\n              <motion.div\n                initial={{ opacity: 0, scale: 0.95 }}\n                animate={{ opacity: 1, scale: 1 }}\n                className=\"flex min-h-[300px] flex-col items-center justify-center space-y-4\"\n              ></motion.div>\n            ) : (\n              messages.map((message) => (\n                <motion.div\n                  key={message.id}\n                  initial={{ opacity: 0, y: 12 }}\n                  animate={{ opacity: 1, y: 0 }}\n                  transition={{ duration: 0.4, ease: [0.19, 1, 0.22, 1] }}\n                  className={`mb-8 flex ${\n                    message.role === \"user\" ? \"justify-end\" : \"justify-start\"\n                  }`}\n                >\n                  <div\n                    className={`max-w-[85%] rounded-[14px] px-4 py-2 text-[15px] leading-[1.6] ${\n                      message.role === \"user\"\n                        ? \"bg-neutral-100 font-medium dark:bg-[#121212]\"\n                        : \"bg-neutral-100 font-medium dark:bg-[#121212]\"\n                    } `}\n                  >\n                    {message.isThinking ? (\n                      <div className=\"flex items-center gap-2\">\n                        <div className=\"relative\">\n                          <motion.span\n                            className=\"bg-clip-text text-base font-medium tracking-wide text-transparent\"\n                            style={{\n                              backgroundImage: isDark\n                                ? \"linear-gradient(90deg, #a3a3a3 0%, #a3a3a3 40%, #ffffff 50%, #a3a3a3 60%, #a3a3a3 100%)\"\n                                : \"linear-gradient(90deg, #525252 0%, #525252 40%, #000000 50%, #525252 60%, #525252 100%)\",\n                              backgroundSize: \"200% 100%\",\n                            }}\n                            animate={{ backgroundPositionX: [\"100%\", \"-100%\"] }}\n                            transition={{\n                              repeat: Infinity,\n                              duration: 2,\n                              ease: \"linear\",\n                            }}\n                          >\n                            Thinking...\n                          </motion.span>\n                        </div>\n                      </div>\n                    ) : (\n                      <div className=\"text-base whitespace-pre-wrap text-neutral-700 dark:text-neutral-500\">\n                        {message.content}\n                      </div>\n                    )}\n                  </div>\n                </motion.div>\n              ))\n            )}\n          </AnimatePresence>\n          <div ref={chatEndRef} />\n        </div>\n      </div>\n\n      <div className=\"pointer-events-none absolute right-0 bottom-0 left-0 z-20 bg-gradient-to-t from-white via-white/90 to-transparent px-4 pt-10 pb-8 dark:from-black dark:via-black/90\">\n        <div className=\"pointer-events-auto mx-auto w-full max-w-3xl\">\n          <motion.div\n            layout\n            initial={false}\n            className={`relative flex flex-col rounded-2xl border-[1.2px] shadow-none backdrop-blur-xl transition-all duration-300 dark:shadow-2xl ${\n              isFocused\n                ? \"border-neutral-300 bg-white dark:border-white/15 dark:bg-[#121212]\"\n                : \"border-neutral-200 bg-white/95 dark:border-white/8 dark:bg-[#0d0d0d]/95\"\n            } `}\n          >\n            {thinkingMode === ThinkingMode.DEEP && (\n              <motion.div\n                layoutId=\"active-line\"\n                className=\"absolute top-0 right-8 left-8 h-[1px] bg-gradient-to-r from-transparent via-blue-500 to-transparent opacity-50\"\n              />\n            )}\n\n            <div className=\"flex flex-col px-0\">\n              <div className=\"mb-1 flex min-h-[24px] items-end gap-3 rounded-[16px] border-b border-neutral-200 bg-neutral-100 px-5 py-4 dark:border-[#121212] dark:bg-black/80\">\n                <textarea\n                  ref={textareaRef}\n                  rows={1}\n                  value={inputValue}\n                  onChange={(e) => setInputValue(e.target.value)}\n                  onKeyDown={handleKeyDown}\n                  onFocus={() => setIsFocused(true)}\n                  onBlur={() => setIsFocused(false)}\n                  placeholder=\"Ask anything...\"\n                  className=\"flex-1 resize-none overflow-hidden border-none bg-transparent py-1 text-[16px] leading-relaxed font-normal text-neutral-800 outline-none placeholder:text-neutral-400 dark:text-neutral-100 dark:placeholder:text-[#555]\"\n                  style={{ minHeight: \"28px\" }}\n                />\n\n                <AnimatePresence mode=\"popLayout\" initial={false}>\n                  {(inputValue.trim() || isProcessing) && (\n                    <motion.button\n                      key=\"send\"\n                      initial={{ scale: 0.8, opacity: 0 }}\n                      animate={{ scale: 1, opacity: 1 }}\n                      exit={{ scale: 0.8, opacity: 0 }}\n                      transition={{ type: \"spring\", bounce: 0, duration: 0.3 }}\n                      onClick={handleSend}\n                      disabled={isProcessing}\n                      className={`mb-1 flex items-center justify-center rounded-full p-1.5 ${\n                        isProcessing\n                          ? \"bg-neutral-900 text-neutral-100 dark:bg-neutral-800 dark:text-neutral-500\"\n                          : \"bg-black text-white dark:bg-white dark:text-black\"\n                      } `}\n                    >\n                      {isProcessing ? (\n                        <Square size={16} fill=\"currentColor\" />\n                      ) : (\n                        <ArrowUp size={18} strokeWidth={3} />\n                      )}\n                    </motion.button>\n                  )}\n                </AnimatePresence>\n              </div>\n\n              <div className=\"flex items-center justify-between px-4 py-2\">\n                <div className=\"flex items-center gap-1.5\">\n                  <motion.button\n                    whileTap={{ scale: 0.97 }}\n                    onClick={() =>\n                      setThinkingMode((prev) =>\n                        prev === ThinkingMode.DEEP\n                          ? ThinkingMode.NORMAL\n                          : ThinkingMode.DEEP\n                      )\n                    }\n                    className={`relative flex items-center gap-2 overflow-hidden rounded-full px-3 py-1.5 transition-all duration-300 ${\n                      thinkingMode === ThinkingMode.DEEP\n                        ? \" \"\n                        : \"text-neutral-500 hover:bg-black/[0.05] hover:text-neutral-900 dark:text-neutral-500 dark:hover:bg-white/[0.03] dark:hover:text-neutral-300\"\n                    }`}\n                  >\n                    <IoBookOutline\n                      size={14}\n                      className={`transition-colors duration-300 ${\n                        thinkingMode === ThinkingMode.DEEP\n                          ? \"text-blue-600 dark:text-blue-400\"\n                          : \"\"\n                      }`}\n                    />\n\n                    <div className=\"relative flex h-4 items-center overflow-hidden\">\n                      <AnimatePresence mode=\"wait\">\n                        {thinkingMode === ThinkingMode.DEEP ? (\n                          <motion.div\n                            key=\"deep\"\n                            initial={{ y: 10, opacity: 0 }}\n                            animate={{ y: 0, opacity: 1 }}\n                            exit={{ y: -10, opacity: 0 }}\n                            className=\"relative\"\n                          >\n                            {/* Base Text */}\n                            <span className=\"text-[13px] font-semibold whitespace-nowrap text-blue-600 dark:text-blue-100\">\n                              Deep Thinking Now\n                            </span>\n\n                            {/* Shimmer Effect overlay */}\n                            <motion.div\n                              initial={{ x: \"-100%\" }}\n                              animate={{ x: \"100%\" }}\n                              transition={{\n                                repeat: Infinity,\n                                duration: 1.5,\n                                ease: \"linear\",\n                              }}\n                              className=\"absolute inset-0 skew-x-[-20deg] bg-gradient-to-r from-transparent via-white/80 to-transparent dark:via-[#0C0C0C]\"\n                            />\n                          </motion.div>\n                        ) : (\n                          <motion.span\n                            key=\"normal\"\n                            initial={{ y: 10, opacity: 0 }}\n                            animate={{ y: 0, opacity: 1 }}\n                            exit={{ y: -10, opacity: 0 }}\n                            className=\"text-[13px] font-medium whitespace-nowrap\"\n                          >\n                            Try Deep Thinking\n                          </motion.span>\n                        )}\n                      </AnimatePresence>\n                    </div>\n                  </motion.button>\n                </div>\n\n                <div className=\"flex items-center gap-2 pr-1\">\n                  <span className=\"text-[12px] font-medium tracking-wider text-neutral-400 uppercase select-none dark:text-neutral-700\">\n                    AGI is here\n                  </span>\n                </div>\n              </div>\n            </div>\n          </motion.div>\n        </div>\n      </div>\n    </div>\n  );\n};\n",
      "type": "registry:ui",
      "target": "components/ui/ai-input-005.tsx"
    }
  ],
  "type": "registry:ui"
}