@weldsuite/helpdesk-widget-sdk 1.0.2 → 1.0.4

package/dist/index.d.ts

@@ -710,6 +710,10 @@ declare class IframeManager {
      * Handle orientation change
      */
     private handleOrientationChange;
+    /**
+     * Handle visual viewport resize (mobile URL bar, keyboard)
+     */
+    private handleVisualViewportResize;
     /**
      * Get iframe by type
      */

package/dist/index.esm.js

@@ -556,20 +556,47 @@ class IframeManager {
         const container = document.createElement('div');
         container.className = 'weld-widget-frame';
         container.setAttribute('data-state', 'closed');
-        container.style.cssText = `
-      position: fixed;
-      bottom: ${widget.position.bottom};
-      right: ${widget.position.right};
-      width: ${widget.width};
-      height: ${widget.height};
-      max-width: 100vw;
-      z-index: 2147483001;
-      pointer-events: none;
-      display: none;
-      border-radius: 16px;
-      overflow: hidden;
-      background: transparent;
-    `;
+        // Apply different styles for mobile vs desktop
+        if (this.deviceInfo.isMobile) {
+            // Mobile: full-screen with dynamic viewport height to handle URL bar
+            container.style.cssText = `
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        width: 100vw;
+        height: 100dvh;
+        height: 100vh;
+        z-index: 2147483001;
+        pointer-events: none;
+        display: none;
+        border-radius: 0;
+        overflow: hidden;
+        background: transparent;
+      `;
+            // Use visualViewport API for accurate height on mobile browsers
+            if (window.visualViewport) {
+                container.style.height = `${window.visualViewport.height}px`;
+            }
+        }
+        else {
+            // Desktop: positioned widget
+            container.style.cssText = `
+        position: fixed;
+        bottom: ${widget.position.bottom};
+        right: ${widget.position.right};
+        width: ${widget.width};
+        height: ${widget.height};
+        max-width: 100vw;
+        z-index: 2147483001;
+        pointer-events: none;
+        display: none;
+        border-radius: 16px;
+        overflow: hidden;
+        background: transparent;
+      `;
+        }
         // Create iframe
         const iframe = document.createElement('iframe');
         iframe.name = widget.name;
@@ -581,7 +608,7 @@ class IframeManager {
       border: none;
       background: transparent;
       display: block;
-      border-radius: 16px;
+      border-radius: ${this.deviceInfo.isMobile ? '0' : '16px'};
     `;
         iframe.setAttribute('allow', 'clipboard-write; camera; microphone');
         iframe.setAttribute('sandbox', 'allow-scripts allow-same-origin allow-forms allow-popups allow-downloads');
@@ -667,6 +694,11 @@ class IframeManager {
         window.addEventListener('resize', this.handleResize.bind(this));
         // Orientation change
         window.addEventListener('orientationchange', this.handleOrientationChange.bind(this));
+        // Visual viewport resize (handles mobile URL bar and keyboard)
+        if (window.visualViewport) {
+            window.visualViewport.addEventListener('resize', this.handleVisualViewportResize.bind(this));
+            window.visualViewport.addEventListener('scroll', this.handleVisualViewportResize.bind(this));
+        }
         this.logger.debug('Event listeners setup');
     }
     /**
@@ -683,6 +715,21 @@ class IframeManager {
         this.deviceInfo = detectDevice();
         this.logger.debug('Orientation changed', { orientation: this.deviceInfo.orientation });
     }
+    /**
+     * Handle visual viewport resize (mobile URL bar, keyboard)
+     */
+    handleVisualViewportResize() {
+        if (!this.deviceInfo.isMobile || !window.visualViewport)
+            return;
+        const widget = this.iframes.get(IframeType.WIDGET);
+        if (widget && widget.visible) {
+            const vh = window.visualViewport.height;
+            const offsetTop = window.visualViewport.offsetTop;
+            widget.container.style.height = `${vh}px`;
+            widget.container.style.top = `${offsetTop}px`;
+            this.logger.debug('Visual viewport resized', { height: vh, offsetTop });
+        }
+    }
     /**
      * Get iframe by type
      */
@@ -740,6 +787,18 @@ class IframeManager {
         if (this.deviceInfo.isMobile && type === IframeType.WIDGET && this.config.mobile.scrollLock) {
             document.body.classList.add('weld-mobile-open');
         }
+        // Hide launcher on mobile when widget is open (full-screen mode)
+        if (this.deviceInfo.isMobile && type === IframeType.WIDGET) {
+            const launcher = this.iframes.get(IframeType.LAUNCHER);
+            if (launcher) {
+                launcher.container.style.display = 'none';
+            }
+            // Apply accurate viewport height using visualViewport API
+            if (window.visualViewport) {
+                iframe.container.style.height = `${window.visualViewport.height}px`;
+                iframe.container.style.top = `${window.visualViewport.offsetTop}px`;
+            }
+        }
         console.log(`[Weld SDK] Iframe ${type} shown`, { newDisplay: iframe.container.style.display });
     }
     /**
@@ -760,6 +819,13 @@ class IframeManager {
         if (this.deviceInfo.isMobile && type === IframeType.WIDGET) {
             document.body.classList.remove('weld-mobile-open');
         }
+        // Show launcher again on mobile when widget is closed
+        if (this.deviceInfo.isMobile && type === IframeType.WIDGET) {
+            const launcher = this.iframes.get(IframeType.LAUNCHER);
+            if (launcher) {
+                launcher.container.style.display = 'block';
+            }
+        }
         console.log(`[Weld SDK] Iframe ${type} hidden`, { newDisplay: iframe.container.style.display });
     }
     /**
@@ -2156,7 +2222,7 @@ class StateCoordinator {
     }
 }
 
-var version = "1.0.2";
+var version = "1.0.4";
 var packageJson = {
 	version: version};