@pocketping/widget 2.0.0 → 2.2.0

package/README.md

@@ -423,3 +423,4 @@ For advanced customization, you can target these CSS classes:
 
 MIT
 
+

package/dist/index.cjs

@@ -47,23 +47,59 @@ var import_preact = require("preact");
 var import_hooks2 = require("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");
@@ -162,7 +198,7 @@ function styles(options) {
       right: 4px;
       width: 12px;
       height: 12px;
-      background: #22c55e;
+      background: #ff5fd4;
       border-radius: 50%;
       border: 2px solid white;
     }
@@ -318,8 +354,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 {
@@ -1023,7 +1059,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;
@@ -1032,7 +1068,7 @@ function styles(options) {
     .pp-drop-icon svg {
       width: 56px;
       height: 56px;
-      color: #00a884;
+      color: #7c5cff;
     }
 
     .pp-drop-text {
@@ -1173,7 +1209,7 @@ function styles(options) {
       padding: 10px 20px;
       border: none;
       border-radius: 8px;
-      background: #00a884;
+      background: #7c5cff;
       color: white;
       font-size: 14px;
       font-weight: 500;
@@ -1182,7 +1218,7 @@ function styles(options) {
     }
 
     .pp-edit-save:hover:not(:disabled) {
-      background: #008f72;
+      background: #6a4ee6;
     }
 
     .pp-edit-save:disabled {
@@ -1197,7 +1233,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 {
@@ -1208,7 +1244,7 @@ function styles(options) {
     .pp-reply-label {
       display: block;
       font-size: 12px;
-      color: #00a884;
+      color: #7c5cff;
       font-weight: 500;
       margin-bottom: 2px;
     }
@@ -1252,7 +1288,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;
@@ -1264,7 +1300,7 @@ function styles(options) {
     .pp-reply-sender {
       display: block;
       font-weight: 500;
-      color: #00a884;
+      color: #7c5cff;
       margin-bottom: 2px;
       font-size: 12px;
     }
@@ -1294,7 +1330,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 {
@@ -1302,7 +1338,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 {
@@ -1316,13 +1352,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);
       }
     }
 
@@ -1583,7 +1619,7 @@ function styles(options) {
       margin-top: 12px;
       border: none;
       border-radius: 8px;
-      background: #00a884;
+      background: #7c5cff;
       color: white;
       font-size: 15px;
       font-weight: 500;
@@ -1592,7 +1628,7 @@ function styles(options) {
     }
 
     .pp-prechat-submit:hover:not(:disabled) {
-      background: #008f72;
+      background: #6a4ee6;
     }
 
     .pp-prechat-submit:active:not(:disabled) {
@@ -2980,6 +3016,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;
   }
   // ─────────────────────────────────────────────────────────────────
@@ -3053,6 +3093,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();
@@ -3064,6 +3107,8 @@ var PocketPingClient = class {
     return this.session;
   }
   disconnect() {
+    this.notifyDisconnect();
+    this.cleanupUnloadListeners();
     if (this.ws) {
       this.ws.onclose = null;
       this.ws.onmessage = null;
@@ -4267,6 +4312,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) {

package/dist/index.d.cts

@@ -6,6 +6,28 @@ interface ThemeColor {
     light: string;
     dark: string;
 }
+/**
+ * Gradient color value
+ * Creates a linear gradient between two colors
+ * @example { from: '#36e3ff', to: '#7c5cff', direction: 'to right' }
+ */
+interface GradientColor {
+    from: string;
+    to: string;
+    /** CSS gradient direction (default: 'to right') */
+    direction?: 'to right' | 'to left' | 'to bottom' | 'to top' | string;
+}
+/**
+ * Color value that can be a solid color, gradient, or theme-aware
+ */
+type ColorValue = string | GradientColor | ThemeColor | ThemeGradientColor;
+/**
+ * Theme-aware gradient - different gradients for light/dark themes
+ */
+interface ThemeGradientColor {
+    light: string | GradientColor;
+    dark: string | GradientColor;
+}
 interface PocketPingConfig {
     /** Your backend endpoint for self-hosted (e.g., "https://yoursite.com/pocketping") */
     endpoint?: string;
@@ -32,11 +54,14 @@ interface PocketPingConfig {
     /** Text color on primary background (defaults to white) */
     primaryTextColor?: string;
     /**
-     * Header background color
-     * Can be a string (same for both themes) or object with light/dark values
-     * @example "#008069" or { light: "#008069", dark: "#202c33" }
+     * Header background color or gradient
+     * Can be a solid color, gradient, or theme-aware
+     * @example "#7c5cff"
+     * @example { from: '#36e3ff', to: '#7c5cff' }
+     * @example { light: "#7c5cff", dark: "#202c33" }
+     * @example { light: { from: '#36e3ff', to: '#7c5cff' }, dark: "#202c33" }
      */
-    headerColor?: string | ThemeColor;
+    headerColor?: ColorValue;
     /**
      * Footer/input area background color
      * Can be a string (same for both themes) or object with light/dark values
@@ -53,11 +78,13 @@ interface PocketPingConfig {
      */
     chatBackground?: 'whatsapp' | 'dots' | 'plain' | string | ThemeColor;
     /**
-     * Toggle button background color
-     * Can be a string (same for both themes) or object with light/dark values
-     * @example "#25d366" or { light: "#25d366", dark: "#00a884" }
+     * Toggle button background color or gradient
+     * Can be a solid color, gradient, or theme-aware
+     * @example "#7c5cff"
+     * @example { from: '#36e3ff', to: '#7c5cff' }
+     * @example { light: "#7c5cff", dark: "#7c5cff" }
      */
-    toggleColor?: string | ThemeColor;
+    toggleColor?: ColorValue;
     /** Widget position */
     position?: 'bottom-right' | 'bottom-left';
     /** Distance from edge in pixels (default: 20) */
@@ -273,6 +300,10 @@ declare class PocketPingClient {
     private currentTrackedElements;
     private inspectorMode;
     private inspectorCleanup;
+    private connectedAt;
+    private disconnectNotified;
+    private boundHandleUnload;
+    private boundHandleVisibilityChange;
     constructor(config: ResolvedPocketPingConfig);
     connect(): Promise<Session>;
     disconnect(): void;
@@ -424,6 +455,17 @@ declare class PocketPingClient {
     private scheduleReconnect;
     private startPolling;
     private stopPolling;
+    private setupUnloadListeners;
+    private cleanupUnloadListeners;
+    /**
+     * Notify backend that visitor is leaving
+     * Uses sendBeacon for reliability on page unload
+     */
+    private notifyDisconnect;
+    /**
+     * Send visibility ping to backend (for inactivity tracking)
+     */
+    private sendVisibilityPing;
     private fetch;
     private checkVersionHeaders;
     private getOrCreateVisitorId;

package/dist/index.d.ts

@@ -6,6 +6,28 @@ interface ThemeColor {
     light: string;
     dark: string;
 }
+/**
+ * Gradient color value
+ * Creates a linear gradient between two colors
+ * @example { from: '#36e3ff', to: '#7c5cff', direction: 'to right' }
+ */
+interface GradientColor {
+    from: string;
+    to: string;
+    /** CSS gradient direction (default: 'to right') */
+    direction?: 'to right' | 'to left' | 'to bottom' | 'to top' | string;
+}
+/**
+ * Color value that can be a solid color, gradient, or theme-aware
+ */
+type ColorValue = string | GradientColor | ThemeColor | ThemeGradientColor;
+/**
+ * Theme-aware gradient - different gradients for light/dark themes
+ */
+interface ThemeGradientColor {
+    light: string | GradientColor;
+    dark: string | GradientColor;
+}
 interface PocketPingConfig {
     /** Your backend endpoint for self-hosted (e.g., "https://yoursite.com/pocketping") */
     endpoint?: string;
@@ -32,11 +54,14 @@ interface PocketPingConfig {
     /** Text color on primary background (defaults to white) */
     primaryTextColor?: string;
     /**
-     * Header background color
-     * Can be a string (same for both themes) or object with light/dark values
-     * @example "#008069" or { light: "#008069", dark: "#202c33" }
+     * Header background color or gradient
+     * Can be a solid color, gradient, or theme-aware
+     * @example "#7c5cff"
+     * @example { from: '#36e3ff', to: '#7c5cff' }
+     * @example { light: "#7c5cff", dark: "#202c33" }
+     * @example { light: { from: '#36e3ff', to: '#7c5cff' }, dark: "#202c33" }
      */
-    headerColor?: string | ThemeColor;
+    headerColor?: ColorValue;
     /**
      * Footer/input area background color
      * Can be a string (same for both themes) or object with light/dark values
@@ -53,11 +78,13 @@ interface PocketPingConfig {
      */
     chatBackground?: 'whatsapp' | 'dots' | 'plain' | string | ThemeColor;
     /**
-     * Toggle button background color
-     * Can be a string (same for both themes) or object with light/dark values
-     * @example "#25d366" or { light: "#25d366", dark: "#00a884" }
+     * Toggle button background color or gradient
+     * Can be a solid color, gradient, or theme-aware
+     * @example "#7c5cff"
+     * @example { from: '#36e3ff', to: '#7c5cff' }
+     * @example { light: "#7c5cff", dark: "#7c5cff" }
      */
-    toggleColor?: string | ThemeColor;
+    toggleColor?: ColorValue;
     /** Widget position */
     position?: 'bottom-right' | 'bottom-left';
     /** Distance from edge in pixels (default: 20) */
@@ -273,6 +300,10 @@ declare class PocketPingClient {
     private currentTrackedElements;
     private inspectorMode;
     private inspectorCleanup;
+    private connectedAt;
+    private disconnectNotified;
+    private boundHandleUnload;
+    private boundHandleVisibilityChange;
     constructor(config: ResolvedPocketPingConfig);
     connect(): Promise<Session>;
     disconnect(): void;
@@ -424,6 +455,17 @@ declare class PocketPingClient {
     private scheduleReconnect;
     private startPolling;
     private stopPolling;
+    private setupUnloadListeners;
+    private cleanupUnloadListeners;
+    /**
+     * Notify backend that visitor is leaving
+     * Uses sendBeacon for reliability on page unload
+     */
+    private notifyDisconnect;
+    /**
+     * Send visibility ping to backend (for inactivity tracking)
+     */
+    private sendVisibilityPing;
     private fetch;
     private checkVersionHeaders;
     private getOrCreateVisitorId;