vox-ai-react 1.0.2 → 1.0.3

package/dist/index.esm.js

@@ -1,229 +1,457 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { useState, useRef, useEffect } from 'react';
+import { useState, useRef, useEffect, useCallback } from 'react';
 
-const VoxChat = ({ apiKey, apiUrl = 'https://api.vox.ai', agentName = 'VOX-01', position = 'bottom-right', theme = 'dark', buttonColor, buttonSize = 48, borderRadius = 0, iconColor, onOpen, onClose, onMessage, }) => {
-    const [isOpen, setIsOpen] = useState(false);
-    const [messages, setMessages] = useState([]);
+var ConnectionState;
+(function (ConnectionState) {
+    ConnectionState["DISCONNECTED"] = "DISCONNECTED";
+    ConnectionState["CONNECTING"] = "CONNECTING";
+    ConnectionState["CONNECTED"] = "CONNECTED";
+    ConnectionState["ERROR"] = "ERROR";
+})(ConnectionState || (ConnectionState = {}));
+// Audio utilities
+function createBlob(inputData) {
+    const buffer = new ArrayBuffer(inputData.length * 2);
+    const view = new DataView(buffer);
+    for (let i = 0; i < inputData.length; i++) {
+        const s = Math.max(-1, Math.min(1, inputData[i]));
+        view.setInt16(i * 2, s < 0 ? s * 0x8000 : s * 0x7fff, true);
+    }
+    const base64 = btoa(String.fromCharCode(...new Uint8Array(buffer)));
+    return { mimeType: 'audio/pcm;rate=16000', data: base64 };
+}
+function decode(base64) {
+    const binaryString = atob(base64);
+    const bytes = new Uint8Array(binaryString.length);
+    for (let i = 0; i < binaryString.length; i++) {
+        bytes[i] = binaryString.charCodeAt(i);
+    }
+    return bytes.buffer;
+}
+async function decodeAudioData(arrayBuffer, ctx, sampleRate, numChannels) {
+    const dataView = new DataView(arrayBuffer);
+    const numSamples = arrayBuffer.byteLength / 2;
+    const audioBuffer = ctx.createBuffer(numChannels, numSamples, sampleRate);
+    const channelData = audioBuffer.getChannelData(0);
+    for (let i = 0; i < numSamples; i++) {
+        const sample = dataView.getInt16(i * 2, true);
+        channelData[i] = sample / 32768;
+    }
+    return audioBuffer;
+}
+// Icons
+const MessageIcon = () => (jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: jsx("path", { d: "M7.9 20A9 9 0 1 0 4 16.1L2 22Z" }) }));
+const MicIcon = ({ size = 14 }) => (jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1", children: [jsx("path", { d: "M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z" }), jsx("path", { d: "M19 10v2a7 7 0 0 1-14 0v-2" }), jsx("line", { x1: "12", x2: "12", y1: "19", y2: "22" })] }));
+const MicOffIcon = ({ size = 40 }) => (jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1", children: [jsx("line", { x1: "2", x2: "22", y1: "2", y2: "22" }), jsx("path", { d: "M18.89 13.23A7.12 7.12 0 0 0 19 12v-2" }), jsx("path", { d: "M5 10v2a7 7 0 0 0 12 5" }), jsx("path", { d: "M15 9.34V5a3 3 0 0 0-5.68-1.33" }), jsx("path", { d: "M9 9v3a3 3 0 0 0 5.12 2.12" }), jsx("line", { x1: "12", x2: "12", y1: "19", y2: "22" })] }));
+const XIcon = () => (jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: jsx("path", { d: "M18 6L6 18M6 6l12 12" }) }));
+const PhoneOffIcon = () => (jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [jsx("path", { d: "M10.68 13.31a16 16 0 0 0 3.41 2.6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7 2 2 0 0 1 1.72 2v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.42 19.42 0 0 1-3.33-2.67m-2.67-3.34a19.79 19.79 0 0 1-3.07-8.63A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91" }), jsx("line", { x1: "22", x2: "2", y1: "2", y2: "22" })] }));
+const BotIcon = () => (jsxs("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [jsx("path", { d: "M12 8V4H8" }), jsx("rect", { width: "16", height: "12", x: "4", y: "8", rx: "2" }), jsx("path", { d: "M2 14h2" }), jsx("path", { d: "M20 14h2" }), jsx("path", { d: "M15 13v2" }), jsx("path", { d: "M9 13v2" })] }));
+const UserIcon = () => (jsxs("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [jsx("path", { d: "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" }), jsx("circle", { cx: "12", cy: "7", r: "4" })] }));
+const LoaderIcon = () => (jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", className: "vox-spin", children: jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) }));
+const AlertIcon = () => (jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [jsx("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" }), jsx("path", { d: "M12 9v4" }), jsx("path", { d: "M12 17h.01" })] }));
+// Visualizer Component
+const Visualizer = ({ analyser, isActive, theme }) => {
+    const canvasRef = useRef(null);
+    const animationRef = useRef();
+    useEffect(() => {
+        const canvas = canvasRef.current;
+        if (!canvas)
+            return;
+        const ctx = canvas.getContext('2d');
+        if (!ctx)
+            return;
+        const draw = () => {
+            const width = canvas.width;
+            const height = canvas.height;
+            ctx.clearRect(0, 0, width, height);
+            if (!analyser || !isActive) {
+                ctx.strokeStyle = theme === 'light' ? '#a1a1aa' : '#3f3f46';
+                ctx.lineWidth = 1;
+                ctx.beginPath();
+                ctx.moveTo(0, height / 2);
+                ctx.lineTo(width, height / 2);
+                ctx.stroke();
+                animationRef.current = requestAnimationFrame(draw);
+                return;
+            }
+            const bufferLength = analyser.frequencyBinCount;
+            const dataArray = new Uint8Array(bufferLength);
+            analyser.getByteTimeDomainData(dataArray);
+            ctx.strokeStyle = theme === 'light' ? '#000000' : '#ffffff';
+            ctx.lineWidth = 1;
+            ctx.beginPath();
+            const sliceWidth = width / bufferLength;
+            let x = 0;
+            for (let i = 0; i < bufferLength; i++) {
+                const v = dataArray[i] / 128.0;
+                const y = (v * height) / 2;
+                if (i === 0)
+                    ctx.moveTo(x, y);
+                else
+                    ctx.lineTo(x, y);
+                x += sliceWidth;
+            }
+            ctx.lineTo(width, height / 2);
+            ctx.stroke();
+            animationRef.current = requestAnimationFrame(draw);
+        };
+        draw();
+        return () => {
+            if (animationRef.current)
+                cancelAnimationFrame(animationRef.current);
+        };
+    }, [analyser, isActive, theme]);
+    return jsx("canvas", { ref: canvasRef, width: 300, height: 50, className: "vox-visualizer" });
+};
+// Text Interface Component
+const TextInterface = ({ apiKey, apiUrl, agentName, systemInstruction, theme }) => {
+    const [messages, setMessages] = useState([
+        { id: 'welcome', role: 'assistant', text: `VOX INITIALIZED. GREETINGS. I AM ${agentName}. HOW MAY I ASSIST YOUR INQUIRY?` }
+    ]);
     const [input, setInput] = useState('');
     const [isLoading, setIsLoading] = useState(false);
     const scrollRef = useRef(null);
-    // Determine actual theme
-    const actualTheme = theme === 'auto'
-        ? (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
-        : theme;
-    // Default colors based on theme
-    const defaultButtonColor = actualTheme === 'dark' ? '#000000' : '#ffffff';
-    const defaultIconColor = actualTheme === 'dark' ? '#ffffff' : '#000000';
-    const finalButtonColor = buttonColor || defaultButtonColor;
-    const finalIconColor = iconColor || defaultIconColor;
     useEffect(() => {
-        if (scrollRef.current) {
+        if (scrollRef.current)
             scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
-        }
     }, [messages]);
-    useEffect(() => {
-        // Add welcome message
-        setMessages([{
-                id: 'welcome',
-                role: 'assistant',
-                text: `Hello! I'm ${agentName}. How can I help you today?`,
-                timestamp: new Date()
-            }]);
-    }, [agentName]);
-    const handleOpen = () => {
-        setIsOpen(true);
-        onOpen === null || onOpen === void 0 ? void 0 : onOpen();
-    };
-    const handleClose = () => {
-        setIsOpen(false);
-        onClose === null || onClose === void 0 ? void 0 : onClose();
-    };
     const handleSend = async (e) => {
+        var _a;
         e === null || e === void 0 ? void 0 : e.preventDefault();
         if (!input.trim() || isLoading)
             return;
-        const userMessage = {
-            id: Date.now().toString(),
-            role: 'user',
-            text: input,
-            timestamp: new Date()
-        };
-        setMessages(prev => [...prev, userMessage]);
-        onMessage === null || onMessage === void 0 ? void 0 : onMessage(input, 'user');
+        const userMsg = { id: Date.now().toString(), role: 'user', text: input };
+        setMessages(prev => [...prev, userMsg]);
         setInput('');
         setIsLoading(true);
         try {
+            const history = messages.map(m => ({ role: m.role === 'assistant' ? 'model' : 'user', text: m.text }));
             const response = await fetch(`${apiUrl}/api/v1/chat`, {
                 method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                    'Authorization': `Bearer ${apiKey}`
-                },
-                body: JSON.stringify({
-                    message: userMessage.text,
-                    history: messages.map(m => ({ role: m.role, content: m.text }))
-                })
+                headers: { 'Content-Type': 'application/json', 'x-api-key': apiKey },
+                body: JSON.stringify({ message: input, history, systemInstruction })
             });
+            if (!response.ok)
+                throw new Error('API request failed');
             const data = await response.json();
-            const assistantMessage = {
-                id: (Date.now() + 1).toString(),
-                role: 'assistant',
-                text: data.response || 'Sorry, I encountered an error.',
-                timestamp: new Date()
-            };
-            setMessages(prev => [...prev, assistantMessage]);
-            onMessage === null || onMessage === void 0 ? void 0 : onMessage(assistantMessage.text, 'assistant');
-        }
-        catch (error) {
-            const errorMessage = {
-                id: (Date.now() + 1).toString(),
-                role: 'assistant',
-                text: 'Sorry, I encountered an error. Please try again.',
-                timestamp: new Date()
-            };
-            setMessages(prev => [...prev, errorMessage]);
+            const botMsg = { id: (Date.now() + 1).toString(), role: 'assistant', text: ((_a = data.response) === null || _a === void 0 ? void 0 : _a.toUpperCase()) || 'ERROR: NO RESPONSE' };
+            setMessages(prev => [...prev, botMsg]);
+        }
+        catch (err) {
+            const errorMsg = { id: (Date.now() + 1).toString(), role: 'assistant', text: 'ERROR: SIGNAL LOST. RETRY.' };
+            setMessages(prev => [...prev, errorMsg]);
         }
         finally {
             setIsLoading(false);
         }
     };
-    const positionStyles = position === 'bottom-left'
-        ? { left: '16px' }
-        : { right: '16px' };
-    const colors = actualTheme === 'dark' ? {
-        bg: '#000000',
-        bgSecondary: '#18181b',
-        border: '#27272a',
-        text: '#ffffff',
-        textSecondary: '#a1a1aa',
-        userBubble: '#27272a',
-        assistantBubble: '#000000',
-    } : {
-        bg: '#ffffff',
-        bgSecondary: '#f4f4f5',
-        border: '#e4e4e7',
-        text: '#000000',
-        textSecondary: '#71717a',
-        userBubble: '#f4f4f5',
-        assistantBubble: '#ffffff',
+    const bgColor = theme === 'light' ? '#ffffff' : '#000000';
+    const textColor = theme === 'light' ? '#000000' : '#ffffff';
+    const borderColor = theme === 'light' ? '#a1a1aa' : '#52525b';
+    const mutedColor = theme === 'light' ? '#71717a' : '#a1a1aa';
+    return (jsxs("div", { style: { display: 'flex', flexDirection: 'column', height: '100%', background: bgColor }, children: [jsxs("div", { ref: scrollRef, style: { flex: 1, overflowY: 'auto', padding: '24px', display: 'flex', flexDirection: 'column', gap: '16px' }, children: [messages.map((msg) => (jsx("div", { style: { display: 'flex', justifyContent: msg.role === 'user' ? 'flex-end' : 'flex-start' }, children: jsxs("div", { style: { display: 'flex', flexDirection: msg.role === 'user' ? 'row-reverse' : 'row', alignItems: 'flex-start', gap: '12px', maxWidth: '85%' }, children: [jsx("div", { style: {
+                                        width: '28px', height: '28px', display: 'flex', alignItems: 'center', justifyContent: 'center',
+                                        border: `1px solid ${msg.role === 'user' ? textColor : borderColor}`,
+                                        background: msg.role === 'user' ? textColor : 'transparent', color: msg.role === 'user' ? bgColor : textColor
+                                    }, children: msg.role === 'user' ? jsx(UserIcon, {}) : jsx(BotIcon, {}) }), jsx("div", { style: {
+                                        padding: '12px 16px', fontSize: '11px', fontWeight: 700, letterSpacing: '0.05em', lineHeight: 1.6,
+                                        border: `1px solid ${borderColor}`, background: msg.role === 'user' ? (theme === 'light' ? '#f4f4f5' : '#27272a') : bgColor,
+                                        color: msg.role === 'user' ? textColor : mutedColor
+                                    }, children: msg.text })] }) }, msg.id))), isLoading && (jsx("div", { style: { display: 'flex', justifyContent: 'flex-start' }, children: jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '12px' }, children: [jsx("div", { style: { width: '28px', height: '28px', display: 'flex', alignItems: 'center', justifyContent: 'center', border: `1px solid ${borderColor}`, color: textColor, opacity: 0.2 }, children: jsx(BotIcon, {}) }), jsx("div", { style: { padding: '16px 24px', border: `1px solid ${borderColor}`, background: bgColor, color: mutedColor }, children: jsx(LoaderIcon, {}) })] }) }))] }), jsx("div", { style: { padding: '24px' }, children: jsxs("form", { onSubmit: handleSend, style: { display: 'flex', gap: '16px' }, children: [jsx("input", { type: "text", value: input, onChange: (e) => setInput(e.target.value), placeholder: "INPUT COMMAND...", disabled: isLoading, style: {
+                                flex: 1, padding: '16px 24px', border: `1px solid ${borderColor}`, background: bgColor, color: textColor,
+                                outline: 'none', fontSize: '10px', fontWeight: 900, textTransform: 'uppercase', letterSpacing: '0.1em'
+                            } }), jsx("button", { type: "submit", disabled: !input.trim() || isLoading, style: {
+                                padding: '16px 24px', background: textColor, color: bgColor, border: 'none', cursor: 'pointer',
+                                fontSize: '10px', fontWeight: 900, textTransform: 'uppercase', letterSpacing: '0.1em',
+                                opacity: !input.trim() || isLoading ? 0.2 : 1
+                            }, children: "EXECUTE" })] }) })] }));
+};
+// Voice Interface Component
+const VoiceInterface = ({ geminiApiKey, voiceName, systemInstruction, theme, onEndCall }) => {
+    const [connectionState, setConnectionState] = useState(ConnectionState.DISCONNECTED);
+    const [errorMsg, setErrorMsg] = useState('');
+    const [isMuted, setIsMuted] = useState(false);
+    const [callDuration, setCallDuration] = useState(0);
+    const [isSpeaking, setIsSpeaking] = useState(false);
+    const [speakingIntensity, setSpeakingIntensity] = useState(0);
+    const callStartTimeRef = useRef(null);
+    const durationIntervalRef = useRef(null);
+    const inputAudioContextRef = useRef(null);
+    const outputAudioContextRef = useRef(null);
+    const inputAnalyserRef = useRef(null);
+    const outputAnalyserRef = useRef(null);
+    const outputGainRef = useRef(null);
+    const nextStartTimeRef = useRef(0);
+    const sourcesRef = useRef(new Set());
+    const speakingAnimationRef = useRef(null);
+    const sessionRef = useRef(null);
+    const streamRef = useRef(null);
+    const scriptProcessorRef = useRef(null);
+    const sourceNodeRef = useRef(null);
+    const cleanupAudio = useCallback(() => {
+        var _a, _b, _c, _d;
+        if (speakingAnimationRef.current) {
+            cancelAnimationFrame(speakingAnimationRef.current);
+            speakingAnimationRef.current = null;
+        }
+        setIsSpeaking(false);
+        setSpeakingIntensity(0);
+        sourcesRef.current.forEach(source => { try {
+            source.stop();
+        }
+        catch (e) { } });
+        sourcesRef.current.clear();
+        if (streamRef.current) {
+            streamRef.current.getTracks().forEach(track => { track.stop(); track.enabled = false; });
+            streamRef.current = null;
+        }
+        if (scriptProcessorRef.current) {
+            try {
+                scriptProcessorRef.current.disconnect();
+            }
+            catch (e) { }
+            scriptProcessorRef.current = null;
+        }
+        if (sourceNodeRef.current) {
+            try {
+                sourceNodeRef.current.disconnect();
+            }
+            catch (e) { }
+            sourceNodeRef.current = null;
+        }
+        if (outputGainRef.current) {
+            try {
+                outputGainRef.current.disconnect();
+            }
+            catch (e) { }
+            outputGainRef.current = null;
+        }
+        if (outputAnalyserRef.current) {
+            try {
+                outputAnalyserRef.current.disconnect();
+            }
+            catch (e) { }
+            outputAnalyserRef.current = null;
+        }
+        if (((_a = inputAudioContextRef.current) === null || _a === void 0 ? void 0 : _a.state) !== 'closed') {
+            try {
+                (_b = inputAudioContextRef.current) === null || _b === void 0 ? void 0 : _b.close();
+            }
+            catch (e) { }
+        }
+        if (((_c = outputAudioContextRef.current) === null || _c === void 0 ? void 0 : _c.state) !== 'closed') {
+            try {
+                (_d = outputAudioContextRef.current) === null || _d === void 0 ? void 0 : _d.close();
+            }
+            catch (e) { }
+        }
+        inputAudioContextRef.current = null;
+        outputAudioContextRef.current = null;
+        inputAnalyserRef.current = null;
+        sessionRef.current = null;
+    }, []);
+    const connect = async () => {
+        try {
+            setConnectionState(ConnectionState.CONNECTING);
+            setErrorMsg('');
+            callStartTimeRef.current = Date.now();
+            durationIntervalRef.current = setInterval(() => {
+                if (callStartTimeRef.current)
+                    setCallDuration(Math.floor((Date.now() - callStartTimeRef.current) / 1000));
+            }, 1000);
+            const AudioContextClass = window.AudioContext || window.webkitAudioContext;
+            const inputCtx = new AudioContextClass({ sampleRate: 16000 });
+            const outputCtx = new AudioContextClass({ sampleRate: 24000 });
+            inputAudioContextRef.current = inputCtx;
+            outputAudioContextRef.current = outputCtx;
+            const analyser = inputCtx.createAnalyser();
+            analyser.fftSize = 256;
+            inputAnalyserRef.current = analyser;
+            const outputAnalyser = outputCtx.createAnalyser();
+            outputAnalyser.fftSize = 256;
+            outputAnalyserRef.current = outputAnalyser;
+            const outputGain = outputCtx.createGain();
+            outputGain.gain.value = 1;
+            outputGainRef.current = outputGain;
+            outputGain.connect(outputAnalyser);
+            outputAnalyser.connect(outputCtx.destination);
+            const monitorSpeaking = () => {
+                if (!outputAnalyserRef.current)
+                    return;
+                const dataArray = new Uint8Array(outputAnalyserRef.current.frequencyBinCount);
+                outputAnalyserRef.current.getByteFrequencyData(dataArray);
+                const average = dataArray.reduce((a, b) => a + b, 0) / dataArray.length;
+                const intensity = Math.min(average / 128, 1);
+                setIsSpeaking(intensity > 0.05);
+                setSpeakingIntensity(intensity);
+                speakingAnimationRef.current = requestAnimationFrame(monitorSpeaking);
+            };
+            monitorSpeaking();
+            const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+            streamRef.current = stream;
+            // Connect to Gemini Live API via WebSocket
+            const wsUrl = `wss://generativelanguage.googleapis.com/ws/google.ai.generativelanguage.v1beta.GenerativeService.BidiGenerateContent?key=${geminiApiKey}`;
+            const ws = new WebSocket(wsUrl);
+            sessionRef.current = ws;
+            ws.onopen = () => {
+                // Send setup message
+                const setupMsg = {
+                    setup: {
+                        model: 'models/gemini-2.5-flash-preview-native-audio-dialog',
+                        generationConfig: { responseModalities: ['AUDIO'], speechConfig: { voiceConfig: { prebuiltVoiceConfig: { voiceName } } } },
+                        systemInstruction: { parts: [{ text: systemInstruction }] }
+                    }
+                };
+                ws.send(JSON.stringify(setupMsg));
+            };
+            ws.onmessage = async (event) => {
+                var _a, _b, _c, _d, _e, _f;
+                const data = JSON.parse(event.data);
+                if (data.setupComplete) {
+                    setConnectionState(ConnectionState.CONNECTED);
+                    // Setup audio input pipeline
+                    const source = inputCtx.createMediaStreamSource(stream);
+                    sourceNodeRef.current = source;
+                    const processor = inputCtx.createScriptProcessor(2048, 1, 1);
+                    scriptProcessorRef.current = processor;
+                    processor.onaudioprocess = (e) => {
+                        if (isMuted || ws.readyState !== WebSocket.OPEN)
+                            return;
+                        const inputData = e.inputBuffer.getChannelData(0);
+                        const pcmBlob = createBlob(inputData);
+                        ws.send(JSON.stringify({ realtimeInput: { mediaChunks: [pcmBlob] } }));
+                    };
+                    source.connect(analyser);
+                    source.connect(processor);
+                    processor.connect(inputCtx.destination);
+                }
+                // Handle audio output
+                const audioData = (_e = (_d = (_c = (_b = (_a = data.serverContent) === null || _a === void 0 ? void 0 : _a.modelTurn) === null || _b === void 0 ? void 0 : _b.parts) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.inlineData) === null || _e === void 0 ? void 0 : _e.data;
+                if (audioData) {
+                    const ctx = outputAudioContextRef.current;
+                    if (!ctx)
+                        return;
+                    nextStartTimeRef.current = Math.max(nextStartTimeRef.current, ctx.currentTime);
+                    const audioBuffer = await decodeAudioData(decode(audioData), ctx, 24000, 1);
+                    const source = ctx.createBufferSource();
+                    source.buffer = audioBuffer;
+                    if (outputGainRef.current)
+                        source.connect(outputGainRef.current);
+                    else
+                        source.connect(ctx.destination);
+                    source.addEventListener('ended', () => sourcesRef.current.delete(source));
+                    source.start(nextStartTimeRef.current);
+                    nextStartTimeRef.current += audioBuffer.duration;
+                    sourcesRef.current.add(source);
+                }
+                if ((_f = data.serverContent) === null || _f === void 0 ? void 0 : _f.interrupted) {
+                    sourcesRef.current.forEach(s => s.stop());
+                    sourcesRef.current.clear();
+                    nextStartTimeRef.current = 0;
+                }
+            };
+            ws.onclose = () => setConnectionState(ConnectionState.DISCONNECTED);
+            ws.onerror = () => {
+                setConnectionState(ConnectionState.ERROR);
+                setErrorMsg('Connection lost. Please try again.');
+                cleanupAudio();
+            };
+        }
+        catch (err) {
+            setConnectionState(ConnectionState.ERROR);
+            setErrorMsg(err.message || 'Failed to access microphone or connect.');
+            cleanupAudio();
+        }
+    };
+    const disconnect = useCallback(() => {
+        callStartTimeRef.current = null;
+        if (durationIntervalRef.current) {
+            clearInterval(durationIntervalRef.current);
+            durationIntervalRef.current = null;
+        }
+        setCallDuration(0);
+        if (sessionRef.current) {
+            try {
+                sessionRef.current.close();
+            }
+            catch (e) { }
+        }
+        cleanupAudio();
+        setConnectionState(ConnectionState.DISCONNECTED);
+    }, [cleanupAudio]);
+    useEffect(() => {
+        connect();
+        return () => disconnect();
+    }, []);
+    const bgColor = theme === 'light' ? '#ffffff' : '#000000';
+    const textColor = theme === 'light' ? '#000000' : '#ffffff';
+    const borderColor = theme === 'light' ? '#a1a1aa' : '#52525b';
+    const mutedColor = '#71717a';
+    return (jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: '32px', height: '100%', padding: '24px' }, children: [jsxs("div", { style: { position: 'relative' }, children: [connectionState === ConnectionState.CONNECTED && isSpeaking && (jsx("div", { style: {
+                            position: 'absolute', inset: 0, borderRadius: '50%', border: `1px solid ${textColor}`,
+                            transform: `scale(${1 + speakingIntensity * 0.3})`, opacity: 0.2, animation: 'vox-ping 1s infinite'
+                        } })), jsx("div", { style: {
+                            width: '112px', height: '112px', borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center',
+                            border: `1px solid ${connectionState === ConnectionState.CONNECTED ? textColor : borderColor}`,
+                            boxShadow: connectionState === ConnectionState.CONNECTED ? `0 0 ${30 + speakingIntensity * 40}px ${theme === 'light' ? 'rgba(0,0,0,0.1)' : 'rgba(255,255,255,0.15)'}` : 'none',
+                            transform: isSpeaking ? `scale(${1 + speakingIntensity * 0.08})` : 'scale(1)', transition: 'all 0.3s'
+                        }, children: connectionState === ConnectionState.CONNECTING ? (jsx("div", { style: { width: '40px', height: '40px', border: `2px solid ${textColor}`, borderTopColor: 'transparent', borderRadius: '50%', animation: 'vox-spin 1s linear infinite' } })) : (jsx("div", { style: { padding: '20px', color: isMuted ? mutedColor : textColor }, children: isMuted ? jsx(MicOffIcon, {}) : jsx(MicIcon, { size: 40 }) })) }), connectionState === ConnectionState.CONNECTED && (jsx("span", { style: { position: 'absolute', bottom: '-4px', right: '-4px', width: '12px', height: '12px', borderRadius: '50%', background: textColor } }))] }), jsxs("div", { style: { width: '100%', maxWidth: '280px', display: 'flex', flexDirection: 'column', gap: '16px' }, children: [jsxs("p", { style: { textAlign: 'center', fontSize: '10px', fontWeight: 900, color: mutedColor, textTransform: 'uppercase', letterSpacing: '0.2em', height: '20px' }, children: [connectionState === ConnectionState.CONNECTING && 'Initializing...', connectionState === ConnectionState.CONNECTED && (isSpeaking ? 'Agent Speaking...' : isMuted ? 'Signal Muted' : 'Listening...'), connectionState === ConnectionState.ERROR && 'Connection Error', connectionState === ConnectionState.DISCONNECTED && 'Disconnected'] }), connectionState === ConnectionState.CONNECTED && callDuration > 0 && (jsxs("p", { style: { textAlign: 'center', fontSize: '11px', fontFamily: 'monospace', color: textColor }, children: [Math.floor(callDuration / 60).toString().padStart(2, '0'), ":", (callDuration % 60).toString().padStart(2, '0')] })), jsx(Visualizer, { analyser: inputAnalyserRef.current, isActive: connectionState === ConnectionState.CONNECTED && !isMuted, theme: theme })] }), connectionState === ConnectionState.ERROR && (jsxs("div", { style: { display: 'flex', alignItems: 'center', fontSize: '10px', textTransform: 'uppercase', letterSpacing: '0.1em', padding: '12px 16px', maxWidth: '280px', textAlign: 'center', color: mutedColor, background: theme === 'light' ? '#f4f4f5' : '#18181b', border: `1px solid ${borderColor}` }, children: [jsx(AlertIcon, {}), jsx("span", { style: { marginLeft: '12px' }, children: errorMsg })] })), connectionState === ConnectionState.CONNECTED && (jsxs("button", { onClick: () => { disconnect(); onEndCall === null || onEndCall === void 0 ? void 0 : onEndCall(); }, style: {
+                    padding: '12px 24px', border: `1px solid ${borderColor}`, background: bgColor, color: mutedColor, cursor: 'pointer',
+                    fontSize: '10px', fontWeight: 900, textTransform: 'uppercase', letterSpacing: '0.1em', display: 'flex', alignItems: 'center', gap: '8px'
+                }, children: [jsx(PhoneOffIcon, {}), "End Call"] }))] }));
+};
+// Main VoxChat Component
+const VoxChat = ({ apiKey, geminiApiKey, apiUrl = 'https://your-server.com', agentName = 'VOX-01', voiceName = 'Kore', systemInstruction = 'You are a helpful AI assistant.', position = 'bottom-right', theme = 'dark', buttonColor, buttonSize = 56, borderRadius = 0, iconColor, onOpen, onClose }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [activeTab, setActiveTab] = useState('text');
+    const [isVoiceActive, setIsVoiceActive] = useState(false);
+    // Invert theme for widget (black in light mode, white in dark mode)
+    const widgetTheme = theme === 'light' ? 'dark' : 'light';
+    const bgColor = widgetTheme === 'light' ? '#ffffff' : '#000000';
+    const textColor = widgetTheme === 'light' ? '#000000' : '#ffffff';
+    const borderColor = widgetTheme === 'light' ? '#a1a1aa' : '#52525b';
+    const mutedColor = '#71717a';
+    const handleOpen = () => { setIsOpen(true); onOpen === null || onOpen === void 0 ? void 0 : onOpen(); };
+    const handleClose = () => { setIsOpen(false); setIsVoiceActive(false); onClose === null || onClose === void 0 ? void 0 : onClose(); };
+    const handleTabChange = (tab) => {
+        if (tab === 'voice' && activeTab !== 'voice') {
+            setActiveTab('voice');
+            setIsVoiceActive(true);
+        }
+        else if (tab === 'text') {
+            setIsVoiceActive(false);
+            setActiveTab('text');
+        }
     };
-    return (jsxs(Fragment, { children: [isOpen && (jsxs("div", { style: {
-                    position: 'fixed',
-                    bottom: '80px',
-                    ...positionStyles,
-                    width: '380px',
-                    maxWidth: 'calc(100vw - 32px)',
-                    height: '500px',
-                    maxHeight: 'calc(100vh - 120px)',
-                    backgroundColor: colors.bg,
-                    border: `1px solid ${colors.border}`,
-                    boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
-                    display: 'flex',
-                    flexDirection: 'column',
-                    zIndex: 9999,
-                    fontFamily: 'system-ui, -apple-system, sans-serif',
-                }, children: [jsxs("div", { style: {
-                            padding: '16px',
-                            borderBottom: `1px solid ${colors.border}`,
-                            display: 'flex',
-                            justifyContent: 'space-between',
-                            alignItems: 'center',
-                        }, children: [jsxs("div", { children: [jsx("div", { style: {
-                                            fontSize: '10px',
-                                            fontWeight: 900,
-                                            color: colors.text,
-                                            textTransform: 'uppercase',
-                                            letterSpacing: '0.1em'
-                                        }, children: agentName }), jsxs("div", { style: {
-                                            fontSize: '9px',
-                                            color: colors.textSecondary,
-                                            textTransform: 'uppercase',
-                                            letterSpacing: '0.1em',
-                                            display: 'flex',
-                                            alignItems: 'center',
-                                            gap: '6px'
-                                        }, children: [jsx("span", { style: {
-                                                    width: '6px',
-                                                    height: '6px',
-                                                    backgroundColor: '#22c55e',
-                                                    borderRadius: '50%'
-                                                } }), "Online"] })] }), jsx("button", { onClick: handleClose, style: {
-                                    background: 'none',
-                                    border: 'none',
-                                    color: colors.textSecondary,
-                                    cursor: 'pointer',
-                                    padding: '4px',
-                                }, children: jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: jsx("path", { d: "M18 6L6 18M6 6l12 12" }) }) })] }), jsxs("div", { ref: scrollRef, style: {
-                            flex: 1,
-                            overflowY: 'auto',
-                            padding: '16px',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            gap: '12px',
-                        }, children: [messages.map((msg) => (jsx("div", { style: {
-                                    display: 'flex',
-                                    justifyContent: msg.role === 'user' ? 'flex-end' : 'flex-start',
-                                }, children: jsx("div", { style: {
-                                        maxWidth: '80%',
-                                        padding: '10px 14px',
-                                        backgroundColor: msg.role === 'user' ? colors.userBubble : colors.assistantBubble,
-                                        border: `1px solid ${colors.border}`,
-                                        color: colors.text,
-                                        fontSize: '13px',
-                                        lineHeight: 1.5,
-                                    }, children: msg.text }) }, msg.id))), isLoading && (jsx("div", { style: { display: 'flex', justifyContent: 'flex-start' }, children: jsx("div", { style: {
-                                        padding: '10px 14px',
-                                        backgroundColor: colors.assistantBubble,
-                                        border: `1px solid ${colors.border}`,
-                                        color: colors.textSecondary,
-                                        fontSize: '13px',
-                                    }, children: "Typing..." }) }))] }), jsxs("form", { onSubmit: handleSend, style: {
-                            padding: '16px',
-                            borderTop: `1px solid ${colors.border}`,
-                            display: 'flex',
-                            gap: '8px',
-                        }, children: [jsx("input", { type: "text", value: input, onChange: (e) => setInput(e.target.value), placeholder: "Type a message...", style: {
-                                    flex: 1,
-                                    padding: '10px 14px',
-                                    backgroundColor: colors.bgSecondary,
-                                    border: `1px solid ${colors.border}`,
-                                    color: colors.text,
-                                    fontSize: '13px',
-                                    outline: 'none',
-                                } }), jsx("button", { type: "submit", disabled: !input.trim() || isLoading, style: {
-                                    padding: '10px 16px',
-                                    backgroundColor: colors.text,
-                                    color: colors.bg,
-                                    border: 'none',
-                                    fontSize: '11px',
-                                    fontWeight: 700,
-                                    textTransform: 'uppercase',
-                                    letterSpacing: '0.05em',
-                                    cursor: input.trim() && !isLoading ? 'pointer' : 'not-allowed',
-                                    opacity: input.trim() && !isLoading ? 1 : 0.5,
-                                }, children: "Send" })] })] })), !isOpen && (jsx("button", { onClick: handleOpen, style: {
-                    position: 'fixed',
-                    bottom: '16px',
-                    ...positionStyles,
-                    width: `${buttonSize}px`,
-                    height: `${buttonSize}px`,
-                    backgroundColor: finalButtonColor,
-                    borderRadius: `${borderRadius}px`,
-                    border: 'none',
-                    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
-                    cursor: 'pointer',
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    zIndex: 9999,
-                    transition: 'transform 0.2s, box-shadow 0.2s',
-                }, onMouseEnter: (e) => {
-                    e.currentTarget.style.transform = 'scale(1.05)';
-                    e.currentTarget.style.boxShadow = '0 6px 20px rgba(0, 0, 0, 0.2)';
-                }, onMouseLeave: (e) => {
-                    e.currentTarget.style.transform = 'scale(1)';
-                    e.currentTarget.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.15)';
-                }, children: jsx("svg", { width: buttonSize * 0.4, height: buttonSize * 0.4, viewBox: "0 0 24 24", fill: "none", stroke: finalIconColor, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: jsx("path", { d: "M7.9 20A9 9 0 1 0 4 16.1L2 22Z" }) }) }))] }));
+    const positionStyles = position === 'bottom-left'
+        ? { bottom: '16px', left: '16px' }
+        : { bottom: '16px', right: '16px' };
+    const btnBg = buttonColor || (theme === 'light' ? '#000000' : '#ffffff');
+    const btnIcon = iconColor || (theme === 'light' ? '#ffffff' : '#000000');
+    return (jsxs(Fragment, { children: [jsx("style", { children: `
+        @keyframes vox-fade-in { from { opacity: 0; transform: translateY(40px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
+        @keyframes vox-spin { to { transform: rotate(360deg); } }
+        @keyframes vox-ping { 0% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(1.15); opacity: 0; } 100% { transform: scale(1); opacity: 0; } }
+        .vox-widget { animation: vox-fade-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
+        .vox-spin { animation: vox-spin 1s linear infinite; }
+        .vox-visualizer { width: 100%; height: 50px; background: transparent; }
+        .vox-scrollbar::-webkit-scrollbar { display: none; }
+        .vox-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
+      ` }), jsxs("div", { style: { position: 'fixed', zIndex: 10000, display: 'flex', flexDirection: 'column', alignItems: position === 'bottom-left' ? 'flex-start' : 'flex-end', gap: '24px', ...positionStyles }, children: [isOpen && (jsxs("div", { className: "vox-widget", style: {
+                            width: 'min(calc(100vw - 32px), 400px)', height: 'min(calc(100vh - 100px), 640px)',
+                            background: bgColor, overflow: 'hidden', display: 'flex', flexDirection: 'column',
+                            border: `1px solid ${borderColor}`, boxShadow: '0 30px 60px -15px rgba(0,0,0,0.5)'
+                        }, children: [jsxs("div", { style: { height: '56px', background: bgColor, display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 24px', flexShrink: 0, borderBottom: `1px solid ${borderColor}` }, children: [jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '12px' }, children: [jsx("div", { style: { width: '32px', height: '32px', border: `1px solid ${borderColor}`, display: 'flex', alignItems: 'center', justifyContent: 'center', color: textColor }, children: jsx(MicIcon, {}) }), jsxs("div", { children: [jsx("h2", { style: { color: textColor, fontWeight: 900, fontSize: '10px', textTransform: 'uppercase', letterSpacing: '0.2em', margin: 0 }, children: agentName }), jsxs("p", { style: { color: mutedColor, fontSize: '9px', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.1em', margin: 0, display: 'flex', alignItems: 'center' }, children: [jsx("span", { style: { width: '4px', height: '4px', background: textColor, borderRadius: '50%', marginRight: '8px' } }), "Active"] })] })] }), jsx("button", { onClick: handleClose, style: { background: 'none', border: 'none', color: mutedColor, cursor: 'pointer', padding: '4px' }, children: jsx(XIcon, {}) })] }), jsxs("div", { style: { display: 'flex', padding: '4px', background: widgetTheme === 'light' ? '#f4f4f5' : '#09090b', borderBottom: `1px solid ${borderColor}`, flexShrink: 0 }, children: [jsx("button", { onClick: () => handleTabChange('text'), style: {
+                                            flex: 1, padding: '12px', fontSize: '10px', fontWeight: 900, textTransform: 'uppercase', letterSpacing: '0.2em',
+                                            background: 'none', border: 'none', cursor: 'pointer', color: activeTab === 'text' ? textColor : mutedColor
+                                        }, children: "Text Interface" }), jsx("div", { style: { width: '1px', background: borderColor } }), jsx("button", { onClick: () => handleTabChange('voice'), style: {
+                                            flex: 1, padding: '12px', fontSize: '10px', fontWeight: 900, textTransform: 'uppercase', letterSpacing: '0.2em',
+                                            background: 'none', border: 'none', cursor: 'pointer', color: activeTab === 'voice' ? textColor : mutedColor
+                                        }, children: "Voice Protocol" })] }), jsx("div", { style: { flex: 1, overflow: 'hidden', position: 'relative', background: bgColor }, children: activeTab === 'text' ? (jsx(TextInterface, { apiKey: apiKey, apiUrl: apiUrl, agentName: agentName, systemInstruction: systemInstruction, theme: widgetTheme })) : (isVoiceActive && jsx(VoiceInterface, { geminiApiKey: geminiApiKey, voiceName: voiceName, systemInstruction: systemInstruction, theme: widgetTheme, onEndCall: () => setIsVoiceActive(false) })) })] })), jsx("button", { onClick: isOpen ? handleClose : handleOpen, style: {
+                            width: `${buttonSize}px`, height: `${buttonSize}px`, borderRadius: `${borderRadius}%`,
+                            background: btnBg, color: btnIcon, border: 'none', cursor: 'pointer',
+                            display: 'flex', alignItems: 'center', justifyContent: 'center',
+                            boxShadow: '0 4px 20px rgba(0,0,0,0.3)', transition: 'transform 0.2s'
+                        }, children: isOpen ? jsx(XIcon, {}) : jsx(MessageIcon, {}) })] })] }));
 };
 
 export { VoxChat, VoxChat as default };