@weldsuite/helpdesk-widget-sdk 1.0.3 → 1.0.4

package/dist/react.js

@@ -564,7 +564,7 @@ class IframeManager {
         container.setAttribute('data-state', 'closed');
         // Apply different styles for mobile vs desktop
         if (this.deviceInfo.isMobile) {
-            // Mobile: full-screen
+            // Mobile: full-screen with dynamic viewport height to handle URL bar
             container.style.cssText = `
         position: fixed;
         top: 0;
@@ -572,6 +572,7 @@ class IframeManager {
         right: 0;
         bottom: 0;
         width: 100vw;
+        height: 100dvh;
         height: 100vh;
         z-index: 2147483001;
         pointer-events: none;
@@ -580,6 +581,10 @@ class IframeManager {
         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
@@ -695,6 +700,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');
     }
     /**
@@ -711,6 +721,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
      */
@@ -768,6 +793,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 });
     }
     /**
@@ -788,6 +825,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 });
     }
     /**
@@ -1975,7 +2019,7 @@ class StateCoordinator {
     }
 }
 
-var version = "1.0.3";
+var version = "1.0.4";
 var packageJson = {
 	version: version};