@convai/web-sdk 1.8.0-beta.1 → 1.8.0-beta.3

package/dist/vanilla/ConvaiWidget.js

@@ -417,6 +417,28 @@ export function createConvaiWidget(container, options) {
         morphingContainer.addEventListener("click", handleLauncherClick);
     };
     // Create Voice Mode Overlay
+    /**
+     * Voice mode, matched to the React overlay (VoiceModeOverlay.tsx) rather
+     * than to what this file used to draw.
+     *
+     * The two had diverged badly: React centres the character's avatar inside
+     * two counter-rotating liquid-gradient layers and paints the user's
+     * microphone as three overlapping sine waves on a canvas, while this file
+     * drew forty grey vertical bars and no avatar at all. Same product, two
+     * unrelated screens.
+     *
+     * What is reproduced here, value for value: the 120px avatar with its 3px
+     * rgba(255,255,255,0.2) ring and letter fallback, the 126px conic and
+     * radial gradient layers (20s clockwise / 15s anticlockwise, blurred 8px
+     * and 6px), the 250x80 canvas carrying three waves, and the status text at
+     * 16px/600 over 13px with React's wording.
+     *
+     * The one deliberate omission is the `AudioVisualizer` ring that React
+     * fades in behind the avatar while the character speaks: it is a 364-line
+     * component wired directly to a LiveKit `Room`, and porting it is its own
+     * change. The avatar still breathes while the character speaks, so the
+     * speaking state reads without it.
+     */
     const createVoiceModeOverlay = () => {
         const overlay = document.createElement("div");
         overlay.style.cssText = `
@@ -431,59 +453,159 @@ export function createConvaiWidget(container, options) {
       display: none;
       flex-direction: column;
       align-items: center;
-      gap: 24px;
+      gap: 32px;
     `;
-        // Bars Container
-        const barsContainer = document.createElement("div");
-        barsContainer.id = "voice-bars-container";
-        barsContainer.style.cssText = `
+        // --- Avatar, with the two rotating gradient layers behind it ----------
+        const avatarWrap = document.createElement("div");
+        avatarWrap.style.cssText = `
+      position: relative;
       display: flex;
       align-items: center;
       justify-content: center;
-      gap: 2px;
-      height: 80px;
-      max-width: 300px;
+      isolation: isolate;
     `;
-        // Create 40 bars
-        for (let i = 0; i < 40; i++) {
-            const bar = document.createElement("div");
-            bar.className = "voice-bar";
-            bar.style.cssText = `
-        width: 3px;
-        height: 15px;
-        background-color: ${aeroTheme.colors.neutral[400]};
-        border-radius: 1.5px;
-        transition: height 0.08s ease-out, background-color 0.2s;
-        transform-origin: center;
-      `;
-            barsContainer.appendChild(bar);
-        }
-        overlay.appendChild(barsContainer);
-        // Status Text
+        const avatarStack = document.createElement("div");
+        avatarStack.className = "convai-voice-avatar";
+        refs.voiceModeAvatar = avatarStack;
+        avatarStack.style.cssText = `
+      position: relative;
+      z-index: 10;
+      border-radius: 50%;
+      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+      background: white;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    `;
+        const accent = `var(--convai-accent, ${aeroTheme.colors.convai.light})`;
+        const layer1 = document.createElement("div");
+        layer1.className = "convai-voice-gradient";
+        layer1.style.cssText = `
+      position: absolute;
+      width: 126px;
+      height: 126px;
+      border-radius: 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);
+      z-index: -2;
+      animation: convaiVoiceSpin 20s linear infinite;
+    `;
+        const layer2 = document.createElement("div");
+        layer2.className = "convai-voice-gradient";
+        layer2.style.cssText = `
+      position: absolute;
+      width: 126px;
+      height: 126px;
+      border-radius: 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);
+      z-index: -1;
+      animation: convaiVoiceSpinReverse 15s linear infinite;
+    `;
+        // The image is clipped by its own container so the gradients above stay
+        // visible outside it — React nests it the same way for the same reason.
+        const avatarClip = document.createElement("div");
+        avatarClip.style.cssText = `
+      position: relative;
+      border-radius: 50%;
+      overflow: hidden;
+      border: 3px solid rgba(255, 255, 255, 0.2);
+      width: 120px;
+      height: 120px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    `;
+        refs.voiceModeAvatarClip = avatarClip;
+        avatarStack.append(layer1, layer2, avatarClip);
+        avatarWrap.appendChild(avatarStack);
+        overlay.appendChild(avatarWrap);
+        // --- The user's microphone, as three waves on a canvas ----------------
+        const canvas = document.createElement("canvas");
+        canvas.className = "convai-voice-wave";
+        canvas.style.cssText = `width: 250px; height: 80px;`;
+        refs.voiceModeCanvas = canvas;
+        overlay.appendChild(canvas);
+        // --- Status text ------------------------------------------------------
         const statusContainer = document.createElement("div");
         const statusTitle = document.createElement("div");
         statusTitle.id = "voice-mode-title";
         refs.voiceModeTitle = statusTitle;
         statusTitle.style.cssText = `
-      font-size: 14px;
-      font-weight: 500;
+      font-size: 16px;
+      font-weight: 600;
       color: var(--convai-panel-fg, ${aeroTheme.colors.text.primary});
       margin-bottom: 8px;
     `;
-        statusTitle.textContent = "Voice Only Mode";
+        statusTitle.textContent = "Voice Mode";
         const statusSubtitle = document.createElement("div");
         statusSubtitle.id = "voice-mode-subtitle";
         refs.voiceModeSubtitle = statusSubtitle;
         statusSubtitle.style.cssText = `
-      font-size: 12px;
+      font-size: 13px;
       color: ${aeroTheme.colors.text.secondary};
     `;
-        statusSubtitle.textContent = "Press and hold the microphone to talk";
-        statusContainer.appendChild(statusTitle);
-        statusContainer.appendChild(statusSubtitle);
+        statusSubtitle.textContent = "Tap microphone to talk";
+        statusContainer.append(statusTitle, statusSubtitle);
         overlay.appendChild(statusContainer);
+        void accent;
         return overlay;
     };
+    /**
+     * Fills the voice-mode avatar from the character info fetch, or falls back
+     * to the character's initial the way React does. Called from
+     * updateHeader(), so it tracks a late `fetchCharacterInfo()` rather than
+     * being fixed at construction.
+     */
+    const updateVoiceModeAvatar = () => {
+        const clip = refs.voiceModeAvatarClip;
+        if (!clip)
+            return;
+        const wanted = characterImage || `letter:${characterName}`;
+        if (clip.dataset.filledWith === wanted)
+            return;
+        clip.dataset.filledWith = wanted;
+        clip.replaceChildren();
+        if (characterImage) {
+            const img = document.createElement("img");
+            img.src = characterImage;
+            img.alt = characterName;
+            img.style.cssText = `width: 120px; height: 120px; object-fit: cover; display: block;`;
+            clip.appendChild(img);
+            return;
+        }
+        const letter = document.createElement("div");
+        letter.style.cssText = `
+      width: 120px;
+      height: 120px;
+      background-color: ${aeroTheme.colors.convai.light}20;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 48px;
+      font-weight: 600;
+      color: var(--convai-accent, ${aeroTheme.colors.convai.light});
+    `;
+        letter.textContent = characterName[0]?.toUpperCase() || "C";
+        clip.appendChild(letter);
+    };
     // Create Connecting Overlay -- matches React's inline AnimatePresence
     // block exactly (ConvaiWidget.tsx:681-737): shown whenever
     // `isConnected && !isBotReady`, covering just the content area (not the
@@ -571,112 +693,137 @@ export function createConvaiWidget(container, options) {
     };
     // Audio Analysis State for Voice Mode
     let audioLevels = Array(40).fill(0);
-    let targetLevels = Array(40).fill(0.05);
-    let currentLevels = Array(40).fill(0.05);
     let startTime = 0;
-    // Audio Analysis Logic
+    /**
+     * Paints the three overlapping sine waves React draws for the user's
+     * microphone (VoiceModeOverlay.tsx's `drawWaves`), including its two
+     * performance guards, which matter more here than there: this canvas sits
+     * over whatever the host page is rendering, and every repaint forces the
+     * compositor to re-blend the whole panel. So it runs at 30fps rather than
+     * 60, and stops entirely while the input is silent — the static line is
+     * already on the canvas at that point.
+     */
+    let waveFrameParity = 0;
+    let waveWasSilent = false;
+    const drawWaves = () => {
+        const canvas = refs.voiceModeCanvas;
+        if (!canvas)
+            return;
+        waveFrameParity ^= 1;
+        if (waveFrameParity)
+            return;
+        let sum = 0;
+        for (let i = 0; i < audioLevels.length; i++)
+            sum += audioLevels[i];
+        const silent = sum / audioLevels.length < 0.012;
+        if (silent && waveWasSilent)
+            return;
+        waveWasSilent = silent;
+        const dpr = Math.min(window.devicePixelRatio || 1, 2);
+        if (canvas.width !== 250 * dpr) {
+            canvas.width = 250 * dpr;
+            canvas.height = 80 * dpr;
+        }
+        const ctx = canvas.getContext("2d");
+        if (!ctx)
+            return;
+        ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+        ctx.clearRect(0, 0, 250, 80);
+        const centerY = 40;
+        const waveWidth = 250;
+        const segments = 40;
+        const avgLevel = sum / audioLevels.length;
+        const waveColors = [
+            aeroTheme.colors.convai.light,
+            aeroTheme.colors.convai.light,
+            "#34d399",
+        ];
+        ctx.lineCap = "round";
+        ctx.lineJoin = "round";
+        for (let waveIndex = 2; waveIndex >= 0; waveIndex--) {
+            ctx.beginPath();
+            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;
+                const phase = (Date.now() / 500 + i * 0.2 + waveIndex * 1.5) % (Math.PI * 2);
+                const baseAmplitude = avgLevel > 0.05 ? 2 + waveIndex * 1.5 : 0;
+                const amplitude = baseAmplitude + level * (25 - baseAmplitude);
+                const y = centerY + Math.sin(phase) * amplitude;
+                if (i === 0)
+                    ctx.moveTo(x, y);
+                else
+                    ctx.lineTo(x, y);
+            }
+            ctx.strokeStyle = waveColors[waveIndex];
+            ctx.globalAlpha = 0.18 * (0.3 + avgLevel);
+            ctx.lineWidth = 2.5 - waveIndex * 0.4 + 8 * avgLevel + 3;
+            ctx.stroke();
+            ctx.globalAlpha = 0.95 - waveIndex * 0.15;
+            ctx.lineWidth = 2.5 - waveIndex * 0.4;
+            ctx.stroke();
+        }
+        ctx.globalAlpha = 1;
+    };
+    /**
+     * The voice-mode frame loop. Keeps the name `updateAudioBars` because
+     * every call site refers to it; what it drives is now the avatar, the
+     * canvas and the status text rather than forty bars.
+     */
     const updateAudioBars = () => {
         if (!voiceModeOverlay)
             return;
-        const bars = voiceModeOverlay.querySelectorAll(".voice-bar");
         const isTalking = client.state.isSpeaking;
-        const isListening = client.state.isListening; // User is speaking (from user-started-speaking)
-        const isAnimating = isListening || isTalking;
-        // Update colors based on state
-        bars.forEach((bar) => {
-            bar.style.backgroundColor = isTalking
-                ? `var(--convai-accent, ${aeroTheme.colors.convai.light})`
-                : isListening
-                    ? aeroTheme.colors.text.primary
-                    : aeroTheme.colors.neutral[400];
-        });
-        // Update Text
+        const isListening = client.state.isListening;
+        const micOpen = !client.audioControls.isAudioMuted;
+        // The avatar breathes while the character speaks — React drives the same
+        // thing with a framer-motion scale keyframe.
+        const avatar = refs.voiceModeAvatar;
+        if (avatar) {
+            const wanted = isTalking ? "convaiVoiceBreathe 3s ease-in-out infinite" : "";
+            if (avatar.style.animation !== wanted)
+                avatar.style.animation = wanted;
+        }
+        // React's exact wording, including "Voice Mode" rather than the
+        // "Voice Only Mode" this file used to show.
         const title = refs.voiceModeTitle;
         const subtitle = refs.voiceModeSubtitle;
         if (title) {
             title.textContent = isTalking
-                ? "Character Speaking..."
-                : isListening
+                ? `${characterName} Speaking...`
+                : isListening || micOpen
                     ? "Listening..."
-                    : "Voice Only Mode";
+                    : "Voice Mode";
         }
         if (subtitle) {
             subtitle.textContent =
-                isListening || isTalking
-                    ? "Audio active"
-                    : "Press and hold the microphone to talk";
+                isListening || micOpen || isTalking ? "Audio active" : "Tap microphone to talk";
         }
-        // Animation Logic - Matches React version (animate when user or bot is active)
-        if ((isListening || !client.audioControls.isAudioMuted) && analyzer && dataArray) {
-            // Use time domain data (waveform) instead of frequency
+        if ((isListening || micOpen) && analyzer && dataArray) {
             // @ts-ignore - TypeScript strict mode issue with Uint8Array type
             analyzer.getByteTimeDomainData(dataArray);
-            // Calculate RMS (Root Mean Square) for volume
             let sum = 0;
             for (let i = 0; i < dataArray.length; i++) {
-                const normalized = (dataArray[i] - 128) / 128; // Center around 0
+                const normalized = (dataArray[i] - 128) / 128;
                 sum += normalized * normalized;
             }
             const rms = Math.sqrt(sum / dataArray.length);
-            // Apply some scaling and clamping
-            const volume = Math.min(1, rms * 3); // Boost sensitivity
-            // Create left-to-right wave effect
-            const minHeight = 8;
-            const maxHeight = 70;
-            bars.forEach((bar, i) => {
-                // Progressive wave from left to right
-                const position = i / 40; // 0 to 1 from left to right
+            const volume = Math.min(1, rms * 3);
+            for (let i = 0; i < audioLevels.length; i++) {
+                const position = i / audioLevels.length;
                 const wavePhase = Date.now() / 300 + position * Math.PI * 2;
-                const waveVariation = Math.sin(wavePhase) * 0.15 + 0.85; // 0.7 to 1.0
-                const level = volume * waveVariation;
-                const height = minHeight + level * (maxHeight - minHeight);
-                bar.style.height = `${Math.max(minHeight, height)}px`;
-            });
-        }
-        else if (isTalking) {
-            // Simulate speaking bars with natural speech patterns
-            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(40)
-                    .fill(0)
-                    .map((_, i) => {
-                    // More variation in the middle bars, less on edges for natural spread
-                    const position = i / 40;
-                    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;
-                });
+                const waveVariation = Math.sin(wavePhase) * 0.15 + 0.85;
+                audioLevels[i] = volume * waveVariation;
             }
-            // 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 minHeight = 8;
-            const maxHeight = 70;
-            bars.forEach((bar, i) => {
-                // Small random jitter for micro-variation
-                const microJitter = 0.95 + Math.random() * 0.1; // 0.95 to 1.05
-                const level = Math.max(0.05, Math.min(1, currentLevels[i] * fadeIn * microJitter));
-                const height = minHeight + level * (maxHeight - minHeight);
-                bar.style.height = `${Math.max(minHeight, height)}px`;
-            });
         }
         else {
-            // Reset to idle state
-            bars.forEach((bar) => {
-                bar.style.height = "15px";
-            });
+            // The waves settle to a flat line rather than animating on the
+            // character's behalf: React paints this canvas from the microphone
+            // only, and the character's own speech is the avatar's job.
+            for (let i = 0; i < audioLevels.length; i++)
+                audioLevels[i] = 0;
         }
+        drawWaves();
         rafId = requestAnimationFrame(updateAudioBars);
     };
     const startAudioAnalysis = async () => {
@@ -921,6 +1068,7 @@ export function createConvaiWidget(container, options) {
         // needs the connecting overlay re-evaluated -- it depends on the same
         // `isConnected`/`isBotReady`/`characterName` inputs.
         updateConnectingOverlay();
+        updateVoiceModeAvatar();
     };
     // Create message list
     const createMessageList = () => {
@@ -1770,8 +1918,6 @@ export function createConvaiWidget(container, options) {
             updateHeader();
             // Reset animation state for voice mode
             startTime = Date.now();
-            currentLevels = Array(40).fill(0.05);
-            targetLevels = Array(40).fill(0.05);
             // Start Audio Analysis
             startAudioAnalysis();
         }
@@ -2137,8 +2283,6 @@ export function createConvaiWidget(container, options) {
                 // Reset when not speaking
                 if (startTime && !client.state.isSpeaking) {
                     startTime = 0;
-                    currentLevels = Array(40).fill(0.05);
-                    targetLevels = Array(40).fill(0.05);
                 }
             }
             // Auto-collapse when disconnected