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:T2ed6,"use client"; import React, { useState, useRef, useEffect } from "react"; import { motion, AnimatePresence } from "motion/react"; import { Plus, Globe, ChevronDown, Send, Image as ImageIcon, FileText, Layers, Sparkles, Cpu, Zap, } from "lucide-react"; import { LuBrain } from "react-icons/lu"; import { PiLightbulbFilament } from "react-icons/pi"; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; export interface Message { id: string; text: string; sender: "user" | "ai"; } interface Model { id: string; name: string; icon: React.ReactNode; } interface AIInputProps { messages?: Message[]; onSendMessage?: (text: string, modelId: string) => void; models?: Model[]; backgroundText?: string; placeholder?: string; } const DEFAULT_MODELS: Model[] = [ { id: "gpt-4o", name: "GPT-4o", icon: , }, { id: "claude-3-5", name: "Claude 3.5 Sonnet", icon: , }, { id: "gemini-pro", name: "Gemini Pro", icon: }, { id: "llama-3-1", name: "Llama 3.1", icon: }, ]; export const AiInput: React.FC = ({ messages = [], onSendMessage = () => {}, models = DEFAULT_MODELS, backgroundText = "Skiper Input 001", placeholder = "Ask anything...", }) => { const hasMessages = messages.length > 0; const scrollRef = useRef(null); useEffect(() => { if (scrollRef.current) { scrollRef.current.scrollTop = scrollRef.current.scrollHeight; } }, [messages]); return (

{!hasMessages && (

{backgroundText}

)}

); }; const MessageList = ({ messages, scrollRef, }: { messages: Message[]; scrollRef: React.RefObject; }) => { if (!messages.length) return null; return (

{messages.map((msg) => (

{msg.text}

))}

); }; const ChatInput = ({ models, hasMessages, placeholder, onSend, }: { models: Model[]; hasMessages: boolean; placeholder: string; onSend: (text: string, modelId: string) => void; }) => { const [inputValue, setInputValue] = useState(""); const [selectedModel, setSelectedModel] = useState(models[0]); const [isSearchActive, setIsSearchActive] = useState(false); const [isDeepMindActive, setIsDeepMindActive] = useState(false); const textAreaRef = useRef(null); useEffect(() => { if (textAreaRef.current) { textAreaRef.current.style.height = "auto"; textAreaRef.current.style.height = `${textAreaRef.current.scrollHeight}px`; } }, [inputValue]); const handleSend = () => { if (!inputValue.trim()) return; onSend(inputValue, selectedModel.id); setInputValue(""); }; return (

setInputValue(e.target.value)}
          onKeyDown={(e) => {
            if (e.key === "Enter" && !e.shiftKey) {
              e.preventDefault();
              handleSend();
            }
          }}
          placeholder={placeholder}
          className="mb-2 max-h-[180px] min-h-[40px] w-full resize-none bg-transparent px-1 text-sm font-semibold text-neutral-700 outline-none placeholder:text-neutral-400 sm:max-h-[200px] sm:min-h-[44px] sm:px-2 sm:text-base dark:text-neutral-300 dark:placeholder:text-neutral-600"
          rows={1}
        />

<motion.button
              layout
              onClick={() => setIsSearchActive(!isSearchActive)}
              className={`flex items-center gap-2 rounded-lg border p-2 transition-all sm:p-2.5 ${
                isSearchActive
                  ? "border-sky-300 bg-sky-50 dark:border-sky-700 dark:bg-sky-950"
                  : "border-neutral-200 bg-neutral-100 dark:border-neutral-800 dark:bg-neutral-900"
              }`}
            >
              <Globe
                className={`h-4 w-4 sm:h-5 sm:w-5 ${
                  isSearchActive
                    ? "text-sky-600 dark:text-sky-400"
                    : "text-neutral-500 dark:text-neutral-400"
                }`}
              />
              <AnimatePresence>
                {isSearchActive && (
                  <motion.span
                    initial={{ opacity: 0, width: 0 }}
                    animate={{ opacity: 1, width: "auto" }}
                    exit={{ opacity: 0, width: 0 }}
                    className="hidden overflow-hidden text-sm font-medium whitespace-nowrap text-neutral-700 sm:inline dark:text-neutral-200"
                  >
                    Search
                  </motion.span>
                )}
              </AnimatePresence>
            </motion.button>

<motion.button
              layout
              onClick={() => setIsDeepMindActive(!isDeepMindActive)}
              className={`flex items-center gap-2 rounded-lg border p-2 transition-all sm:p-2.5 ${
                isDeepMindActive
                  ? "border-indigo-300 bg-indigo-50 dark:border-indigo-700 dark:bg-indigo-950"
                  : "border-neutral-200 bg-neutral-100 dark:border-neutral-800 dark:bg-neutral-900"
              }`}
            >
              <LuBrain
                className={`h-4 w-4 sm:h-5 sm:w-5 ${
                  isDeepMindActive
                    ? "text-indigo-600 dark:text-indigo-400"
                    : "text-neutral-500 dark:text-neutral-400"
                }`}
              />
              <AnimatePresence>
                {isDeepMindActive && (
                  <motion.span
                    initial={{ opacity: 0, width: 0 }}
                    animate={{ opacity: 1, width: "auto" }}
                    exit={{ opacity: 0, width: 0 }}
                    className="hidden overflow-hidden text-sm font-medium whitespace-nowrap text-neutral-700 sm:inline dark:text-neutral-200"
                  >
                    DeepMind
                  </motion.span>
                )}
              </AnimatePresence>
            </motion.button>

<button
            onClick={handleSend}
            disabled={!inputValue.trim()}
            className={`rounded-lg p-2 transition-colors sm:p-3 ${
              inputValue.trim()
                ? "bg-blue-600 text-white dark:bg-blue-500"
                : "cursor-not-allowed bg-neutral-200 text-neutral-400 dark:bg-neutral-800 dark:text-neutral-600"
            }`}
          >
            <Send className="h-4 w-4 sm:h-5 sm:w-5" />
          </button>
        </div>
      </motion.div>
    </motion.div>
  );
};

const ATTACHMENT_ITEMS = [
  { label: "Images", icon: ImageIcon },
  { label: "Documents", icon: FileText },
  { label: "Connect Apps", icon: Layers },
];

const AttachmentMenu = () => (
  <DropdownMenu>
    <DropdownMenuTrigger asChild>
      <button className="group rounded-lg border border-neutral-200 bg-neutral-100 p-2 text-neutral-500 sm:p-2.5 dark:border-neutral-800 dark:bg-neutral-900 dark:text-neutral-400">
        <Plus className="h-4 w-4 transition-transform duration-200 group-data-[state=open]:rotate-45 sm:h-5 sm:w-5" />
      </button>
    </DropdownMenuTrigger>

<DropdownMenuContent
      align="start"
      side="bottom"
      className="mt-5.5 w-44 rounded-xl border border-neutral-200 bg-white p-2 sm:w-48 dark:border-neutral-800 dark:bg-neutral-900"
    >
      {ATTACHMENT_ITEMS.map(({ label, icon: Icon }) => (
        <DropdownMenuItem
          key={label}
          className="flex items-center gap-2 p-2 text-sm text-neutral-700 dark:text-neutral-200"
        >
          <Icon className="h-4 w-4 shrink-0" />
          {label}
        </DropdownMenuItem>
      ))}
    </DropdownMenuContent>
  </DropdownMenu>
);

<DropdownMenuContent
      align="start"
      side="bottom"
      className="mt-5.5 w-48 rounded-xl border border-neutral-200 bg-white sm:w-52 dark:border-neutral-800 dark:bg-neutral-900"
    >
      {models.map((model) => (
        <DropdownMenuItem
          key={model.id}
          onClick={() => onSelect(model)}
          className="flex items-center gap-2 p-2 text-sm text-neutral-700 dark:text-neutral-200"
        >
          {model.icon}
          {model.name}
        </DropdownMenuItem>
      ))}
    </DropdownMenuContent>
  </DropdownMenu>
);
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","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":["dropdown-menu"]}]]}],null]}],["$","$L62",null,{"files":[{"path":"src/components/watermelon-ui/ai-input-002.tsx","content":"$63","type":"registry:ui","target":"components/ui/ai-input-002.tsx"}],"className":"h-[70svh] min-h-80"}]]}]
</article></body></html>