@pocketping/widget 0.1.0 → 0.3.0

package/dist/index.mjs

@@ -599,6 +599,9 @@ function StatusIcon({ status }) {
   return null;
 }
 
+// src/version.ts
+var VERSION = "0.3.0";
+
 // src/client.ts
 var PocketPingClient = class {
   constructor(config) {
@@ -606,6 +609,7 @@ var PocketPingClient = class {
     this.ws = null;
     this.isOpen = false;
     this.listeners = /* @__PURE__ */ new Map();
+    this.customEventHandlers = /* @__PURE__ */ new Map();
     this.reconnectAttempts = 0;
     this.maxReconnectAttempts = 5;
     this.reconnectTimeout = null;
@@ -617,6 +621,7 @@ var PocketPingClient = class {
   async connect() {
     const visitorId = this.getOrCreateVisitorId();
     const storedSessionId = this.getStoredSessionId();
+    const storedIdentity = this.getStoredIdentity();
     const response = await this.fetch("/connect", {
       method: "POST",
       body: JSON.stringify({
@@ -630,14 +635,17 @@ var PocketPingClient = class {
           timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
           language: navigator.language,
           screenResolution: `${window.screen.width}x${window.screen.height}`
-        }
+        },
+        // Include stored identity if available
+        identity: storedIdentity || void 0
       })
     });
     this.session = {
       sessionId: response.sessionId,
       visitorId: response.visitorId,
       operatorOnline: response.operatorOnline ?? false,
-      messages: response.messages ?? []
+      messages: response.messages ?? [],
+      identity: response.identity || storedIdentity || void 0
     };
     this.storeSessionId(response.sessionId);
     this.connectWebSocket();
@@ -760,6 +768,69 @@ var PocketPingClient = class {
     return this.fetch("/presence", { method: "GET" });
   }
   // ─────────────────────────────────────────────────────────────────
+  // User Identity
+  // ─────────────────────────────────────────────────────────────────
+  /**
+   * Identify the current user with metadata
+   * Call after user logs in or when user data becomes available
+   * @param identity - User identity data with required id field
+   * @example
+   * PocketPing.identify({
+   *   id: 'user_123',
+   *   email: 'john@example.com',
+   *   name: 'John Doe',
+   *   plan: 'pro',
+   *   company: 'Acme Inc'
+   * })
+   */
+  async identify(identity) {
+    if (!identity?.id) {
+      throw new Error("[PocketPing] identity.id is required");
+    }
+    this.storeIdentity(identity);
+    if (this.session) {
+      try {
+        await this.fetch("/identify", {
+          method: "POST",
+          body: JSON.stringify({
+            sessionId: this.session.sessionId,
+            identity
+          })
+        });
+        this.session.identity = identity;
+        this.emit("identify", identity);
+      } catch (err) {
+        console.error("[PocketPing] Failed to identify:", err);
+        throw err;
+      }
+    }
+  }
+  /**
+   * Reset the user identity and optionally start a new session
+   * Call on user logout to clear user data
+   * @param options - Optional settings: { newSession: boolean }
+   */
+  async reset(options) {
+    this.clearIdentity();
+    if (this.session) {
+      this.session.identity = void 0;
+    }
+    if (options?.newSession) {
+      localStorage.removeItem("pocketping_session_id");
+      localStorage.removeItem("pocketping_visitor_id");
+      this.disconnect();
+      await this.connect();
+    }
+    this.emit("reset", null);
+  }
+  /**
+   * Get the current user identity
+   * @returns UserIdentity or null if not identified
+   */
+  getIdentity() {
+    return this.session?.identity || this.getStoredIdentity();
+  }
+  // ─────────────────────────────────────────────────────────────────
   // State
   // ─────────────────────────────────────────────────────────────────
   getSession() {
@@ -802,6 +873,67 @@ var PocketPingClient = class {
     this.listeners.get(event)?.forEach((listener) => listener(data));
   }
   // ─────────────────────────────────────────────────────────────────
+  // Custom Events (bidirectional)
+  // ─────────────────────────────────────────────────────────────────
+  /**
+   * Trigger a custom event to the backend
+   * @param eventName - The name of the event (e.g., 'clicked_pricing', 'viewed_demo')
+   * @param data - Optional payload to send with the event
+   * @example
+   * PocketPing.trigger('clicked_cta', { button: 'signup', page: '/pricing' })
+   */
+  trigger(eventName, data) {
+    if (!this.ws || this.ws.readyState !== WebSocket.OPEN) {
+      console.warn("[PocketPing] Cannot trigger event: WebSocket not connected");
+      return;
+    }
+    const event = {
+      name: eventName,
+      data,
+      timestamp: (/* @__PURE__ */ new Date()).toISOString()
+    };
+    this.ws.send(JSON.stringify({
+      type: "event",
+      data: event
+    }));
+    this.emit(`event:${eventName}`, event);
+  }
+  /**
+   * Subscribe to custom events from the backend
+   * @param eventName - The name of the event to listen for (e.g., 'show_offer', 'open_chat')
+   * @param handler - Callback function when event is received
+   * @returns Unsubscribe function
+   * @example
+   * const unsubscribe = PocketPing.onEvent('show_offer', (data) => {
+   *   showPopup(data.message)
+   * })
+   */
+  onEvent(eventName, handler) {
+    if (!this.customEventHandlers.has(eventName)) {
+      this.customEventHandlers.set(eventName, /* @__PURE__ */ new Set());
+    }
+    this.customEventHandlers.get(eventName).add(handler);
+    return () => {
+      this.customEventHandlers.get(eventName)?.delete(handler);
+    };
+  }
+  /**
+   * Unsubscribe from a custom event
+   * @param eventName - The name of the event
+   * @param handler - The handler to remove
+   */
+  offEvent(eventName, handler) {
+    this.customEventHandlers.get(eventName)?.delete(handler);
+  }
+  emitCustomEvent(event) {
+    const handlers = this.customEventHandlers.get(event.name);
+    if (handlers) {
+      handlers.forEach((handler) => handler(event.data, event));
+    }
+    this.emit("event", event);
+    this.emit(`event:${event.name}`, event);
+  }
+  // ─────────────────────────────────────────────────────────────────
   // WebSocket
   // ─────────────────────────────────────────────────────────────────
   connectWebSocket() {
@@ -899,6 +1031,40 @@ var PocketPingClient = class {
         }
         this.emit("read", readData);
         break;
+      case "event":
+        const customEvent = event.data;
+        this.emitCustomEvent(customEvent);
+        break;
+      case "version_warning":
+        const versionWarning = event.data;
+        this.handleVersionWarning(versionWarning);
+        break;
+    }
+  }
+  // ─────────────────────────────────────────────────────────────────
+  // Version Management
+  // ─────────────────────────────────────────────────────────────────
+  handleVersionWarning(warning) {
+    const prefix = "[PocketPing]";
+    const upgradeHint = warning.upgradeUrl ? ` Upgrade: ${warning.upgradeUrl}` : " Update your widget to the latest version.";
+    switch (warning.severity) {
+      case "error":
+        console.error(`${prefix} \u{1F6A8} VERSION ERROR: ${warning.message}${upgradeHint}`);
+        console.error(`${prefix} Current: ${warning.currentVersion}, Required: ${warning.minVersion || "unknown"}`);
+        break;
+      case "warning":
+        console.warn(`${prefix} \u26A0\uFE0F VERSION WARNING: ${warning.message}${upgradeHint}`);
+        console.warn(`${prefix} Current: ${warning.currentVersion}, Latest: ${warning.latestVersion || "unknown"}`);
+        break;
+      case "info":
+        console.info(`${prefix} \u2139\uFE0F ${warning.message}`);
+        break;
+    }
+    this.emit("versionWarning", warning);
+    this.config.onVersionWarning?.(warning);
+    if (!warning.canContinue) {
+      console.error(`${prefix} Widget is incompatible with backend. Please update immediately.`);
+      this.disconnect();
     }
   }
   scheduleReconnect() {
@@ -944,15 +1110,46 @@ var PocketPingClient = class {
       ...options,
       headers: {
         "Content-Type": "application/json",
+        "X-PocketPing-Version": VERSION,
         ...options.headers
       }
     });
+    this.checkVersionHeaders(response);
     if (!response.ok) {
       const error = await response.text();
       throw new Error(`PocketPing API error: ${response.status} ${error}`);
     }
     return response.json();
   }
+  checkVersionHeaders(response) {
+    const versionStatus = response.headers.get("X-PocketPing-Version-Status");
+    const minVersion = response.headers.get("X-PocketPing-Min-Version");
+    const latestVersion = response.headers.get("X-PocketPing-Latest-Version");
+    const versionMessage = response.headers.get("X-PocketPing-Version-Message");
+    if (!versionStatus || versionStatus === "ok") {
+      return;
+    }
+    let severity = "info";
+    let canContinue = true;
+    if (versionStatus === "deprecated") {
+      severity = "warning";
+    } else if (versionStatus === "unsupported") {
+      severity = "error";
+      canContinue = false;
+    } else if (versionStatus === "outdated") {
+      severity = "info";
+    }
+    const warning = {
+      severity,
+      message: versionMessage || `Widget version ${VERSION} is ${versionStatus}`,
+      currentVersion: VERSION,
+      minVersion: minVersion || void 0,
+      latestVersion: latestVersion || void 0,
+      canContinue,
+      upgradeUrl: "https://docs.pocketping.io/widget/installation"
+    };
+    this.handleVersionWarning(warning);
+  }
   // ─────────────────────────────────────────────────────────────────
   // Storage
   // ─────────────────────────────────────────────────────────────────
@@ -971,6 +1168,20 @@ var PocketPingClient = class {
   storeSessionId(sessionId) {
     localStorage.setItem("pocketping_session_id", sessionId);
   }
+  getStoredIdentity() {
+    try {
+      const stored = localStorage.getItem("pocketping_user_identity");
+      return stored ? JSON.parse(stored) : null;
+    } catch {
+      return null;
+    }
+  }
+  storeIdentity(identity) {
+    localStorage.setItem("pocketping_user_identity", JSON.stringify(identity));
+  }
+  clearIdentity() {
+    localStorage.removeItem("pocketping_user_identity");
+  }
   generateId() {
     return `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 11)}`;
   }
@@ -979,15 +1190,21 @@ var PocketPingClient = class {
 // src/index.ts
 var client = null;
 var container = null;
+var SAAS_API_BASE = "https://app.pocketping.io/api/widget";
 function init(config) {
   if (client) {
     console.warn("[PocketPing] Already initialized");
     return client;
   }
-  if (!config.endpoint) {
-    throw new Error("[PocketPing] endpoint is required");
+  let resolvedEndpoint = config.endpoint;
+  if (!resolvedEndpoint && config.projectId) {
+    resolvedEndpoint = `${SAAS_API_BASE}/${config.projectId}`;
+  }
+  if (!resolvedEndpoint) {
+    throw new Error("[PocketPing] endpoint or projectId is required");
   }
-  client = new PocketPingClient(config);
+  const resolvedConfig = { ...config, endpoint: resolvedEndpoint };
+  client = new PocketPingClient(resolvedConfig);
   container = document.createElement("div");
   container.id = "pocketping-container";
   document.body.appendChild(container);
@@ -1023,23 +1240,77 @@ function sendMessage(content) {
   }
   return client.sendMessage(content);
 }
+function trigger(eventName, data) {
+  if (!client) {
+    console.warn("[PocketPing] Not initialized, cannot trigger event");
+    return;
+  }
+  client.trigger(eventName, data);
+}
+function onEvent(eventName, handler) {
+  if (!client) {
+    console.warn("[PocketPing] Not initialized, cannot subscribe to event");
+    return () => {
+    };
+  }
+  return client.onEvent(eventName, handler);
+}
+function offEvent(eventName, handler) {
+  client?.offEvent(eventName, handler);
+}
+async function identify(identity) {
+  if (!client) {
+    throw new Error("[PocketPing] Not initialized");
+  }
+  return client.identify(identity);
+}
+async function reset(options) {
+  if (!client) {
+    console.warn("[PocketPing] Not initialized");
+    return;
+  }
+  return client.reset(options);
+}
+function getIdentity() {
+  return client?.getIdentity() || null;
+}
+function on(eventName, handler) {
+  if (!client) {
+    console.warn("[PocketPing] Not initialized, cannot subscribe to event");
+    return () => {
+    };
+  }
+  return client.on(eventName, handler);
+}
 if (typeof document !== "undefined") {
   const script = document.currentScript;
-  if (script?.dataset.endpoint) {
-    init({
-      endpoint: script.dataset.endpoint,
-      theme: script.dataset.theme || "auto",
-      position: script.dataset.position || "bottom-right"
-    });
+  if (script) {
+    const projectId = script.dataset.key;
+    const endpoint = script.dataset.endpoint;
+    if (projectId || endpoint) {
+      init({
+        projectId,
+        endpoint,
+        theme: script.dataset.theme || "auto",
+        position: script.dataset.position || "bottom-right"
+      });
+    }
   }
 }
-var index_default = { init, destroy, open, close, toggle, sendMessage };
+var index_default = { init, destroy, open, close, toggle, sendMessage, trigger, onEvent, offEvent, on, identify, reset, getIdentity };
 export {
   close,
   index_default as default,
   destroy,
+  getIdentity,
+  identify,
   init,
+  offEvent,
+  on,
+  onEvent,
   open,
+  reset,
   sendMessage,
-  toggle
+  toggle,
+  trigger
 };