aumera-on-screen-widget 0.0.15 → 0.0.17

package/df-btn.js

@@ -1,4 +1,4 @@
-(async function() {
+(async function () {
   const wrapper = document.querySelector("#df-btn");
 
   // Helper function to get GraphQL endpoint based on environment
@@ -26,12 +26,27 @@
     return supportedLangs.includes(lang) ? lang : "de";
   }
 
+  // Helper function to resize Cloudinary images for optimized file size
+  function cloudinaryResize(url, width = 32, height = 32) {
+    const transform = `w_${width},h_${height},c_fill,f_auto,q_auto`;
+
+    // Insert transformation right after `/upload/`
+    return url.replace('/upload/', `/upload/${transform}/`);
+  }
+
   // Async function to fetch chatbot settings from GraphQL
   async function fetchChatbotSettings(orgId, env, language) {
     try {
       const graphqlUrl = getGraphQLUrl(env);
       console.log("[OSW Widget] Fetching settings from:", graphqlUrl);
-      console.log("[OSW Widget] Request params - orgId:", orgId, "env:", env, "language:", language);
+      console.log(
+        "[OSW Widget] Request params - orgId:",
+        orgId,
+        "env:",
+        env,
+        "language:",
+        language
+      );
 
       const query = `
         query osw {
@@ -58,16 +73,26 @@
         method: "POST",
         headers: {
           "Content-Type": "application/json",
-          "Accept-Language": language
+          "Accept-Language": language,
         },
-        body: JSON.stringify({ query })
+        body: JSON.stringify({ query }),
       });
 
-      console.log("[OSW Widget] Response status:", response.status, response.statusText);
+      console.log(
+        "[OSW Widget] Response status:",
+        response.status,
+        response.statusText
+      );
 
       if (!response.ok) {
-        console.error("[OSW Widget] Failed to fetch - Status:", response.status, response.statusText);
-        const errorText = await response.text().catch(() => "Unable to read error response");
+        console.error(
+          "[OSW Widget] Failed to fetch - Status:",
+          response.status,
+          response.statusText
+        );
+        const errorText = await response
+          .text()
+          .catch(() => "Unable to read error response");
         console.error("[OSW Widget] Error response:", errorText);
         return null;
       }
@@ -76,11 +101,16 @@
       console.log("[OSW Widget] GraphQL response:", result);
 
       if (result.data?.oswChatbotSettingsPublic?.success) {
-        console.log("[OSW Widget] Settings retrieved successfully:", result.data.oswChatbotSettingsPublic.settings);
+        console.log(
+          "[OSW Widget] Settings retrieved successfully:",
+          result.data.oswChatbotSettingsPublic.settings
+        );
         return result.data.oswChatbotSettingsPublic.settings;
       }
 
-      console.warn("[OSW Widget] GraphQL query succeeded but success=false or missing data");
+      console.warn(
+        "[OSW Widget] GraphQL query succeeded but success=false or missing data"
+      );
       return null;
     } catch (error) {
       console.error("[OSW Widget] Exception while fetching settings:", error);
@@ -101,7 +131,7 @@
     fontColor: "#3c4043",
     fontColorDark: "#FFFFFF",
     position: "right",
-    animation: "message",
+    animation: "none",
     shakeDuration: 3000,
     shakeInterval: 1000,
     shakeAmplitude: 10,
@@ -119,18 +149,30 @@
     openText: wrapper.getAttribute("openText") || defaultConfig.openText,
     closeText: wrapper.getAttribute("closeText") || defaultConfig.closeText,
     background: wrapper.getAttribute("background") || defaultConfig.background,
-    backgroundDark: wrapper.getAttribute("backgroundDark") || defaultConfig.backgroundDark,
+    backgroundDark:
+      wrapper.getAttribute("backgroundDark") || defaultConfig.backgroundDark,
     fontColor: wrapper.getAttribute("fontColor") || defaultConfig.fontColor,
-    fontColorDark: wrapper.getAttribute("fontColorDark") || defaultConfig.fontColorDark,
+    fontColorDark:
+      wrapper.getAttribute("fontColorDark") || defaultConfig.fontColorDark,
     logo: wrapper.getAttribute("logo"),
     logoDark: wrapper.getAttribute("logoDark"),
     position: wrapper.getAttribute("position") || defaultConfig.position,
     animation: wrapper.getAttribute("animation") || defaultConfig.animation,
-    shakeDuration: parseInt(wrapper.getAttribute("shakeDuration")) || defaultConfig.shakeDuration,
-    shakeInterval: parseInt(wrapper.getAttribute("shakeInterval")) || defaultConfig.shakeInterval,
-    shakeAmplitude: parseInt(wrapper.getAttribute("shakeAmplitude")) || defaultConfig.shakeAmplitude,
-    shakeFrequency: parseInt(wrapper.getAttribute("shakeFrequency")) || defaultConfig.shakeFrequency,
-    showNotification: wrapper.getAttribute("showNotification") === "true" || defaultConfig.showNotification,
+    shakeDuration:
+      parseInt(wrapper.getAttribute("shakeDuration")) ||
+      defaultConfig.shakeDuration,
+    shakeInterval:
+      parseInt(wrapper.getAttribute("shakeInterval")) ||
+      defaultConfig.shakeInterval,
+    shakeAmplitude:
+      parseInt(wrapper.getAttribute("shakeAmplitude")) ||
+      defaultConfig.shakeAmplitude,
+    shakeFrequency:
+      parseInt(wrapper.getAttribute("shakeFrequency")) ||
+      defaultConfig.shakeFrequency,
+    showNotification:
+      wrapper.getAttribute("showNotification") === "true" ||
+      defaultConfig.showNotification,
   };
 
   const origin = config.src.substring(0, config.src.lastIndexOf("/"));
@@ -142,15 +184,25 @@
 
   // Fetch settings from GraphQL and merge with config
   if (!config.orgId) {
-    console.error("[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' ...>");
+    console.error(
+      "[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' ...>"
+    );
     return; // Exit if no orgId
   }
 
-  const settings = await fetchChatbotSettings(config.orgId, config.env, detectedLang);
+  const settings = await fetchChatbotSettings(
+    config.orgId,
+    config.env,
+    detectedLang
+  );
 
   if (!settings) {
-    console.warn("[OSW Widget] Failed to fetch chatbot settings. Using fallback configuration.");
+    console.warn(
+      "[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");
     console.warn("[OSW Widget]   2. Organization ID is correct");
@@ -165,17 +217,22 @@
     config.openText = settings.oswLabel || config.openText;
     config.position = settings.position || config.position;
     config.background = settings.oswColourBackgroundLight || config.background;
-    config.backgroundDark = settings.oswColourBackgroundDark || config.backgroundDark;
+    config.backgroundDark =
+      settings.oswColourBackgroundDark || config.backgroundDark;
     config.fontColor = settings.oswColourFontLight || config.fontColor;
     config.fontColorDark = settings.oswColourFontDark || config.fontColorDark;
-    config.showNotification = settings.showNotification ?? config.showNotification;
+    config.showNotification =
+      settings.showNotification ?? config.showNotification;
     config.hintMessage = settings.oswHintMessage || "Click to check messages";
 
     // Use chatbotMask as logo if available
     if (settings.chatbotMask) {
-      config.logo = settings.chatbotMask;
-      config.logoDark = settings.chatbotMask;
-      console.log("[OSW Widget] Using chatbotMask as logo:", settings.chatbotMask);
+      config.logo = cloudinaryResize(settings.chatbotMask, 64, 64);
+      config.logoDark = cloudinaryResize(settings.chatbotMask, 64, 64);
+      console.log(
+        "[OSW Widget] Using chatbotMask as logo:",
+        settings.chatbotMask
+      );
     }
   }
 
@@ -185,7 +242,7 @@
     openText: config.openText,
     position: config.position,
     showNotification: config.showNotification,
-    logo: config.logo ? "Custom logo" : "Default logo"
+    logo: config.logo ? "Custom logo" : "Default logo",
   });
   const style = document.createElement("style");
   style.innerHTML = `
@@ -215,8 +272,8 @@
         position: absolute;
         top: -45px;
         ${config.position === "left" ? "left: 0;" : "right: 0;"}
-        background: #202124;
-        color: white;
+        background: ${config.background || "#FEFFFF"};
+        color: ${config.fontColor || "#3c4043"};
         padding: 8px 16px;
         border-radius: 8px;
         font-size: 13px;
@@ -225,7 +282,10 @@
         transition: all 0.3s ease;
         white-space: nowrap;
         box-shadow: 0 2px 6px rgba(0,0,0,0.15);
-        pointer-events: none;
+        pointer-events: auto;
+        display: flex;
+        align-items: center;
+        gap: 8px;
     }
 
     .df-notification:after {
@@ -237,7 +297,7 @@
         height: 0;
         border-left: 6px solid transparent;
         border-right: 6px solid transparent;
-        border-top: 6px solid #202124;
+        border-top: 6px solid ${config.background || "#FEFFFF"};
     }
 
     .df-notification.show {
@@ -245,6 +305,26 @@
         transform: translateY(0);
     }
 
+    .df-notification-close {
+        cursor: pointer;
+        width: 16px;
+        height: 16px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        opacity: 0.7;
+        transition: opacity 0.2s ease;
+    }
+
+    .df-notification-close:hover {
+        opacity: 1;
+    }
+
+    .df-notification-text {
+        flex: 1;
+    }
+
     .df-btn-text {
         min-width: 56px;
         color: ${config.fontColor || "#3c4043"};
@@ -268,7 +348,9 @@
         background-position: center;
         background-repeat: no-repeat;
         background-size: cover;
-        background-image: url('${config.logo || origin + "/assets/chat-agent.jpg"}');
+        background-image: url('${
+          config.logo || origin + "/assets/chat-agent.jpg"
+        }');
         border-radius: 50%;
         width: 32px;
         height: 32px;
@@ -415,12 +497,25 @@
         }
 
         .df-btn-text:before {
-            background-image: url('${config.logoDark || config.logo || origin + "/assets/chat-agent.jpg"}')
+            background-image: url('${
+              config.logoDark ||
+              config.logo ||
+              origin + "/assets/chat-agent.jpg"
+            }')
         }
 
         .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"};
+        }
+
+        .df-notification:after {
+            border-top: 6px solid ${config.backgroundDark || "#171717"};
+        }
     }
 
     @keyframes shake {
@@ -462,7 +557,16 @@
         <button class="df-btn df-closed" onclick="dfToggle()">
             ${
               config.showNotification
-                ? `<div class="df-notification">${config.hintMessage || "Click to check messages"}</div>`
+                ? `<div class="df-notification">
+                    <span class="df-notification-text">${
+                      config.hintMessage || "Click to check messages"
+                    }</span>
+                    <div class="df-notification-close" onclick="dismissNotification(event)">
+                      <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+                        <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
+                      </svg>
+                    </div>
+                   </div>`
                 : ""
             }
             <div class="df-btn-header">
@@ -475,13 +579,60 @@
     `;
 
   // Insert button into DOM (works in async context unlike document.write)
-  document.body.insertAdjacentHTML('beforeend', buttonHTML);
+  document.body.insertAdjacentHTML("beforeend", buttonHTML);
 
   let dfToggled = false;
   let inactivityTimer = null;
   let shakeInterval = null;
 
+  // Check if notification was dismissed
+  const NOTIFICATION_DISMISSED_KEY = `osw-notification-dismissed-${config.orgId}`;
+
+  function isNotificationDismissed() {
+    try {
+      return localStorage.getItem(NOTIFICATION_DISMISSED_KEY) === "true";
+    } catch (e) {
+      return false;
+    }
+  }
+
+  function dismissNotification(event) {
+    event.stopPropagation();
+    event.preventDefault();
+
+    const notification = document.querySelector(".df-notification");
+    if (notification) {
+      notification.classList.remove("show");
+    }
+
+    // Stop any ongoing shake animation
+    const button = document.querySelector(".df-btn");
+    if (button) {
+      button.classList.remove("shake");
+    }
+
+    // Clear timers
+    clearInactivityAndShake();
+
+    // Store dismissed state
+    try {
+      localStorage.setItem(NOTIFICATION_DISMISSED_KEY, "true");
+    } catch (e) {
+      console.warn(
+        "[OSW Widget] Could not save notification dismissed state:",
+        e
+      );
+    }
+  }
+
+  window.dismissNotification = dismissNotification;
+
   const startInactivityTimer = () => {
+    // Don't start timer if notification was dismissed
+    if (isNotificationDismissed()) {
+      return;
+    }
+
     // Only start inactivity timer if button is closed
     if (!dfToggled) {
       inactivityTimer = setTimeout(() => {
@@ -663,6 +814,28 @@
   btn.addEventListener("click", () => {
     // Only toggle if chat is closed (popover mode)
     if (btn.classList.contains("df-closed")) {
+      // Dismiss notification when opening chat
+      const notification = document.querySelector(".df-notification");
+      if (notification && notification.classList.contains("show")) {
+        notification.classList.remove("show");
+      }
+
+      // Stop any ongoing shake animation
+      btn.classList.remove("shake");
+
+      // Clear timers
+      clearInactivityAndShake();
+
+      // Store dismissed state
+      try {
+        localStorage.setItem(NOTIFICATION_DISMISSED_KEY, "true");
+      } catch (e) {
+        console.warn(
+          "[OSW Widget] Could not save notification dismissed state:",
+          e
+        );
+      }
+
       const isMobile = window.innerWidth <= 768;
 
       if (isMobile) {

package/package.json

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