@pocketping/widget 2.0.0 → 2.2.0

package/dist/index.js

@@ -6,23 +6,59 @@ import { Fragment as Fragment2 } from "preact";
 import { useState as useState2, useEffect as useEffect2, useRef as useRef2, useCallback } from "preact/hooks";
 
 // src/components/styles.ts
+var DEFAULT_GRADIENT = { from: "#36e3ff", to: "#7c5cff", direction: "to right" };
+function isGradient(value) {
+  return typeof value === "object" && value !== null && "from" in value && "to" in value;
+}
+function toCssColor(value) {
+  if (isGradient(value)) {
+    const direction = value.direction || "to right";
+    return `linear-gradient(${direction}, ${value.from}, ${value.to})`;
+  }
+  return value;
+}
+function getBaseColor(value) {
+  if (isGradient(value)) {
+    return value.to;
+  }
+  return value;
+}
 function resolveThemeColor(color, isDark, defaultLight, defaultDark) {
   if (!color) {
-    return isDark ? defaultDark : defaultLight;
+    return toCssColor(isDark ? defaultDark : defaultLight);
   }
   if (typeof color === "string") {
     return color;
   }
-  return isDark ? color.dark : color.light;
+  if (isGradient(color)) {
+    return toCssColor(color);
+  }
+  const resolved = isDark ? color.dark : color.light;
+  return toCssColor(resolved);
+}
+function resolveBaseColor(color, isDark, defaultLight, defaultDark) {
+  if (!color) {
+    return getBaseColor(isDark ? defaultDark : defaultLight);
+  }
+  if (typeof color === "string") {
+    return color;
+  }
+  if (isGradient(color)) {
+    return getBaseColor(color);
+  }
+  const resolved = isDark ? color.dark : color.light;
+  return getBaseColor(resolved);
 }
 function styles(options) {
   const { primaryColor, theme, headerColor, footerColor, chatBackground, toggleColor } = options;
   const isDark = theme === "dark";
-  const resolvedHeaderColor = resolveThemeColor(headerColor, isDark, "#008069", "#202c33");
+  const resolvedHeaderColor = resolveThemeColor(headerColor, isDark, DEFAULT_GRADIENT, "#202c33");
   const resolvedFooterColor = resolveThemeColor(footerColor, isDark, "#f0f2f5", "#202c33");
-  const resolvedToggleColor = resolveThemeColor(toggleColor, isDark, "#25d366", "#25d366");
-  const resolvedToggleHoverColor = resolvedToggleColor !== "#25d366" ? adjustBrightness(resolvedToggleColor, -10) : "#22c55e";
-  const resolvedSendButtonHoverColor = adjustBrightness(resolvedHeaderColor, -15);
+  const resolvedToggleColor = resolveThemeColor(toggleColor, isDark, DEFAULT_GRADIENT, DEFAULT_GRADIENT);
+  const headerBaseColor = resolveBaseColor(headerColor, isDark, DEFAULT_GRADIENT, "#202c33");
+  const toggleBaseColor = resolveBaseColor(toggleColor, isDark, DEFAULT_GRADIENT, DEFAULT_GRADIENT);
+  const resolvedToggleHoverColor = adjustBrightness(toggleBaseColor, -15);
+  const resolvedSendButtonHoverColor = adjustBrightness(headerBaseColor, -15);
   const whatsappPattern = isDark ? `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")` : `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23000000' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`;
   const dotsPattern = isDark ? `url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='1' fill='%23ffffff' fill-opacity='0.05'/%3E%3C/svg%3E")` : `url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='1' fill='%23000000' fill-opacity='0.05'/%3E%3C/svg%3E")`;
   const resolvedChatBg = resolveThemeColor(chatBackground, isDark, "whatsapp", "whatsapp");
@@ -121,7 +157,7 @@ function styles(options) {
       right: 4px;
       width: 12px;
       height: 12px;
-      background: #22c55e;
+      background: #ff5fd4;
       border-radius: 50%;
       border: 2px solid white;
     }
@@ -277,8 +313,8 @@ function styles(options) {
     }
 
     .pp-status-dot.pp-online {
-      background: #25d366;
-      box-shadow: 0 0 0 2px rgba(37, 211, 102, 0.3);
+      background: #ff5fd4;
+      box-shadow: 0 0 0 2px rgba(255, 95, 212, 0.3);
     }
 
     .pp-close-btn {
@@ -982,7 +1018,7 @@ function styles(options) {
       justify-content: center;
       gap: 16px;
       z-index: 100;
-      border: 3px dashed #00a884;
+      border: 3px dashed #7c5cff;
       border-radius: 12px;
       margin: 4px;
       pointer-events: none;
@@ -991,7 +1027,7 @@ function styles(options) {
     .pp-drop-icon svg {
       width: 56px;
       height: 56px;
-      color: #00a884;
+      color: #7c5cff;
     }
 
     .pp-drop-text {
@@ -1132,7 +1168,7 @@ function styles(options) {
       padding: 10px 20px;
       border: none;
       border-radius: 8px;
-      background: #00a884;
+      background: #7c5cff;
       color: white;
       font-size: 14px;
       font-weight: 500;
@@ -1141,7 +1177,7 @@ function styles(options) {
     }
 
     .pp-edit-save:hover:not(:disabled) {
-      background: #008f72;
+      background: #6a4ee6;
     }
 
     .pp-edit-save:disabled {
@@ -1156,7 +1192,7 @@ function styles(options) {
       gap: 10px;
       padding: 8px 12px;
       background: ${resolvedFooterColor};
-      border-left: 4px solid #00a884;
+      border-left: 4px solid #7c5cff;
     }
 
     .pp-reply-preview-content {
@@ -1167,7 +1203,7 @@ function styles(options) {
     .pp-reply-label {
       display: block;
       font-size: 12px;
-      color: #00a884;
+      color: #7c5cff;
       font-weight: 500;
       margin-bottom: 2px;
     }
@@ -1211,7 +1247,7 @@ function styles(options) {
     /* Reply Quote in Message */
     .pp-reply-quote {
       background: ${isDark ? "rgba(0,0,0,0.2)" : "rgba(0,0,0,0.05)"};
-      border-left: 3px solid #00a884;
+      border-left: 3px solid #7c5cff;
       padding: 6px 10px;
       margin-bottom: 4px;
       border-radius: 0 6px 6px 0;
@@ -1223,7 +1259,7 @@ function styles(options) {
     .pp-reply-sender {
       display: block;
       font-weight: 500;
-      color: #00a884;
+      color: #7c5cff;
       margin-bottom: 2px;
       font-size: 12px;
     }
@@ -1253,7 +1289,7 @@ function styles(options) {
     /* Reply quote in visitor message bubble needs higher contrast */
     .pp-message-visitor .pp-reply-quote {
       background: ${isDark ? "rgba(0,0,0,0.2)" : "rgba(0,0,0,0.08)"};
-      border-left-color: ${isDark ? "rgba(255,255,255,0.5)" : "#00a884"};
+      border-left-color: ${isDark ? "rgba(255,255,255,0.5)" : "#7c5cff"};
     }
 
     .pp-message-visitor .pp-reply-quote-clickable:hover {
@@ -1261,7 +1297,7 @@ function styles(options) {
     }
 
     .pp-message-visitor .pp-reply-sender {
-      color: ${isDark ? "rgba(255,255,255,0.9)" : "#00a884"};
+      color: ${isDark ? "rgba(255,255,255,0.9)" : "#7c5cff"};
     }
 
     .pp-message-visitor .pp-reply-content {
@@ -1275,13 +1311,13 @@ function styles(options) {
 
     @keyframes pp-highlight-pulse {
       0% {
-        box-shadow: 0 0 0 0 rgba(0, 168, 132, 0.5);
+        box-shadow: 0 0 0 0 rgba(124, 92, 255, 0.5);
       }
       30% {
-        box-shadow: 0 0 0 6px rgba(0, 168, 132, 0.25);
+        box-shadow: 0 0 0 6px rgba(124, 92, 255, 0.25);
       }
       100% {
-        box-shadow: 0 0 0 0 rgba(0, 168, 132, 0);
+        box-shadow: 0 0 0 0 rgba(124, 92, 255, 0);
       }
     }
 
@@ -1542,7 +1578,7 @@ function styles(options) {
       margin-top: 12px;
       border: none;
       border-radius: 8px;
-      background: #00a884;
+      background: #7c5cff;
       color: white;
       font-size: 15px;
       font-weight: 500;
@@ -1551,7 +1587,7 @@ function styles(options) {
     }
 
     .pp-prechat-submit:hover:not(:disabled) {
-      background: #008f72;
+      background: #6a4ee6;
     }
 
     .pp-prechat-submit:active:not(:disabled) {
@@ -2939,6 +2975,10 @@ var PocketPingClient = class {
     this.currentTrackedElements = [];
     this.inspectorMode = false;
     this.inspectorCleanup = null;
+    this.connectedAt = 0;
+    this.disconnectNotified = false;
+    this.boundHandleUnload = null;
+    this.boundHandleVisibilityChange = null;
     this.config = config;
   }
   // ─────────────────────────────────────────────────────────────────
@@ -3012,6 +3052,9 @@ var PocketPingClient = class {
       welcomeMessage: this.config.welcomeMessage
     });
     this.storeSessionId(response.sessionId);
+    this.connectedAt = Date.now();
+    this.disconnectNotified = false;
+    this.setupUnloadListeners();
     this.connectRealtime();
     if (response.inspectorMode) {
       this.enableInspectorMode();
@@ -3023,6 +3066,8 @@ var PocketPingClient = class {
     return this.session;
   }
   disconnect() {
+    this.notifyDisconnect();
+    this.cleanupUnloadListeners();
     if (this.ws) {
       this.ws.onclose = null;
       this.ws.onmessage = null;
@@ -4226,6 +4271,86 @@ var PocketPingClient = class {
     this.pollingFailures = 0;
   }
   // ─────────────────────────────────────────────────────────────────
+  // Visitor Disconnect Notification
+  // ─────────────────────────────────────────────────────────────────
+  setupUnloadListeners() {
+    this.boundHandleUnload = () => this.notifyDisconnect();
+    window.addEventListener("beforeunload", this.boundHandleUnload);
+    window.addEventListener("pagehide", this.boundHandleUnload);
+    this.boundHandleVisibilityChange = () => {
+      if (document.visibilityState === "hidden") {
+        this.sendVisibilityPing("hidden");
+      } else if (document.visibilityState === "visible") {
+        this.sendVisibilityPing("visible");
+      }
+    };
+    document.addEventListener("visibilitychange", this.boundHandleVisibilityChange);
+  }
+  cleanupUnloadListeners() {
+    if (this.boundHandleUnload) {
+      window.removeEventListener("beforeunload", this.boundHandleUnload);
+      window.removeEventListener("pagehide", this.boundHandleUnload);
+      this.boundHandleUnload = null;
+    }
+    if (this.boundHandleVisibilityChange) {
+      document.removeEventListener("visibilitychange", this.boundHandleVisibilityChange);
+      this.boundHandleVisibilityChange = null;
+    }
+  }
+  /**
+   * Notify backend that visitor is leaving
+   * Uses sendBeacon for reliability on page unload
+   */
+  notifyDisconnect() {
+    if (this.disconnectNotified || !this.session) {
+      return;
+    }
+    this.disconnectNotified = true;
+    const sessionDuration = this.connectedAt ? Math.round((Date.now() - this.connectedAt) / 1e3) : 0;
+    const url = this.config.endpoint.replace(/\/$/, "") + "/disconnect";
+    const data = JSON.stringify({
+      sessionId: this.session.sessionId,
+      duration: sessionDuration,
+      reason: "page_unload"
+    });
+    if (navigator.sendBeacon) {
+      const blob = new Blob([data], { type: "application/json" });
+      navigator.sendBeacon(url, blob);
+    } else {
+      try {
+        const xhr = new XMLHttpRequest();
+        xhr.open("POST", url, false);
+        xhr.setRequestHeader("Content-Type", "application/json");
+        xhr.send(data);
+      } catch {
+      }
+    }
+  }
+  /**
+   * Send visibility ping to backend (for inactivity tracking)
+   */
+  sendVisibilityPing(state) {
+    if (!this.session) return;
+    const url = this.config.endpoint.replace(/\/$/, "") + "/visibility";
+    const data = JSON.stringify({
+      sessionId: this.session.sessionId,
+      state,
+      timestamp: Date.now()
+    });
+    if (state === "hidden" && navigator.sendBeacon) {
+      const blob = new Blob([data], { type: "application/json" });
+      navigator.sendBeacon(url, blob);
+    } else {
+      fetch(url, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: data,
+        keepalive: true
+      }).catch(() => {
+      });
+    }
+  }
+  // ─────────────────────────────────────────────────────────────────
   // HTTP
   // ─────────────────────────────────────────────────────────────────
   async fetch(path, options) {