aumera-on-screen-widget 0.0.19 → 0.0.21

package/df-btn.js

@@ -31,7 +31,7 @@
     const transform = `w_${width},h_${height},c_fill,f_auto,q_auto`;
 
     // Insert transformation right after `/upload/`
-    return url.replace('/upload/', `/upload/${transform}/`);
+    return url.replace("/upload/", `/upload/${transform}/`);
   }
 
   // Async function to fetch chatbot settings from GraphQL
@@ -45,7 +45,7 @@
         "env:",
         env,
         "language:",
-        language
+        language,
       );
 
       const query = `
@@ -81,14 +81,14 @@
       console.log(
         "[OSW Widget] Response status:",
         response.status,
-        response.statusText
+        response.statusText,
       );
 
       if (!response.ok) {
         console.error(
           "[OSW Widget] Failed to fetch - Status:",
           response.status,
-          response.statusText
+          response.statusText,
         );
         const errorText = await response
           .text()
@@ -103,13 +103,13 @@
       if (result.data?.oswChatbotSettingsPublic?.success) {
         console.log(
           "[OSW Widget] Settings retrieved successfully:",
-          result.data.oswChatbotSettingsPublic.settings
+          result.data.oswChatbotSettingsPublic.settings,
         );
         return result.data.oswChatbotSettingsPublic.settings;
       }
 
       console.warn(
-        "[OSW Widget] GraphQL query succeeded but success=false or missing data"
+        "[OSW Widget] GraphQL query succeeded but success=false or missing data",
       );
       return null;
     } catch (error) {
@@ -119,6 +119,17 @@
     }
   }
 
+  // Helper function to determine if a color is dark based on luminance
+  function isColorDark(hexColor) {
+    if (!hexColor) return false;
+    const hex = hexColor.replace("#", "");
+    const r = parseInt(hex.substr(0, 2), 16) / 255;
+    const g = parseInt(hex.substr(2, 2), 16) / 255;
+    const b = parseInt(hex.substr(4, 2), 16) / 255;
+    const luminance = 0.2126 * r + 0.7152 * g + 0.0722 * b;
+    return luminance < 0.5;
+  }
+
   // Default configuration with fallback values
   const defaultConfig = {
     env: "prod",
@@ -189,10 +200,10 @@
   // Fetch settings from GraphQL and merge with config
   if (!config.orgId) {
     console.error(
-      "[OSW Widget] No organization ID provided! Widget will not be displayed."
+      "[OSW Widget] No organization ID provided! Widget will not be displayed.",
     );
     console.error(
-      "[OSW Widget] Add orgId attribute to the script tag: <script id='df-btn' orgId='YOUR_ORG_ID' ...>"
+      "[OSW Widget] Add orgId attribute to the script tag: <script id='df-btn' orgId='YOUR_ORG_ID' ...>",
     );
     return; // Exit if no orgId
   }
@@ -200,12 +211,12 @@
   const settings = await fetchChatbotSettings(
     config.orgId,
     config.env,
-    detectedLang
+    detectedLang,
   );
 
   if (!settings) {
     console.warn(
-      "[OSW Widget] Failed to fetch chatbot settings. Using fallback configuration."
+      "[OSW Widget] Failed to fetch chatbot settings. Using fallback configuration.",
     );
     console.warn("[OSW Widget] Check:");
     console.warn("[OSW Widget]   1. Network tab for CORS errors");
@@ -224,7 +235,8 @@
     config.backgroundDark =
       settings.oswColourBackgroundDark || config.backgroundDark;
     // Update hasDarkMode if GraphQL provides dark background
-    config.hasDarkMode = config.hasDarkMode || !!settings.oswColourBackgroundDark;
+    config.hasDarkMode =
+      config.hasDarkMode || !!settings.oswColourBackgroundDark;
     config.fontColor = settings.oswColourFontLight || config.fontColor;
     config.fontColorDark = settings.oswColourFontDark || config.fontColorDark;
     config.showNotification =
@@ -237,7 +249,7 @@
       config.logoDark = cloudinaryResize(settings.chatbotMask, 64, 64);
       console.log(
         "[OSW Widget] Using chatbotMask as logo:",
-        settings.chatbotMask
+        settings.chatbotMask,
       );
     }
   }
@@ -350,6 +362,18 @@
         height: 48px;
     }
 
+    /* Make header transparent when chat is open */
+    .df-btn:not(.df-closed) .df-btn-header {
+        background: transparent;
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        z-index: 10001;
+        padding: 12px;
+        box-sizing: border-box;
+    }
+
     .df-btn-text:before {
         background-position: center;
         background-repeat: no-repeat;
@@ -371,11 +395,12 @@
     }
 
     .df-btn:not(.df-closed){
-        border-radius: 16px
+        border-radius: 16px;
+        overflow: hidden;
     }
 
-    .df-btn:not(.df-closed) > .df-btn-text:before {
-        background-image: url('${origin}/assets/close.svg')
+    .df-btn:not(.df-closed) .df-btn-text:before {
+        display: none;
     }
 
     .df-btn-content {
@@ -392,6 +417,8 @@
         ${config.position === "left" ? "float: left;" : "float: right;"}
         opacity: 1;
         border-radius: 0 0 16px 16px;
+        /* iOS Safari keyboard fix: Explicit background to prevent transparency bleed */
+        background-color: ${config.background || "#FEFFFF"};
     }
 
     .df-btn:not(.df-closed) > .df-btn-content {
@@ -406,8 +433,8 @@
     }
 
     .maximize-minimize-btn {
-        width: 16px;
-        height: 16px;
+        width: auto;
+        height: auto;
         cursor: pointer;
         margin-right: 12px;
         display: flex;
@@ -425,16 +452,12 @@
       bottom: 0 !important;
       margin: 0 !important;
       border-radius: 0 !important;
-      /* Handle safe areas on mobile devices */
-      padding-bottom: env(safe-area-inset-bottom, 0);
     }
     .df-btn.df-maximized .df-btn-content {
       width: 100vw !important;
       max-width: 100vw !important;
-      height: calc(100vh - 56px) !important;
-      height: calc(100dvh  - env(safe-area-inset-bottom, 0px)) !important; /* Account for safe area */
-      max-height: calc(100vh - 56px) !important;
-      max-height: calc(100dvh  - env(safe-area-inset-bottom, 0px)) !important;
+      height: 100dvh !important;
+      max-height: 100dvh !important;
       opacity: 1 !important;
       float: none !important;
       display: block !important;
@@ -446,8 +469,8 @@
       opacity: 0 !important;
     }
     .close-btn {
-      width: 16px;
-      height: 16px;
+      width: auto;
+      height: auto;
       cursor: pointer;
       margin-left: 12px;
       display: flex;
@@ -455,6 +478,18 @@
       justify-content: center;
     }
 
+    .df-icon-container {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 36px;
+      height: 36px;
+      border-radius: 8px;
+      background-color: ${config.background || "#FFFFFF"}E6;
+      backdrop-filter: blur(4px);
+      -webkit-backdrop-filter: blur(4px);
+    }
+
     /* Animation classes for FLIP */
     .df-animating {
       transition: transform .45s cubic-bezier(.4, 0, .2, 1);
@@ -474,16 +509,12 @@
         .df-btn:not(.df-closed) {
             margin: 0px;
             border-radius: 0px;
-            padding-bottom: env(safe-area-inset-bottom, 0);
         }
 
         .df-btn:not(.df-closed) > .df-btn-content {
             width: 100vw;
-            max-height: 100vh;
             max-height: 100dvh;
-            height: calc(100vh - 56px);
-            height: calc(100dvh - 56px - env(safe-area-inset-bottom, 0px));
-            padding-bottom: 0px
+            height: 100dvh;
         }
 
         .df-btn-text {
@@ -491,14 +522,26 @@
             height: 56px;
             font-size: 16px;
         }
+
+        /* Hide the pseudo-element on mobile when open (we use .header-logo instead) */
+        .df-btn:not(.df-closed) > .df-btn-header > .df-btn-text:before {
+            display: none;
+        }
     }
 
-    ${config.hasDarkMode ? `
+    ${
+      config.hasDarkMode
+        ? `
     @media (prefers-color-scheme: dark){
         .df-btn {
             background-color: ${config.backgroundDark || "#171717"}
         }
 
+        /* iOS Safari keyboard fix: Explicit background for dark mode */
+        .df-btn-content {
+            background-color: ${config.backgroundDark || "#171717"}
+        }
+
         .df-btn-text {
             color: ${config.fontColorDark || "#FFFFFF"}
         }
@@ -511,10 +554,6 @@
             }')
         }
 
-        .df-btn:not(.df-closed) > .df-btn-text:before {
-            background-image: url('${origin}/assets/close_dark.svg')
-        }
-
         .df-notification {
             background: ${config.backgroundDark || "#171717"};
             color: ${config.fontColorDark || "#FFFFFF"};
@@ -523,8 +562,14 @@
         .df-notification:after {
             border-top: 6px solid ${config.backgroundDark || "#171717"};
         }
+
+        .df-icon-container {
+            background-color: ${config.backgroundDark || "#171717"}E6;
+        }
+    }
+    `
+        : ""
     }
-    ` : ''}
 
     @keyframes shake {
         0%, 100% { transform: translateX(0); }
@@ -546,6 +591,57 @@
         display: none;
     }
 
+    /* iOS Safari keyboard background bleed fix: Override vh with dvh */
+    @supports (-webkit-touch-callout: none) {
+        .df-btn-content {
+            max-height: 100dvh !important;
+        }
+
+        .df-btn.df-maximized {
+            height: 100dvh !important;
+        }
+
+        .df-btn.df-maximized .df-btn-content {
+            height: calc(100dvh - env(safe-area-inset-bottom, 0px)) !important;
+            max-height: calc(100dvh - env(safe-area-inset-bottom, 0px)) !important;
+        }
+
+        @media screen and (max-width: 720px) {
+            .df-btn:not(.df-closed) > .df-btn-content {
+                max-height: 100dvh !important;
+                height: calc(100dvh  - env(safe-area-inset-bottom, 0px)) !important;
+            }
+        }
+    }
+
+    /* iOS Safari: Force solid background painting to prevent transparency during keyboard animation */
+    @supports (-webkit-touch-callout: none) {
+        .df-btn {
+            background-color: ${config.background || "#FEFFFF"} !important;
+            -webkit-backface-visibility: hidden;
+            backface-visibility: hidden;
+        }
+
+        .df-btn-content {
+            background-color: ${config.background || "#FEFFFF"} !important;
+        }
+
+        ${
+          config.hasDarkMode
+            ? `
+        @media (prefers-color-scheme: dark) {
+            .df-btn {
+                background-color: ${config.backgroundDark || "#171717"} !important;
+            }
+            .df-btn-content {
+                background-color: ${config.backgroundDark || "#171717"} !important;
+            }
+        }
+        `
+            : ""
+        }
+    }
+
     .df-btn-loading .df-btn-text:after {
         content: '';
         display: inline-block;
@@ -647,7 +743,7 @@
     } catch (e) {
       console.warn(
         "[OSW Widget] Could not save notification dismissed state:",
-        e
+        e,
       );
     }
   }
@@ -700,6 +796,56 @@
     }
   };
 
+  // iOS Safari detection for keyboard background bleed fix
+  const isMobileDevice =
+    /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+      navigator.userAgent,
+    );
+
+  // Store original body styles for scroll lock restoration
+  let savedBodyStyles = null;
+
+  // Lock body scroll on mobile to prevent background bleed when keyboard opens (iOS Safari fix)
+  function lockBodyScroll() {
+    if (!isMobileDevice) return;
+
+    savedBodyStyles = {
+      position: document.body.style.position,
+      top: document.body.style.top,
+      left: document.body.style.left,
+      right: document.body.style.right,
+      width: document.body.style.width,
+      height: document.body.style.height,
+      overflow: document.body.style.overflow,
+      scrollY: window.scrollY,
+    };
+
+    // Lock the body to prevent background scroll during keyboard open
+    document.body.style.position = "fixed";
+    document.body.style.top = `-${savedBodyStyles.scrollY}px`;
+    document.body.style.left = "0";
+    document.body.style.right = "0";
+    document.body.style.width = "100%";
+    document.body.style.overflow = "hidden";
+  }
+
+  // Restore body scroll when chat closes
+  function unlockBodyScroll() {
+    if (!isMobileDevice || !savedBodyStyles) return;
+
+    document.body.style.position = savedBodyStyles.position;
+    document.body.style.top = savedBodyStyles.top;
+    document.body.style.left = savedBodyStyles.left;
+    document.body.style.right = savedBodyStyles.right;
+    document.body.style.width = savedBodyStyles.width;
+    document.body.style.height = savedBodyStyles.height;
+    document.body.style.overflow = savedBodyStyles.overflow;
+
+    // Restore scroll position
+    window.scrollTo(0, savedBodyStyles.scrollY);
+    savedBodyStyles = null;
+  }
+
   // Create and inject the iframe on first open
   function ensureIframeLoaded() {
     return new Promise((resolve) => {
@@ -723,6 +869,29 @@
       iframe.allow = "microphone *";
       iframe.style.opacity = "0";
 
+      // iOS Safari keyboard background bleed fix: Make iframe a fixed-position repaint boundary on mobile
+      if (isMobileDevice) {
+        iframe.style.position = "fixed";
+        iframe.style.top = "0";
+        iframe.style.bottom = "0"; // Stretch from top to bottom
+        iframe.style.left = "0";
+        iframe.style.right = "0";
+        iframe.style.width = "100vw";
+        iframe.style.height = "100%"; // Fill between top and bottom
+        iframe.style.zIndex = "10000"; // Higher than widget container (999)
+        // Explicit background color to prevent transparency during iOS keyboard animation
+        const systemDarkMode =
+          config.hasDarkMode &&
+          window.matchMedia &&
+          window.matchMedia("(prefers-color-scheme: dark)").matches;
+        iframe.style.backgroundColor = systemDarkMode
+          ? config.backgroundDark || "#171717"
+          : config.background || "#FEFFFF";
+        // Force GPU layer for better repaint boundary
+        iframe.style.transform = "translateZ(0)";
+        iframe.style.webkitTransform = "translateZ(0)";
+      }
+
       iframe.addEventListener("load", () => {
         iframe.style.opacity = "";
         iframeLoaded = true;
@@ -749,6 +918,8 @@
     if (oldClose) header.removeChild(oldClose);
     const oldMax = header.querySelector(".maximize-minimize-btn");
     if (oldMax) header.removeChild(oldMax);
+    const oldLogo = header.querySelector(".header-logo");
+    if (oldLogo) header.removeChild(oldLogo);
     const btnText = header.querySelector(".df-btn-text");
     const btn = document.querySelector(".df-btn");
     if (!btn) return;
@@ -759,38 +930,62 @@
       // remove right padding from df-btn-text
       btnText.style.paddingRight = "0";
 
-      // Only add maximize/minimize button on desktop
-
-      // Add maximize/minimize button (right)
-      const maxBtn = document.createElement("div");
-      maxBtn.className = "maximize-minimize-btn";
-      const maximized = btn.classList.contains("df-maximized");
-      const isDarkMode =
+      // Detect mobile view for conditional button display
+      const isMobileView = window.innerWidth <= 720;
+      const systemDarkMode =
         config.hasDarkMode &&
         window.matchMedia &&
         window.matchMedia("(prefers-color-scheme: dark)").matches;
-      maxBtn.innerHTML = `<img class="maximize-minimize-icon" src="${origin}/assets/${
-        maximized ? "collapse" : "expand"
-      }${isDarkMode ? "_dark" : ""}.svg" alt="${
-        maximized ? "Minimize" : "Maximize"
-      }" style="width:24px;height:24px;cursor:pointer;" />`;
-      header.appendChild(maxBtn);
-      maxBtn.addEventListener("click", (e) => {
-        e.stopPropagation();
-        maximizeMinimize();
-      });
-
-      // Add close button (left)
-      const closeBtn = document.createElement("div");
-      closeBtn.className = "close-btn";
-      closeBtn.innerHTML = `<img src="${origin}/assets/close${
-        isDarkMode ? "_dark" : ""
-      }.svg" alt="Close" style="width:20px;height:20px;cursor:pointer;" />`;
-      header.insertBefore(closeBtn, btnText);
-      closeBtn.addEventListener("click", (e) => {
-        e.stopPropagation();
-        dfToggle();
-      });
+      // Use white icons only if the actual background is dark
+      const currentBg = systemDarkMode
+        ? config.backgroundDark
+        : config.background;
+      const useDarkIcons = isColorDark(currentBg);
+
+      if (!isMobileView) {
+        // Desktop layout: [Expand] ... [Close]
+
+        // Expand button on LEFT
+        const maxBtn = document.createElement("div");
+        maxBtn.className = "maximize-minimize-btn";
+        const maximized = btn.classList.contains("df-maximized");
+        maxBtn.innerHTML = `<div class="df-icon-container"><img class="maximize-minimize-icon" src="${origin}/assets/${
+          maximized ? "collapse" : "expand"
+        }${useDarkIcons ? "_dark" : ""}.svg" alt="${
+          maximized ? "Minimize" : "Maximize"
+        }" style="width:24px;height:24px;cursor:pointer;" /></div>`;
+        header.insertBefore(maxBtn, btnText); // LEFT
+        maxBtn.addEventListener("click", (e) => {
+          e.stopPropagation();
+          maximizeMinimize();
+        });
+
+        // Close button on RIGHT
+        const closeBtn = document.createElement("div");
+        closeBtn.className = "close-btn";
+        closeBtn.innerHTML = `<div class="df-icon-container"><img src="${origin}/assets/close${
+          useDarkIcons ? "_dark" : ""
+        }.svg" alt="Close" style="width:20px;height:20px;cursor:pointer;" /></div>`;
+        header.appendChild(closeBtn); // RIGHT
+        closeBtn.addEventListener("click", (e) => {
+          e.stopPropagation();
+          dfToggle();
+        });
+      } else {
+        // Mobile layout: [Close] on right only
+
+        // Close button on RIGHT
+        const closeBtn = document.createElement("div");
+        closeBtn.className = "close-btn";
+        closeBtn.innerHTML = `<div class="df-icon-container"><img src="${origin}/assets/close${
+          useDarkIcons ? "_dark" : ""
+        }.svg" alt="Close" style="width:20px;height:20px;cursor:pointer;" /></div>`;
+        header.appendChild(closeBtn); // RIGHT
+        closeBtn.addEventListener("click", (e) => {
+          e.stopPropagation();
+          dfToggle();
+        });
+      }
     } else {
       // Set text to openText
       if (btnText) btnText.innerText = config.openText || "Chat";
@@ -861,6 +1056,13 @@
     // Always remove maximized state when closing
     if (btn.classList.contains("df-closed")) {
       btn.classList.remove("df-maximized");
+      // iOS Safari keyboard fix: Unlock body scroll when chat closes
+      unlockBodyScroll();
+    } else {
+      // iOS Safari keyboard fix: Lock body scroll when chat opens on mobile
+      if (isMobileDevice) {
+        lockBodyScroll();
+      }
     }
     updateHeaderButtons();
     clearInactivityAndShake();
@@ -900,7 +1102,7 @@
       } catch (e) {
         console.warn(
           "[OSW Widget] Could not save notification dismissed state:",
-          e
+          e,
         );
       }
 
@@ -912,6 +1114,9 @@
       const isMobile = window.innerWidth <= 768;
 
       if (isMobile) {
+        // iOS Safari keyboard fix: Lock body scroll when opening chat on mobile
+        lockBodyScroll();
+
         // On mobile, apply FLIP animation for open+maximize
         const content = btn.querySelector(".df-btn-content");
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aumera-on-screen-widget",
-  "version": "0.0.19",
+  "version": "0.0.21",
   "description": "A lightweight, customizable chat widget for websites",
   "main": "df-btn.js",
   "scripts": {