@weldsuite/helpdesk-widget-sdk 1.0.2 → 1.0.4

package/dist/index.umd.js

@@ -562,20 +562,47 @@
             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;
@@ -587,7 +614,7 @@
       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');
@@ -673,6 +700,11 @@
             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');
         }
         /**
@@ -689,6 +721,21 @@
             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(exports.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
          */
@@ -746,6 +793,18 @@
             if (this.deviceInfo.isMobile && type === exports.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 === exports.IframeType.WIDGET) {
+                const launcher = this.iframes.get(exports.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 });
         }
         /**
@@ -766,6 +825,13 @@
             if (this.deviceInfo.isMobile && type === exports.IframeType.WIDGET) {
                 document.body.classList.remove('weld-mobile-open');
             }
+            // Show launcher again on mobile when widget is closed
+            if (this.deviceInfo.isMobile && type === exports.IframeType.WIDGET) {
+                const launcher = this.iframes.get(exports.IframeType.LAUNCHER);
+                if (launcher) {
+                    launcher.container.style.display = 'block';
+                }
+            }
             console.log(`[Weld SDK] Iframe ${type} hidden`, { newDisplay: iframe.container.style.display });
         }
         /**
@@ -2162,7 +2228,7 @@
         }
     }
 
-    var version = "1.0.2";
+    var version = "1.0.4";
     var packageJson = {
     	version: version};