@convai/web-sdk 0.1.1-beta.3 → 0.1.1-beta.5

package/dist/vanilla/ConvaiWidget.js

@@ -0,0 +1,1577 @@
+/**
+ * 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
+    const fetchCharacterInfo = async () => {
+        if (!convaiClient.apiKey || !convaiClient.characterId)
+            return;
+        try {
+            const response = await fetch(`https://api.convai.com/character/get?charID=${convaiClient.characterId}`, {
+                headers: {
+                    'CONVAI-API-KEY': convaiClient.apiKey
+                }
+            });
+            if (response.ok) {
+                const data = await response.json();
+                characterName = data.character_name || 'Character';
+                characterImage = data.model_details?.modelLink || '';
+                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;
+    `;
+        // 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;
+    `;
+        const leftSection = document.createElement('div');
+        leftSection.style.cssText = `
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      flex: 1;
+    `;
+        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};
+    `;
+        closeButton.addEventListener('click', (e) => {
+            e.stopPropagation();
+            handleClose();
+        });
+        const titleSection = document.createElement('div');
+        titleSection.style.cssText = `
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      flex: 1;
+      font-size: ${aeroTheme.typography.fontSize.base};
+      font-weight: ${aeroTheme.typography.fontWeight.semibold};
+      color: ${aeroTheme.colors.text.primary};
+    `;
+        titleSection.id = 'convai-widget-title';
+        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};
+    `;
+        settingsButton.addEventListener('click', (e) => {
+            e.stopPropagation();
+            handleSettingsToggle();
+        });
+        leftSection.appendChild(closeButton);
+        leftSection.appendChild(titleSection);
+        header.appendChild(leftSection);
+        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', () => {
+            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: ${aeroTheme.transitions.fast};
+      flex-shrink: 0;
+      border: none;
+    `;
+        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', () => {
+            if (inputValue.length > 0) {
+                handleSend();
+            }
+            else {
+                // Toggle Voice Mode
+                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;
+    };
+    // 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 (convaiClient.videoControls.isVideoEnabled) {
+                await convaiClient.videoControls.disableVideo();
+            }
+            else {
+                await convaiClient.videoControls.enableVideo();
+            }
+            isVideoVisible = convaiClient.videoControls.isVideoEnabled;
+            updateVoiceMode(); // Updates UI based on video state
+            // 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);
+                }
+            }
+        }
+        catch (e) {
+            console.error("Toggle video failed", e);
+        }
+    };
+    const handleToggleScreenShare = async () => {
+        try {
+            await convaiClient.screenShareControls.toggleScreenShare();
+            const isSharing = convaiClient.screenShareControls.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);
+                }
+            }
+        }
+        catch (e) {
+            console.error("Toggle screen share failed", e);
+        }
+    };
+    const handleSettingsToggle = () => {
+        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
+        const micButton = document.getElementById('convai-mic-button');
+        if (micButton) {
+            micButton.style.background = convaiClient.audioControls.isAudioMuted
+                ? aeroTheme.colors.error[500]
+                : aeroTheme.colors.text.primary;
+        }
+    };
+    // 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 __)
+                        const strong = document.createElement('strong');
+                        strong.textContent = match[2];
+                        parts.push(strong);
+                    }
+                    else if (match[3]) {
+                        // Italic text (*)
+                        const em = document.createElement('em');
+                        em.textContent = match[3];
+                        parts.push(em);
+                    }
+                    else if (match[4]) {
+                        // Italic text (_)
+                        const em = document.createElement('em');
+                        em.textContent = match[4];
+                        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) => {
+            const messageWrapper = document.createElement('div');
+            messageWrapper.style.cssText = `
+        display: flex;
+        flex-direction: column;
+        align-items: ${msg.isUser ? 'flex-end' : 'flex-start'};
+        gap: 4px;
+        width: 100%;
+      `;
+            const bubble = document.createElement('div');
+            bubble.style.cssText = `
+        padding: 12px 16px;
+        border-radius: 16px;
+        background: ${msg.isUser ? aeroTheme.colors.convai.light : aeroTheme.colors.neutral[100]};
+        color: ${msg.isUser ? 'white' : aeroTheme.colors.text.primary};
+        font-size: ${aeroTheme.typography.fontSize.sm};
+        line-height: 1.5;
+        word-wrap: break-word;
+        box-shadow: ${aeroTheme.shadows.sm};
+        border-bottom-${msg.isUser ? 'right' : 'left'}-radius: 4px;
+        max-width: 85%;
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+      `;
+            // Header (Logo/Icon + Name) inside bubble
+            if (msg.sender) {
+                const header = document.createElement('div');
+                header.style.cssText = `
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            margin-bottom: 2px;
+          `;
+                // Logo/Icon
+                const logoContainer = document.createElement('div');
+                logoContainer.style.cssText = `
+            width: 16px;
+            height: 16px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-shrink: 0;
+          `;
+                if (msg.isUser) {
+                    // User Icon - FaUser from react-icons/fa
+                    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);
+                }
+                const nameLabel = document.createElement('span');
+                nameLabel.textContent = msg.sender === "User" ? "You" : msg.sender;
+                nameLabel.style.cssText = `
+            font-size: 11px;
+            font-weight: 600;
+            color: ${msg.isUser ? 'rgba(255,255,255,0.9)' : aeroTheme.colors.text.primary};
+            opacity: 0.9;
+          `;
+                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
+            const timestamp = document.createElement('div');
+            timestamp.textContent = msg.timestamp;
+            timestamp.style.cssText = `
+        font-size: 10px;
+        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 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);
+                }
+            }
+            // Sync video visibility with controls state
+            if (isVideoVisible !== convaiClient.videoControls.isVideoEnabled) {
+                isVideoVisible = convaiClient.videoControls.isVideoEnabled;
+                updateVoiceMode();
+            }
+            // Auto-collapse when disconnected
+            if (!convaiClient.state.isConnected && !convaiClient.state.isConnecting) {
+                if (isOpen) {
+                    setIsOpen(false);
+                }
+                isMuted = false;
+                isVoiceMode = false;
+                updateHeader();
+                updateVoiceMode();
+            }
+        });
+        convaiClient.on('messagesChange', () => {
+            updateMessageList();
+        });
+        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();
+    // 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('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