--- title: Ai Prompt Bar description: An advanced, interactive AI composer bar with model selector, @ sources menu, / slash commands, file attachment chips, mic dictation toggle, and rainbow sweep animations. Built for modern LLM chat applications and AI agent workflows. --- ## Installation CLI Manual ```bash npx lightswind@latest add ai-prompt-bar ``` Copy and paste the following code into your project. ```tsx "use client"; import React, { useState, useRef, useEffect, useLayoutEffect } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { Plus, Paperclip, AudioLines, ArrowUp, ChevronDown, Globe, Database, X, FileText, Command as CommandIcon, Code, Mail, FileSpreadsheet, Sparkles, Zap, Cpu, Brain } from "lucide-react"; import { cn } from "@/components/lib/utils"; import { Button } from "@/components/lightswind/button"; export interface AiModel { id: string; name: string; tag?: string; icon?: React.ReactNode; } export interface AiSource { id: string; name: string; desc: string; icon: React.ReactNode; brand?: "figma" | "slack" | "gmail" | "github" | "notion" | "drive"; connected?: boolean; attach?: boolean; } export interface AiCommand { id: string; name: string; desc: string; icon?: React.ReactNode; } export interface AiPromptBarProps { placeholder?: string; variant?: "rounded" | "pill" | "glass" | "minimal"; models?: AiModel[]; defaultModelId?: string; sources?: AiSource[]; commands?: AiCommand[]; onSend?: (payload: { text: string; model: AiModel; attachments: string[] }) => void; className?: string; disabled?: boolean; } /* Crisp Brand SVG Icons */ const BRAND_ICONS = { figma: ( ), slack: ( ), github: ( ), notion: ( ), drive: ( ), gmail: ( ), }; const DEFAULT_MODELS: AiModel[] = [ { id: "claude-3-7-sonnet", name: "Claude 3.7 Sonnet", tag: "Thinking", icon: }, { id: "gpt-4o", name: "GPT-4o", tag: "Omni", icon: }, { id: "claude-3-5-sonnet", name: "Claude 3.5 Sonnet", tag: "Artifacts", icon: }, { id: "gemini-1-5-pro", name: "Gemini 1.5 Pro", tag: "Multimodal", icon: }, { id: "deepseek-r1", name: "DeepSeek R1", tag: "Reasoning", icon: }, { id: "llama-3-3", name: "Llama 3.3 70B", tag: "Open Source", icon: }, ]; const DEFAULT_SOURCES: AiSource[] = [ { id: "attach", name: "Add photos & files", desc: "Upload from your computer", icon: , attach: true }, { id: "web", name: "Web search", desc: "Real-time Google search & news", icon: }, { id: "github", name: "GitHub Repos", desc: "Search code, issues & PRs", brand: "github", icon: null }, { id: "figma", name: "Figma Components", desc: "Design-to-code & UI tokens", brand: "figma", icon: null }, { id: "slack", name: "Slack Channels", desc: "Thread context & team chats", brand: "slack", connected: true, icon: null }, { id: "notion", name: "Notion Pages", desc: "Docs, wikis & workspace notes", brand: "notion", icon: null }, { id: "drive", name: "Google Drive", desc: "Read files & Google Sheets", brand: "drive", icon: null }, { id: "db", name: "Database Context", desc: "PostgreSQL & Supabase schemas", icon: }, ]; const DEFAULT_COMMANDS: AiCommand[] = [ { id: "summarize", name: "/summarize", desc: "Digest current context or thread", icon: }, { id: "code-review", name: "/code-review", desc: "Audit code quality, bugs & performance", icon: }, { id: "draft-email", name: "/draft-email", desc: "Draft formal response or status update", icon: }, { id: "generate-spec", name: "/generate-spec", desc: "Create technical PRD & API specs", icon: }, ]; const MOCK_FILES = ["architecture-spec.pdf", "user-churn-q3.csv", "ui-kit-v2.fig"]; const VARIANT_MAP = { rounded: "rounded-2xl bg-white dark:bg-zinc-950 border border-zinc-200 dark:border-zinc-800", pill: "rounded-full px-3 py-1 bg-white/80 dark:bg-zinc-950/80 backdrop-blur-md border border-zinc-200/80 dark:border-zinc-800/80 shadow-md", glass: "rounded-2xl bg-white/80 dark:bg-zinc-950/80 backdrop-blur-md border border-zinc-200/80 dark:border-zinc-800/80 shadow-md", minimal: "rounded-xl bg-zinc-50 dark:bg-zinc-900/60 border border-transparent hover:border-zinc-200 dark:hover:border-zinc-800", }; export const AiPromptBar: React.FC = ({ placeholder = "Ask AI, type @ or /…", variant = "rounded", models = DEFAULT_MODELS, defaultModelId = "claude-3-7-sonnet", sources = DEFAULT_SOURCES, commands = DEFAULT_COMMANDS, onSend, className, disabled = false, }) => { const [draft, setDraft] = useState(""); const [selectedModel, setSelectedModel] = useState( models.find((m) => m.id === defaultModelId) || models[0] ); const [attachments, setAttachments] = useState([]); const [plusOpen, setPlusOpen] = useState(false); const [modelOpen, setModelOpen] = useState(false); const [listening, setListening] = useState(false); const [menuActiveIndex, setMenuActiveIndex] = useState(0); const inputRef = useRef(null); const controlsRef = useRef(null); // Extract token query for @ or / const tokenMatch = /(^|\s)([@/])([\w-]*)$/.exec(draft); const lastWord = draft.split(/\s+/).pop() || ""; const tokenKind = plusOpen ? "at" : tokenMatch ? (tokenMatch[2] === "@" ? "at" : "slash") : null; // Real-time search query calculation const tokenQuery = plusOpen ? (tokenMatch ? tokenMatch[3].toLowerCase() : lastWord.startsWith("@") ? lastWord.slice(1).toLowerCase() : lastWord.toLowerCase()) : (tokenMatch ? tokenMatch[3].toLowerCase() : ""); const menuRows = tokenKind === "at" ? sources.filter((s) => s.name.toLowerCase().includes(tokenQuery) || s.desc.toLowerCase().includes(tokenQuery)) : tokenKind === "slash" ? commands.filter((c) => c.name.toLowerCase().includes(tokenQuery) || c.desc.toLowerCase().includes(tokenQuery)) : []; useEffect(() => { setMenuActiveIndex(0); }, [tokenKind, tokenQuery]); // Auto grow input useLayoutEffect(() => { const input = inputRef.current; if (!input) return; if (!draft) { input.style.height = "24px"; } else { input.style.height = "0px"; const scrollH = input.scrollHeight; input.style.height = `${Math.min(Math.max(scrollH, 24), 120)}px`; } }, [draft]); // Dictation mock useEffect(() => { if (!listening) return; const timer = setTimeout(() => { setDraft((prev) => (prev ? `${prev.trim()} Audit user retention trends for Q3` : "Audit user retention trends for Q3")); setListening(false); inputRef.current?.focus(); }, 2200); return () => clearTimeout(timer); }, [listening]); const handleSelectModel = (m: AiModel) => { setSelectedModel(m); setModelOpen(false); }; const handlePickRow = (item: AiSource | AiCommand) => { if ("attach" in item && item.attach) { const nextFile = MOCK_FILES[attachments.length % MOCK_FILES.length]; setAttachments((prev) => [...prev, nextFile]); if (tokenMatch) { setDraft(draft.slice(0, tokenMatch.index + tokenMatch[1].length)); } } else { const isAt = tokenKind === "at"; const prefix = isAt ? "@" : ""; if (tokenMatch) { const base = draft.slice(0, tokenMatch.index + tokenMatch[1].length); setDraft(`${base}${prefix}${item.name} `); } else { // Strip trailing search word if user typed query after clicking plus const words = draft.trimEnd().split(/\s+/); if (words.length > 0 && !draft.endsWith(" ")) { words.pop(); } const base = words.length > 0 ? words.join(" ") + " " : ""; setDraft(`${base}${prefix}${item.name} `); } } setPlusOpen(false); setTimeout(() => inputRef.current?.focus(), 10); }; const handleSend = () => { if ((!draft.trim() && attachments.length === 0) || disabled) return; if (onSend) { onSend({ text: draft.trim(), model: selectedModel, attachments }); } setDraft(""); setAttachments([]); setPlusOpen(false); setModelOpen(false); }; const isPill = variant === "pill"; const roundedClass = isPill ? "rounded-full" : variant === "minimal" ? "rounded-xl" : "rounded-2xl"; return (
{/* ── Dropdown Menus ── */} {/* @ or / Menu */} {tokenKind && (
{menuRows.map((row, i) => { const isActive = i === menuActiveIndex; const source = tokenKind === "at" ? (row as AiSource) : undefined; return ( ); })} {menuRows.length === 0 && (
No matches for "{tokenQuery}"
)}
{tokenKind === "at" ? "Type to search sources & files" : "Type to search commands"}
)} {/* Model Menu */} {modelOpen && (
Trending AI Models
{models.map((m) => { const isSelected = m.id === selectedModel.id; return ( ); })}
)} {/* ── Main Composer Container ── */}
{/* Attachments */} {attachments.length > 0 && ( {attachments.map((file, idx) => ( {file} ))} )} {/* Controls Row */}
{/* Plus icon Button */} {/* Textarea */}