"use client"; import React, { useState, useRef } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { Mic, Square, Sparkles, Send, Loader2 } from "lucide-react"; // --- TYPES --- export type VoiceTheme = "nova" | "nebula" | "echo" | "aurora"; // FIX: We strictly omit React events that conflict with Framer Motion's internal types export interface VoiceCommandInputProps extends Omit, "onSubmit" | "onDrag" | "onDragStart" | "onDragEnd" | "onAnimationStart"> { /** Triggered when the user hits Enter or clicks Send */ onTextSubmit?: (text: string) => void; /** Triggered when the voice recording session ends */ onVoiceSubmit?: (transcribedMock: string) => void; themeColor?: VoiceTheme; /** Native ref support */ ref?: React.Ref; } // --- SUB-COMPONENT: ORGANIC FREQUENCY VISUALIZER --- const FrequencyVisualizer = ({ theme, isActive }: { theme: any, isActive: boolean }) => { const bars = [1, 2, 3, 4, 5, 6, 7]; return (

{bars.map((bar, i) => { const isCenter = i === 3; const duration = 0.4 + Math.random() * 0.4; const delay = Math.random() * 0.2; const minHeight = isCenter ? "40%" : (i === 0 || i === 6) ? "20%" : "30%"; const maxHeight = isCenter ? "100%" : (i === 0 || i === 6) ? "60%" : "80%"; return ( ); })}

); }; /** * Voice Command Input (v3.0 Infinity) * A premium floating command bar featuring a fluid transition between * a traditional text input and an organic, bimodal frequency visualizer. */ export const VoiceCommandInput = ({ onTextSubmit, onVoiceSubmit, themeColor = "nova", className, placeholder = "Ask anything or use your voice...", ref, ...props }: VoiceCommandInputProps) => { const [text, setText] = useState(""); const [mode, setMode] = useState<"idle" | "listening" | "processing">("idle"); const internalRef = useRef(null); const activeRef = (ref as React.RefObject) || internalRef; // --- THEME ENGINE --- const themes: Record = { nova: { borderActive: "border-orange-500/50 dark:border-orange-500/50", barGrad: "bg-gradient-to-t from-orange-600 to-amber-400", micActive: "bg-orange-500 text-white shadow-[0_0_20px_rgba(249,115,22,0.4)]", iconColor: "text-orange-500", focusRing: "focus-within:ring-orange-500/10", }, nebula: { borderActive: "border-indigo-500/50 dark:border-indigo-500/50", barGrad: "bg-gradient-to-t from-indigo-600 to-fuchsia-400", micActive: "bg-indigo-500 text-white shadow-[0_0_20px_rgba(99,102,241,0.4)]", iconColor: "text-indigo-500", focusRing: "focus-within:ring-indigo-500/10", }, aurora: { borderActive: "border-emerald-500/50 dark:border-emerald-500/50", barGrad: "bg-gradient-to-t from-emerald-600 to-teal-400", micActive: "bg-emerald-500 text-white shadow-[0_0_20px_rgba(16,185,129,0.4)]", iconColor: "text-emerald-500", focusRing: "focus-within:ring-emerald-500/10", }, echo: { borderActive: "border-neutral-900 dark:border-white", barGrad: "bg-gradient-to-t from-neutral-800 to-neutral-400 dark:from-white dark:to-neutral-400", micActive: "bg-neutral-900 dark:bg-white text-white dark:text-neutral-900 shadow-[0_0_20px_rgba(0,0,0,0.2)] dark:shadow-[0_0_20px_rgba(255,255,255,0.2)]", iconColor: "text-neutral-900 dark:text-white", focusRing: "focus-within:ring-neutral-900/5 dark:focus-within:ring-white/5", } }; const currentT = themes[themeColor]; const handleKeyDown = (e: React.KeyboardEvent) => { if (e.key === "Enter" && text.trim().length > 0) { if (onTextSubmit) onTextSubmit(text); setText(""); } }; const handleSendClick = () => { if (text.trim().length > 0) { if (onTextSubmit) onTextSubmit(text); setText(""); } }; const toggleRecording = () => { if (mode === "idle") { setMode("listening"); setText(""); } else if (mode === "listening") { setMode("processing"); setTimeout(() => { setMode("idle"); const transcription = "Show me the latest revenue dashboard."; setText(transcription); if (onVoiceSubmit) onVoiceSubmit(transcription); }, 2000); } }; return (

{mode === "processing" ? ( ) : ( )}

{mode === "idle" || mode === "processing" ? ( setText(e.target.value)} onKeyDown={handleKeyDown} placeholder={mode === "processing" ? "Transcribing..." : placeholder} className="absolute inset-0 w-full h-full bg-transparent border-none outline-none text-base md:text-lg font-medium text-neutral-900 dark:text-white placeholder:text-neutral-400 dark:placeholder:text-neutral-600" autoComplete="off" {...(props as any)} /> ) : ( )}

{text.length > 0 && mode === "idle" && ( )} {mode === "listening" && ( )} {mode === "listening" ? ( ) : ( )}

); }; // ============================================================= // DEMO IMPLEMENTATION // ============================================================= export default function VoiceCommandInputDemo() { const handleText = (val: string) => console.log("Text submitted:", val); const handleVoice = (val: string) => console.log("Voice transcribed:", val); return (

{/* 1. Uixtra Nova Theme (Orange Signature) */}

Uixtra Nova

{/* 2. Echo Theme (High Contrast Monochrome) */}

Echo Monochrome

); }