@myned-ai/avatar-chat-widget 0.6.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

@@ -3566,8 +3566,6 @@ class VoiceInputController {
     }
     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++;
@@ -3576,15 +3574,22 @@ 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);
+      const errorName = error2.name || "";
       const errorMsg = error2.message || "";
-      if (errorMsg.includes("Permission denied") || errorMsg.includes("NotAllowedError")) {
+      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.");
       }
     }
   }
@@ -4249,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;
@@ -4414,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;
 }
 
@@ -4467,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%;
@@ -5233,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;
 }
 
@@ -5503,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 */
@@ -5795,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" });
   }
   /**
@@ -5823,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}`);
@@ -5858,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";
@@ -6092,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
    */
@@ -6100,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)
    */