@myned-ai/avatar-chat-widget 0.5.0 → 0.7.0

package/dist/avatar-chat-widget.d.ts

@@ -41,6 +41,7 @@ declare class AvatarChatElement extends HTMLElement {
     private _isMounted;
     private _isConnected;
     private _isCollapsed;
+    private visualViewportHandler;
     constructor();
     /**
      * Configure the widget (call before mount)
@@ -75,10 +76,23 @@ declare class AvatarChatElement extends HTMLElement {
      * Setup UI event listeners
      */
     private setupUIEvents;
+    /**
+     * Handle mobile keyboard appearance using VisualViewport API
+     * Resizes the avatar to fit when keyboard opens
+     */
+    private setupMobileKeyboardHandling;
     /**
      * Escape HTML to prevent XSS in user-provided suggestions
      */
     private escapeHtml;
+    /**
+     * Generate CSS overrides for primaryColor and secondaryColor config options
+     */
+    private generateColorOverrides;
+    /**
+     * Darken a hex color by a percentage
+     */
+    private darkenColor;
     /**
      * Mark that conversation has messages (shows chat area instead of suggestions)
      */

package/dist/avatar-chat-widget.js

@@ -1180,6 +1180,10 @@ class AudioInput {
   // 100ms at 24kHz
   async requestPermission() {
     try {
+      if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
+        log$e.error("MediaDevices API not available. Microphone requires HTTPS.");
+        throw new Error("Microphone requires a secure connection (HTTPS)");
+      }
       const stream = await navigator.mediaDevices.getUserMedia({
         audio: {
           sampleRate: CONFIG.audio.input.sampleRate,
@@ -1225,6 +1229,9 @@ class AudioInput {
    */
   async startPCM16Recording(onData) {
     try {
+      if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
+        throw new Error("Microphone requires a secure connection (HTTPS)");
+      }
       this.mediaStream = await navigator.mediaDevices.getUserMedia({
         audio: {
           channelCount: 1,
@@ -3551,10 +3558,14 @@ class VoiceInputController {
    * Start voice recording
    */
   async start() {
+    if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
+      const message = "Voice input requires a secure connection (HTTPS). Please use text input instead.";
+      log$5.warn(message);
+      alert(message);
+      return;
+    }
     try {
       log$5.info("Starting recording (PCM16 24kHz)");
-      this.protocolClient.sendAudioStreamStart();
-      log$5.info("Sent audio_stream_start to server");
       let chunkCount = 0;
       await this.audioInput.startRecording((audioData) => {
         chunkCount++;
@@ -3563,13 +3574,23 @@ class VoiceInputController {
         }
         this.protocolClient.sendAudioData(audioData);
       }, "pcm16");
-      log$5.info("Recording started successfully");
+      this.protocolClient.sendAudioStreamStart();
+      log$5.info("Recording started successfully, sent audio_stream_start to server");
       this.setRecordingState(true);
     } catch (error2) {
       log$5.error("Failed to start recording:", error2);
       errorBoundary.handleError(error2, "audio-input");
       this.options.onError?.(error2);
-      alert("Microphone access denied. Please enable microphone permissions.");
+      const errorName = error2.name || "";
+      const errorMsg = error2.message || "";
+      const errorStr = `${errorName} ${errorMsg}`.toLowerCase();
+      if (errorStr.includes("policy") || errorStr.includes("not allowed in this document")) {
+        alert("Microphone is blocked by this website's security settings. The site owner needs to enable microphone access.");
+      } else if (errorName === "NotAllowedError" || errorStr.includes("permission denied") || errorStr.includes("denied")) {
+        alert("Microphone access was denied. Please allow microphone access in your browser settings to use voice input.");
+      } else {
+        alert("Could not access microphone. Please check your browser settings and try again.");
+      }
     }
   }
   /**
@@ -3696,7 +3717,6 @@ class ChatManager {
       await this.protocolClient.connect();
       log$4.info("WebSocket connected");
       this.avatar.setChatState("Idle");
-      await this.audioInput.requestPermission();
     } catch (error2) {
       errorBoundary.handleError(error2, "chat-manager");
       log$4.error("Connection failed");
@@ -3788,6 +3808,9 @@ class ChatManager {
       this.useSyncPlayback = false;
       this.subtitleController.showRemaining();
       this.transcriptManager.finalizeAssistantTurn();
+      setTimeout(() => {
+        this.subtitleController.clear();
+      }, 1500);
     });
   }
   setupAutoScroll() {
@@ -4231,6 +4254,7 @@ const WIDGET_STYLES = `
   box-sizing: border-box;
   --primary-color: #4B4ACF;
   --primary-gradient: linear-gradient(135deg, #4B4ACF 0%, #2E3A87 100%);
+  --secondary-color: #1F2937;
   --bg-color: #ffffff;
   --text-color: #1F2937;
   --input-bg: #f5f5f7;
@@ -4286,8 +4310,10 @@ const WIDGET_STYLES = `
 @media (max-width: 480px) {
   .widget-root {
     width: 100vw;
-    height: 100vh;
+    height: 100vh; /* Fallback for older browsers */
+    height: 100dvh; /* Dynamic viewport height - accounts for mobile browser UI */
     max-height: 100vh;
+    max-height: 100dvh;
     border-radius: 0;
     /* Let the mobile media query at the bottom handle the rest */
     padding-bottom: 90px; /* Ensure input layer space is preserved */
@@ -4394,7 +4420,7 @@ const WIDGET_STYLES = `
   margin: 0;
   font-size: 16px;
   font-weight: 700;
-  color: var(--text-color);
+  color: var(--secondary-color);
   letter-spacing: -0.01em;
 }
 
@@ -4447,7 +4473,7 @@ const WIDGET_STYLES = `
 .control-btn {
   background: transparent;
   border: none;
-  color: var(--text-color);
+  color: var(--secondary-color);
   width: 32px;
   height: 32px;
   border-radius: 50%;
@@ -5213,7 +5239,7 @@ const WIDGET_STYLES = `
   display: flex;
   align-items: center;
   justify-content: center;
-  background: linear-gradient(135deg, #4B4ACF 0%, #2E3A87 100%);
+  background: var(--primary-gradient);
   color: white;
 }
 
@@ -5336,7 +5362,8 @@ const WIDGET_STYLES = `
   
   /* Avatar-focus mode on mobile: avatar takes most of the space */
   :host(:not(.collapsed)) [data-drawer-state="avatar-focus"] {
-    --avatar-height: calc(100vh - 56px - 90px) !important; /* Full height minus header and input */
+    --avatar-height: calc(100vh - 56px - 90px) !important; /* Fallback */
+    --avatar-height: calc(100dvh - 56px - 90px) !important; /* Full height minus header and input */
     background: transparent !important; /* Let avatar stage show through */
   }
   
@@ -5381,11 +5408,13 @@ const WIDGET_STYLES = `
   
   /* Text-focus mode on mobile: chat takes most of the space, avatar in corner */
   :host(:not(.collapsed)) [data-drawer-state="text-focus"] {
-    --chat-height: calc(100vh - 70px - 90px) !important; /* Full height minus header and input */
+    --chat-height: calc(100vh - 70px - 90px) !important; /* Fallback */
+    --chat-height: calc(100dvh - 70px - 90px) !important; /* Full height minus header and input */
   }
   
   :host(:not(.collapsed)) [data-drawer-state="text-focus"] .chat-section {
-    height: calc(100vh - 70px - 90px) !important;
+    height: calc(100vh - 70px - 90px) !important; /* Fallback */
+    height: calc(100dvh - 70px - 90px) !important;
     flex: 1;
   }
   
@@ -5480,6 +5509,47 @@ const WIDGET_STYLES = `
   white-space: nowrap;
   border-width: 0;
 }
+
+/* ==========================================================================
+   Mobile Keyboard Visible State
+   Resize avatar when virtual keyboard appears on mobile
+   ========================================================================== */
+@media (max-width: 480px) {
+  /* When keyboard is visible, shrink the avatar section */
+  .widget-root.keyboard-visible {
+    --avatar-height: 180px;
+  }
+  
+  /* Scale down the avatar render and push it down */
+  .widget-root.keyboard-visible .avatar-render-container {
+    transform: translate(-50%, -35%) scale(0.65) !important;
+    transition: transform 0.3s ease;
+  }
+  
+  /* Show subtitles but position them properly */
+  .widget-root.keyboard-visible .avatar-subtitles {
+    display: block !important;
+    bottom: 100px !important;
+    font-size: 14px;
+  }
+  
+  /* Hide mist to save space */
+  .widget-root.keyboard-visible .avatar-mist-overlay {
+    display: none !important;
+  }
+  
+  /* Move suggestions closer to input */
+  .widget-root.keyboard-visible .avatar-suggestions {
+    bottom: 95px !important;
+  }
+  
+  /* In text-focus mode with keyboard, ensure chat doesn't overflow */
+  .widget-root.keyboard-visible[data-drawer-state="text-focus"] .chat-section {
+    flex: 1 1 auto !important;
+    min-height: 0 !important;
+    height: auto !important;
+  }
+}
 `;
 const LAYOUT = {
   /** Header bar height - contains title, status, minimize button */
@@ -5772,6 +5842,7 @@ class AvatarChatElement extends HTMLElement {
     this._isMounted = false;
     this._isConnected = false;
     this._isCollapsed = false;
+    this.visualViewportHandler = null;
     this.shadow = this.attachShadow({ mode: "open" });
   }
   /**
@@ -5800,8 +5871,9 @@ class AvatarChatElement extends HTMLElement {
       return;
     }
     log$2.info("Mounting widget");
+    const colorOverrides = this.generateColorOverrides();
     const styleEl = document.createElement("style");
-    styleEl.textContent = WIDGET_STYLES + (this.config.customStyles || "");
+    styleEl.textContent = WIDGET_STYLES + colorOverrides + (this.config.customStyles || "");
     this.shadow.appendChild(styleEl);
     if (this.config.position && this.config.position !== "inline") {
       this.classList.add(`position-${this.config.position}`);
@@ -5835,6 +5907,7 @@ class AvatarChatElement extends HTMLElement {
     this.shadow.appendChild(root);
     this.initializeDrawer();
     this.setupUIEvents();
+    this.setupMobileKeyboardHandling();
     if (!this.config.enableVoice) {
       const voiceBtn = this.shadow.getElementById("micBtn");
       if (voiceBtn) voiceBtn.style.display = "none";
@@ -6069,6 +6142,34 @@ class AvatarChatElement extends HTMLElement {
       });
     }
   }
+  /**
+   * Handle mobile keyboard appearance using VisualViewport API
+   * Resizes the avatar to fit when keyboard opens
+   */
+  setupMobileKeyboardHandling() {
+    if (!window.visualViewport) {
+      return;
+    }
+    const widgetRoot = this.shadow.querySelector(".widget-root");
+    if (!widgetRoot) {
+      return;
+    }
+    let initialViewportHeight = window.visualViewport.height;
+    const handleViewportChange = () => {
+      const viewport = window.visualViewport;
+      const currentHeight = viewport.height;
+      const keyboardHeight = initialViewportHeight - currentHeight;
+      if (keyboardHeight > 150) {
+        widgetRoot.classList.add("keyboard-visible");
+      } else {
+        widgetRoot.classList.remove("keyboard-visible");
+        initialViewportHeight = currentHeight;
+      }
+    };
+    window.visualViewport.addEventListener("resize", handleViewportChange);
+    window.visualViewport.addEventListener("scroll", handleViewportChange);
+    this.visualViewportHandler = handleViewportChange;
+  }
   /**
    * Escape HTML to prevent XSS in user-provided suggestions
    */
@@ -6077,6 +6178,36 @@ class AvatarChatElement extends HTMLElement {
     div.textContent = text;
     return div.innerHTML;
   }
+  /**
+   * Generate CSS overrides for primaryColor and secondaryColor config options
+   */
+  generateColorOverrides() {
+    const overrides = [];
+    if (this.config.primaryColor) {
+      const primary = this.config.primaryColor;
+      const darkerShade = this.darkenColor(primary, 0.2);
+      overrides.push(`--primary-color: ${primary};`);
+      overrides.push(`--primary-gradient: linear-gradient(135deg, ${primary} 0%, ${darkerShade} 100%);`);
+    }
+    if (this.config.secondaryColor) {
+      overrides.push(`--secondary-color: ${this.config.secondaryColor};`);
+    }
+    if (overrides.length === 0) return "";
+    return `:host { ${overrides.join(" ")} }`;
+  }
+  /**
+   * Darken a hex color by a percentage
+   */
+  darkenColor(hex, percent) {
+    hex = hex.replace(/^#/, "");
+    let r = parseInt(hex.substring(0, 2), 16);
+    let g = parseInt(hex.substring(2, 4), 16);
+    let b = parseInt(hex.substring(4, 6), 16);
+    r = Math.max(0, Math.floor(r * (1 - percent)));
+    g = Math.max(0, Math.floor(g * (1 - percent)));
+    b = Math.max(0, Math.floor(b * (1 - percent)));
+    return `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}`;
+  }
   /**
    * Mark that conversation has messages (shows chat area instead of suggestions)
    */