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

package/dist/vanilla/ConvaiWidget.js

@@ -2,9 +2,9 @@
  * 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';
+import { AudioRenderer } from "./AudioRenderer";
+import { aeroTheme, injectGlobalStyles } from "./styles";
+import { Icons } from "./icons";
 /**
  * Create a Convai chat widget in the specified container
  *
@@ -33,7 +33,7 @@ import { Icons } from './icons';
  * ```
  */
 export function createConvaiWidget(container, options) {
-    const { convaiClient, showVideo = true, showScreenShare = true, } = options;
+    const { convaiClient, showVideo = true, showScreenShare = true } = options;
     // Inject global styles
     injectGlobalStyles();
     // State
@@ -42,9 +42,9 @@ export function createConvaiWidget(container, options) {
     let isVoiceMode = false;
     let isMuted = false;
     let isVideoVisible = false;
-    let inputValue = '';
-    let characterName = 'Character';
-    let characterImage = '';
+    let inputValue = "";
+    let characterName = "Character";
+    let characterImage = "";
     let audioRenderer = null;
     // DOM elements (will be created below)
     let rootElement;
@@ -65,31 +65,39 @@ export function createConvaiWidget(container, options) {
     let dataArray = null;
     let rafId = null;
     let source = null;
-    // Fetch character info
+    // 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?charID=${convaiClient.characterId}`, {
+            const response = await fetch("https://api.convai.com/character/get", {
+                method: "POST",
                 headers: {
-                    'CONVAI-API-KEY': convaiClient.apiKey
-                }
+                    "Content-Type": "application/json",
+                    "CONVAI-API-KEY": convaiClient.apiKey,
+                },
+                body: JSON.stringify({ charID: convaiClient.characterId }),
             });
             if (response.ok) {
                 const data = await response.json();
-                characterName = data.character_name || 'Character';
-                characterImage = data.model_details?.modelLink || '';
+                // 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);
+            console.error("Failed to fetch character info:", error);
         }
     };
     // Create root structure
     const createDOM = () => {
-        rootElement = document.createElement('div');
-        rootElement.className = 'convai-widget';
+        rootElement = document.createElement("div");
+        rootElement.className = "convai-widget";
         rootElement.style.cssText = `
       position: fixed;
       bottom: 1.5rem;
@@ -98,7 +106,7 @@ export function createConvaiWidget(container, options) {
       font-family: ${aeroTheme.typography.fontFamily.primary};
     `;
         // Morphing container
-        morphingContainer = document.createElement('div');
+        morphingContainer = document.createElement("div");
         morphingContainer.style.cssText = `
       position: relative;
       width: 4rem;
@@ -113,9 +121,10 @@ export function createConvaiWidget(container, options) {
       display: flex;
       align-items: center;
       justify-content: center;
+      cursor: pointer;
     `;
         // Button content (logo)
-        buttonContent = document.createElement('div');
+        buttonContent = document.createElement("div");
         buttonContent.style.cssText = `
       position: absolute;
       inset: 0;
@@ -126,11 +135,11 @@ export function createConvaiWidget(container, options) {
       opacity: 1;
       transform: scale(1);
     `;
-        const convaiLogo = Icons.ConvaiLogo('xl', 'idle');
+        const convaiLogo = Icons.ConvaiLogo("xl", "idle");
         convaiLogo.style.color = aeroTheme.colors.convai.light;
         buttonContent.appendChild(convaiLogo);
         // Chat content
-        chatContent = document.createElement('div');
+        chatContent = document.createElement("div");
         chatContent.style.cssText = `
       position: absolute;
       inset: 0;
@@ -147,7 +156,7 @@ export function createConvaiWidget(container, options) {
         // Header
         headerElement = createHeader();
         // Content area
-        contentElement = document.createElement('div');
+        contentElement = document.createElement("div");
         contentElement.style.cssText = `
       flex: 1;
       overflow-y: auto;
@@ -172,11 +181,11 @@ export function createConvaiWidget(container, options) {
         container.appendChild(floatingVideo);
         container.appendChild(rootElement);
         // Event listeners
-        morphingContainer.addEventListener('click', handleToggle);
+        morphingContainer.addEventListener("click", handleToggle);
     };
     // Create Voice Mode Overlay
     const createVoiceModeOverlay = () => {
-        const overlay = document.createElement('div');
+        const overlay = document.createElement("div");
         overlay.style.cssText = `
       position: absolute;
       top: 50%;
@@ -192,8 +201,8 @@ export function createConvaiWidget(container, options) {
       gap: 1.5rem;
     `;
         // Bars Container
-        const barsContainer = document.createElement('div');
-        barsContainer.id = 'voice-bars-container';
+        const barsContainer = document.createElement("div");
+        barsContainer.id = "voice-bars-container";
         barsContainer.style.cssText = `
       display: flex;
       align-items: center;
@@ -204,8 +213,8 @@ export function createConvaiWidget(container, options) {
     `;
         // Create 40 bars
         for (let i = 0; i < 40; i++) {
-            const bar = document.createElement('div');
-            bar.className = 'voice-bar';
+            const bar = document.createElement("div");
+            bar.className = "voice-bar";
             bar.style.cssText = `
         width: 3px;
         height: 15px;
@@ -218,23 +227,23 @@ export function createConvaiWidget(container, options) {
         }
         overlay.appendChild(barsContainer);
         // Status Text
-        const statusContainer = document.createElement('div');
-        const statusTitle = document.createElement('div');
-        statusTitle.id = 'voice-mode-title';
+        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';
+        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';
+        statusSubtitle.textContent = "Press and hold the microphone to talk";
         statusContainer.appendChild(statusTitle);
         statusContainer.appendChild(statusSubtitle);
         overlay.appendChild(statusContainer);
@@ -249,7 +258,7 @@ export function createConvaiWidget(container, options) {
     const updateAudioBars = () => {
         if (!voiceModeOverlay)
             return;
-        const bars = voiceModeOverlay.querySelectorAll('.voice-bar');
+        const bars = voiceModeOverlay.querySelectorAll(".voice-bar");
         const isTalking = convaiClient.state.isSpeaking;
         const isListening = !convaiClient.audioControls.isAudioMuted;
         const isAnimating = isListening || isTalking;
@@ -262,8 +271,8 @@ export function createConvaiWidget(container, options) {
                     : aeroTheme.colors.neutral[400];
         });
         // Update Text
-        const title = document.getElementById('voice-mode-title');
-        const subtitle = document.getElementById('voice-mode-subtitle');
+        const title = document.getElementById("voice-mode-title");
+        const subtitle = document.getElementById("voice-mode-subtitle");
         if (title) {
             title.textContent = isTalking
                 ? "Character Speaking..."
@@ -272,9 +281,10 @@ export function createConvaiWidget(container, options) {
                     : "Voice Only Mode";
         }
         if (subtitle) {
-            subtitle.textContent = isListening || isTalking
-                ? "Audio active"
-                : "Press and hold the microphone to talk";
+            subtitle.textContent =
+                isListening || isTalking
+                    ? "Audio active"
+                    : "Press and hold the microphone to talk";
         }
         // Animation Logic - Matches React version
         if (isListening && analyzer && dataArray) {
@@ -307,8 +317,11 @@ export function createConvaiWidget(container, options) {
             // 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) => {
+            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;
@@ -341,7 +354,7 @@ export function createConvaiWidget(container, options) {
         else {
             // Reset to idle state
             bars.forEach((bar) => {
-                bar.style.height = '15px';
+                bar.style.height = "15px";
             });
         }
         rafId = requestAnimationFrame(updateAudioBars);
@@ -349,9 +362,10 @@ export function createConvaiWidget(container, options) {
     const startAudioAnalysis = async () => {
         try {
             if (!audioContext) {
-                audioContext = new (window.AudioContext || window.webkitAudioContext)();
+                audioContext = new (window.AudioContext ||
+                    window.webkitAudioContext)();
             }
-            if (audioContext.state === 'suspended') {
+            if (audioContext.state === "suspended") {
                 await audioContext.resume();
             }
             const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
@@ -372,7 +386,7 @@ export function createConvaiWidget(container, options) {
             cancelAnimationFrame(rafId);
         if (source) {
             source.disconnect();
-            source.mediaStream.getTracks().forEach(t => t.stop());
+            source.mediaStream.getTracks().forEach((t) => t.stop());
             source = null;
         }
         // Keep context alive if possible, or close it? React component closes it.
@@ -380,7 +394,7 @@ export function createConvaiWidget(container, options) {
     };
     // Create header
     const createHeader = () => {
-        const header = document.createElement('div');
+        const header = document.createElement("div");
         header.style.cssText = `
       display: flex;
       align-items: center;
@@ -388,16 +402,11 @@ export function createConvaiWidget(container, options) {
       padding: 1rem;
       border-bottom: 1px solid ${aeroTheme.colors.neutral[200]};
       background: white;
+      position: relative;
     `;
-        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');
+        // 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;
@@ -405,24 +414,30 @@ export function createConvaiWidget(container, options) {
       cursor: pointer;
       padding: 0.25rem;
       transition: ${aeroTheme.transitions.fast};
+      background: transparent;
+      border: none;
     `;
-        closeButton.addEventListener('click', (e) => {
+        closeButton.addEventListener("click", (e) => {
             e.stopPropagation();
             handleClose();
         });
-        const titleSection = document.createElement('div');
+        // 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;
-      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');
+        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;
@@ -430,25 +445,27 @@ export function createConvaiWidget(container, options) {
       cursor: pointer;
       padding: 0.25rem;
       transition: ${aeroTheme.transitions.fast};
+      background: transparent;
+      border: none;
+      margin-left: auto;
     `;
-        settingsButton.addEventListener('click', (e) => {
+        settingsButton.addEventListener("click", (e) => {
             e.stopPropagation();
             handleSettingsToggle();
         });
-        leftSection.appendChild(closeButton);
-        leftSection.appendChild(titleSection);
-        header.appendChild(leftSection);
+        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');
+        const titleSection = document.getElementById("convai-widget-title");
         if (!titleSection)
             return;
-        titleSection.innerHTML = '';
+        titleSection.innerHTML = "";
         if (characterImage) {
-            const img = document.createElement('img');
+            const img = document.createElement("img");
             img.src = characterImage;
             img.alt = characterName;
             img.style.cssText = `
@@ -462,14 +479,16 @@ export function createConvaiWidget(container, options) {
       `;
             titleSection.appendChild(img);
         }
-        const nameSpan = document.createElement('span');
+        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';
+        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;
@@ -485,21 +504,21 @@ export function createConvaiWidget(container, options) {
       outline: none;
       transition: transform 0.1s ease-out;
     `;
-        muteButton.addEventListener('click', (e) => {
+        muteButton.addEventListener("click", (e) => {
             e.stopPropagation();
             handleToggleMute();
         });
-        muteButton.addEventListener('mouseenter', () => {
-            muteButton.style.transform = 'scale(1.1)';
+        muteButton.addEventListener("mouseenter", () => {
+            muteButton.style.transform = "scale(1.1)";
         });
-        muteButton.addEventListener('mouseleave', () => {
-            muteButton.style.transform = 'scale(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';
+            const voiceBadge = document.createElement("span");
+            voiceBadge.textContent = "VOICE";
             voiceBadge.style.cssText = `
         font-size: 10px;
         color: ${aeroTheme.colors.convai.light};
@@ -514,8 +533,8 @@ export function createConvaiWidget(container, options) {
     };
     // Create message list
     const createMessageList = () => {
-        const list = document.createElement('div');
-        list.id = 'convai-message-list';
+        const list = document.createElement("div");
+        list.id = "convai-message-list";
         list.style.cssText = `
       display: flex;
       flex-direction: column;
@@ -526,7 +545,7 @@ export function createConvaiWidget(container, options) {
     };
     // Create footer
     const createFooter = () => {
-        const footer = document.createElement('div');
+        const footer = document.createElement("div");
         footer.style.cssText = `
       padding: 1rem;
       border-top: 1px solid ${aeroTheme.colors.neutral[200]};
@@ -537,9 +556,9 @@ export function createConvaiWidget(container, options) {
       position: relative;
     `;
         // Voice Mode Exit Button (Initially hidden)
-        const voiceExitButton = document.createElement('button');
-        voiceExitButton.id = 'convai-voice-exit-btn';
-        const exitIcon = Icons.Waveform('md');
+        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;
@@ -554,14 +573,16 @@ export function createConvaiWidget(container, options) {
       margin: 0 auto;
       border: none;
     `;
-        voiceExitButton.addEventListener('click', () => {
+        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';
+        const standardContent = document.createElement("div");
+        standardContent.id = "convai-footer-standard";
         standardContent.style.cssText = `
       display: flex;
       gap: 0.5rem;
@@ -569,9 +590,9 @@ export function createConvaiWidget(container, options) {
       width: 100%;
     `;
         // Mic button
-        const micButton = document.createElement('button');
-        micButton.id = 'convai-mic-button';
-        const micIcon = Icons.Mic('md');
+        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]
@@ -586,23 +607,54 @@ export function createConvaiWidget(container, options) {
       align-items: center;
       justify-content: center;
       cursor: pointer;
-      transition: ${aeroTheme.transitions.fast};
+      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);
     `;
-        micButton.addEventListener('click', handleMicToggle);
+        // 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');
+        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 = document.createElement("input");
+        inputElement.type = "text";
+        inputElement.placeholder = "Conversation";
         inputElement.style.cssText = `
       width: 100%;
       padding: 0.75rem 3rem 0.75rem 1rem;
@@ -614,18 +666,18 @@ export function createConvaiWidget(container, options) {
       transition: ${aeroTheme.transitions.fast};
       outline: none;
     `;
-        inputElement.addEventListener('input', (e) => {
+        inputElement.addEventListener("input", (e) => {
             inputValue = e.target.value;
             updateSendButton();
         });
-        inputElement.addEventListener('keypress', (e) => {
-            if (e.key === 'Enter')
+        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');
+        const sendButton = document.createElement("button");
+        sendButton.id = "convai-send-button";
+        const sendIcon = Icons.Send("md");
         sendButton.appendChild(sendIcon);
         sendButton.style.cssText = `
       position: absolute;
@@ -642,12 +694,14 @@ export function createConvaiWidget(container, options) {
       transition: ${aeroTheme.transitions.fast};
       border: none;
     `;
-        sendButton.addEventListener('click', () => {
+        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();
             }
@@ -660,8 +714,8 @@ export function createConvaiWidget(container, options) {
     };
     // Create settings tray - Matches React SettingsTray component exactly
     const createSettingsTray = () => {
-        const tray = document.createElement('div');
-        tray.setAttribute('data-settings-tray', 'true');
+        const tray = document.createElement("div");
+        tray.setAttribute("data-settings-tray", "true");
         tray.style.cssText = `
       position: absolute;
       top: 60px;
@@ -681,9 +735,9 @@ export function createConvaiWidget(container, options) {
       overflow: hidden;
     `;
         // Add animation keyframes if not present
-        if (!document.getElementById('convai-widget-keyframes')) {
-            const style = document.createElement('style');
-            style.id = 'convai-widget-keyframes';
+        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); }
@@ -693,7 +747,7 @@ export function createConvaiWidget(container, options) {
             document.head.appendChild(style);
         }
         // Horizontal Settings Row Container
-        const settingsRow = document.createElement('div');
+        const settingsRow = document.createElement("div");
         settingsRow.style.cssText = `
       display: flex;
       flex-direction: row;
@@ -702,7 +756,7 @@ export function createConvaiWidget(container, options) {
       gap: 4px;
     `;
         const createOption = (icon, label, onClick, isActive = false, isDestructive = false) => {
-            const btn = document.createElement('div');
+            const btn = document.createElement("div");
             btn.style.cssText = `
         display: flex;
         flex-direction: column;
@@ -712,85 +766,184 @@ export function createConvaiWidget(container, options) {
         cursor: pointer;
         border-radius: ${aeroTheme.borderRadius.md};
         background-color: ${isActive
-                ? 'rgba(16, 185, 129, 0.15)'
+                ? "rgba(16, 185, 129, 0.15)"
                 : isDestructive
-                    ? 'rgba(239, 68, 68, 0.1)'
-                    : 'transparent'};
+                    ? "rgba(239, 68, 68, 0.1)"
+                    : "transparent"};
         color: ${isActive
-                ? '#10b981'
+                ? "#10b981"
                 : isDestructive
-                    ? '#ef4444'
+                    ? "#ef4444"
                     : aeroTheme.colors.text.primary};
         transition: ${aeroTheme.transitions.fast};
         min-width: 50px;
       `;
             // Icon container
-            const iconContainer = document.createElement('div');
+            const iconContainer = document.createElement("div");
             iconContainer.appendChild(icon);
             btn.appendChild(iconContainer);
-            const span = document.createElement('span');
+            const span = document.createElement("span");
             span.textContent = label;
             span.style.cssText = `
         font-size: 10px;
         font-weight: 500;
       `;
             btn.appendChild(span);
-            btn.addEventListener('click', (e) => {
+            btn.addEventListener("click", (e) => {
                 e.stopPropagation();
                 onClick();
             });
-            btn.addEventListener('mouseover', () => {
-                btn.style.transform = 'scale(1.02)';
+            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.addEventListener("mouseout", () => {
+                btn.style.transform = "scale(1)";
                 btn.style.backgroundColor = isActive
-                    ? 'rgba(16, 185, 129, 0.15)'
+                    ? "rgba(16, 185, 129, 0.15)"
                     : isDestructive
-                        ? 'rgba(239, 68, 68, 0.1)'
-                        : 'transparent';
+                        ? "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));
+        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';
+        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) {
+        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';
+            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));
+        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';
+        const container = document.createElement("div");
+        container.id = "floating-video-container";
         container.style.cssText = `
       position: fixed;
       left: 20px;
@@ -804,7 +957,7 @@ export function createConvaiWidget(container, options) {
       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');
+        const wrapper = document.createElement("div");
         wrapper.style.cssText = `
       background: rgba(15, 23, 42, 0.95);
       backdrop-filter: blur(20px);
@@ -813,7 +966,7 @@ export function createConvaiWidget(container, options) {
       overflow: hidden;
     `;
         // Header
-        const header = document.createElement('div');
+        const header = document.createElement("div");
         header.style.cssText = `
       display: flex;
       align-items: center;
@@ -822,7 +975,7 @@ export function createConvaiWidget(container, options) {
       background: rgba(0, 0, 0, 0.3);
       border-bottom: 1px solid ${aeroTheme.colors.neutral[700]};
     `;
-        const headerLeft = document.createElement('div');
+        const headerLeft = document.createElement("div");
         headerLeft.style.cssText = `
       display: flex;
       align-items: center;
@@ -831,18 +984,18 @@ export function createConvaiWidget(container, options) {
       font-size: 12px;
       font-weight: 500;
     `;
-        const dragIcon = Icons.DragIndicator('sm');
-        dragIcon.style.width = '16px';
-        dragIcon.style.height = '16px';
+        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';
+        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';
+        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;
@@ -855,28 +1008,28 @@ export function createConvaiWidget(container, options) {
       padding: 4px;
       transition: transform 0.1s ease-out;
     `;
-        closeButton.addEventListener('click', (e) => {
+        closeButton.addEventListener("click", (e) => {
             e.stopPropagation();
             convaiClient.videoControls.disableVideo();
         });
-        closeButton.addEventListener('mouseenter', () => {
-            closeButton.style.transform = 'scale(1.1)';
+        closeButton.addEventListener("mouseenter", () => {
+            closeButton.style.transform = "scale(1.1)";
         });
-        closeButton.addEventListener('mouseleave', () => {
-            closeButton.style.transform = 'scale(1)';
+        closeButton.addEventListener("mouseleave", () => {
+            closeButton.style.transform = "scale(1)";
         });
         header.appendChild(headerLeft);
         header.appendChild(closeButton);
         // Video Container
-        const videoContainer = document.createElement('div');
+        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';
+        const videoWrapper = document.createElement("div");
+        videoWrapper.id = "floating-video-wrapper";
         videoWrapper.style.cssText = `
       position: absolute;
       top: 0;
@@ -884,8 +1037,8 @@ export function createConvaiWidget(container, options) {
       width: 100%;
       height: 100%;
     `;
-        const videoElement = document.createElement('video');
-        videoElement.id = 'floating-video-element';
+        const videoElement = document.createElement("video");
+        videoElement.id = "floating-video-element";
         videoElement.autoplay = true;
         videoElement.playsInline = true;
         videoElement.muted = true;
@@ -896,8 +1049,8 @@ export function createConvaiWidget(container, options) {
       transform: scaleX(-1);
     `;
         // Camera off placeholder
-        const cameraOffPlaceholder = document.createElement('div');
-        cameraOffPlaceholder.id = 'camera-off-placeholder';
+        const cameraOffPlaceholder = document.createElement("div");
+        cameraOffPlaceholder.id = "camera-off-placeholder";
         cameraOffPlaceholder.style.cssText = `
       width: 100%;
       height: 100%;
@@ -909,12 +1062,12 @@ export function createConvaiWidget(container, options) {
       gap: 12px;
       background: #000;
     `;
-        const cameraOffIcon = Icons.VideoOff('lg');
-        cameraOffIcon.style.width = '48px';
-        cameraOffIcon.style.height = '48px';
+        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';
+        const cameraOffText = document.createElement("span");
+        cameraOffText.textContent = "Camera is off";
         cameraOffText.style.cssText = `
       font-size: 14px;
       text-align: center;
@@ -933,7 +1086,7 @@ export function createConvaiWidget(container, options) {
         let startLeft = 20;
         let startTop = 20;
         const handleMouseDown = (e) => {
-            if (e.target.closest('button'))
+            if (e.target.closest("button"))
                 return;
             isDragging = true;
             startX = e.clientX;
@@ -941,7 +1094,7 @@ export function createConvaiWidget(container, options) {
             const style = window.getComputedStyle(container);
             startLeft = parseInt(style.left);
             startTop = parseInt(style.top);
-            container.style.cursor = 'grabbing';
+            container.style.cursor = "grabbing";
             e.preventDefault();
         };
         const handleMouseMove = (e) => {
@@ -962,12 +1115,12 @@ export function createConvaiWidget(container, options) {
         const handleMouseUp = () => {
             if (isDragging) {
                 isDragging = false;
-                container.style.cursor = 'grab';
+                container.style.cursor = "grab";
             }
         };
-        container.addEventListener('mousedown', handleMouseDown);
-        document.addEventListener('mousemove', handleMouseMove);
-        document.addEventListener('mouseup', handleMouseUp);
+        container.addEventListener("mousedown", handleMouseDown);
+        document.addEventListener("mousemove", handleMouseMove);
+        document.addEventListener("mouseup", handleMouseUp);
         return container;
     };
     // Event handlers
@@ -983,7 +1136,7 @@ export function createConvaiWidget(container, options) {
                 setIsOpen(true);
             }
             catch (error) {
-                console.error('Failed to connect:', error);
+                console.error("Failed to connect:", error);
             }
         }
         else {
@@ -997,8 +1150,8 @@ export function createConvaiWidget(container, options) {
     const handleSend = () => {
         if (inputValue.trim() && convaiClient.state.isConnected) {
             convaiClient.sendUserTextMessage(inputValue);
-            inputValue = '';
-            inputElement.value = '';
+            inputValue = "";
+            inputElement.value = "";
             updateSendButton();
         }
     };
@@ -1033,7 +1186,7 @@ export function createConvaiWidget(container, options) {
             updateSendButton();
         }
         catch (error) {
-            console.error('Failed to reset:', error);
+            console.error("Failed to reset:", error);
         }
     };
     const handleDisconnect = async () => {
@@ -1047,163 +1200,137 @@ export function createConvaiWidget(container, options) {
         updateSendButton();
     };
     const handleToggleVideo = async () => {
-        if (convaiClient.connectionType !== 'video')
+        if (convaiClient.connectionType !== "video")
             return;
         try {
-            if (convaiClient.videoControls.isVideoEnabled) {
+            if (isVideoVisible) {
                 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);
-                }
-            }
+            // State will be updated via event listener below
         }
         catch (e) {
-            console.error("Toggle video failed", e);
+            console.error("Failed to toggle video:", 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);
-                }
-            }
+            // State will be updated via event listener above
         }
         catch (e) {
-            console.error("Toggle screen share failed", 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.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';
+            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';
+            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';
+        settingsTray.style.display = open ? "flex" : "none";
     };
     const updateSendButton = () => {
-        const sendButton = document.getElementById('convai-send-button');
+        const sendButton = document.getElementById("convai-send-button");
         if (!sendButton)
             return;
         // Clear previous content
-        sendButton.innerHTML = '';
+        sendButton.innerHTML = "";
         if (inputValue.length > 0) {
             // Show Send Button
-            sendButton.appendChild(Icons.Send('md'));
+            sendButton.appendChild(Icons.Send("md"));
             sendButton.style.background = aeroTheme.colors.text.primary;
-            sendButton.style.color = 'white';
-            sendButton.style.border = 'none';
+            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.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)
+        if (!floatingVideo ||
+            !convaiClient.room ||
+            !convaiClient.room.localParticipant)
             return;
-        const videoEl = floatingVideo.querySelector('#floating-video-element');
-        const placeholder = floatingVideo.querySelector('#camera-off-placeholder');
+        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');
+            const videoPub = tracks.find((t) => t.kind === "video");
             if (videoPub && videoPub.track) {
                 videoPub.track.attach(videoEl);
-                videoEl.style.display = 'block';
-                placeholder.style.display = 'none';
+                videoEl.style.display = "block";
+                placeholder.style.display = "none";
             }
             else {
-                videoEl.style.display = 'none';
-                placeholder.style.display = 'flex';
+                videoEl.style.display = "none";
+                placeholder.style.display = "flex";
             }
         }
         else {
-            videoEl.style.display = 'none';
-            placeholder.style.display = 'flex';
+            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');
+        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';
+                voiceModeOverlay.style.display = "flex";
             if (messageListElement)
-                messageListElement.style.display = 'none';
+                messageListElement.style.display = "none";
             if (floatingVideo)
-                floatingVideo.style.display = 'none';
+                floatingVideo.style.display = "none";
             // Footer: Show Exit Button, Hide Standard
             if (standardFooter)
-                standardFooter.style.display = 'none';
+                standardFooter.style.display = "none";
             if (voiceExitBtn)
-                voiceExitBtn.style.display = 'flex';
+                voiceExitBtn.style.display = "flex";
             if (footerElement)
-                footerElement.style.justifyContent = 'center';
+                footerElement.style.justifyContent = "center";
             // Update header to show VOICE badge
             updateHeader();
             // Reset animation state for voice mode
@@ -1216,28 +1343,28 @@ export function createConvaiWidget(container, options) {
         else {
             // Hide Overlay
             if (voiceModeOverlay)
-                voiceModeOverlay.style.display = 'none';
+                voiceModeOverlay.style.display = "none";
             // Show Video or Message List
             if (isVideoVisible) {
                 if (messageListElement)
-                    messageListElement.style.display = 'none';
+                    messageListElement.style.display = "none";
                 if (floatingVideo)
-                    floatingVideo.style.display = 'block';
+                    floatingVideo.style.display = "block";
                 updateVideoTrack();
             }
             else {
                 if (messageListElement)
-                    messageListElement.style.display = 'flex';
+                    messageListElement.style.display = "flex";
                 if (floatingVideo)
-                    floatingVideo.style.display = 'none';
+                    floatingVideo.style.display = "none";
             }
             // Footer: Show Standard, Hide Exit
             if (standardFooter)
-                standardFooter.style.display = 'flex';
+                standardFooter.style.display = "flex";
             if (voiceExitBtn)
-                voiceExitBtn.style.display = 'none';
+                voiceExitBtn.style.display = "none";
             if (footerElement)
-                footerElement.style.justifyContent = 'flex-start';
+                footerElement.style.justifyContent = "flex-start";
             // Update header to hide VOICE badge
             updateHeader();
             // Stop Audio Analysis
@@ -1245,12 +1372,32 @@ export function createConvaiWidget(container, options) {
         }
     };
     const updateMicButton = () => {
-        // Update mic button appearance based on mute state
-        const micButton = document.getElementById('convai-mic-button');
+        // Update mic button appearance based on mute state with visual feedback
+        const micButton = document.getElementById("convai-mic-button");
         if (micButton) {
-            micButton.style.background = convaiClient.audioControls.isAudioMuted
+            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
@@ -1258,8 +1405,8 @@ export function createConvaiWidget(container, options) {
         if (!text)
             return;
         // Handle both actual newlines and \n escape sequences
-        const normalizedText = text.replace(/\\n/g, '\n');
-        const lines = normalizedText.split('\n');
+        const normalizedText = text.replace(/\\n/g, "\n");
+        const lines = normalizedText.split("\n");
         lines.forEach((line, lineIndex) => {
             // Process markdown within each line
             const processLine = (text) => {
@@ -1281,21 +1428,31 @@ export function createConvaiWidget(container, options) {
                     }
                     // Determine if it's bold or italic
                     if (match[1] && match[2]) {
-                        // Bold text (** or __)
-                        const strong = document.createElement('strong');
+                        // 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 (*)
-                        const em = document.createElement('em');
+                        // 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 (_)
-                        const em = document.createElement('em');
+                        // 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;
@@ -1312,19 +1469,19 @@ export function createConvaiWidget(container, options) {
             const processedLine = processLine(line);
             // Handle empty lines (creates paragraph spacing)
             if (line.trim() === "" && lineIndex > 0) {
-                container.appendChild(document.createElement('br'));
+                container.appendChild(document.createElement("br"));
                 return;
             }
             // Append the processed line
             if (processedLine.length > 0) {
-                processedLine.forEach(part => container.appendChild(part));
+                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'));
+                container.appendChild(document.createElement("br"));
             }
         });
     };
@@ -1332,9 +1489,9 @@ export function createConvaiWidget(container, options) {
         if (!messageListElement)
             return;
         const messages = formatMessages();
-        messageListElement.innerHTML = '';
+        messageListElement.innerHTML = "";
         if (messages.length === 0) {
-            const emptyState = document.createElement('div');
+            const emptyState = document.createElement("div");
             emptyState.style.cssText = `
             display: flex;
             flex-direction: column;
@@ -1353,79 +1510,107 @@ export function createConvaiWidget(container, options) {
             return;
         }
         messages.forEach((msg) => {
-            const messageWrapper = document.createElement('div');
+            // MessageWrapper - matches React UserMessageContainer
+            const messageWrapper = document.createElement("div");
             messageWrapper.style.cssText = `
         display: flex;
         flex-direction: column;
-        align-items: ${msg.isUser ? 'flex-end' : 'flex-start'};
-        gap: 4px;
+        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');
+            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 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};
+        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;
-        box-shadow: ${aeroTheme.shadows.sm};
-        border-bottom-${msg.isUser ? 'right' : 'left'}-radius: 4px;
-        max-width: 85%;
+        max-width: 100%;
         display: flex;
         flex-direction: column;
-        gap: 8px;
+        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;
       `;
-            // Header (Logo/Icon + Name) inside bubble
+            // 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');
+                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');
+          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: 16px;
-            height: 16px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            flex-shrink: 0;
-          `;
+          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
-                    const userIcon = Icons.User('sm');
-                    userIcon.style.width = '16px';
-                    userIcon.style.height = '16px';
+                    // 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';
+                    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');
+                // Name Label - matches React UserLabel exactly
+                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;
-          `;
+          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');
+            const contentDiv = document.createElement("div");
             contentDiv.style.cssText = `
         white-space: pre-wrap;
         word-wrap: break-word;
@@ -1433,17 +1618,19 @@ export function createConvaiWidget(container, options) {
             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);
+            // 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
@@ -1479,9 +1666,17 @@ export function createConvaiWidget(container, options) {
     };
     // Setup event listeners for client state changes
     const setupClientListeners = () => {
-        convaiClient.on('stateChange', () => {
+        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) {
@@ -1496,11 +1691,6 @@ export function createConvaiWidget(container, options) {
                     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) {
@@ -1508,14 +1698,79 @@ export function createConvaiWidget(container, options) {
                 }
                 isMuted = false;
                 isVoiceMode = false;
+                isVideoVisible = false;
                 updateHeader();
                 updateVoiceMode();
             }
         });
-        convaiClient.on('messagesChange', () => {
+        // 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();
         });
-        convaiClient.on('connect', () => {
+        // 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);
@@ -1523,7 +1778,7 @@ export function createConvaiWidget(container, options) {
             // Fetch character info
             fetchCharacterInfo();
         });
-        convaiClient.on('disconnect', () => {
+        convaiClient.on("disconnect", () => {
             // Cleanup audio renderer
             if (audioRenderer) {
                 audioRenderer.destroy();
@@ -1535,6 +1790,8 @@ export function createConvaiWidget(container, options) {
     // 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);
@@ -1550,7 +1807,7 @@ export function createConvaiWidget(container, options) {
                 audioRenderer = null;
             }
             // Remove event listeners
-            morphingContainer.removeEventListener('click', handleToggle);
+            morphingContainer.removeEventListener("click", handleToggle);
             // Remove DOM elements
             if (rootElement.parentElement) {
                 rootElement.remove();
@@ -1559,11 +1816,12 @@ export function createConvaiWidget(container, options) {
                 floatingVideo.remove();
             }
             // Unsubscribe from client events
-            convaiClient.off('stateChange', () => { });
-            convaiClient.off('messagesChange', () => { });
-            convaiClient.off('connect', () => { });
-            convaiClient.off('disconnect', () => { });
-        }
+            convaiClient.off("stateChange", () => { });
+            convaiClient.off("messagesChange", () => { });
+            convaiClient.off("botReady", () => { });
+            convaiClient.off("connect", () => { });
+            convaiClient.off("disconnect", () => { });
+        },
     };
     return widget;
 }