@convai/web-sdk 0.2.2 → 0.2.3-beta.1

package/dist/react/components/rtc-widget/components/AudioVisualizer.js

@@ -0,0 +1,259 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import styled from 'styled-components';
+const VisualizerContainer = styled.div `
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  pointer-events: none;
+  border-radius: 50%;
+  overflow: visible;
+`;
+const Canvas = styled.canvas `
+  display: block;
+  width: 100%;
+  height: 100%;
+`;
+/**
+ * Circular Audio Visualizer Component
+ *
+ * A real-time circular audio visualization component that displays radial bars arranged
+ * in a circle around an avatar. The visualization reacts to the remote participant's
+ * (bot) audio output from a LiveKit room, using logarithmic frequency bands and a
+ * traveling wave animation effect.
+ *
+ * Features:
+ * - Circular radial bar visualization with configurable bar count
+ * - Logarithmic frequency band distribution (low frequencies distributed around the ring)
+ * - Traveling wave animation that propagates around the circle
+ * - Speaking detection with callback support
+ * - Automatic track detection and reconnection
+ * - Canvas-based rendering for smooth animations
+ */
+export const AudioVisualizer = ({ room, size = 350, color = '#10b981', opacity = 0.4, avatarRadius = 80, barCount = 64, onSpeakingChange, }) => {
+    // Refs for canvas and Web Audio API nodes
+    const canvasRef = useRef(null);
+    const animationFrameRef = useRef(null);
+    const audioContextRef = useRef(null);
+    const analyserRef = useRef(null);
+    const sourceNodeRef = useRef(null);
+    const isActiveRef = useRef(false);
+    // Refs for animation and state management
+    const timeRef = useRef(0);
+    const previousSpeakingStateRef = useRef(false);
+    const bandEdgesRef = useRef(null);
+    useEffect(() => {
+        if (!room)
+            return;
+        const canvas = canvasRef.current;
+        if (!canvas)
+            return;
+        const ctx = canvas.getContext('2d');
+        if (!ctx)
+            return;
+        canvas.width = size;
+        canvas.height = size;
+        // Initialize Web Audio API context and analyser
+        const audioContext = new (window.AudioContext || window.webkitAudioContext)();
+        const analyser = audioContext.createAnalyser();
+        analyser.fftSize = 512;
+        analyser.smoothingTimeConstant = 0.6;
+        audioContextRef.current = audioContext;
+        analyserRef.current = analyser;
+        /**
+         * Builds logarithmically-spaced frequency band edges.
+         * This distributes low-frequency energy (which has more power) evenly around
+         * the circular visualization, rather than clustering it at the start.
+         */
+        const buildLogBands = () => {
+            const nyquist = audioContext.sampleRate / 2;
+            const bufferLength = analyser.frequencyBinCount;
+            const minHz = 60;
+            const maxHz = Math.min(8000, nyquist);
+            const edges = Array.from({ length: barCount + 1 }, (_, k) => {
+                const hz = minHz * Math.pow(maxHz / minHz, k / barCount);
+                const bin = Math.max(0, Math.min(bufferLength - 1, Math.floor((hz / nyquist) * bufferLength)));
+                return bin;
+            });
+            // Ensure strictly increasing edges (no zero-width bands)
+            for (let i = 1; i < edges.length; i++) {
+                if (edges[i] <= edges[i - 1])
+                    edges[i] = Math.min(edges[i - 1] + 1, bufferLength - 1);
+            }
+            bandEdgesRef.current = edges;
+        };
+        /**
+         * Finds the bot participant from remote participants.
+         */
+        const findBotParticipant = (remoteParticipants, localParticipant) => {
+            const participants = Array.from(remoteParticipants.values()).filter((p) => p !== localParticipant && p !== room.localParticipant);
+            if (participants.length === 0) {
+                return null;
+            }
+            // Prefer participants with audio tracks (bot typically has audio)
+            const participantsWithAudio = participants.filter((participant) => {
+                if (!participant.trackPublications)
+                    return false;
+                const audioTracks = Array.from(participant.trackPublications.values()).filter((p) => p.kind === 'audio' && p.track);
+                return audioTracks.length > 0;
+            });
+            return participantsWithAudio.length > 0 ? participantsWithAudio[0] : participants[0];
+        };
+        /**
+         * Sets up the audio source by connecting the remote participant's (bot) audio track
+         * to the Web Audio API analyser.
+         */
+        const setupAudioSource = async () => {
+            try {
+                if (audioContext.state === 'suspended')
+                    await audioContext.resume();
+                const remoteParticipants = room.remoteParticipants;
+                if (remoteParticipants.size === 0) {
+                    isActiveRef.current = false;
+                    return;
+                }
+                const botParticipant = findBotParticipant(remoteParticipants, room.localParticipant);
+                if (!botParticipant) {
+                    isActiveRef.current = false;
+                    return;
+                }
+                const audioTracks = Array.from(botParticipant.trackPublications.values()).filter((p) => p.kind === 'audio' && p.track);
+                if (audioTracks.length === 0) {
+                    isActiveRef.current = false;
+                    return;
+                }
+                const liveKitTrack = audioTracks[0].track;
+                const mediaStreamTrack = liveKitTrack.mediaStreamTrack;
+                if (!mediaStreamTrack) {
+                    isActiveRef.current = false;
+                    return;
+                }
+                const mediaStream = new MediaStream([mediaStreamTrack]);
+                if (sourceNodeRef.current)
+                    sourceNodeRef.current.disconnect();
+                const source = audioContext.createMediaStreamSource(mediaStream);
+                source.connect(analyser);
+                sourceNodeRef.current = source;
+                // Build bands after context is ready
+                buildLogBands();
+                isActiveRef.current = true;
+            }
+            catch {
+                isActiveRef.current = false;
+            }
+        };
+        setupAudioSource();
+        const setupTimeout = setTimeout(setupAudioSource, 500);
+        const handleTrackSubscribed = (track, publication, participant) => {
+            if (track && track.kind === 'audio' && participant !== room.localParticipant) {
+                setTimeout(setupAudioSource, 200);
+            }
+        };
+        const handleParticipantConnected = (participant) => {
+            if (participant !== room.localParticipant)
+                setTimeout(setupAudioSource, 200);
+        };
+        room.on('trackSubscribed', handleTrackSubscribed);
+        room.on('participantConnected', handleParticipantConnected);
+        /**
+         * Main rendering function that draws the circular audio visualization.
+         */
+        const bufferLength = analyser.frequencyBinCount;
+        const dataArray = new Uint8Array(bufferLength);
+        const draw = () => {
+            timeRef.current += 0.08;
+            analyser.getByteFrequencyData(dataArray);
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            const centerX = canvas.width / 2;
+            const centerY = canvas.height / 2;
+            // The bars should surround the character, not be clipped inside
+            // Character is 120px (radius 60px), visualizer canvas is 220px (radius 110px)
+            const characterRadius = 60; // Half of 120px character image
+            const innerRadius = characterRadius; // Start bars at edge of character
+            const outerRadius = avatarRadius; // Extend to edge of visualizer canvas
+            const maxBarLength = outerRadius - innerRadius;
+            ctx.save();
+            // No clipping - let bars render freely around the circle
+            const angleStep = (Math.PI * 2) / barCount;
+            // Calculate overall audio level for speaking detection
+            let total = 0;
+            for (let i = 0; i < bufferLength; i++)
+                total += isActiveRef.current ? (dataArray[i] || 0) : 0;
+            const overallLevel = total / (bufferLength * 255);
+            // Speaking detection
+            const speakingThreshold = 0.1;
+            const isSpeaking = isActiveRef.current && overallLevel > speakingThreshold;
+            if (onSpeakingChange && isSpeaking !== previousSpeakingStateRef.current) {
+                previousSpeakingStateRef.current = isSpeaking;
+                onSpeakingChange(isSpeaking);
+            }
+            // Precompute band edges if not ready yet
+            if (!bandEdgesRef.current) {
+                bandEdgesRef.current = Array.from({ length: barCount + 1 }, (_, k) => Math.floor((k / barCount) * bufferLength));
+            }
+            const edges = bandEdgesRef.current;
+            // Traveling wave parameters
+            const waveRevolutions = 2;
+            const phasePerBar = (Math.PI * 2 * waveRevolutions) / barCount;
+            const baseWaveAmp = 0.35;
+            const waveAmp = baseWaveAmp * (0.3 + 0.7 * overallLevel);
+            for (let i = 0; i < barCount; i++) {
+                const angle = i * angleStep - Math.PI / 2;
+                // Calculate average energy for this bar's frequency band
+                const startFreq = edges[i];
+                const endFreq = edges[i + 1];
+                let sum = 0;
+                let count = 0;
+                for (let f = startFreq; f < endFreq && f < bufferLength; f++) {
+                    sum += isActiveRef.current ? (dataArray[f] || 0) : 0;
+                    count++;
+                }
+                const bandAvg = count > 0 ? sum / (count * 255) : 0;
+                // Mix band-specific energy with overall level
+                const energy = 0.4 * bandAvg + 0.6 * overallLevel;
+                // Apply traveling wave modulation
+                const wavePhase = i * phasePerBar;
+                const wave = 1 + waveAmp * Math.sin(timeRef.current + wavePhase);
+                // Final intensity
+                const intensity = Math.min(1, energy * wave);
+                // Convert to bar length
+                const length = Math.max(maxBarLength * 0.03, intensity * maxBarLength * 0.95);
+                // Coordinates
+                const startX = centerX + Math.cos(angle) * innerRadius;
+                const startY = centerY + Math.sin(angle) * innerRadius;
+                const endX = centerX + Math.cos(angle) * (innerRadius + length);
+                const endY = centerY + Math.sin(angle) * (innerRadius + length);
+                // Draw
+                ctx.strokeStyle = color;
+                ctx.lineWidth = 5;
+                ctx.lineCap = 'round';
+                ctx.globalAlpha = opacity * (0.5 + 0.5 * intensity);
+                ctx.beginPath();
+                ctx.moveTo(startX, startY);
+                ctx.lineTo(endX, endY);
+                ctx.stroke();
+            }
+            ctx.globalAlpha = 1;
+            ctx.restore();
+            animationFrameRef.current = requestAnimationFrame(draw);
+        };
+        draw();
+        return () => {
+            clearTimeout(setupTimeout);
+            if (animationFrameRef.current)
+                cancelAnimationFrame(animationFrameRef.current);
+            if (sourceNodeRef.current)
+                sourceNodeRef.current.disconnect();
+            if (analyserRef.current)
+                analyserRef.current.disconnect();
+            if (audioContextRef.current && audioContextRef.current.state !== 'closed') {
+                audioContextRef.current.close();
+            }
+            room.off('trackSubscribed', handleTrackSubscribed);
+            room.off('participantConnected', handleParticipantConnected);
+        };
+    }, [room, size, color, opacity, avatarRadius, barCount, onSpeakingChange]);
+    return (_jsx(VisualizerContainer, { style: { width: size, height: size }, children: _jsx(Canvas, { ref: canvasRef }) }));
+};
+//# sourceMappingURL=AudioVisualizer.js.map

package/dist/react/components/rtc-widget/components/AudioVisualizer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AudioVisualizer.js","sourceRoot":"","sources":["../../../../../src/react/components/rtc-widget/components/AudioVisualizer.tsx"],"names":[],"mappings":"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"}

package/dist/react/components/rtc-widget/components/conviComponents/ConviHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConviHeader.d.ts","sourceRoot":"","sources":["../../../../../../src/react/components/rtc-widget/components/conviComponents/ConviHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAc1B,UAAU,gBAAgB;IACxB,MAAM,EAAE,OAAO,CAAC;IAChB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,WAAW,EAAE,OAAO,CAAC;IACrB,eAAe,EAAE,OAAO,CAAC;IACzB,OAAO,EAAE,OAAO,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,iBAAiB,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;CACvD;AAED,eAAO,MAAM,WAAW,GAAI,kKAYzB,gBAAgB,4CAsIlB,CAAC"}
+{"version":3,"file":"ConviHeader.d.ts","sourceRoot":"","sources":["../../../../../../src/react/components/rtc-widget/components/conviComponents/ConviHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAc1B,UAAU,gBAAgB;IACxB,MAAM,EAAE,OAAO,CAAC;IAChB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,WAAW,EAAE,OAAO,CAAC;IACrB,eAAe,EAAE,OAAO,CAAC;IACzB,OAAO,EAAE,OAAO,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,iBAAiB,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;CACvD;AAED,eAAO,MAAM,WAAW,GAAI,kKAYzB,gBAAgB,4CAwIlB,CAAC"}

package/dist/react/components/rtc-widget/components/conviComponents/ConviHeader.js

@@ -13,7 +13,7 @@ export const ConviHeader = ({ isOpen, isSpeakerEditMode, isVoiceMode, isVerbosit
         }, transition: {
             delay: isOpen ? 0.4 : 0,
             ...iosTransitions.modalSlide,
-        }, children: [_jsx(CloseButton, { onClick: onClose, whileHover: { scale: 1.1 }, whileTap: { scale: 0.9 }, transition: iosTransitions.snappy, style: { cursor: "pointer" }, children: _jsx(ChevronDown, { size: "md" }) }), _jsxs(Title, { children: [characterImage && (_jsx("img", { src: characterImage, alt: characterName, style: {
+        }, children: [_jsx(CloseButton, { onClick: onClose, whileHover: { scale: 1.1 }, whileTap: { scale: 0.9 }, transition: iosTransitions.snappy, style: { cursor: "pointer" }, children: _jsx(ChevronDown, { size: "md" }) }), _jsxs(Title, { children: [characterImage && !isVoiceMode && (_jsx(motion.img, { layoutId: "character-avatar", src: characterImage, alt: characterName, transition: iosTransitions.fadePop, style: {
                             width: "1.5rem",
                             height: "1.5rem",
                             borderRadius: "50%",

package/dist/react/components/rtc-widget/components/conviComponents/ConviHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConviHeader.js","sourceRoot":"","sources":["../../../../../../src/react/components/rtc-widget/components/conviComponents/ConviHeader.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ConviHeader.js","sourceRoot":"","sources":["../../../../../../src/react/components/rtc-widget/components/conviComponents/ConviHeader.tsx"],"names":[],"mappings":"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"}

package/dist/react/components/rtc-widget/components/conviComponents/VoiceModeOverlay.d.ts

@@ -1,8 +1,12 @@
+import { Room } from "livekit-client";
 interface VoiceModeOverlayProps {
     isActive: boolean;
     isTalking: boolean;
     convaiClient?: any;
+    characterImage?: string;
+    characterName?: string;
+    room?: Room | null;
 }
-export declare const VoiceModeOverlay: ({ isActive, isTalking, convaiClient, }: VoiceModeOverlayProps) => import("react/jsx-runtime").JSX.Element;
+export declare const VoiceModeOverlay: ({ isActive, isTalking, convaiClient, characterImage, characterName, room, }: VoiceModeOverlayProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=VoiceModeOverlay.d.ts.map

package/dist/react/components/rtc-widget/components/conviComponents/VoiceModeOverlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VoiceModeOverlay.d.ts","sourceRoot":"","sources":["../../../../../../src/react/components/rtc-widget/components/conviComponents/VoiceModeOverlay.tsx"],"names":[],"mappings":"AAIA,UAAU,qBAAqB;IAC7B,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,GAAG,CAAC;CACpB;AAED,eAAO,MAAM,gBAAgB,GAAI,wCAI9B,qBAAqB,4CA+PvB,CAAC"}
+{"version":3,"file":"VoiceModeOverlay.d.ts","sourceRoot":"","sources":["../../../../../../src/react/components/rtc-widget/components/conviComponents/VoiceModeOverlay.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AAEtC,UAAU,qBAAqB;IAC7B,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,GAAG,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;CACpB;AAED,eAAO,MAAM,gBAAgB,GAAI,6EAO9B,qBAAqB,4CA8YvB,CAAC"}

package/dist/react/components/rtc-widget/components/conviComponents/VoiceModeOverlay.js

@@ -1,21 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
-import { motion } from "framer-motion";
+import { motion, AnimatePresence } from "framer-motion";
 import { aeroTheme } from "../../styles/theme";
-export const VoiceModeOverlay = ({ isActive, isTalking, convaiClient, }) => {
-    const barsCount = 40; // Increased from 5 to 40
-    const isAnimating = isActive || isTalking;
+import { iosTransitions } from "../../styles/framerConfig";
+import { AudioVisualizer } from "../AudioVisualizer";
+export const VoiceModeOverlay = ({ isActive, isTalking, convaiClient, characterImage, characterName = "Character", room, }) => {
+    const barsCount = 40; // Number of bars for user microphone waveform
     const [audioLevels, setAudioLevels] = useState(Array(barsCount).fill(0));
     const analyzerRef = useRef(null);
     const animationFrameRef = useRef(undefined);
     const audioContextRef = useRef(null);
-    const characterAudioContextRef = useRef(null);
-    const characterAnalyzerRef = useRef(null);
-    const mediaSourceNodeRef = useRef(null);
-    // Setup audio analysis for microphone input
+    // Setup audio analysis for USER microphone input ONLY
     useEffect(() => {
         if (!isActive) {
-            // Clean up when not active
+            // Clean up when user is not speaking
             if (animationFrameRef.current) {
                 cancelAnimationFrame(animationFrameRef.current);
             }
@@ -84,62 +82,7 @@ export const VoiceModeOverlay = ({ isActive, isTalking, convaiClient, }) => {
             }
         };
     }, [isActive, barsCount]);
-    // Setup audio analysis for character speech
-    useEffect(() => {
-        if (!isTalking) {
-            if (!isActive) {
-                setAudioLevels(Array(barsCount).fill(0));
-            }
-            return;
-        }
-        // Start low and build up naturally like real speech
-        let startTime = Date.now();
-        let currentLevels = Array(barsCount).fill(0.05); // Start very low
-        let targetLevels = Array(barsCount).fill(0.05);
-        const updateLevels = () => {
-            if (!isTalking)
-                return;
-            const elapsed = (Date.now() - startTime) / 1000; // seconds
-            // Generate new random target levels occasionally (simulating syllables/words)
-            if (Math.random() < 0.08) {
-                // 8% chance per frame = ~5 times per second
-                targetLevels = Array(barsCount)
-                    .fill(0)
-                    .map((_, i) => {
-                    // More variation in the middle bars, less on edges for natural spread
-                    const position = i / barsCount;
-                    const centerWeight = 1 - Math.abs(position - 0.5) * 0.5;
-                    // Random peaks and valleys like speech patterns
-                    const randomPeak = 0.2 + Math.random() * 0.7; // 0.2 to 0.9
-                    // Add some neighbor correlation so bars don't jump independently
-                    const prevTarget = targetLevels[i] || 0.3;
-                    const correlation = prevTarget * 0.4 + randomPeak * 0.6;
-                    return correlation * centerWeight;
-                });
-            }
-            // Smoothly interpolate current levels toward targets (organic movement)
-            currentLevels = currentLevels.map((current, i) => {
-                const target = targetLevels[i];
-                const speed = 0.2; // Smooth but responsive
-                return current + (target - current) * speed;
-            });
-            // Apply a gentle fade-in for the first 0.3 seconds
-            const fadeIn = Math.min(1, elapsed / 0.3);
-            const levels = currentLevels.map((level) => {
-                // Small random jitter for micro-variation
-                const microJitter = 0.95 + Math.random() * 0.1; // 0.95 to 1.05
-                return Math.max(0.05, Math.min(1, level * fadeIn * microJitter));
-            });
-            setAudioLevels(levels);
-            animationFrameRef.current = requestAnimationFrame(updateLevels);
-        };
-        updateLevels();
-        return () => {
-            if (animationFrameRef.current) {
-                cancelAnimationFrame(animationFrameRef.current);
-            }
-        };
-    }, [isTalking, isActive, barsCount]);
+    const [isBotSpeaking, setIsBotSpeaking] = useState(false);
     return (_jsxs("div", { style: {
             position: "absolute",
             top: "50%",
@@ -148,52 +91,165 @@ export const VoiceModeOverlay = ({ isActive, isTalking, convaiClient, }) => {
             textAlign: "center",
             padding: "1rem",
             zIndex: 10,
-            pointerEvents: "auto",
+            pointerEvents: "none",
             display: "flex",
             flexDirection: "column",
             alignItems: "center",
-            gap: "1.5rem",
-        }, children: [_jsx("div", { style: {
+            gap: "2rem",
+        }, children: [_jsxs("div", { style: {
+                    position: "relative",
                     display: "flex",
                     alignItems: "center",
                     justifyContent: "center",
-                    gap: "2px",
-                    height: "80px",
-                    maxWidth: "300px",
-                }, children: Array.from({ length: barsCount }).map((_, i) => {
-                    const level = audioLevels[i] || 0;
-                    const minHeight = 8;
-                    const maxHeight = 70;
-                    const height = minHeight + level * (maxHeight - minHeight);
-                    return (_jsx(motion.div, { animate: {
-                            height: isAnimating ? height : 15,
-                        }, transition: {
-                            duration: 0.08,
-                            ease: "easeOut",
-                        }, style: {
-                            width: "3px",
-                            backgroundColor: isTalking
-                                ? aeroTheme.colors.convai.light
-                                : isActive
-                                    ? aeroTheme.colors.text.primary
-                                    : aeroTheme.colors.neutral[400],
-                            borderRadius: "1.5px",
-                            transformOrigin: "center",
-                        } }, i));
-                }) }), _jsxs("div", { children: [_jsx("div", { style: {
-                            fontSize: "14px",
-                            fontWeight: 500,
+                    isolation: "isolate", // Create stacking context
+                }, children: [room && (_jsx(motion.div, { initial: { opacity: 0, scale: 0.8 }, animate: {
+                            opacity: isBotSpeaking ? 1 : 0,
+                            scale: isBotSpeaking ? 1 : 0.8,
+                        }, transition: iosTransitions.fadePop, style: {
+                            position: "absolute",
+                            width: "220px",
+                            height: "220px",
+                            zIndex: -1, // Negative z-index to ensure it's behind
+                            pointerEvents: "none",
+                        }, children: _jsx(AudioVisualizer, { room: room, size: 220, color: aeroTheme.colors.convai.light, opacity: 0.6, avatarRadius: 110, barCount: 48, onSpeakingChange: setIsBotSpeaking }) })), _jsxs(motion.div, { initial: { scale: 0.8, opacity: 0 }, animate: { scale: 1, opacity: 1 }, exit: { scale: 0.8, opacity: 0 }, transition: iosTransitions.fadePop, style: {
+                            position: "relative",
+                            zIndex: 10, // Higher z-index to be clearly on top
+                            borderRadius: "50%",
+                            overflow: "visible", // Changed to visible to show glow
+                            boxShadow: "0 8px 32px rgba(0, 0, 0, 0.3)",
+                            background: "white",
+                        }, children: [_jsx(motion.div, { animate: {
+                                    rotate: [0, 360],
+                                    scale: isBotSpeaking ? [1, 1.05, 1.02, 1.05, 1] : 1,
+                                }, transition: {
+                                    rotate: { duration: 20, repeat: Infinity, ease: "linear" },
+                                    scale: { duration: 3, repeat: Infinity, ease: "easeInOut" },
+                                }, style: {
+                                    position: "absolute",
+                                    width: "126px",
+                                    height: "126px",
+                                    borderRadius: "50%",
+                                    background: `
+                conic-gradient(
+                  from 0deg,
+                  ${aeroTheme.colors.convai.light}00 0%,
+                  ${aeroTheme.colors.convai.light}40 25%,
+                  ${aeroTheme.colors.convai.dark}60 50%,
+                  ${aeroTheme.colors.convai.light}40 75%,
+                  ${aeroTheme.colors.convai.light}00 100%
+                )
+              `,
+                                    opacity: 0.8,
+                                    filter: "blur(8px)",
+                                    zIndex: -2,
+                                } }), _jsx(motion.div, { animate: {
+                                    rotate: [360, 0],
+                                    scale: isBotSpeaking ? [1, 1.03, 1.06, 1.03, 1] : 1,
+                                }, transition: {
+                                    rotate: { duration: 15, repeat: Infinity, ease: "linear" },
+                                    scale: { duration: 2.5, repeat: Infinity, ease: "easeInOut" },
+                                }, style: {
+                                    position: "absolute",
+                                    width: "126px",
+                                    height: "126px",
+                                    borderRadius: "50%",
+                                    background: `
+                radial-gradient(
+                  ellipse 80% 100% at 30% 40%,
+                  ${aeroTheme.colors.convai.light}50,
+                  ${aeroTheme.colors.convai.light}30 40%,
+                  transparent 70%
+                ),
+                radial-gradient(
+                  ellipse 80% 100% at 70% 60%,
+                  ${aeroTheme.colors.convai.dark}50,
+                  ${aeroTheme.colors.convai.dark}30 40%,
+                  transparent 70%
+                )
+              `,
+                                    opacity: 0.9,
+                                    filter: "blur(6px)",
+                                    zIndex: -1,
+                                } }), _jsx("div", { style: {
+                                    position: "relative",
+                                    borderRadius: "50%",
+                                    overflow: "hidden",
+                                    border: `3px solid rgba(255, 255, 255, 0.2)`,
+                                }, children: characterImage ? (_jsx(motion.img, { src: characterImage, alt: characterName, animate: {
+                                        scale: isBotSpeaking ? 1.05 : 1,
+                                    }, transition: {
+                                        duration: 0.3,
+                                        ease: "easeInOut",
+                                    }, style: {
+                                        width: "120px",
+                                        height: "120px",
+                                        objectFit: "cover",
+                                        display: "block",
+                                    } })) : (_jsx("div", { style: {
+                                        width: "120px",
+                                        height: "120px",
+                                        backgroundColor: aeroTheme.colors.convai.light + "20",
+                                        display: "flex",
+                                        alignItems: "center",
+                                        justifyContent: "center",
+                                        fontSize: "48px",
+                                        color: aeroTheme.colors.convai.light,
+                                        fontWeight: 600,
+                                    }, children: characterName[0]?.toUpperCase() || "C" })) })] }, "center-avatar" // Use key instead of layoutId for independent animation
+                    )] }), _jsx(AnimatePresence, { children: isActive && (_jsx(motion.div, { initial: { opacity: 0, y: 20 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -20 }, transition: iosTransitions.fadePop, style: {
+                        width: "250px",
+                        height: "80px",
+                        position: "relative",
+                    }, children: _jsx("svg", { width: "250", height: "80", style: {
+                            overflow: "visible",
+                        }, children: [0, 1, 2].map((waveIndex) => {
+                            // Calculate wave path based on audio levels
+                            const points = [];
+                            const centerY = 40;
+                            const waveWidth = 250;
+                            const segments = barsCount;
+                            // Calculate average audio level for glow intensity
+                            const avgLevel = audioLevels.reduce((sum, level) => sum + level, 0) / audioLevels.length;
+                            const glowIntensity = avgLevel * 35; // 0-35px glow (increased from 20)
+                            // Green color variants for each wave
+                            const waveColors = [
+                                aeroTheme.colors.convai.light, // Bright green - front wave
+                                aeroTheme.colors.convai.light, // Medium green - mid wave
+                                "#34d399", // Medium-light green - back wave (lighter than dark)
+                            ];
+                            for (let i = 0; i <= segments; i++) {
+                                const x = (i / segments) * waveWidth;
+                                const levelIndex = Math.floor((i / segments) * (audioLevels.length - 1));
+                                const level = audioLevels[levelIndex] || 0;
+                                // When idle (low audio), show straight line
+                                // When active, create waves with increased amplitude
+                                const phase = (Date.now() / 500 + i * 0.2 + waveIndex * 1.5) % (Math.PI * 2);
+                                // Only add wave motion when there's audio
+                                // Idle: amplitude ~0 (straight line)
+                                // Active: amplitude up to 25px (increased from 15)
+                                const baseAmplitude = avgLevel > 0.05 ? (2 + waveIndex * 1.5) : 0;
+                                const amplitude = baseAmplitude + level * (25 - baseAmplitude);
+                                const y = centerY + Math.sin(phase) * amplitude;
+                                points.push(`${x},${y}`);
+                            }
+                            return (_jsx(motion.path, { d: `M ${points.join(" L ")}`, fill: "none", stroke: waveColors[waveIndex], strokeWidth: 2.5 - waveIndex * 0.4, strokeLinecap: "round", strokeLinejoin: "round", opacity: 0.95 - waveIndex * 0.15, animate: {
+                                    filter: `drop-shadow(0 0 ${glowIntensity}px ${waveColors[waveIndex]}) blur(${waveIndex * 0.3}px)`,
+                                }, transition: {
+                                    duration: 0.1,
+                                    ease: "easeOut",
+                                } }, waveIndex));
+                        }) }) })) }), _jsxs(motion.div, { initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, transition: { delay: 0.2, ...iosTransitions.fadePop }, children: [_jsx("div", { style: {
+                            fontSize: "16px",
+                            fontWeight: 600,
                             color: aeroTheme.colors.text.primary,
                             marginBottom: "0.5rem",
                         }, children: isTalking
-                            ? "Character Speaking..."
+                            ? `${characterName} Speaking...`
                             : isActive
                                 ? "Listening..."
-                                : "Voice Only Mode" }), _jsx("div", { style: {
-                            fontSize: "12px",
+                                : "Voice Mode" }), _jsx("div", { style: {
+                            fontSize: "13px",
                             color: aeroTheme.colors.text.secondary,
-                        }, children: isActive || isTalking
-                            ? "Audio active"
-                            : "Press and hold the microphone to talk" })] })] }));
+                        }, children: isActive || isTalking ? "Audio active" : "Tap microphone to talk" })] })] }));
 };
 //# sourceMappingURL=VoiceModeOverlay.js.map