aumera-on-screen-widget 0.0.24 → 0.0.25

package/df-btn.js

@@ -394,6 +394,43 @@
         box-shadow: 0 1px 3px 0 rgba(60,64,67,0.302), 0 4px 8px 3px rgba(60,64,67,0.149)
     }
 
+    .df-hidden {
+        display: none !important;
+    }
+
+    .df-dismiss-btn {
+        position: absolute;
+        top: -6px;
+        ${config.position === "left" ? "left: -6px;" : "right: -6px;"}
+        width: 20px;
+        height: 20px;
+        border-radius: 50%;
+        background: rgba(0, 0, 0, 0.7);
+        color: #ffffff;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity 0.2s ease, background 0.2s ease;
+        z-index: 10002;
+        box-shadow: 0 1px 3px rgba(0,0,0,0.25);
+    }
+
+    .df-dismiss-btn:hover {
+        background: rgba(0, 0, 0, 0.9);
+    }
+
+    .df-btn.df-closed:hover .df-dismiss-btn {
+        opacity: 1;
+        pointer-events: auto;
+    }
+
+    .df-btn:not(.df-closed) .df-dismiss-btn {
+        display: none;
+    }
+
     .df-btn:not(.df-closed){
         border-radius: 16px;
         overflow: hidden;
@@ -527,6 +564,12 @@
         .df-btn:not(.df-closed) > .df-btn-header > .df-btn-text:before {
             display: none;
         }
+
+        /* Mobile: dismiss badge always visible on the closed pill (no hover on touch) */
+        .df-btn.df-closed .df-dismiss-btn {
+            opacity: 1;
+            pointer-events: auto;
+        }
     }
 
     ${
@@ -679,6 +722,11 @@
   // Create button HTML
   const buttonHTML = `
         <button class="df-btn df-closed" onclick="dfToggle()">
+            <div class="df-dismiss-btn" onclick="dismissWidget(event)" aria-label="Hide chat widget" title="Hide">
+              <svg width="10" height="10" 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>
             ${
               config.showNotification
                 ? `<div class="df-notification">
@@ -750,7 +798,59 @@
 
   window.dismissNotification = dismissNotification;
 
+  // Widget dismiss (hide entire pill for a fixed window)
+  const WIDGET_DISMISSED_UNTIL_KEY = `osw-widget-dismissed-until-${config.orgId}`;
+  const DISMISS_DURATION_MS = 2 * 60 * 1000;
+  let widgetRevealTimer = null;
+
+  function getDismissedUntil() {
+    try {
+      return parseInt(localStorage.getItem(WIDGET_DISMISSED_UNTIL_KEY), 10) || 0;
+    } catch (e) {
+      return 0;
+    }
+  }
+
+  function isWidgetDismissed() {
+    return Date.now() < getDismissedUntil();
+  }
+
+  function scheduleWidgetReveal() {
+    const remaining = getDismissedUntil() - Date.now();
+    if (remaining <= 0) return;
+    if (widgetRevealTimer) clearTimeout(widgetRevealTimer);
+    widgetRevealTimer = setTimeout(() => {
+      widgetRevealTimer = null;
+      if (isWidgetDismissed()) return;
+      const b = document.querySelector(".df-btn");
+      if (b) b.classList.remove("df-hidden");
+      if (window.innerWidth > 768) startInactivityTimer();
+    }, remaining);
+  }
+
+  function dismissWidget(event) {
+    event.stopPropagation();
+    event.preventDefault();
+    try {
+      localStorage.setItem(
+        WIDGET_DISMISSED_UNTIL_KEY,
+        String(Date.now() + DISMISS_DURATION_MS),
+      );
+    } catch (e) {
+      console.warn("[OSW Widget] Could not persist dismiss state:", e);
+    }
+    const btn = document.querySelector(".df-btn");
+    if (btn) btn.classList.add("df-hidden");
+    const notif = document.querySelector(".df-notification");
+    if (notif) notif.classList.remove("show");
+    clearInactivityAndShake();
+    scheduleWidgetReveal();
+  }
+
+  window.dismissWidget = dismissWidget;
+
   const startInactivityTimer = () => {
+    if (isWidgetDismissed()) return;
     // Don't start timer if notification was dismissed
     if (isNotificationDismissed()) {
       return;
@@ -1178,9 +1278,14 @@
     // If open, do nothing (let header buttons handle maximize/minimize/close)
   });
 
-  // Start the inactivity timer when the page loads (button is initially closed)
-  // But not on mobile since it starts open
-  if (!isMobile) {
+  // Honor any active "dismiss for 2 minutes" state from a previous page load
+  if (isWidgetDismissed()) {
+    const initBtn = document.querySelector(".df-btn");
+    if (initBtn) initBtn.classList.add("df-hidden");
+    scheduleWidgetReveal();
+  } else if (!isMobile) {
+    // Start the inactivity timer when the page loads (button is initially closed)
+    // But not on mobile since it starts open
     startInactivityTimer();
   }
 

package/package.json

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