@myned-ai/avatar-chat-widget 0.4.0 → 0.6.0

package/README.md

@@ -23,8 +23,7 @@ Add directly to any HTML page or website builder:
   AvatarChat.init({
     container: '#avatar-chat',
     serverUrl: 'wss://your-backend-server.com/ws',
-    position: 'bottom-right',
-    theme: 'light'
+    position: 'bottom-right'
   });
 </script>
 ```
@@ -63,7 +62,6 @@ chat.destroy();  // Cleanup
 | `container` | `string \| HTMLElement` | **required** | CSS selector or DOM element |
 | `serverUrl` | `string` | **required** | WebSocket server URL (ws:// or wss://) |
 | `position` | `string` | `'bottom-right'` | `bottom-right`, `bottom-left`, `top-right`, `top-left`, `inline` |
-| `theme` | `string` | `'light'` | `light`, `dark`, `auto` (follows system preference) |
 | `startCollapsed` | `boolean` | `true` | Start minimized as bubble |
 | `width` | `number` | `380` | Widget width (200-2000px) |
 | `height` | `number` | `550` | Widget height (300-2000px) |

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,6 +3558,12 @@ 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();
@@ -3569,7 +3582,10 @@ class VoiceInputController {
       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 errorMsg = error2.message || "";
+      if (errorMsg.includes("Permission denied") || errorMsg.includes("NotAllowedError")) {
+        alert("Microphone access was denied. Please allow microphone access in your browser settings to use voice input.");
+      }
     }
   }
   /**
@@ -3696,7 +3712,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 +3803,9 @@ class ChatManager {
       this.useSyncPlayback = false;
       this.subtitleController.showRemaining();
       this.transcriptManager.finalizeAssistantTurn();
+      setTimeout(() => {
+        this.subtitleController.clear();
+      }, 1500);
     });
   }
   setupAutoScroll() {
@@ -4286,8 +4304,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 */
@@ -5207,6 +5227,16 @@ const WIDGET_STYLES = `
   object-fit: cover;
 }
 
+.avatar-fallback-icon {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, #4B4ACF 0%, #2E3A87 100%);
+  color: white;
+}
+
 .bubble-avatar-preview .status-dot {
   position: absolute;
   bottom: 0;
@@ -5326,7 +5356,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 */
   }
   
@@ -5371,11 +5402,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;
   }
   
@@ -5424,14 +5457,14 @@ const WIDGET_STYLES = `
     bottom: 110px; /* Similar position to subtitles, above input */
     width: 95%;
     max-width: none;
-    gap: 8px;
-    padding: 8px;
+    gap: 6px;
+    padding: 4px;
   }
   
   :host(:not(.collapsed)) [data-drawer-state="avatar-focus"] .avatar-suggestions .suggestion-chip {
-    padding: 12px 18px;
-    font-size: 14px;
-    border-radius: 20px;
+    padding: 8px 12px;
+    font-size: 13px;
+    border-radius: 16px;
   }
   
   /* Mist overlay on mobile - covers lower portion without reaching avatar's face */
@@ -5699,7 +5732,13 @@ const BUBBLE_TEMPLATE = `
   </div>
   <div class="chat-bubble" id="chatBubble" role="button" aria-label="Open chat" tabindex="0">
     <div class="bubble-avatar-preview">
-      <img src="./asset/avatar.gif" class="avatar-face-img" alt="Nyx Avatar" />
+      <img src="./asset/avatar.gif" class="avatar-face-img" alt="Nyx Avatar" onerror="this.style.display='none';this.nextElementSibling.style.display='flex';" />
+      <div class="avatar-fallback-icon" style="display:none;">
+        <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
+          <circle cx="12" cy="7" r="4"></circle>
+        </svg>
+      </div>
       <div class="status-dot"></div>
     </div>
   </div>