apex-ui-kit 2.2.0 → 2.3.0

package/dist/ApexUI-Kit/templates/AiChat/AiChat.jsx

@@ -0,0 +1,171 @@
+import React, { memo, useEffect, useRef, useState } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { ArrowUp, Bot, Sparkles } from "lucide-react";
+
+/*
+ * AI Chat: a compact chat window. Replies stream in word by word behind a
+ * typing indicator, suggestions fill the input, and the list keeps itself
+ * scrolled. Pass `onSend(text)` returning a string or a Promise of one to
+ * hook up your own model; without it the demo answers on its own.
+ */
+
+const DEMO_REPLIES = [
+    "Sure! Wrap your section in a container with `grid` and `gap-6`, then let the cards span two columns on large screens. Want me to write the code?",
+    "Great question. Animate only `transform` and `opacity` — they run on the GPU and never trigger layout, so the motion stays at 60fps.",
+    "Here's a quick idea: use a spring with stiffness 380 and damping 30. It feels snappy without bouncing too much.",
+];
+
+// One message row. Memoised so streaming only re-renders the last message.
+const Message = memo(function Message({ role, text, streaming, accentColor, bubbleAi }) {
+    const user = role === "user";
+    return (
+        <motion.div
+            initial={{ opacity: 0, y: 8 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.22, ease: [0.22, 1, 0.36, 1] }}
+            className={`flex items-end gap-2 ${user ? "justify-end" : "justify-start"}`}
+        >
+            {!user && (
+                <span className="mb-0.5 grid h-6 w-6 shrink-0 place-items-center rounded-lg text-black" style={{ background: accentColor }}>
+                    <Bot className="h-3.5 w-3.5" />
+                </span>
+            )}
+            <p
+                className={`max-w-[80%] whitespace-pre-wrap break-words rounded-2xl px-3.5 py-2.5 text-[0.88rem] leading-relaxed ${user ? "rounded-br-md text-black" : `rounded-bl-md ${bubbleAi}`}`}
+                style={user ? { background: accentColor } : undefined}
+            >
+                {text}
+                {streaming && <span className="ml-0.5 inline-block h-3.5 w-1.5 animate-pulse rounded-sm align-[-2px]" style={{ background: accentColor }} />}
+            </p>
+        </motion.div>
+    );
+});
+
+const AiChat = ({
+    title = "Apex Assistant",
+    greeting = "Hi! I can help you design, build and animate your UI. What are we making today?",
+    suggestions = ["Make a bento grid", "Smooth animations?", "Best spring settings"],
+    onSend,
+    accentColor = "#a3e635",
+    theme = "dark",
+    height = "30rem",
+    className = "",
+}) => {
+    const [messages, setMessages] = useState([{ role: "assistant", text: greeting }]);
+    const [input, setInput] = useState("");
+    const [busy, setBusy] = useState(false);
+    const listRef = useRef(null);
+    const demoIndex = useRef(0);
+    const dark = theme !== "light";
+
+    useEffect(() => {
+        listRef.current?.scrollTo({ top: listRef.current.scrollHeight, behavior: "smooth" });
+    }, [messages, busy]);
+
+    // Reveal a reply a few words at a time.
+    const stream = (full) =>
+        new Promise((resolve) => {
+            const words = full.split(" ");
+            let i = 0;
+            // Two words per tick reads naturally and halves the re-renders.
+            setMessages((m) => [...m, { role: "assistant", text: "", streaming: true }]);
+            const id = setInterval(() => {
+                i = Math.min(words.length, i + 2);
+                setMessages((m) => {
+                    const copy = [...m];
+                    copy[copy.length - 1] = { role: "assistant", text: words.slice(0, i).join(" "), streaming: i < words.length };
+                    return copy;
+                });
+                if (i >= words.length) {
+                    clearInterval(id);
+                    resolve();
+                }
+            }, 55);
+        });
+
+    const send = async (text) => {
+        const clean = text.trim();
+        if (!clean || busy) return;
+        setInput("");
+        setMessages((m) => [...m, { role: "user", text: clean }]);
+        setBusy(true);
+        try {
+            const reply = onSend ? await onSend(clean) : await new Promise((r) => setTimeout(() => r(DEMO_REPLIES[demoIndex.current++ % DEMO_REPLIES.length]), 900));
+            await stream(String(reply ?? ""));
+        } catch {
+            await stream("Sorry, something went wrong. Please try again.");
+        }
+        setBusy(false);
+    };
+
+    const panel = dark ? "border-white/10 bg-neutral-950 text-white" : "border-black/10 bg-white text-neutral-900";
+    const bubbleAi = dark ? "bg-white/[0.06]" : "bg-black/[0.04]";
+    const muted = dark ? "text-white/50" : "text-neutral-500";
+
+    return (
+        <div className={`flex w-full max-w-md flex-col overflow-hidden rounded-3xl border shadow-[0_30px_70px_-30px_rgba(0,0,0,0.6)] ${panel} ${className}`} style={{ height }}>
+            <header className={`flex items-center gap-3 border-b px-4 py-3 ${dark ? "border-white/10" : "border-black/10"}`}>
+                <span className="relative grid h-9 w-9 place-items-center rounded-xl text-black" style={{ background: accentColor }}>
+                    <Bot className="h-5 w-5" />
+                    <span className="absolute -bottom-0.5 -right-0.5 h-3 w-3 rounded-full border-2 border-current bg-emerald-400" style={{ borderColor: dark ? "#0a0a0a" : "#fff" }} />
+                </span>
+                <div>
+                    <p className="text-[0.9rem] font-semibold">{title}</p>
+                    <p className={`text-[0.72rem] ${muted}`}>{busy ? "Typing…" : "Online"}</p>
+                </div>
+            </header>
+
+            <div ref={listRef} className="flex-1 space-y-3 overflow-y-auto px-4 py-4" aria-live="polite">
+                {messages.map((m, i) => (
+                    <Message key={i} role={m.role} text={m.text} streaming={m.streaming} accentColor={accentColor} bubbleAi={bubbleAi} />
+                ))}
+                <AnimatePresence>
+                    {busy && messages[messages.length - 1]?.role === "user" && (
+                        <motion.div key="typing" initial={{ opacity: 0, y: 6 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0 }} className="flex items-end gap-2" aria-label="Assistant is typing">
+                            <span className="mb-0.5 grid h-6 w-6 shrink-0 place-items-center rounded-lg text-black" style={{ background: accentColor }}>
+                                <Bot className="h-3.5 w-3.5" />
+                            </span>
+                            <span className={`inline-flex h-9 items-center gap-1 rounded-2xl rounded-bl-md px-3.5 ${bubbleAi}`}>
+                                {[0, 1, 2].map((d) => (
+                                    <motion.span key={d} className="h-1.5 w-1.5 rounded-full bg-current" animate={{ y: [0, -3, 0], opacity: [0.35, 1, 0.35] }} transition={{ duration: 0.9, repeat: Infinity, delay: d * 0.15 }} />
+                                ))}
+                            </span>
+                        </motion.div>
+                    )}
+                </AnimatePresence>
+            </div>
+
+            {messages.length <= 1 && suggestions.length > 0 && (
+                <div className="flex flex-wrap gap-2 px-4 pb-3">
+                    {suggestions.map((s) => (
+                        <button key={s} type="button" onClick={() => send(s)} className={`inline-flex items-center gap-1 rounded-full border px-3 py-1.5 text-[0.75rem] transition ${dark ? "border-white/10 hover:border-white/25 hover:bg-white/[0.05]" : "border-black/10 hover:border-black/20 hover:bg-black/[0.03]"}`}>
+                            <Sparkles className="h-3 w-3" style={{ color: accentColor }} />
+                            {s}
+                        </button>
+                    ))}
+                </div>
+            )}
+
+            <form
+                onSubmit={(e) => {
+                    e.preventDefault();
+                    send(input);
+                }}
+                className={`flex items-center gap-2 border-t p-3 ${dark ? "border-white/10" : "border-black/10"}`}
+            >
+                <input
+                    value={input}
+                    onChange={(e) => setInput(e.target.value)}
+                    placeholder="Ask anything…"
+                    aria-label="Message"
+                    className={`h-11 flex-1 rounded-2xl px-4 text-[0.9rem] outline-none transition focus:ring-2 ${dark ? "bg-white/[0.06] placeholder:text-white/35 focus:ring-white/15" : "bg-black/[0.04] placeholder:text-neutral-400 focus:ring-black/10"}`}
+                />
+                <motion.button whileTap={{ scale: 0.9 }} type="submit" aria-label="Send" disabled={!input.trim() || busy} className="grid h-11 w-11 place-items-center rounded-2xl text-black transition disabled:opacity-40" style={{ background: accentColor }}>
+                    <ArrowUp className="h-5 w-5" />
+                </motion.button>
+            </form>
+        </div>
+    );
+};
+
+export default AiChat;

package/dist/ApexUI-Kit/templates/AiModelPrompt/AiModelPrompt.jsx

@@ -0,0 +1,221 @@
+import React, { useEffect, useId, useRef, useState } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { ArrowUp, Brain, Check, ChevronDown, Eye, SlidersHorizontal, Sparkles, Zap } from "lucide-react";
+import { DEFAULT_LLM_MODELS } from "./models.js";
+
+/*
+ * AI Model Prompt: a prompt composer with a model picker and per-model
+ * settings. Each model declares which settings it supports (temperature,
+ * max tokens, reasoning effort); the settings panel only shows those and
+ * remembers a configuration per model. Works controlled or on its own.
+ */
+
+const TAG_ICON = { reasoning: Brain, vision: Eye, fast: Zap };
+const TOKEN_OPTIONS = [1024, 4096, 8192, 32000];
+const defaultsFor = (model) => ({
+    ...(model?.settings?.temperature ? { temperature: 0.7 } : {}),
+    ...(model?.settings?.maxTokens ? { maxTokens: 4096 } : {}),
+    ...(model?.settings?.reasoning ? { reasoning: model.settings.reasoning[1] ?? model.settings.reasoning[0] } : {}),
+});
+
+// Close a popover on outside click or Escape.
+function useDismiss(open, setMenu, ref) {
+    useEffect(() => {
+        if (!open) return undefined;
+        const down = (e) => !ref.current?.contains(e.target) && setMenu(null);
+        const key = (e) => e.key === "Escape" && setMenu(null);
+        document.addEventListener("pointerdown", down);
+        document.addEventListener("keydown", key);
+        return () => {
+            document.removeEventListener("pointerdown", down);
+            document.removeEventListener("keydown", key);
+        };
+    }, [open, setMenu, ref]);
+}
+
+const AiModelPrompt = ({
+    models = DEFAULT_LLM_MODELS,
+    value,
+    onModelChange,
+    configurations,
+    onConfigurationChange,
+    prompt,
+    onPromptChange,
+    onSubmit,
+    placeholder = "Ask anything…",
+    accentColor = "#a3e635",
+    theme = "dark",
+    className = "",
+}) => {
+    const id = useId();
+    const [innerValue, setInnerValue] = useState(models[0]?.value);
+    const [innerConfigs, setInnerConfigs] = useState({});
+    const [innerPrompt, setInnerPrompt] = useState("");
+    const [menu, setMenu] = useState(null); // "models" | "settings" | null
+    const [sent, setSent] = useState(false);
+    const modelRef = useRef(null);
+    const settingsRef = useRef(null);
+    const dark = theme !== "light";
+
+    const current = models.find((m) => m.value === (value ?? innerValue)) ?? models[0];
+    const configs = configurations ?? innerConfigs;
+    const config = { ...defaultsFor(current), ...configs[current.value] };
+    const text = prompt ?? innerPrompt;
+
+    useDismiss(menu === "models", setMenu, modelRef);
+    useDismiss(menu === "settings", setMenu, settingsRef);
+
+    const pickModel = (m) => {
+        if (value === undefined) setInnerValue(m.value);
+        onModelChange?.(m);
+        setMenu(null);
+    };
+    const setConfig = (key, v) => {
+        const nextConfig = { ...config, [key]: v };
+        const next = { ...configs, [current.value]: nextConfig };
+        if (configurations === undefined) setInnerConfigs(next);
+        onConfigurationChange?.(current, nextConfig, next);
+    };
+    const setText = (t) => {
+        if (prompt === undefined) setInnerPrompt(t);
+        onPromptChange?.(t);
+    };
+    const submit = () => {
+        if (!text.trim()) return;
+        onSubmit?.({ model: current, configuration: config, prompt: text.trim() });
+        setText("");
+        setSent(true);
+        setTimeout(() => setSent(false), 1200);
+    };
+
+    const panel = dark ? "border-white/10 bg-neutral-900 text-white shadow-[0_20px_50px_-20px_rgba(0,0,0,0.8)]" : "border-black/10 bg-white text-neutral-900 shadow-[0_20px_50px_-20px_rgba(0,0,0,0.25)]";
+    const chip = dark ? "bg-white/[0.06] hover:bg-white/10" : "bg-black/[0.04] hover:bg-black/[0.07]";
+    const muted = dark ? "text-white/50" : "text-neutral-500";
+    const groups = [...new Set(models.map((m) => m.provider))];
+    const pop = { initial: { opacity: 0, y: 6, scale: 0.98 }, animate: { opacity: 1, y: 0, scale: 1 }, exit: { opacity: 0, y: 6, scale: 0.98 }, transition: { duration: 0.15, ease: [0.22, 1, 0.36, 1] } };
+
+    return (
+        <div className={`w-full max-w-2xl rounded-[1.6rem] border p-3 ${dark ? "border-white/10 bg-neutral-950 text-white" : "border-black/10 bg-white text-neutral-900"} ${className}`}>
+            <textarea
+                rows={3}
+                value={text}
+                onChange={(e) => setText(e.target.value)}
+                onKeyDown={(e) => {
+                    if (e.key === "Enter" && !e.shiftKey) {
+                        e.preventDefault();
+                        submit();
+                    }
+                }}
+                placeholder={placeholder}
+                aria-label="Prompt"
+                className={`block w-full resize-none bg-transparent px-2 py-1.5 text-[0.95rem] leading-relaxed outline-none ${dark ? "placeholder:text-white/35" : "placeholder:text-neutral-400"}`}
+            />
+
+            <div className="mt-2 flex items-center gap-2">
+                {/* Model picker */}
+                <div ref={modelRef} className="relative">
+                    <button type="button" aria-haspopup="listbox" aria-expanded={menu === "models"} onClick={() => setMenu((m) => (m === "models" ? null : "models"))} className={`inline-flex h-9 items-center gap-2 rounded-full pl-2 pr-3 text-[0.82rem] font-medium transition ${chip}`}>
+                        <span className="grid h-5 w-5 place-items-center rounded-full text-black" style={{ background: accentColor }}>
+                            <Sparkles className="h-3 w-3" />
+                        </span>
+                        {current.label}
+                        <ChevronDown className={`h-3.5 w-3.5 opacity-60 transition-transform ${menu === "models" ? "rotate-180" : ""}`} />
+                    </button>
+                    <AnimatePresence>
+                        {menu === "models" && (
+                            <motion.div {...pop} role="listbox" aria-label="Models" className={`absolute bottom-full left-0 z-30 mb-2 max-h-[min(21rem,60vh)] w-[min(19rem,80vw)] origin-bottom-left overflow-y-auto overscroll-contain rounded-2xl border p-1.5 ${panel}`}>
+                                {groups.map((g) => (
+                                    <div key={g} className="py-1">
+                                        <p className={`px-2.5 pb-1 text-[0.65rem] font-semibold uppercase tracking-[0.16em] ${muted}`}>{g}</p>
+                                        {models
+                                            .filter((m) => m.provider === g)
+                                            .map((m) => {
+                                                const on = m.value === current.value;
+                                                return (
+                                                    <button key={m.value} type="button" role="option" aria-selected={on} onClick={() => pickModel(m)} className={`flex w-full items-start gap-2.5 rounded-xl px-2.5 py-2 text-left transition ${on ? (dark ? "bg-white/[0.07]" : "bg-black/[0.05]") : dark ? "hover:bg-white/[0.04]" : "hover:bg-black/[0.03]"}`}>
+                                                        <span className="min-w-0 flex-1">
+                                                            <span className="flex items-center gap-1.5 text-[0.85rem] font-medium">
+                                                                {m.label}
+                                                                {m.tags?.map((t) => {
+                                                                    const Icon = TAG_ICON[t];
+                                                                    return Icon ? <Icon key={t} className={`h-3 w-3 ${muted}`} aria-label={t} /> : null;
+                                                                })}
+                                                            </span>
+                                                            <span className={`block text-[0.74rem] ${muted}`}>{m.description}</span>
+                                                        </span>
+                                                        {on && <Check className="mt-0.5 h-4 w-4 shrink-0" style={{ color: accentColor }} />}
+                                                    </button>
+                                                );
+                                            })}
+                                    </div>
+                                ))}
+                            </motion.div>
+                        )}
+                    </AnimatePresence>
+                </div>
+
+                {/* Per-model settings */}
+                <div ref={settingsRef} className="relative">
+                    <button type="button" aria-label="Model settings" aria-expanded={menu === "settings"} onClick={() => setMenu((m) => (m === "settings" ? null : "settings"))} className={`grid h-9 w-9 place-items-center rounded-full transition ${chip}`}>
+                        <SlidersHorizontal className="h-4 w-4" />
+                    </button>
+                    <AnimatePresence>
+                        {menu === "settings" && (
+                            <motion.div {...pop} role="dialog" aria-label={`${current.label} settings`} className={`absolute bottom-full left-0 z-30 mb-2 w-[min(17rem,78vw)] origin-bottom-left space-y-4 rounded-2xl border p-4 ${panel}`}>
+                                <p className="text-[0.8rem] font-semibold">{current.label} settings</p>
+                                {current.settings?.temperature && (
+                                    <label className="block">
+                                        <span className="mb-1.5 flex justify-between text-[0.75rem]">
+                                            <span className={muted}>Temperature</span>
+                                            <span className="font-mono">{config.temperature.toFixed(1)}</span>
+                                        </span>
+                                        <input type="range" min={0} max={2} step={0.1} value={config.temperature} onChange={(e) => setConfig("temperature", Number(e.target.value))} className="w-full" style={{ accentColor }} />
+                                    </label>
+                                )}
+                                {current.settings?.maxTokens && (
+                                    <div>
+                                        <p className={`mb-1.5 text-[0.75rem] ${muted}`}>Max tokens</p>
+                                        <div className="grid grid-cols-4 gap-1">
+                                            {TOKEN_OPTIONS.map((t) => (
+                                                <button key={t} type="button" onClick={() => setConfig("maxTokens", t)} className={`rounded-lg py-1 font-mono text-[0.7rem] transition ${config.maxTokens === t ? "text-black" : chip}`} style={config.maxTokens === t ? { background: accentColor } : undefined}>
+                                                    {t >= 1000 ? `${Math.round(t / 1000)}k` : t}
+                                                </button>
+                                            ))}
+                                        </div>
+                                    </div>
+                                )}
+                                {current.settings?.reasoning && (
+                                    <div>
+                                        <p className={`mb-1.5 text-[0.75rem] ${muted}`}>Reasoning effort</p>
+                                        <div className={`relative grid rounded-lg p-0.5 ${dark ? "bg-white/[0.06]" : "bg-black/[0.04]"}`} style={{ gridTemplateColumns: `repeat(${current.settings.reasoning.length}, 1fr)` }}>
+                                            {current.settings.reasoning.map((r) => (
+                                                <button key={r} type="button" onClick={() => setConfig("reasoning", r)} className={`relative rounded-md py-1 text-[0.72rem] font-medium capitalize ${config.reasoning === r ? "text-black" : ""}`}>
+                                                    {config.reasoning === r && <motion.span layoutId={`${id}-effort`} className="absolute inset-0 rounded-md" style={{ background: accentColor }} transition={{ type: "spring", stiffness: 500, damping: 36 }} />}
+                                                    <span className="relative">{r}</span>
+                                                </button>
+                                            ))}
+                                        </div>
+                                    </div>
+                                )}
+                            </motion.div>
+                        )}
+                    </AnimatePresence>
+                </div>
+
+                <span className={`ml-auto hidden text-[0.72rem] sm:inline ${muted}`}>
+                    {config.reasoning ? `${config.reasoning} effort · ` : ""}
+                    {config.maxTokens ? `${Math.round(config.maxTokens / 1000)}k tokens` : ""}
+                </span>
+                <motion.button whileTap={{ scale: 0.9 }} type="button" onClick={submit} disabled={!text.trim()} aria-label="Send" className="ml-auto grid h-10 w-10 place-items-center rounded-full text-black transition disabled:opacity-35 sm:ml-0" style={{ background: accentColor }}>
+                    <AnimatePresence mode="wait" initial={false}>
+                        <motion.span key={sent ? "ok" : "go"} initial={{ scale: 0 }} animate={{ scale: 1 }} exit={{ scale: 0 }} transition={{ duration: 0.14 }}>
+                            {sent ? <Check className="h-5 w-5" /> : <ArrowUp className="h-5 w-5" />}
+                        </motion.span>
+                    </AnimatePresence>
+                </motion.button>
+            </div>
+        </div>
+    );
+};
+
+export default AiModelPrompt;

package/dist/ApexUI-Kit/templates/AiModelPrompt/index.js

@@ -0,0 +1,2 @@
+export { default as AiModelPrompt } from "./AiModelPrompt.jsx";
+export { DEFAULT_LLM_MODELS } from "./models.js";

package/dist/ApexUI-Kit/templates/AiModelPrompt/models.js

@@ -0,0 +1,15 @@
+/*
+ * Ready-made model list for AiModelPrompt. Each model says which settings it
+ * supports; the settings panel only shows those. Swap in your own list or
+ * extend this one.
+ */
+export const DEFAULT_LLM_MODELS = [
+    { value: "claude-fable-5", label: "Claude Fable 5", provider: "Anthropic", description: "Most capable for deep, multi-step work.", tags: ["reasoning", "vision"], settings: { temperature: true, maxTokens: true, reasoning: ["low", "medium", "high"] } },
+    { value: "claude-opus-5-5", label: "Claude Opus 5.5", provider: "Anthropic", description: "Frontier quality for hard problems.", tags: ["reasoning", "vision"], settings: { temperature: true, maxTokens: true, reasoning: ["low", "medium", "high"] } },
+    { value: "claude-sonnet-5-5", label: "Claude Sonnet 5.5", provider: "Anthropic", description: "Great balance for writing and code.", tags: ["reasoning", "vision"], settings: { temperature: true, maxTokens: true, reasoning: ["low", "medium", "high"] } },
+    { value: "claude-haiku-5-5", label: "Claude Haiku 5.5", provider: "Anthropic", description: "Fast and light for everyday tasks.", tags: ["fast"], settings: { temperature: true, maxTokens: true } },
+    { value: "gpt-5", label: "GPT-5", provider: "OpenAI", description: "General purpose flagship.", tags: ["reasoning", "vision"], settings: { maxTokens: true, reasoning: ["minimal", "low", "medium", "high"] } },
+    { value: "gpt-5-mini", label: "GPT-5 mini", provider: "OpenAI", description: "Small, quick and capable.", tags: ["fast"], settings: { maxTokens: true, reasoning: ["low", "medium", "high"] } },
+    { value: "gemini-2.5-pro", label: "Gemini 2.5 Pro", provider: "Google", description: "Long context and multimodal.", tags: ["reasoning", "vision"], settings: { temperature: true, maxTokens: true } },
+    { value: "gemini-2.5-flash", label: "Gemini 2.5 Flash", provider: "Google", description: "Low latency at scale.", tags: ["fast", "vision"], settings: { temperature: true, maxTokens: true } },
+];

package/dist/ApexUI-Kit/templates/AiPromptBox/AiPromptBox.jsx

@@ -0,0 +1,173 @@
+import React, { useEffect, useRef, useState } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { ArrowUp, ChevronDown, Paperclip, Square, Wand2, X } from "lucide-react";
+
+/*
+ * AI Prompt Box: the input of an AI app. The border lights up with a moving
+ * gradient while focused and spins faster while generating; the textarea
+ * grows with its text; you can pick a model, attach files and use quick
+ * actions. The send button turns into a stop button while busy.
+ */
+
+const DEFAULT_MODELS = ["Apex 2 Pro", "Apex 2 Flash", "Apex Vision"];
+const DEFAULT_ACTIONS = ["Summarize", "Write code", "Brainstorm", "Translate"];
+
+const AiPromptBox = ({
+    placeholder = "Describe what you want to build…",
+    models = DEFAULT_MODELS,
+    actions = DEFAULT_ACTIONS,
+    onSubmit,
+    maxLength = 2000,
+    colors = ["#a3e635", "#22d3ee", "#a78bfa", "#f472b6"],
+    theme = "dark",
+    className = "",
+}) => {
+    const [value, setValue] = useState("");
+    const [focused, setFocused] = useState(false);
+    const [busy, setBusy] = useState(false);
+    const [model, setModel] = useState(models[0]);
+    const [menu, setMenu] = useState(false);
+    const [files, setFiles] = useState([]);
+    const area = useRef(null);
+    const fileInput = useRef(null);
+    const timer = useRef(0);
+    const dark = theme !== "light";
+
+    // Grow with the text, up to about eight lines.
+    useEffect(() => {
+        const el = area.current;
+        if (!el) return;
+        el.style.height = "auto";
+        el.style.height = `${Math.min(el.scrollHeight, 200)}px`;
+    }, [value]);
+    useEffect(() => () => clearTimeout(timer.current), []);
+
+    const submit = async () => {
+        if (busy) {
+            clearTimeout(timer.current);
+            setBusy(false);
+            return;
+        }
+        if (!value.trim()) return;
+        setBusy(true);
+        const payload = { prompt: value.trim(), model, files };
+        try {
+            if (onSubmit) await onSubmit(payload);
+            else await new Promise((r) => (timer.current = setTimeout(r, 2200)));
+        } finally {
+            setBusy(false);
+            setValue("");
+            setFiles([]);
+        }
+    };
+
+    const glow = `conic-gradient(from var(--apex-angle), ${colors.join(", ")}, ${colors[0]})`;
+
+    return (
+        <div className={`w-full max-w-2xl ${className}`}>
+            <style>{"@property --apex-angle{syntax:'<angle>';initial-value:0deg;inherits:false}@keyframes apex-spin{to{--apex-angle:360deg}}"}</style>
+            <div
+                className="relative rounded-[1.6rem] p-[1.5px] transition-shadow duration-500"
+                style={{
+                    background: focused || busy ? glow : dark ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.1)",
+                    animation: focused || busy ? `apex-spin ${busy ? 1.2 : 4}s linear infinite` : "none",
+                    boxShadow: focused || busy ? `0 0 40px -10px ${colors[0]}88` : "none",
+                }}
+            >
+                <div className={`rounded-[1.55rem] p-3 ${dark ? "bg-neutral-950 text-white" : "bg-white text-neutral-900"}`}>
+                    <AnimatePresence>
+                        {files.length > 0 && (
+                            <motion.div initial={{ height: 0, opacity: 0 }} animate={{ height: "auto", opacity: 1 }} exit={{ height: 0, opacity: 0 }} className="flex flex-wrap gap-2 overflow-hidden px-1 pb-2">
+                                {files.map((f) => (
+                                    <span key={f} className={`inline-flex items-center gap-1.5 rounded-lg px-2 py-1 text-[0.75rem] ${dark ? "bg-white/[0.07]" : "bg-black/[0.05]"}`}>
+                                        <Paperclip className="h-3 w-3" /> {f}
+                                        <button type="button" aria-label={`Remove ${f}`} onClick={() => setFiles((l) => l.filter((x) => x !== f))} className="opacity-60 hover:opacity-100">
+                                            <X className="h-3 w-3" />
+                                        </button>
+                                    </span>
+                                ))}
+                            </motion.div>
+                        )}
+                    </AnimatePresence>
+                    <textarea
+                        ref={area}
+                        rows={2}
+                        value={value}
+                        maxLength={maxLength}
+                        onChange={(e) => setValue(e.target.value)}
+                        onFocus={() => setFocused(true)}
+                        onBlur={() => setFocused(false)}
+                        onKeyDown={(e) => {
+                            if (e.key === "Enter" && !e.shiftKey) {
+                                e.preventDefault();
+                                submit();
+                            }
+                        }}
+                        placeholder={placeholder}
+                        aria-label="Prompt"
+                        className={`block w-full resize-none bg-transparent px-2 py-1.5 text-[0.95rem] leading-relaxed outline-none ${dark ? "placeholder:text-white/35" : "placeholder:text-neutral-400"}`}
+                    />
+                    <div className="mt-2 flex items-center gap-2">
+                        <input ref={fileInput} type="file" multiple hidden onChange={(e) => setFiles((l) => [...new Set([...l, ...[...e.target.files].map((f) => f.name)])])} />
+                        <button type="button" aria-label="Attach files" onClick={() => fileInput.current?.click()} className={`grid h-9 w-9 place-items-center rounded-full transition ${dark ? "hover:bg-white/10" : "hover:bg-black/5"}`}>
+                            <Paperclip className="h-4 w-4" />
+                        </button>
+                        <div className="relative">
+                            <button type="button" aria-haspopup="listbox" aria-expanded={menu} onClick={() => setMenu((m) => !m)} className={`inline-flex h-9 items-center gap-1 rounded-full px-3 text-[0.8rem] font-medium transition ${dark ? "bg-white/[0.06] hover:bg-white/10" : "bg-black/[0.04] hover:bg-black/[0.07]"}`}>
+                                {model}
+                                <ChevronDown className={`h-3.5 w-3.5 transition-transform ${menu ? "rotate-180" : ""}`} />
+                            </button>
+                            <AnimatePresence>
+                                {menu && (
+                                    <motion.ul
+                                        role="listbox"
+                                        initial={{ opacity: 0, y: 6, scale: 0.97 }}
+                                        animate={{ opacity: 1, y: 0, scale: 1 }}
+                                        exit={{ opacity: 0, y: 6, scale: 0.97 }}
+                                        className={`absolute bottom-full left-0 z-20 mb-2 min-w-[10rem] rounded-xl border p-1 shadow-xl ${dark ? "border-white/10 bg-neutral-900" : "border-black/10 bg-white"}`}
+                                    >
+                                        {models.map((m) => (
+                                            <li key={m}>
+                                                <button type="button" role="option" aria-selected={m === model} onClick={() => { setModel(m); setMenu(false); }} className={`w-full rounded-lg px-3 py-1.5 text-left text-[0.8rem] ${m === model ? (dark ? "bg-white/10" : "bg-black/5") : dark ? "hover:bg-white/[0.06]" : "hover:bg-black/[0.04]"}`}>
+                                                    {m}
+                                                </button>
+                                            </li>
+                                        ))}
+                                    </motion.ul>
+                                )}
+                            </AnimatePresence>
+                        </div>
+                        <span className={`ml-auto font-mono text-[0.7rem] tabular-nums ${dark ? "text-white/35" : "text-neutral-400"}`}>
+                            {value.length}/{maxLength}
+                        </span>
+                        <motion.button
+                            type="button"
+                            whileTap={{ scale: 0.9 }}
+                            onClick={submit}
+                            aria-label={busy ? "Stop generating" : "Send"}
+                            disabled={!busy && !value.trim()}
+                            className="grid h-10 w-10 place-items-center rounded-full text-black transition disabled:opacity-35"
+                            style={{ background: busy ? (dark ? "#fff" : "#111") : colors[0], color: busy ? (dark ? "#111" : "#fff") : "#000" }}
+                        >
+                            <AnimatePresence mode="wait" initial={false}>
+                                <motion.span key={busy ? "stop" : "send"} initial={{ scale: 0, rotate: -90 }} animate={{ scale: 1, rotate: 0 }} exit={{ scale: 0, rotate: 90 }} transition={{ duration: 0.15 }}>
+                                    {busy ? <Square className="h-3.5 w-3.5" fill="currentColor" /> : <ArrowUp className="h-5 w-5" />}
+                                </motion.span>
+                            </AnimatePresence>
+                        </motion.button>
+                    </div>
+                </div>
+            </div>
+            <div className="mt-3 flex flex-wrap justify-center gap-2">
+                {actions.map((a) => (
+                    <button key={a} type="button" onClick={() => { setValue((v) => (v ? `${a}: ${v}` : `${a}: `)); area.current?.focus(); }} className={`inline-flex items-center gap-1.5 rounded-full border px-3 py-1.5 text-[0.78rem] transition ${dark ? "border-white/10 text-white/70 hover:border-white/25 hover:text-white" : "border-black/10 text-neutral-600 hover:border-black/20 hover:text-neutral-900"}`}>
+                        <Wand2 className="h-3 w-3" style={{ color: colors[0] }} />
+                        {a}
+                    </button>
+                ))}
+            </div>
+        </div>
+    );
+};
+
+export default AiPromptBox;