@convai/web-sdk 0.1.1-beta.4 → 0.2.0

package/dist/vanilla/ConvaiWidget.js

@@ -0,0 +1,1835 @@
+/**
+ * Vanilla ConvaiWidget - Complete UI widget for Convai conversations
+ * Ports the React ConvaiWidget to vanilla TypeScript with DOM manipulation
+ */
+import { AudioRenderer } from "./AudioRenderer";
+import { aeroTheme, injectGlobalStyles } from "./styles";
+import { Icons } from "./icons";
+/**
+ * Create a Convai chat widget in the specified container
+ *
+ * @param container - HTML element to attach the widget to
+ * @param options - Widget configuration options
+ * @returns VanillaWidget instance with destroy method
+ *
+ * @example
+ * ```typescript
+ * import { ConvaiClient, createConvaiWidget } from '@convai/web-sdk/vanilla';
+ *
+ * const client = new ConvaiClient();
+ * await client.connect({
+ *   apiKey: 'your-api-key',
+ *   characterId: 'your-character-id'
+ * });
+ *
+ * const widget = createConvaiWidget(document.body, {
+ *   convaiClient: client,
+ *   showVideo: true,
+ *   showScreenShare: true
+ * });
+ *
+ * // Later, cleanup
+ * widget.destroy();
+ * ```
+ */
+export function createConvaiWidget(container, options) {
+    const { convaiClient, showVideo = true, showScreenShare = true } = options;
+    // Inject global styles
+    injectGlobalStyles();
+    // State
+    let isOpen = false;
+    let isSettingsOpen = false;
+    let isVoiceMode = false;
+    let isMuted = false;
+    let isVideoVisible = false;
+    let inputValue = "";
+    let characterName = "Character";
+    let characterImage = "";
+    let audioRenderer = null;
+    // DOM elements (will be created below)
+    let rootElement;
+    let morphingContainer;
+    let buttonContent;
+    let chatContent;
+    let headerElement;
+    let contentElement;
+    let footerElement;
+    let inputElement;
+    let messageListElement;
+    let settingsTray;
+    let floatingVideo;
+    let voiceModeOverlay;
+    // Audio Analysis State
+    let audioContext = null;
+    let analyzer = null;
+    let dataArray = null;
+    let rafId = null;
+    let source = null;
+    // Fetch character info - matches React useCharacterInfo hook
+    const fetchCharacterInfo = async () => {
+        if (!convaiClient.apiKey || !convaiClient.characterId)
+            return;
+        try {
+            const response = await fetch("https://api.convai.com/character/get", {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                    "CONVAI-API-KEY": convaiClient.apiKey,
+                },
+                body: JSON.stringify({ charID: convaiClient.characterId }),
+            });
+            if (response.ok) {
+                const data = await response.json();
+                // Extract character name and image with fallbacks - matches React version
+                characterName = data.character_name || "Convi";
+                characterImage =
+                    data.model_details?.METAHUMAN?.avatar_image_square ||
+                        data.model_details?.METAHUMAN?.avatar_image ||
+                        data.model_details?.modelPlaceholder ||
+                        "";
+                updateHeader();
+            }
+        }
+        catch (error) {
+            console.error("Failed to fetch character info:", error);
+        }
+    };
+    // Create root structure
+    const createDOM = () => {
+        rootElement = document.createElement("div");
+        rootElement.className = "convai-widget";
+        rootElement.style.cssText = `
+      position: fixed;
+      bottom: 1.5rem;
+      right: 1.5rem;
+      z-index: ${aeroTheme.zIndex.modal};
+      font-family: ${aeroTheme.typography.fontFamily.primary};
+    `;
+        // Morphing container
+        morphingContainer = document.createElement("div");
+        morphingContainer.style.cssText = `
+      position: relative;
+      width: 4rem;
+      height: 4rem;
+      background: ${aeroTheme.colors.glass.backdrop};
+      backdrop-filter: ${aeroTheme.glass.backdrop};
+      border: ${aeroTheme.glass.border};
+      border-radius: 50%;
+      box-shadow: ${aeroTheme.shadows.glass};
+      transition: all 0.3s ease-in-out;
+      overflow: hidden;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+    `;
+        // Button content (logo)
+        buttonContent = document.createElement("div");
+        buttonContent.style.cssText = `
+      position: absolute;
+      inset: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: opacity 0.3s, transform 0.3s;
+      opacity: 1;
+      transform: scale(1);
+    `;
+        const convaiLogo = Icons.ConvaiLogo("xl", "idle");
+        convaiLogo.style.color = aeroTheme.colors.convai.light;
+        buttonContent.appendChild(convaiLogo);
+        // Chat content
+        chatContent = document.createElement("div");
+        chatContent.style.cssText = `
+      position: absolute;
+      inset: 0;
+      display: flex;
+      flex-direction: column;
+      opacity: 0;
+      transform: scale(0.8);
+      transition: opacity 0.2s, transform 0.2s;
+      pointer-events: none;
+    `;
+        // Voice Mode Overlay
+        voiceModeOverlay = createVoiceModeOverlay();
+        chatContent.appendChild(voiceModeOverlay);
+        // Header
+        headerElement = createHeader();
+        // Content area
+        contentElement = document.createElement("div");
+        contentElement.style.cssText = `
+      flex: 1;
+      overflow-y: auto;
+      padding: 1rem;
+      background: transparent;
+    `;
+        messageListElement = createMessageList();
+        contentElement.appendChild(messageListElement);
+        // Footer
+        footerElement = createFooter();
+        chatContent.appendChild(headerElement);
+        chatContent.appendChild(contentElement);
+        chatContent.appendChild(footerElement);
+        morphingContainer.appendChild(buttonContent);
+        morphingContainer.appendChild(chatContent);
+        rootElement.appendChild(morphingContainer);
+        // Settings tray
+        settingsTray = createSettingsTray();
+        rootElement.appendChild(settingsTray);
+        // Floating video
+        floatingVideo = createFloatingVideo();
+        container.appendChild(floatingVideo);
+        container.appendChild(rootElement);
+        // Event listeners
+        morphingContainer.addEventListener("click", handleToggle);
+    };
+    // Create Voice Mode Overlay
+    const createVoiceModeOverlay = () => {
+        const overlay = document.createElement("div");
+        overlay.style.cssText = `
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      text-align: center;
+      padding: 1rem;
+      z-index: 10;
+      pointer-events: auto;
+      display: none;
+      flex-direction: column;
+      align-items: center;
+      gap: 1.5rem;
+    `;
+        // Bars Container
+        const barsContainer = document.createElement("div");
+        barsContainer.id = "voice-bars-container";
+        barsContainer.style.cssText = `
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 2px;
+      height: 80px;
+      max-width: 300px;
+    `;
+        // 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 statusContainer = document.createElement("div");
+        const statusTitle = document.createElement("div");
+        statusTitle.id = "voice-mode-title";
+        statusTitle.style.cssText = `
+      font-size: 14px;
+      font-weight: 500;
+      color: ${aeroTheme.colors.text.primary};
+      margin-bottom: 0.5rem;
+    `;
+        statusTitle.textContent = "Voice Only Mode";
+        const statusSubtitle = document.createElement("div");
+        statusSubtitle.id = "voice-mode-subtitle";
+        statusSubtitle.style.cssText = `
+      font-size: 12px;
+      color: ${aeroTheme.colors.text.secondary};
+    `;
+        statusSubtitle.textContent = "Press and hold the microphone to talk";
+        statusContainer.appendChild(statusTitle);
+        statusContainer.appendChild(statusSubtitle);
+        overlay.appendChild(statusContainer);
+        return overlay;
+    };
+    // 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
+    const updateAudioBars = () => {
+        if (!voiceModeOverlay)
+            return;
+        const bars = voiceModeOverlay.querySelectorAll(".voice-bar");
+        const isTalking = convaiClient.state.isSpeaking;
+        const isListening = !convaiClient.audioControls.isAudioMuted;
+        const isAnimating = isListening || isTalking;
+        // Update colors based on state
+        bars.forEach((bar) => {
+            bar.style.backgroundColor = isTalking
+                ? aeroTheme.colors.convai.light
+                : isListening
+                    ? aeroTheme.colors.text.primary
+                    : aeroTheme.colors.neutral[400];
+        });
+        // Update Text
+        const title = document.getElementById("voice-mode-title");
+        const subtitle = document.getElementById("voice-mode-subtitle");
+        if (title) {
+            title.textContent = isTalking
+                ? "Character Speaking..."
+                : isListening
+                    ? "Listening..."
+                    : "Voice Only Mode";
+        }
+        if (subtitle) {
+            subtitle.textContent =
+                isListening || isTalking
+                    ? "Audio active"
+                    : "Press and hold the microphone to talk";
+        }
+        // Animation Logic - Matches React version
+        if (isListening && analyzer && dataArray) {
+            // Use time domain data (waveform) instead of frequency
+            // @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
+                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 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;
+                });
+            }
+            // 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";
+            });
+        }
+        rafId = requestAnimationFrame(updateAudioBars);
+    };
+    const startAudioAnalysis = async () => {
+        try {
+            if (!audioContext) {
+                audioContext = new (window.AudioContext ||
+                    window.webkitAudioContext)();
+            }
+            if (audioContext.state === "suspended") {
+                await audioContext.resume();
+            }
+            const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+            analyzer = audioContext.createAnalyser();
+            analyzer.fftSize = 256;
+            analyzer.smoothingTimeConstant = 0.7;
+            source = audioContext.createMediaStreamSource(stream);
+            source.connect(analyzer);
+            dataArray = new Uint8Array(analyzer.fftSize);
+            updateAudioBars();
+        }
+        catch (e) {
+            console.error("Audio analysis setup failed:", e);
+        }
+    };
+    const stopAudioAnalysis = () => {
+        if (rafId)
+            cancelAnimationFrame(rafId);
+        if (source) {
+            source.disconnect();
+            source.mediaStream.getTracks().forEach((t) => t.stop());
+            source = null;
+        }
+        // Keep context alive if possible, or close it? React component closes it.
+        // We can keep it for reuse or close. Let's keep it simple.
+    };
+    // Create header
+    const createHeader = () => {
+        const header = document.createElement("div");
+        header.style.cssText = `
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 1rem;
+      border-bottom: 1px solid ${aeroTheme.colors.neutral[200]};
+      background: white;
+      position: relative;
+    `;
+        // Close button on the left
+        const closeButton = document.createElement("button");
+        const chevronIcon = Icons.ChevronDown("md");
+        closeButton.appendChild(chevronIcon);
+        closeButton.style.cssText = `
+      font-size: 1.25rem;
+      color: ${aeroTheme.colors.text.secondary};
+      cursor: pointer;
+      padding: 0.25rem;
+      transition: ${aeroTheme.transitions.fast};
+      background: transparent;
+      border: none;
+    `;
+        closeButton.addEventListener("click", (e) => {
+            e.stopPropagation();
+            handleClose();
+        });
+        // Title section centered - matches React version
+        const titleSection = document.createElement("div");
+        titleSection.style.cssText = `
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      font-size: ${aeroTheme.typography.fontSize.base};
+      font-weight: ${aeroTheme.typography.fontWeight.semibold};
+      color: ${aeroTheme.colors.text.primary};
+    `;
+        titleSection.id = "convai-widget-title";
+        // Settings button on the right
+        const settingsButton = document.createElement("button");
+        const moreIcon = Icons.MoreVertical("md");
+        settingsButton.appendChild(moreIcon);
+        settingsButton.style.cssText = `
+      font-size: 1.5rem;
+      color: ${aeroTheme.colors.text.secondary};
+      cursor: pointer;
+      padding: 0.25rem;
+      transition: ${aeroTheme.transitions.fast};
+      background: transparent;
+      border: none;
+      margin-left: auto;
+    `;
+        settingsButton.addEventListener("click", (e) => {
+            e.stopPropagation();
+            handleSettingsToggle();
+        });
+        header.appendChild(closeButton);
+        header.appendChild(titleSection);
+        header.appendChild(settingsButton);
+        return header;
+    };
+    // Update header with character info
+    const updateHeader = () => {
+        const titleSection = document.getElementById("convai-widget-title");
+        if (!titleSection)
+            return;
+        titleSection.innerHTML = "";
+        if (characterImage) {
+            const img = document.createElement("img");
+            img.src = characterImage;
+            img.alt = characterName;
+            img.style.cssText = `
+        width: 1.5rem;
+        height: 1.5rem;
+        border-radius: 50%;
+        object-fit: cover;
+        border: 1.5px solid ${getBotStatusColor().color};
+        box-shadow: 0 0 6px ${getBotStatusColor().color}40;
+        transition: all 0.3s ease;
+      `;
+            titleSection.appendChild(img);
+        }
+        const nameSpan = document.createElement("span");
+        nameSpan.textContent = characterName;
+        titleSection.appendChild(nameSpan);
+        // Mute button
+        const muteButton = document.createElement("button");
+        muteButton.innerHTML = "";
+        const volumeIcon = isMuted
+            ? Icons.VolumeMute("sm")
+            : Icons.VolumeHigh("sm");
+        volumeIcon.style.color = isMuted ? "#919EABA6" : "#0E7360";
+        muteButton.appendChild(volumeIcon);
+        muteButton.style.cssText = `
+      cursor: pointer;
+      background: transparent;
+      border: none;
+      box-shadow: none;
+      width: auto;
+      height: auto;
+      padding: 0;
+      display: inline-flex;
+      align-items: center;
+      margin-left: 0.5rem;
+      outline: none;
+      transition: transform 0.1s ease-out;
+    `;
+        muteButton.addEventListener("click", (e) => {
+            e.stopPropagation();
+            handleToggleMute();
+        });
+        muteButton.addEventListener("mouseenter", () => {
+            muteButton.style.transform = "scale(1.1)";
+        });
+        muteButton.addEventListener("mouseleave", () => {
+            muteButton.style.transform = "scale(1)";
+        });
+        titleSection.appendChild(muteButton);
+        // Voice Mode Badge
+        if (isVoiceMode) {
+            const voiceBadge = document.createElement("span");
+            voiceBadge.textContent = "VOICE";
+            voiceBadge.style.cssText = `
+        font-size: 10px;
+        color: ${aeroTheme.colors.convai.light};
+        font-weight: 500;
+        margin-left: 8px;
+        padding: 2px 6px;
+        border-radius: 4px;
+        background-color: ${aeroTheme.colors.convai.light}20;
+      `;
+            titleSection.appendChild(voiceBadge);
+        }
+    };
+    // Create message list
+    const createMessageList = () => {
+        const list = document.createElement("div");
+        list.id = "convai-message-list";
+        list.style.cssText = `
+      display: flex;
+      flex-direction: column;
+      gap: 0.75rem;
+      min-height: 100%;
+    `;
+        return list;
+    };
+    // Create footer
+    const createFooter = () => {
+        const footer = document.createElement("div");
+        footer.style.cssText = `
+      padding: 1rem;
+      border-top: 1px solid ${aeroTheme.colors.neutral[200]};
+      background: white;
+      display: flex;
+      gap: 0.5rem;
+      align-items: center;
+      position: relative;
+    `;
+        // Voice Mode Exit Button (Initially hidden)
+        const voiceExitButton = document.createElement("button");
+        voiceExitButton.id = "convai-voice-exit-btn";
+        const exitIcon = Icons.Waveform("md");
+        voiceExitButton.appendChild(exitIcon);
+        voiceExitButton.style.cssText = `
+      width: 2.25rem;
+      height: 2.25rem;
+      border-radius: 50%;
+      background: ${aeroTheme.colors.error[500]};
+      color: white;
+      display: none; /* Hidden by default */
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      margin: 0 auto;
+      border: none;
+    `;
+        voiceExitButton.addEventListener("click", async () => {
+            convaiClient.sendInterruptMessage();
+            await convaiClient.audioControls.muteAudio(); // Mute on exit
+            isVoiceMode = false;
+            updateVoiceMode();
+        });
+        footer.appendChild(voiceExitButton);
+        // Standard Footer Content (Mic + Input)
+        const standardContent = document.createElement("div");
+        standardContent.id = "convai-footer-standard";
+        standardContent.style.cssText = `
+      display: flex;
+      gap: 0.5rem;
+      align-items: center;
+      width: 100%;
+    `;
+        // Mic button
+        const micButton = document.createElement("button");
+        micButton.id = "convai-mic-button";
+        const micIcon = Icons.Mic("md");
+        micButton.appendChild(micIcon);
+        const initialMicBackground = convaiClient.audioControls.isAudioMuted
+            ? aeroTheme.colors.error[500]
+            : aeroTheme.colors.text.primary;
+        micButton.style.cssText = `
+      width: 2.25rem;
+      height: 2.25rem;
+      border-radius: 50%;
+      background: ${initialMicBackground};
+      color: white;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      transition: background-color 0.2s ease-out, transform 0.15s ease-out, box-shadow 0.2s ease-out;
+      flex-shrink: 0;
+      border: none;
+      transform: scale(1);
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    `;
+        // Add hover and active effects
+        micButton.addEventListener("mouseenter", () => {
+            const isMuted = convaiClient.audioControls.isAudioMuted;
+            micButton.style.transform = "scale(1.05)";
+            if (isMuted) {
+                // Red button gets darker on hover
+                micButton.style.background = "#dc2626"; // Darker red
+                micButton.style.boxShadow = "0 4px 8px rgba(239, 68, 68, 0.3)";
+            }
+            else {
+                // Black button gets slightly lighter on hover
+                micButton.style.background = "#374151"; // Lighter dark
+                micButton.style.boxShadow = "0 4px 8px rgba(0, 0, 0, 0.2)";
+            }
+        });
+        micButton.addEventListener("mouseleave", () => {
+            const isMuted = convaiClient.audioControls.isAudioMuted;
+            micButton.style.transform = "scale(1)";
+            micButton.style.background = isMuted
+                ? aeroTheme.colors.error[500]
+                : aeroTheme.colors.text.primary;
+            micButton.style.boxShadow = "0 2px 4px rgba(0, 0, 0, 0.1)";
+        });
+        micButton.addEventListener("mousedown", () => {
+            micButton.style.transform = "scale(0.95)";
+        });
+        micButton.addEventListener("mouseup", () => {
+            micButton.style.transform = "scale(1.05)";
+        });
+        micButton.addEventListener("click", handleMicToggle);
+        standardContent.appendChild(micButton);
+        // Input container
+        const inputContainer = document.createElement("div");
+        inputContainer.style.cssText = `
+      flex: 1;
+      position: relative;
+      display: flex;
+      align-items: center;
+    `;
+        inputElement = document.createElement("input");
+        inputElement.type = "text";
+        inputElement.placeholder = "Conversation";
+        inputElement.style.cssText = `
+      width: 100%;
+      padding: 0.75rem 3rem 0.75rem 1rem;
+      border-radius: ${aeroTheme.borderRadius.full};
+      border: 1px solid ${aeroTheme.colors.neutral[300]};
+      background: ${aeroTheme.colors.glass.medium};
+      color: ${aeroTheme.colors.text.primary};
+      font-size: ${aeroTheme.typography.fontSize.sm};
+      transition: ${aeroTheme.transitions.fast};
+      outline: none;
+    `;
+        inputElement.addEventListener("input", (e) => {
+            inputValue = e.target.value;
+            updateSendButton();
+        });
+        inputElement.addEventListener("keypress", (e) => {
+            if (e.key === "Enter")
+                handleSend();
+        });
+        // Send button
+        const sendButton = document.createElement("button");
+        sendButton.id = "convai-send-button";
+        const sendIcon = Icons.Send("md");
+        sendButton.appendChild(sendIcon);
+        sendButton.style.cssText = `
+      position: absolute;
+      right: 0.375rem;
+      width: 2.25rem;
+      height: 2.25rem;
+      border-radius: 50%;
+      background: transparent; /* Initial transparent for voice toggle */
+      color: ${aeroTheme.colors.text.primary};
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      transition: ${aeroTheme.transitions.fast};
+      border: none;
+    `;
+        sendButton.addEventListener("click", async () => {
+            if (inputValue.length > 0) {
+                handleSend();
+            }
+            else {
+                // Toggle Voice Mode
+                convaiClient.sendInterruptMessage();
+                await convaiClient.audioControls.unmuteAudio(); // Unmute on enter
+                isVoiceMode = true;
+                updateVoiceMode();
+            }
+        });
+        inputContainer.appendChild(inputElement);
+        inputContainer.appendChild(sendButton);
+        standardContent.appendChild(inputContainer);
+        footer.appendChild(standardContent);
+        return footer;
+    };
+    // Create settings tray - Matches React SettingsTray component exactly
+    const createSettingsTray = () => {
+        const tray = document.createElement("div");
+        tray.setAttribute("data-settings-tray", "true");
+        tray.style.cssText = `
+      position: absolute;
+      top: 60px;
+      right: 16px;
+      background: white;
+      border-radius: ${aeroTheme.borderRadius.xl};
+      box-shadow: ${aeroTheme.shadows.xl};
+      padding: 0;
+      display: none;
+      flex-direction: row;
+      align-items: center;
+      gap: 0;
+      z-index: 9999;
+      min-width: auto;
+      transform-origin: top right;
+      animation: popIn 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+      overflow: hidden;
+    `;
+        // Add animation keyframes if not present
+        if (!document.getElementById("convai-widget-keyframes")) {
+            const style = document.createElement("style");
+            style.id = "convai-widget-keyframes";
+            style.textContent = `
+        @keyframes popIn {
+          from { opacity: 0; transform: scale(0.95) translateY(-10px); }
+          to { opacity: 1; transform: scale(1) translateY(0); }
+        }
+      `;
+            document.head.appendChild(style);
+        }
+        // Horizontal Settings Row Container
+        const settingsRow = document.createElement("div");
+        settingsRow.style.cssText = `
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      padding: 8px;
+      gap: 4px;
+    `;
+        const createOption = (icon, label, onClick, isActive = false, isDestructive = false) => {
+            const btn = document.createElement("div");
+            btn.style.cssText = `
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 4px;
+        padding: 8px 12px;
+        cursor: pointer;
+        border-radius: ${aeroTheme.borderRadius.md};
+        background-color: ${isActive
+                ? "rgba(16, 185, 129, 0.15)"
+                : isDestructive
+                    ? "rgba(239, 68, 68, 0.1)"
+                    : "transparent"};
+        color: ${isActive
+                ? "#10b981"
+                : isDestructive
+                    ? "#ef4444"
+                    : aeroTheme.colors.text.primary};
+        transition: ${aeroTheme.transitions.fast};
+        min-width: 50px;
+      `;
+            // Icon container
+            const iconContainer = document.createElement("div");
+            iconContainer.appendChild(icon);
+            btn.appendChild(iconContainer);
+            const span = document.createElement("span");
+            span.textContent = label;
+            span.style.cssText = `
+        font-size: 10px;
+        font-weight: 500;
+      `;
+            btn.appendChild(span);
+            btn.addEventListener("click", (e) => {
+                e.stopPropagation();
+                onClick();
+            });
+            btn.addEventListener("mouseover", () => {
+                btn.style.transform = "scale(1.02)";
+                if (!isActive && !isDestructive) {
+                    btn.style.backgroundColor = aeroTheme.colors.neutral[100];
+                }
+            });
+            btn.addEventListener("mouseout", () => {
+                btn.style.transform = "scale(1)";
+                btn.style.backgroundColor = isActive
+                    ? "rgba(16, 185, 129, 0.15)"
+                    : isDestructive
+                        ? "rgba(239, 68, 68, 0.1)"
+                        : "transparent";
+            });
+            return btn;
+        };
+        // Reset
+        const resetIcon = Icons.Redo("md");
+        resetIcon.style.width = "18px";
+        resetIcon.style.height = "18px";
+        settingsRow.appendChild(createOption(resetIcon, "Reset", handleReset));
+        // Video
+        if (convaiClient.connectionType === "video" && showVideo) {
+            const videoIcon = isVideoVisible
+                ? Icons.Video("md")
+                : Icons.VideoOff("md");
+            videoIcon.style.width = "18px";
+            videoIcon.style.height = "18px";
+            const videoBtn = createOption(videoIcon, "Video", handleToggleVideo, isVideoVisible);
+            videoBtn.id = "convai-settings-video-btn";
+            settingsRow.appendChild(videoBtn);
+        }
+        // Screen Share
+        if (convaiClient.connectionType === "video" && showScreenShare) {
+            const isSharing = convaiClient.screenShareControls.isScreenShareActive;
+            const shareIcon = isSharing
+                ? Icons.StopScreenShare("md")
+                : Icons.ScreenShare("md");
+            shareIcon.style.width = "18px";
+            shareIcon.style.height = "18px";
+            const shareBtn = createOption(shareIcon, "Screen", handleToggleScreenShare, isSharing);
+            shareBtn.id = "convai-settings-share-btn";
+            settingsRow.appendChild(shareBtn);
+        }
+        // Disconnect
+        const disconnectIcon = document.createElement("span");
+        disconnectIcon.innerHTML = "⏻";
+        disconnectIcon.style.fontSize = "18px";
+        settingsRow.appendChild(createOption(disconnectIcon, "Disconnect", handleDisconnect, false, true));
+        tray.appendChild(settingsRow);
+        return tray;
+    };
+    // Update settings tray content to reflect current connection state
+    const updateSettingsTray = () => {
+        const settingsRow = settingsTray.querySelector("div");
+        if (!settingsRow)
+            return;
+        // Clear existing content
+        settingsRow.innerHTML = "";
+        const createOption = (icon, label, onClick, isActive = false, isDestructive = false) => {
+            const btn = document.createElement("div");
+            btn.style.cssText = `
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 4px;
+        padding: 8px 12px;
+        cursor: pointer;
+        border-radius: ${aeroTheme.borderRadius.md};
+        background-color: ${isActive
+                ? "rgba(16, 185, 129, 0.15)"
+                : isDestructive
+                    ? "rgba(239, 68, 68, 0.1)"
+                    : "transparent"};
+        color: ${isActive
+                ? "#10b981"
+                : isDestructive
+                    ? "#ef4444"
+                    : aeroTheme.colors.text.primary};
+        transition: ${aeroTheme.transitions.fast};
+        min-width: 50px;
+      `;
+            // Icon container
+            const iconContainer = document.createElement("div");
+            iconContainer.appendChild(icon);
+            btn.appendChild(iconContainer);
+            const span = document.createElement("span");
+            span.textContent = label;
+            span.style.cssText = `
+        font-size: 10px;
+        font-weight: 500;
+      `;
+            btn.appendChild(span);
+            btn.addEventListener("click", (e) => {
+                e.stopPropagation();
+                onClick();
+            });
+            btn.addEventListener("mouseover", () => {
+                btn.style.transform = "scale(1.02)";
+                if (!isActive && !isDestructive) {
+                    btn.style.backgroundColor = aeroTheme.colors.neutral[100];
+                }
+            });
+            btn.addEventListener("mouseout", () => {
+                btn.style.transform = "scale(1)";
+                btn.style.backgroundColor = isActive
+                    ? "rgba(16, 185, 129, 0.15)"
+                    : isDestructive
+                        ? "rgba(239, 68, 68, 0.1)"
+                        : "transparent";
+            });
+            return btn;
+        };
+        // Reset
+        const resetIcon = Icons.Redo("md");
+        resetIcon.style.width = "18px";
+        resetIcon.style.height = "18px";
+        settingsRow.appendChild(createOption(resetIcon, "Reset", handleReset));
+        // Video - Always show if showVideo is true and connection type is video
+        if (convaiClient.connectionType === "video" && showVideo) {
+            const videoIcon = isVideoVisible
+                ? Icons.Video("md")
+                : Icons.VideoOff("md");
+            videoIcon.style.width = "18px";
+            videoIcon.style.height = "18px";
+            const videoBtn = createOption(videoIcon, "Video", handleToggleVideo, isVideoVisible);
+            videoBtn.id = "convai-settings-video-btn";
+            settingsRow.appendChild(videoBtn);
+        }
+        // Screen Share - Always show if showScreenShare is true and connection type is video
+        if (convaiClient.connectionType === "video" && showScreenShare) {
+            const isSharing = convaiClient.screenShareControls.isScreenShareActive;
+            const shareIcon = isSharing
+                ? Icons.StopScreenShare("md")
+                : Icons.ScreenShare("md");
+            shareIcon.style.width = "18px";
+            shareIcon.style.height = "18px";
+            const shareBtn = createOption(shareIcon, "Screen", handleToggleScreenShare, isSharing);
+            shareBtn.id = "convai-settings-share-btn";
+            settingsRow.appendChild(shareBtn);
+        }
+        // Disconnect
+        const disconnectIcon = document.createElement("span");
+        disconnectIcon.innerHTML = "⏻";
+        disconnectIcon.style.fontSize = "18px";
+        settingsRow.appendChild(createOption(disconnectIcon, "Disconnect", handleDisconnect, false, true));
+    };
+    // Create floating video - Matches React FloatingVideo component
+    const createFloatingVideo = () => {
+        const container = document.createElement("div");
+        container.id = "floating-video-container";
+        container.style.cssText = `
+      position: fixed;
+      left: 20px;
+      top: 20px;
+      z-index: 10000;
+      width: 320px;
+      border-radius: ${aeroTheme.borderRadius.lg};
+      overflow: hidden;
+      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+      cursor: grab;
+      display: none;
+      transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    `;
+        const wrapper = document.createElement("div");
+        wrapper.style.cssText = `
+      background: rgba(15, 23, 42, 0.95);
+      backdrop-filter: blur(20px);
+      border: 1px solid ${aeroTheme.colors.neutral[700]};
+      border-radius: ${aeroTheme.borderRadius.lg};
+      overflow: hidden;
+    `;
+        // Header
+        const header = document.createElement("div");
+        header.style.cssText = `
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 8px 12px;
+      background: rgba(0, 0, 0, 0.3);
+      border-bottom: 1px solid ${aeroTheme.colors.neutral[700]};
+    `;
+        const headerLeft = document.createElement("div");
+        headerLeft.style.cssText = `
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      color: ${aeroTheme.colors.neutral[300]};
+      font-size: 12px;
+      font-weight: 500;
+    `;
+        const dragIcon = Icons.DragIndicator("sm");
+        dragIcon.style.width = "16px";
+        dragIcon.style.height = "16px";
+        headerLeft.appendChild(dragIcon);
+        const label = document.createElement("span");
+        label.textContent = "Your Camera";
+        headerLeft.appendChild(label);
+        const closeButton = document.createElement("button");
+        closeButton.innerHTML = "";
+        const closeIcon = Icons.Close("md");
+        closeIcon.style.width = "20px";
+        closeIcon.style.height = "20px";
+        closeButton.appendChild(closeIcon);
+        closeButton.style.cssText = `
+      background: transparent;
+      border: none;
+      color: ${aeroTheme.colors.neutral[400]};
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 4px;
+      transition: transform 0.1s ease-out;
+    `;
+        closeButton.addEventListener("click", (e) => {
+            e.stopPropagation();
+            convaiClient.videoControls.disableVideo();
+        });
+        closeButton.addEventListener("mouseenter", () => {
+            closeButton.style.transform = "scale(1.1)";
+        });
+        closeButton.addEventListener("mouseleave", () => {
+            closeButton.style.transform = "scale(1)";
+        });
+        header.appendChild(headerLeft);
+        header.appendChild(closeButton);
+        // Video Container
+        const videoContainer = document.createElement("div");
+        videoContainer.style.cssText = `
+      position: relative;
+      width: 100%;
+      padding-bottom: 75%;
+      background: #000;
+    `;
+        const videoWrapper = document.createElement("div");
+        videoWrapper.id = "floating-video-wrapper";
+        videoWrapper.style.cssText = `
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+    `;
+        const videoElement = document.createElement("video");
+        videoElement.id = "floating-video-element";
+        videoElement.autoplay = true;
+        videoElement.playsInline = true;
+        videoElement.muted = true;
+        videoElement.style.cssText = `
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      transform: scaleX(-1);
+    `;
+        // Camera off placeholder
+        const cameraOffPlaceholder = document.createElement("div");
+        cameraOffPlaceholder.id = "camera-off-placeholder";
+        cameraOffPlaceholder.style.cssText = `
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      color: ${aeroTheme.colors.neutral[400]};
+      gap: 12px;
+      background: #000;
+    `;
+        const cameraOffIcon = Icons.VideoOff("lg");
+        cameraOffIcon.style.width = "48px";
+        cameraOffIcon.style.height = "48px";
+        cameraOffPlaceholder.appendChild(cameraOffIcon);
+        const cameraOffText = document.createElement("span");
+        cameraOffText.textContent = "Camera is off";
+        cameraOffText.style.cssText = `
+      font-size: 14px;
+      text-align: center;
+    `;
+        cameraOffPlaceholder.appendChild(cameraOffText);
+        videoWrapper.appendChild(videoElement);
+        videoWrapper.appendChild(cameraOffPlaceholder);
+        videoContainer.appendChild(videoWrapper);
+        wrapper.appendChild(header);
+        wrapper.appendChild(videoContainer);
+        container.appendChild(wrapper);
+        // Add drag functionality
+        let isDragging = false;
+        let startX = 0;
+        let startY = 0;
+        let startLeft = 20;
+        let startTop = 20;
+        const handleMouseDown = (e) => {
+            if (e.target.closest("button"))
+                return;
+            isDragging = true;
+            startX = e.clientX;
+            startY = e.clientY;
+            const style = window.getComputedStyle(container);
+            startLeft = parseInt(style.left);
+            startTop = parseInt(style.top);
+            container.style.cursor = "grabbing";
+            e.preventDefault();
+        };
+        const handleMouseMove = (e) => {
+            if (!isDragging)
+                return;
+            const deltaX = e.clientX - startX;
+            const deltaY = e.clientY - startY;
+            const newLeft = startLeft + deltaX;
+            const newTop = startTop + deltaY;
+            // Keep within bounds
+            const maxX = window.innerWidth - 320;
+            const maxY = window.innerHeight - 240;
+            const boundedLeft = Math.max(0, Math.min(newLeft, maxX));
+            const boundedTop = Math.max(0, Math.min(newTop, maxY));
+            container.style.left = `${boundedLeft}px`;
+            container.style.top = `${boundedTop}px`;
+        };
+        const handleMouseUp = () => {
+            if (isDragging) {
+                isDragging = false;
+                container.style.cursor = "grab";
+            }
+        };
+        container.addEventListener("mousedown", handleMouseDown);
+        document.addEventListener("mousemove", handleMouseMove);
+        document.addEventListener("mouseup", handleMouseUp);
+        return container;
+    };
+    // Event handlers
+    const handleToggle = async () => {
+        if (isOpen) {
+            // Just close if already open
+            return;
+        }
+        // Connect on first click if not already connected/connecting
+        if (!convaiClient.state.isConnected && !convaiClient.state.isConnecting) {
+            try {
+                await convaiClient.connect();
+                setIsOpen(true);
+            }
+            catch (error) {
+                console.error("Failed to connect:", error);
+            }
+        }
+        else {
+            // Just toggle open/close if already connected
+            setIsOpen(!isOpen);
+        }
+    };
+    const handleClose = () => {
+        setIsOpen(false);
+    };
+    const handleSend = () => {
+        if (inputValue.trim() && convaiClient.state.isConnected) {
+            convaiClient.sendUserTextMessage(inputValue);
+            inputValue = "";
+            inputElement.value = "";
+            updateSendButton();
+        }
+    };
+    const handleMicToggle = async () => {
+        await convaiClient.audioControls.toggleAudio();
+        updateMicButton();
+    };
+    const handleToggleMute = () => {
+        isMuted = !isMuted;
+        if (convaiClient.room) {
+            const remoteParticipants = Array.from(convaiClient.room.remoteParticipants.values());
+            remoteParticipants.forEach((participant) => {
+                participant.audioTrackPublications.forEach((publication) => {
+                    if (publication.track) {
+                        publication.track.setMuted(isMuted);
+                    }
+                });
+            });
+        }
+        updateHeader();
+    };
+    const handleReset = async () => {
+        setIsSettingsOpen(false);
+        try {
+            await convaiClient.disconnect();
+            convaiClient.resetSession();
+            isMuted = false;
+            isVoiceMode = false;
+            updateHeader();
+            updateVoiceMode();
+            updateMicButton();
+            updateSendButton();
+        }
+        catch (error) {
+            console.error("Failed to reset:", error);
+        }
+    };
+    const handleDisconnect = async () => {
+        setIsSettingsOpen(false);
+        await convaiClient.disconnect();
+        isMuted = false;
+        isVoiceMode = false;
+        updateHeader();
+        updateVoiceMode();
+        updateMicButton();
+        updateSendButton();
+    };
+    const handleToggleVideo = async () => {
+        if (convaiClient.connectionType !== "video")
+            return;
+        try {
+            if (isVideoVisible) {
+                await convaiClient.videoControls.disableVideo();
+            }
+            else {
+                await convaiClient.videoControls.enableVideo();
+            }
+            // State will be updated via event listener below
+        }
+        catch (e) {
+            console.error("Failed to toggle video:", e);
+        }
+    };
+    const handleToggleScreenShare = async () => {
+        try {
+            await convaiClient.screenShareControls.toggleScreenShare();
+            // State will be updated via event listener above
+        }
+        catch (e) {
+            console.error("Failed to toggle screen share:", e);
+        }
+    };
+    const handleSettingsToggle = () => {
+        // Regenerate settings tray content BEFORE opening to reflect current connection type
+        if (!isSettingsOpen) {
+            updateSettingsTray();
+        }
+        setIsSettingsOpen(!isSettingsOpen);
+    };
+    // Update functions
+    const setIsOpen = (open) => {
+        isOpen = open;
+        if (open) {
+            morphingContainer.style.width = "400px";
+            morphingContainer.style.height = "600px";
+            morphingContainer.style.borderRadius = aeroTheme.borderRadius.xl;
+            morphingContainer.style.cursor = "default";
+            buttonContent.style.opacity = "0";
+            buttonContent.style.transform = "scale(0.8)";
+            buttonContent.style.pointerEvents = "none";
+            chatContent.style.opacity = "1";
+            chatContent.style.transform = "scale(1)";
+            chatContent.style.pointerEvents = "auto";
+        }
+        else {
+            morphingContainer.style.width = "4rem";
+            morphingContainer.style.height = "4rem";
+            morphingContainer.style.borderRadius = "50%";
+            morphingContainer.style.cursor = "pointer";
+            buttonContent.style.opacity = "1";
+            buttonContent.style.transform = "scale(1)";
+            buttonContent.style.pointerEvents = "auto";
+            chatContent.style.opacity = "0";
+            chatContent.style.transform = "scale(0.8)";
+            chatContent.style.pointerEvents = "none";
+        }
+    };
+    const setIsSettingsOpen = (open) => {
+        isSettingsOpen = open;
+        settingsTray.style.display = open ? "flex" : "none";
+    };
+    const updateSendButton = () => {
+        const sendButton = document.getElementById("convai-send-button");
+        if (!sendButton)
+            return;
+        // Clear previous content
+        sendButton.innerHTML = "";
+        if (inputValue.length > 0) {
+            // Show Send Button
+            sendButton.appendChild(Icons.Send("md"));
+            sendButton.style.background = aeroTheme.colors.text.primary;
+            sendButton.style.color = "white";
+            sendButton.style.border = "none";
+            sendButton.title = "Send";
+        }
+        else {
+            // Show Voice Mode Toggle
+            sendButton.appendChild(Icons.Waveform("md"));
+            sendButton.style.background = "transparent";
+            sendButton.style.color = aeroTheme.colors.text.primary;
+            sendButton.style.border = `1px solid ${aeroTheme.colors.neutral[300]}`;
+            sendButton.title = "Voice Mode";
+        }
+    };
+    const updateVideoTrack = () => {
+        if (!floatingVideo ||
+            !convaiClient.room ||
+            !convaiClient.room.localParticipant)
+            return;
+        const videoEl = floatingVideo.querySelector("#floating-video-element");
+        const placeholder = floatingVideo.querySelector("#camera-off-placeholder");
+        if (!videoEl || !placeholder)
+            return;
+        if (isVideoVisible && !isVoiceMode) {
+            const tracks = Array.from(convaiClient.room.localParticipant.videoTrackPublications.values());
+            const videoPub = tracks.find((t) => t.kind === "video");
+            if (videoPub && videoPub.track) {
+                videoPub.track.attach(videoEl);
+                videoEl.style.display = "block";
+                placeholder.style.display = "none";
+            }
+            else {
+                videoEl.style.display = "none";
+                placeholder.style.display = "flex";
+            }
+        }
+        else {
+            videoEl.style.display = "none";
+            placeholder.style.display = "flex";
+        }
+    };
+    const updateVoiceMode = () => {
+        const standardFooter = document.getElementById("convai-footer-standard");
+        const voiceExitBtn = document.getElementById("convai-voice-exit-btn");
+        if (isVoiceMode) {
+            // Show Voice Overlay
+            if (voiceModeOverlay)
+                voiceModeOverlay.style.display = "flex";
+            if (messageListElement)
+                messageListElement.style.display = "none";
+            if (floatingVideo)
+                floatingVideo.style.display = "none";
+            // Footer: Show Exit Button, Hide Standard
+            if (standardFooter)
+                standardFooter.style.display = "none";
+            if (voiceExitBtn)
+                voiceExitBtn.style.display = "flex";
+            if (footerElement)
+                footerElement.style.justifyContent = "center";
+            // Update header to show VOICE badge
+            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();
+        }
+        else {
+            // Hide Overlay
+            if (voiceModeOverlay)
+                voiceModeOverlay.style.display = "none";
+            // Show Video or Message List
+            if (isVideoVisible) {
+                if (messageListElement)
+                    messageListElement.style.display = "none";
+                if (floatingVideo)
+                    floatingVideo.style.display = "block";
+                updateVideoTrack();
+            }
+            else {
+                if (messageListElement)
+                    messageListElement.style.display = "flex";
+                if (floatingVideo)
+                    floatingVideo.style.display = "none";
+            }
+            // Footer: Show Standard, Hide Exit
+            if (standardFooter)
+                standardFooter.style.display = "flex";
+            if (voiceExitBtn)
+                voiceExitBtn.style.display = "none";
+            if (footerElement)
+                footerElement.style.justifyContent = "flex-start";
+            // Update header to hide VOICE badge
+            updateHeader();
+            // Stop Audio Analysis
+            stopAudioAnalysis();
+        }
+    };
+    const updateMicButton = () => {
+        // Update mic button appearance based on mute state with visual feedback
+        const micButton = document.getElementById("convai-mic-button");
+        if (micButton) {
+            const isMuted = convaiClient.audioControls.isAudioMuted;
+            const newBackground = isMuted
+                ? aeroTheme.colors.error[500]
+                : aeroTheme.colors.text.primary;
+            // Add a brief pulse effect to show the state changed
+            micButton.style.transform = "scale(1.15)";
+            micButton.style.background = newBackground;
+            // Add colored glow based on state
+            if (isMuted) {
+                micButton.style.boxShadow =
+                    "0 0 12px rgba(239, 68, 68, 0.6), 0 2px 4px rgba(0, 0, 0, 0.1)";
+            }
+            else {
+                micButton.style.boxShadow =
+                    "0 0 12px rgba(16, 185, 129, 0.4), 0 2px 4px rgba(0, 0, 0, 0.1)";
+            }
+            // Return to normal size after animation
+            setTimeout(() => {
+                if (micButton) {
+                    micButton.style.transform = "scale(1)";
+                    micButton.style.boxShadow = "0 2px 4px rgba(0, 0, 0, 0.1)";
+                }
+            }, 200);
+        }
+    };
+    // Helper for Markdown - matches React MarkdownRenderer.tsx
+    const renderMarkdown = (text, container) => {
+        if (!text)
+            return;
+        // Handle both actual newlines and \n escape sequences
+        const normalizedText = text.replace(/\\n/g, "\n");
+        const lines = normalizedText.split("\n");
+        lines.forEach((line, lineIndex) => {
+            // Process markdown within each line
+            const processLine = (text) => {
+                const parts = [];
+                let remaining = text;
+                // Process bold and italic markdown
+                // Bold: **text** or __text__
+                // Italic: *text* or _text_
+                const markdownRegex = /(\*\*|__)(.*?)\1|\*([^*]+)\*|_([^_]+)_/g;
+                let lastIndex = 0;
+                let match;
+                while ((match = markdownRegex.exec(remaining)) !== null) {
+                    // Add text before the match
+                    if (match.index > lastIndex) {
+                        const textBefore = remaining.substring(lastIndex, match.index);
+                        if (textBefore) {
+                            parts.push(document.createTextNode(textBefore));
+                        }
+                    }
+                    // Determine if it's bold or italic
+                    if (match[1] && match[2]) {
+                        // Bold text (** or __) - matches React UserBubble styling
+                        const strong = document.createElement("strong");
+                        strong.textContent = match[2];
+                        strong.style.cssText = `
+              font-weight: 600;
+              color: ${aeroTheme.colors.text.primary};
+            `;
+                        parts.push(strong);
+                    }
+                    else if (match[3]) {
+                        // Italic text (*) - matches React UserBubble styling
+                        const em = document.createElement("em");
+                        em.textContent = match[3];
+                        em.style.cssText = `
+              font-style: italic;
+            `;
+                        parts.push(em);
+                    }
+                    else if (match[4]) {
+                        // Italic text (_) - matches React UserBubble styling
+                        const em = document.createElement("em");
+                        em.textContent = match[4];
+                        em.style.cssText = `
+              font-style: italic;
+            `;
+                        parts.push(em);
+                    }
+                    lastIndex = match.index + match[0].length;
+                }
+                // Add remaining text
+                if (lastIndex < remaining.length) {
+                    const textAfter = remaining.substring(lastIndex);
+                    if (textAfter) {
+                        parts.push(document.createTextNode(textAfter));
+                    }
+                }
+                return parts;
+            };
+            const processedLine = processLine(line);
+            // Handle empty lines (creates paragraph spacing)
+            if (line.trim() === "" && lineIndex > 0) {
+                container.appendChild(document.createElement("br"));
+                return;
+            }
+            // Append the processed line
+            if (processedLine.length > 0) {
+                processedLine.forEach((part) => container.appendChild(part));
+            }
+            else {
+                container.appendChild(document.createTextNode(line));
+            }
+            // Add line break between lines
+            if (lineIndex < lines.length - 1) {
+                container.appendChild(document.createElement("br"));
+            }
+        });
+    };
+    const updateMessageList = () => {
+        if (!messageListElement)
+            return;
+        const messages = formatMessages();
+        messageListElement.innerHTML = "";
+        if (messages.length === 0) {
+            const emptyState = document.createElement("div");
+            emptyState.style.cssText = `
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            height: 100%;
+            color: ${aeroTheme.colors.text.secondary};
+            text-align: center;
+            padding: 2rem;
+        `;
+            emptyState.innerHTML = `
+            <p style="font-weight: 500; margin-bottom: 8px;">Start a conversation</p>
+            <p style="font-size: 12px;">Type a message below to begin chatting</p>
+        `;
+            messageListElement.appendChild(emptyState);
+            return;
+        }
+        messages.forEach((msg) => {
+            // MessageWrapper - matches React UserMessageContainer
+            const messageWrapper = document.createElement("div");
+            messageWrapper.style.cssText = `
+        display: flex;
+        flex-direction: column;
+        max-width: ${msg.isUser ? "70%" : "70%"};
+        margin-left: ${msg.isUser ? "auto" : "0"};
+        width: 100%;
+        isolation: isolate;
+        contain: layout style paint;
+      `;
+            const bubble = document.createElement("div");
+            // Add data attribute to identify user messages for debugging/styling
+            if (msg.isUser) {
+                bubble.setAttribute("data-message-type", "user");
+            }
+            // Set base styles first - explicitly set background to match React UserBubble exactly
+            // CRITICAL: Use the exact same background for both user and bot messages
+            const backgroundColor = "rgba(252, 252, 253, 0.95)";
+            bubble.style.cssText = `
+        padding: 12px;
+        border-radius: ${msg.isUser ? "12px 12px 4px 12px" : "12px 12px 12px 4px"};
+        background: ${backgroundColor};
+        background-color: ${backgroundColor};
+        backdrop-filter: blur(20px) saturate(180%);
+        border: 1px solid rgba(0, 0, 0, 0.06);
+        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.8) inset, 0 2px 8px rgba(0, 0, 0, 0.08);
+        color: ${aeroTheme.colors.text.primary};
+        font-family: ${aeroTheme.typography.fontFamily.body};
+        font-size: 14px;
+        line-height: 1.5;
+        word-wrap: break-word;
+        max-width: 100%;
+        display: flex;
+        flex-direction: column;
+        font-synthesis: none;
+        text-rendering: optimizeLegibility;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-text-size-adjust: 100%;
+        isolation: isolate;
+        contain: layout style paint;
+      `;
+            // Set background with !important to override any other styles (this is critical)
+            bubble.style.setProperty("background", backgroundColor, "important");
+            bubble.style.setProperty("background-color", backgroundColor, "important");
+            // Header (Logo/Icon + Name) inside bubble - matches React MessageHeader
+            if (msg.sender) {
+                const header = document.createElement("div");
+                header.style.cssText = `
+          display: flex;
+          align-items: center;
+          gap: ${aeroTheme.spacing.xs};
+          margin-bottom: ${aeroTheme.spacing.xs};
+          isolation: isolate;
+          contain: layout style paint;
+        `;
+                // Logo/Icon - matches React LogoWrapper
+                const logoContainer = document.createElement("div");
+                logoContainer.style.cssText = `
+          width: 1rem;
+          height: 1rem;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          isolation: isolate;
+          contain: layout style paint;
+        `;
+                if (msg.isUser) {
+                    // User Icon - FaUser from react-icons/fa, matches React exactly
+                    const userIcon = Icons.User("sm");
+                    userIcon.style.width = "16px";
+                    userIcon.style.height = "16px";
+                    userIcon.style.color = aeroTheme.colors.convai.dark;
+                    logoContainer.appendChild(userIcon);
+                }
+                else {
+                    // Bot Logo - ConvaiLogo sm size with connected state
+                    const botLogo = Icons.ConvaiLogo("sm", "connected");
+                    botLogo.style.width = "16px";
+                    botLogo.style.height = "16px";
+                    botLogo.style.color = "#10b981";
+                    logoContainer.appendChild(botLogo);
+                }
+                // Name Label - matches React UserLabel exactly
+                const nameLabel = document.createElement("span");
+                nameLabel.textContent = msg.sender === "User" ? "You" : msg.sender;
+                nameLabel.style.cssText = `
+          font-size: 0.75rem;
+          color: ${msg.isUser ? aeroTheme.colors.convai.dark : "#10b981"};
+          font-weight: 500;
+          font-family: ${aeroTheme.typography.fontFamily.body};
+          isolation: isolate;
+          contain: layout style paint;
+        `;
+                header.appendChild(logoContainer);
+                header.appendChild(nameLabel);
+                bubble.appendChild(header);
+            }
+            // Message Content
+            const contentDiv = document.createElement("div");
+            contentDiv.style.cssText = `
+        white-space: pre-wrap;
+        word-wrap: break-word;
+      `;
+            renderMarkdown(msg.text, contentDiv);
+            bubble.appendChild(contentDiv);
+            messageWrapper.appendChild(bubble);
+            // Timestamp - matches React exactly
+            if (msg.timestamp) {
+                const timestamp = document.createElement("span");
+                timestamp.textContent = msg.timestamp;
+                timestamp.style.cssText = `
+          font-size: 0.75rem;
+          color: ${aeroTheme.colors.text.secondary};
+          margin-top: 4px;
+          align-self: ${msg.isUser ? "flex-end" : "flex-start"};
+          font-family: ${aeroTheme.typography.fontFamily.body};
+        `;
+                messageWrapper.appendChild(timestamp);
+            }
+            messageListElement.appendChild(messageWrapper);
+        });
+        // Scroll to bottom
+        messageListElement.scrollTop = messageListElement.scrollHeight;
+    };
+    const getBotStatusColor = () => {
+        if (!convaiClient.state.isConnected) {
+            return { color: "#ef4444", label: "Disconnected" };
+        }
+        if (convaiClient.state.isConnecting || !convaiClient.isBotReady) {
+            return { color: "#f59e0b", label: "Connecting" };
+        }
+        return { color: "#10b981", label: "Connected" };
+    };
+    const formatMessages = () => {
+        const filteredMessages = convaiClient.chatMessages.filter((msg) => (msg.type === "user-transcription" ||
+            msg.type === "user-llm-text" ||
+            msg.type === "bot-llm-text" ||
+            msg.type === "bot-emotion") &&
+            msg.content &&
+            msg.content.trim().length > 0);
+        return filteredMessages.map((msg) => ({
+            id: msg.id,
+            text: msg.content,
+            isUser: msg.type.includes("user"),
+            timestamp: new Date(msg.timestamp).toLocaleTimeString([], {
+                hour: "2-digit",
+                minute: "2-digit",
+            }),
+            sender: msg.type.includes("user") ? "You" : characterName,
+            showLogo: msg.type.includes("bot"),
+        }));
+    };
+    // Setup event listeners for client state changes
+    const setupClientListeners = () => {
+        convaiClient.on("stateChange", () => {
+            updateHeader();
+            updateMicButton();
+            // Update pulse animation based on connecting state
+            if (convaiClient.state.isConnecting) {
+                morphingContainer.style.animation =
+                    "convai-pulse 2s ease-in-out infinite";
+            }
+            else {
+                morphingContainer.style.animation = "none";
+            }
+            // Update speaking animation state
+            if (convaiClient.state.isSpeaking) {
+                if (!startTime) {
+                    startTime = Date.now();
+                }
+            }
+            else {
+                // Reset when not speaking
+                if (startTime && !convaiClient.state.isSpeaking) {
+                    startTime = 0;
+                    currentLevels = Array(40).fill(0.05);
+                    targetLevels = Array(40).fill(0.05);
+                }
+            }
+            // Auto-collapse when disconnected
+            if (!convaiClient.state.isConnected && !convaiClient.state.isConnecting) {
+                if (isOpen) {
+                    setIsOpen(false);
+                }
+                isMuted = false;
+                isVoiceMode = false;
+                isVideoVisible = false;
+                updateHeader();
+                updateVoiceMode();
+            }
+        });
+        // Audio controls state change listener
+        convaiClient.audioControls.on("audioStateChange", (audioState) => {
+            if (audioState.isAudioMuted !== undefined) {
+                updateMicButton();
+            }
+        });
+        // Video state change listener
+        convaiClient.videoControls.on("videoStateChange", (videoState) => {
+            if (videoState.isVideoEnabled !== undefined) {
+                isVideoVisible = videoState.isVideoEnabled;
+                updateVoiceMode();
+                // Update tray button state
+                const videoBtn = document.getElementById("convai-settings-video-btn");
+                if (videoBtn) {
+                    const isActive = isVideoVisible;
+                    videoBtn.style.backgroundColor = isActive
+                        ? "rgba(16, 185, 129, 0.15)"
+                        : "transparent";
+                    videoBtn.style.color = isActive
+                        ? "#10b981"
+                        : aeroTheme.colors.text.primary;
+                    // Update Icon - first child is icon container
+                    const iconContainer = videoBtn.querySelector("div");
+                    if (iconContainer) {
+                        iconContainer.innerHTML = "";
+                        const icon = isActive ? Icons.Video("md") : Icons.VideoOff("md");
+                        icon.style.width = "18px";
+                        icon.style.height = "18px";
+                        iconContainer.appendChild(icon);
+                    }
+                }
+            }
+        });
+        // Screen share state change listener
+        convaiClient.screenShareControls.on("screenShareStateChange", (screenShareState) => {
+            if (screenShareState.isScreenShareActive !== undefined) {
+                const isSharing = screenShareState.isScreenShareActive;
+                const shareBtn = document.getElementById("convai-settings-share-btn");
+                if (shareBtn) {
+                    const isActive = isSharing;
+                    shareBtn.style.backgroundColor = isActive
+                        ? "rgba(16, 185, 129, 0.15)"
+                        : "transparent";
+                    shareBtn.style.color = isActive
+                        ? "#10b981"
+                        : aeroTheme.colors.text.primary;
+                    // Update Icon - first child is icon container
+                    const iconContainer = shareBtn.querySelector("div");
+                    if (iconContainer) {
+                        iconContainer.innerHTML = "";
+                        const icon = isActive
+                            ? Icons.StopScreenShare("md")
+                            : Icons.ScreenShare("md");
+                        icon.style.width = "18px";
+                        icon.style.height = "18px";
+                        iconContainer.appendChild(icon);
+                    }
+                }
+            }
+        });
+        convaiClient.on("messagesChange", () => {
+            updateMessageList();
+        });
+        // Bot ready listener - updates UI when bot becomes ready
+        convaiClient.on("botReady", () => {
+            updateHeader(); // Update header to show green status
+        });
+        convaiClient.on("connect", () => {
+            // Initialize audio renderer on connection
+            if (convaiClient.room && !audioRenderer) {
+                audioRenderer = new AudioRenderer(convaiClient.room);
+            }
+            // Fetch character info
+            fetchCharacterInfo();
+        });
+        convaiClient.on("disconnect", () => {
+            // Cleanup audio renderer
+            if (audioRenderer) {
+                audioRenderer.destroy();
+                audioRenderer = null;
+            }
+            updateMessageList();
+        });
+    };
+    // Initialize
+    createDOM();
+    setupClientListeners();
+    // Set initial button state
+    updateSendButton(); // Show voice mode button initially since input is empty
+    // If already connected, initialize audio renderer and fetch character info
+    if (convaiClient.state.isConnected && convaiClient.room) {
+        audioRenderer = new AudioRenderer(convaiClient.room);
+        fetchCharacterInfo();
+    }
+    // Return widget instance
+    const widget = {
+        element: rootElement,
+        destroy: () => {
+            // Cleanup audio renderer
+            if (audioRenderer) {
+                audioRenderer.destroy();
+                audioRenderer = null;
+            }
+            // Remove event listeners
+            morphingContainer.removeEventListener("click", handleToggle);
+            // Remove DOM elements
+            if (rootElement.parentElement) {
+                rootElement.remove();
+            }
+            if (floatingVideo.parentElement) {
+                floatingVideo.remove();
+            }
+            // Unsubscribe from client events
+            convaiClient.off("stateChange", () => { });
+            convaiClient.off("messagesChange", () => { });
+            convaiClient.off("botReady", () => { });
+            convaiClient.off("connect", () => { });
+            convaiClient.off("disconnect", () => { });
+        },
+    };
+    return widget;
+}
+/**
+ * Destroy a Convai widget instance
+ * @param widget - Widget instance to destroy
+ */
+export function destroyConvaiWidget(widget) {
+    widget.destroy();
+}
+//# sourceMappingURL=ConvaiWidget.js.map