aumera-on-screen-widget 0.0.17 → 0.0.19

package/df-btn.js

@@ -139,6 +139,9 @@
     showNotification: false,
   };
 
+  // Track if dark mode was explicitly requested via HTML attribute
+  const hasExplicitDarkBackground = !!wrapper.getAttribute("backgroundDark");
+
   // Initial config from HTML attributes with fallback to defaults
   const config = {
     src: wrapper.getAttribute("src"),
@@ -151,6 +154,7 @@
     background: wrapper.getAttribute("background") || defaultConfig.background,
     backgroundDark:
       wrapper.getAttribute("backgroundDark") || defaultConfig.backgroundDark,
+    hasDarkMode: hasExplicitDarkBackground,
     fontColor: wrapper.getAttribute("fontColor") || defaultConfig.fontColor,
     fontColorDark:
       wrapper.getAttribute("fontColorDark") || defaultConfig.fontColorDark,
@@ -219,6 +223,8 @@
     config.background = settings.oswColourBackgroundLight || config.background;
     config.backgroundDark =
       settings.oswColourBackgroundDark || config.backgroundDark;
+    // Update hasDarkMode if GraphQL provides dark background
+    config.hasDarkMode = config.hasDarkMode || !!settings.oswColourBackgroundDark;
     config.fontColor = settings.oswColourFontLight || config.fontColor;
     config.fontColorDark = settings.oswColourFontDark || config.fontColorDark;
     config.showNotification =
@@ -487,6 +493,7 @@
         }
     }
 
+    ${config.hasDarkMode ? `
     @media (prefers-color-scheme: dark){
         .df-btn {
             background-color: ${config.backgroundDark || "#171717"}
@@ -517,6 +524,7 @@
             border-top: 6px solid ${config.backgroundDark || "#171717"};
         }
     }
+    ` : ''}
 
     @keyframes shake {
         0%, 100% { transform: translateX(0); }
@@ -533,6 +541,26 @@
           config.shakeDuration / 1000
         }s cubic-bezier(.36,.07,.19,.97) both;
     }
+
+    .df-iframe-placeholder {
+        display: none;
+    }
+
+    .df-btn-loading .df-btn-text:after {
+        content: '';
+        display: inline-block;
+        width: 16px;
+        height: 16px;
+        margin-left: 8px;
+        border: 2px solid transparent;
+        border-top-color: currentColor;
+        border-radius: 50%;
+        animation: df-spin 0.8s linear infinite;
+    }
+
+    @keyframes df-spin {
+        to { transform: rotate(360deg); }
+    }
 `;
 
   document.head.appendChild(style);
@@ -572,9 +600,7 @@
             <div class="df-btn-header">
             <div class="df-btn-text">${config.openText || "Chat"}</div>
             </div>
-            <iframe class="df-btn-content" src="${getChatUrl()}/${detectedLang}/?orgId=${
-    config.orgId
-  }" allow="microphone *"></iframe>
+            <div class="df-btn-content df-iframe-placeholder"></div>
         </button>
     `;
 
@@ -582,6 +608,7 @@
   document.body.insertAdjacentHTML("beforeend", buttonHTML);
 
   let dfToggled = false;
+  let iframeLoaded = false;
   let inactivityTimer = null;
   let shakeInterval = null;
 
@@ -673,6 +700,46 @@
     }
   };
 
+  // Create and inject the iframe on first open
+  function ensureIframeLoaded() {
+    return new Promise((resolve) => {
+      if (iframeLoaded) {
+        resolve();
+        return;
+      }
+
+      const btn = document.querySelector(".df-btn");
+      const placeholder = btn?.querySelector(".df-iframe-placeholder");
+
+      if (!placeholder) {
+        console.error("[OSW Widget] Placeholder not found");
+        resolve();
+        return;
+      }
+
+      const iframe = document.createElement("iframe");
+      iframe.className = "df-btn-content";
+      iframe.src = `${getChatUrl()}/${detectedLang}/?orgId=${config.orgId}`;
+      iframe.allow = "microphone *";
+      iframe.style.opacity = "0";
+
+      iframe.addEventListener("load", () => {
+        iframe.style.opacity = "";
+        iframeLoaded = true;
+        resolve();
+      });
+
+      setTimeout(() => {
+        iframe.style.opacity = "";
+        iframeLoaded = true;
+        resolve();
+      }, 5000);
+
+      placeholder.replaceWith(iframe);
+      console.log("[OSW Widget] Iframe created on first open");
+    });
+  }
+
   // Add close and maximize/minimize buttons dynamically when chat is open
   function updateHeaderButtons() {
     const header = document.querySelector(".df-btn-header");
@@ -699,6 +766,7 @@
       maxBtn.className = "maximize-minimize-btn";
       const maximized = btn.classList.contains("df-maximized");
       const isDarkMode =
+        config.hasDarkMode &&
         window.matchMedia &&
         window.matchMedia("(prefers-color-scheme: dark)").matches;
       maxBtn.innerHTML = `<img class="maximize-minimize-icon" src="${origin}/assets/${
@@ -811,7 +879,7 @@
   // Check if mobile for later use
   const isMobile = window.innerWidth <= 768;
 
-  btn.addEventListener("click", () => {
+  btn.addEventListener("click", async () => {
     // Only toggle if chat is closed (popover mode)
     if (btn.classList.contains("df-closed")) {
       // Dismiss notification when opening chat
@@ -836,6 +904,11 @@
         );
       }
 
+      // Load iframe on first open
+      btn.classList.add("df-btn-loading");
+      await ensureIframeLoaded();
+      btn.classList.remove("df-btn-loading");
+
       const isMobile = window.innerWidth <= 768;
 
       if (isMobile) {

package/package.json

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