61: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 62: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 63:T2fe9,"use client"; import React, { useState, useRef, useEffect, useCallback } from "react"; import { ArrowUp, Square } from "lucide-react"; import { motion, AnimatePresence } from "motion/react"; import { IoBookOutline } from "react-icons/io5"; import { useTheme } from "next-themes"; export interface MessageInput { id: string; role: "user" | "assistant"; content: string; isThinking?: boolean; } export const ThinkingMode = { NORMAL: "NORMAL", DEEP: "DEEP", } as const; export type ThinkingMode = (typeof ThinkingMode)[keyof typeof ThinkingMode]; export interface AiInput005Props { messages: MessageInput[]; onSend: (text: string, mode: ThinkingMode) => void; isProcessing: boolean; } export const AiInput005: React.FC = ({ messages, onSend, isProcessing, }) => { const [inputValue, setInputValue] = useState(""); const [thinkingMode, setThinkingMode] = useState( ThinkingMode.NORMAL ); const [isFocused, setIsFocused] = useState(false); const { theme } = useTheme(); const isDark = theme === "dark"; const textareaRef = useRef(null); const chatEndRef = useRef(null); const scrollToBottom = useCallback(() => { chatEndRef.current?.scrollIntoView({ behavior: "smooth" }); }, []); useEffect(() => { scrollToBottom(); }, [messages, scrollToBottom]); useEffect(() => { if (textareaRef.current) { textareaRef.current.style.height = "auto"; textareaRef.current.style.height = `${Math.min( textareaRef.current.scrollHeight, 200 )}px`; } }, [inputValue]); const handleSend = () => { if (!inputValue.trim() || isProcessing) return; onSend(inputValue.trim(), thinkingMode); setInputValue(""); }; const handleKeyDown = (e: React.KeyboardEvent) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); handleSend(); } }; return (

{/* Messages Scroll Area */}

{messages.length === 0 ? ( ) : ( messages.map((message) => (

{message.isThinking ? (

Thinking...

) : (

{message.content}

)}

)) )}

{thinkingMode === ThinkingMode.DEEP && ( )}

setInputValue(e.target.value)}
                  onKeyDown={handleKeyDown}
                  onFocus={() => setIsFocused(true)}
                  onBlur={() => setIsFocused(false)}
                  placeholder="Ask anything..."
                  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]"
                  style={{ minHeight: "28px" }}
                />

<AnimatePresence mode="popLayout" initial={false}>
                  {(inputValue.trim() || isProcessing) && (
                    <motion.button
                      key="send"
                      initial={{ scale: 0.8, opacity: 0 }}
                      animate={{ scale: 1, opacity: 1 }}
                      exit={{ scale: 0.8, opacity: 0 }}
                      transition={{ type: "spring", bounce: 0, duration: 0.3 }}
                      onClick={handleSend}
                      disabled={isProcessing}
                      className={`mb-1 flex items-center justify-center rounded-full p-1.5 ${
                        isProcessing
                          ? "bg-neutral-900 text-neutral-100 dark:bg-neutral-800 dark:text-neutral-500"
                          : "bg-black text-white dark:bg-white dark:text-black"
                      } `}
                    >
                      {isProcessing ? (
                        <Square size={16} fill="currentColor" />
                      ) : (
                        <ArrowUp size={18} strokeWidth={3} />
                      )}
                    </motion.button>
                  )}
                </AnimatePresence>
              </div>

<div className="flex items-center justify-between px-4 py-2">
                <div className="flex items-center gap-1.5">
                  <motion.button
                    whileTap={{ scale: 0.97 }}
                    onClick={() =>
                      setThinkingMode((prev) =>
                        prev === ThinkingMode.DEEP
                          ? ThinkingMode.NORMAL
                          : ThinkingMode.DEEP
                      )
                    }
                    className={`relative flex items-center gap-2 overflow-hidden rounded-full px-3 py-1.5 transition-all duration-300 ${
                      thinkingMode === ThinkingMode.DEEP
                        ? " "
                        : "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"
                    }`}
                  >
                    <IoBookOutline
                      size={14}
                      className={`transition-colors duration-300 ${
                        thinkingMode === ThinkingMode.DEEP
                          ? "text-blue-600 dark:text-blue-400"
                          : ""
                      }`}
                    />

<div className="relative flex h-4 items-center overflow-hidden">
                      <AnimatePresence mode="wait">
                        {thinkingMode === ThinkingMode.DEEP ? (
                          <motion.div
                            key="deep"
                            initial={{ y: 10, opacity: 0 }}
                            animate={{ y: 0, opacity: 1 }}
                            exit={{ y: -10, opacity: 0 }}
                            className="relative"
                          >
                            {/* Base Text */}
                            <span className="text-[13px] font-semibold whitespace-nowrap text-blue-600 dark:text-blue-100">
                              Deep Thinking Now
                            </span>

{/* Shimmer Effect overlay */}
                            <motion.div
                              initial={{ x: "-100%" }}
                              animate={{ x: "100%" }}
                              transition={{
                                repeat: Infinity,
                                duration: 1.5,
                                ease: "linear",
                              }}
                              className="absolute inset-0 skew-x-[-20deg] bg-gradient-to-r from-transparent via-white/80 to-transparent dark:via-[#0C0C0C]"
                            />
                          </motion.div>
                        ) : (
                          <motion.span
                            key="normal"
                            initial={{ y: 10, opacity: 0 }}
                            animate={{ y: 0, opacity: 1 }}
                            exit={{ y: -10, opacity: 0 }}
                            className="text-[13px] font-medium whitespace-nowrap"
                          >
                            Try Deep Thinking
                          </motion.span>
                        )}
                      </AnimatePresence>
                    </div>
                  </motion.button>
                </div>

<div className="flex items-center gap-2 pr-1">
                  <span className="text-[12px] font-medium tracking-wider text-neutral-400 uppercase select-none dark:text-neutral-700">
                    AGI is here
                  </span>
                </div>
              </div>
            </div>
          </motion.div>
        </div>
      </div>
    </div>
  );
};
60:["$","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","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","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":"lucide-react"}]]}]}],["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","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":"motion"}]]}]}],["$","li","next-themes",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/next-themes","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":"next-themes"}]]}]}],["$","li","react-icons",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/react-icons","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":"react-icons"}]]}]}]]}],["$","$L61",null,{"namespace":"@watermelon","registryDependencies":[]}]]}],null]}],["$","$L62",null,{"files":[{"path":"src/components/watermelon-ui/ai-input-005.tsx","content":"$63","type":"registry:ui","target":"components/ui/ai-input-005.tsx"}],"className":"h-[70svh] min-h-80"}]]}]
</article></body></html>