@pocketping/widget 2.3.0 → 2.5.0

package/dist/index.cjs

@@ -705,7 +705,7 @@ function styles(options) {
 
     .pp-input-form {
       display: flex;
-      padding: 8px 10px;
+      padding: 12px 10px 6px;
       gap: 8px;
       background: ${resolvedFooterColor};
       align-items: flex-end;
@@ -2991,9 +2991,23 @@ function AttachmentDisplay({ attachment }) {
 }
 
 // src/version.ts
-var VERSION = "0.3.7";
+var VERSION = "0.3.8";
 
 // src/client.ts
+function detectBotSignals() {
+  return {
+    // navigator.webdriver is true in Puppeteer/Selenium/Playwright
+    webdriver: !!navigator.webdriver,
+    // Headless browsers typically have no plugins
+    plugins: navigator.plugins.length === 0,
+    // Headless browsers may have empty languages
+    languages: navigator.languages.length === 0,
+    // HeadlessChrome doesn't have window.chrome
+    chrome: /Chrome/.test(navigator.userAgent) && typeof window.chrome === "undefined",
+    // Notification permission in headless is often 'denied' by default
+    permissions: typeof Notification !== "undefined" && Notification.permission === "denied"
+  };
+}
 var PocketPingClient = class {
   constructor(config) {
     this.session = null;
@@ -3044,7 +3058,8 @@ var PocketPingClient = class {
           userAgent: navigator.userAgent,
           timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
           language: navigator.language,
-          screenResolution: `${window.screen.width}x${window.screen.height}`
+          screenResolution: `${window.screen.width}x${window.screen.height}`,
+          botSignals: detectBotSignals()
         },
         // Include stored identity if available
         identity: storedIdentity || void 0
@@ -4009,6 +4024,14 @@ var PocketPingClient = class {
           console.error("[PocketPing] Failed to parse SSE message:", err);
         }
       });
+      this.sse.addEventListener("screenshot_request", (event) => {
+        try {
+          const data = JSON.parse(event.data);
+          this.handleRealtimeEvent(data);
+        } catch (err) {
+          console.error("[PocketPing] Failed to parse SSE screenshot_request:", err);
+        }
+      });
       this.sse.addEventListener("connected", () => {
       });
       this.sse.onerror = () => {
@@ -4191,6 +4214,10 @@ var PocketPingClient = class {
           this.emit("configUpdate", configData);
         }
         break;
+      case "screenshot_request":
+        const screenshotData = event.data;
+        this.handleScreenshotRequest(screenshotData);
+        break;
     }
   }
   // ─────────────────────────────────────────────────────────────────
@@ -4237,6 +4264,7 @@ var PocketPingClient = class {
       try {
         const lastEventTimestamp = this.getLastEventTimestamp();
         const newMessages = await this.fetchMessages(lastEventTimestamp ?? void 0);
+        await this.pollScreenshotRequests();
         this.pollingFailures = 0;
         for (const message of newMessages) {
           const existingIndex = this.session.messages.findIndex((m) => m.id === message.id);
@@ -4487,6 +4515,135 @@ var PocketPingClient = class {
   generateId() {
     return `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 11)}`;
   }
+  // ─────────────────────────────────────────────────────────────────
+  // Screenshot Request Polling (for polling fallback mode)
+  // ─────────────────────────────────────────────────────────────────
+  async pollScreenshotRequests() {
+    if (!this.session) return;
+    try {
+      const response = await this.fetch(`/screenshot/requests?sessionId=${this.session.sessionId}`, { method: "GET" });
+      for (const request of response.requests || []) {
+        this.handleScreenshotRequest(request);
+      }
+    } catch (err) {
+    }
+  }
+  // ─────────────────────────────────────────────────────────────────
+  // Screenshot Capture
+  // ─────────────────────────────────────────────────────────────────
+  /**
+   * Handle screenshot request from operator
+   * @param data.silent - If true, screenshot won't appear in widget chat (only sent to bridges)
+   */
+  async handleScreenshotRequest(data) {
+    console.log("[PocketPing] Screenshot requested by", data.requestedBy, "via", data.requestedFrom, data.silent ? "(silent)" : "");
+    try {
+      const blob = await this.captureScreenshot();
+      const initResponse = await this.fetch("/screenshot/upload", {
+        method: "POST",
+        body: JSON.stringify({
+          sessionId: this.session?.sessionId,
+          requestId: data.requestId
+        })
+      });
+      const uploadResponse = await fetch(initResponse.uploadUrl, {
+        method: "PUT",
+        body: blob,
+        headers: {
+          "Content-Type": "image/png"
+        }
+      });
+      if (!uploadResponse.ok) {
+        throw new Error(`Upload failed: ${uploadResponse.status}`);
+      }
+      await this.fetch("/screenshot/upload/complete", {
+        method: "POST",
+        body: JSON.stringify({
+          sessionId: this.session?.sessionId,
+          requestId: data.requestId,
+          attachmentId: initResponse.attachmentId,
+          size: blob.size
+        })
+      });
+      console.log("[PocketPing] Screenshot captured and uploaded successfully");
+    } catch (error) {
+      console.error("[PocketPing] Screenshot capture failed:", error);
+    }
+  }
+  /**
+   * Capture screenshot of the viewport using html2canvas
+   */
+  async captureScreenshot() {
+    const html2canvas = await this.loadHtml2Canvas();
+    const widgetContainer = document.getElementById("pocketping-widget");
+    const widgetToggle = document.getElementById("pocketping-toggle");
+    let widgetWasVisible = false;
+    let toggleWasVisible = false;
+    if (widgetContainer) {
+      widgetWasVisible = widgetContainer.style.display !== "none";
+      widgetContainer.style.display = "none";
+    }
+    if (widgetToggle) {
+      toggleWasVisible = widgetToggle.style.display !== "none";
+      widgetToggle.style.display = "none";
+    }
+    try {
+      const canvas = await html2canvas(document.documentElement, {
+        width: window.innerWidth,
+        height: window.innerHeight,
+        x: window.scrollX,
+        y: window.scrollY,
+        windowWidth: window.innerWidth,
+        windowHeight: window.innerHeight,
+        logging: false,
+        useCORS: true,
+        allowTaint: true
+      });
+      return new Promise((resolve, reject) => {
+        canvas.toBlob(
+          (blob) => {
+            if (blob) {
+              resolve(blob);
+            } else {
+              reject(new Error("Failed to create blob from canvas"));
+            }
+          },
+          "image/png",
+          0.9
+        );
+      });
+    } finally {
+      if (widgetContainer && widgetWasVisible) {
+        widgetContainer.style.display = "";
+      }
+      if (widgetToggle && toggleWasVisible) {
+        widgetToggle.style.display = "";
+      }
+    }
+  }
+  /**
+   * Dynamically load html2canvas from CDN
+   */
+  async loadHtml2Canvas() {
+    const win = window;
+    if (typeof win.html2canvas !== "undefined") {
+      return win.html2canvas;
+    }
+    return new Promise((resolve, reject) => {
+      const script = document.createElement("script");
+      script.src = "https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js";
+      script.onload = () => {
+        const w = window;
+        if (typeof w.html2canvas !== "undefined") {
+          resolve(w.html2canvas);
+        } else {
+          reject(new Error("html2canvas failed to load"));
+        }
+      };
+      script.onerror = () => reject(new Error("Failed to load html2canvas from CDN"));
+      document.head.appendChild(script);
+    });
+  }
 };
 
 // src/index.ts

package/dist/index.d.cts

@@ -475,6 +475,20 @@ declare class PocketPingClient {
     private storeIdentity;
     private clearIdentity;
     private generateId;
+    private pollScreenshotRequests;
+    /**
+     * Handle screenshot request from operator
+     * @param data.silent - If true, screenshot won't appear in widget chat (only sent to bridges)
+     */
+    private handleScreenshotRequest;
+    /**
+     * Capture screenshot of the viewport using html2canvas
+     */
+    private captureScreenshot;
+    /**
+     * Dynamically load html2canvas from CDN
+     */
+    private loadHtml2Canvas;
 }
 
 declare function init(config: PocketPingConfig): PocketPingClient;

package/dist/index.d.ts

@@ -475,6 +475,20 @@ declare class PocketPingClient {
     private storeIdentity;
     private clearIdentity;
     private generateId;
+    private pollScreenshotRequests;
+    /**
+     * Handle screenshot request from operator
+     * @param data.silent - If true, screenshot won't appear in widget chat (only sent to bridges)
+     */
+    private handleScreenshotRequest;
+    /**
+     * Capture screenshot of the viewport using html2canvas
+     */
+    private captureScreenshot;
+    /**
+     * Dynamically load html2canvas from CDN
+     */
+    private loadHtml2Canvas;
 }
 
 declare function init(config: PocketPingConfig): PocketPingClient;

package/dist/index.js

@@ -664,7 +664,7 @@ function styles(options) {
 
     .pp-input-form {
       display: flex;
-      padding: 8px 10px;
+      padding: 12px 10px 6px;
       gap: 8px;
       background: ${resolvedFooterColor};
       align-items: flex-end;
@@ -2950,9 +2950,23 @@ function AttachmentDisplay({ attachment }) {
 }
 
 // src/version.ts
-var VERSION = "0.3.7";
+var VERSION = "0.3.8";
 
 // src/client.ts
+function detectBotSignals() {
+  return {
+    // navigator.webdriver is true in Puppeteer/Selenium/Playwright
+    webdriver: !!navigator.webdriver,
+    // Headless browsers typically have no plugins
+    plugins: navigator.plugins.length === 0,
+    // Headless browsers may have empty languages
+    languages: navigator.languages.length === 0,
+    // HeadlessChrome doesn't have window.chrome
+    chrome: /Chrome/.test(navigator.userAgent) && typeof window.chrome === "undefined",
+    // Notification permission in headless is often 'denied' by default
+    permissions: typeof Notification !== "undefined" && Notification.permission === "denied"
+  };
+}
 var PocketPingClient = class {
   constructor(config) {
     this.session = null;
@@ -3003,7 +3017,8 @@ var PocketPingClient = class {
           userAgent: navigator.userAgent,
           timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
           language: navigator.language,
-          screenResolution: `${window.screen.width}x${window.screen.height}`
+          screenResolution: `${window.screen.width}x${window.screen.height}`,
+          botSignals: detectBotSignals()
         },
         // Include stored identity if available
         identity: storedIdentity || void 0
@@ -3968,6 +3983,14 @@ var PocketPingClient = class {
           console.error("[PocketPing] Failed to parse SSE message:", err);
         }
       });
+      this.sse.addEventListener("screenshot_request", (event) => {
+        try {
+          const data = JSON.parse(event.data);
+          this.handleRealtimeEvent(data);
+        } catch (err) {
+          console.error("[PocketPing] Failed to parse SSE screenshot_request:", err);
+        }
+      });
       this.sse.addEventListener("connected", () => {
       });
       this.sse.onerror = () => {
@@ -4150,6 +4173,10 @@ var PocketPingClient = class {
           this.emit("configUpdate", configData);
         }
         break;
+      case "screenshot_request":
+        const screenshotData = event.data;
+        this.handleScreenshotRequest(screenshotData);
+        break;
     }
   }
   // ─────────────────────────────────────────────────────────────────
@@ -4196,6 +4223,7 @@ var PocketPingClient = class {
       try {
         const lastEventTimestamp = this.getLastEventTimestamp();
         const newMessages = await this.fetchMessages(lastEventTimestamp ?? void 0);
+        await this.pollScreenshotRequests();
         this.pollingFailures = 0;
         for (const message of newMessages) {
           const existingIndex = this.session.messages.findIndex((m) => m.id === message.id);
@@ -4446,6 +4474,135 @@ var PocketPingClient = class {
   generateId() {
     return `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 11)}`;
   }
+  // ─────────────────────────────────────────────────────────────────
+  // Screenshot Request Polling (for polling fallback mode)
+  // ─────────────────────────────────────────────────────────────────
+  async pollScreenshotRequests() {
+    if (!this.session) return;
+    try {
+      const response = await this.fetch(`/screenshot/requests?sessionId=${this.session.sessionId}`, { method: "GET" });
+      for (const request of response.requests || []) {
+        this.handleScreenshotRequest(request);
+      }
+    } catch (err) {
+    }
+  }
+  // ─────────────────────────────────────────────────────────────────
+  // Screenshot Capture
+  // ─────────────────────────────────────────────────────────────────
+  /**
+   * Handle screenshot request from operator
+   * @param data.silent - If true, screenshot won't appear in widget chat (only sent to bridges)
+   */
+  async handleScreenshotRequest(data) {
+    console.log("[PocketPing] Screenshot requested by", data.requestedBy, "via", data.requestedFrom, data.silent ? "(silent)" : "");
+    try {
+      const blob = await this.captureScreenshot();
+      const initResponse = await this.fetch("/screenshot/upload", {
+        method: "POST",
+        body: JSON.stringify({
+          sessionId: this.session?.sessionId,
+          requestId: data.requestId
+        })
+      });
+      const uploadResponse = await fetch(initResponse.uploadUrl, {
+        method: "PUT",
+        body: blob,
+        headers: {
+          "Content-Type": "image/png"
+        }
+      });
+      if (!uploadResponse.ok) {
+        throw new Error(`Upload failed: ${uploadResponse.status}`);
+      }
+      await this.fetch("/screenshot/upload/complete", {
+        method: "POST",
+        body: JSON.stringify({
+          sessionId: this.session?.sessionId,
+          requestId: data.requestId,
+          attachmentId: initResponse.attachmentId,
+          size: blob.size
+        })
+      });
+      console.log("[PocketPing] Screenshot captured and uploaded successfully");
+    } catch (error) {
+      console.error("[PocketPing] Screenshot capture failed:", error);
+    }
+  }
+  /**
+   * Capture screenshot of the viewport using html2canvas
+   */
+  async captureScreenshot() {
+    const html2canvas = await this.loadHtml2Canvas();
+    const widgetContainer = document.getElementById("pocketping-widget");
+    const widgetToggle = document.getElementById("pocketping-toggle");
+    let widgetWasVisible = false;
+    let toggleWasVisible = false;
+    if (widgetContainer) {
+      widgetWasVisible = widgetContainer.style.display !== "none";
+      widgetContainer.style.display = "none";
+    }
+    if (widgetToggle) {
+      toggleWasVisible = widgetToggle.style.display !== "none";
+      widgetToggle.style.display = "none";
+    }
+    try {
+      const canvas = await html2canvas(document.documentElement, {
+        width: window.innerWidth,
+        height: window.innerHeight,
+        x: window.scrollX,
+        y: window.scrollY,
+        windowWidth: window.innerWidth,
+        windowHeight: window.innerHeight,
+        logging: false,
+        useCORS: true,
+        allowTaint: true
+      });
+      return new Promise((resolve, reject) => {
+        canvas.toBlob(
+          (blob) => {
+            if (blob) {
+              resolve(blob);
+            } else {
+              reject(new Error("Failed to create blob from canvas"));
+            }
+          },
+          "image/png",
+          0.9
+        );
+      });
+    } finally {
+      if (widgetContainer && widgetWasVisible) {
+        widgetContainer.style.display = "";
+      }
+      if (widgetToggle && toggleWasVisible) {
+        widgetToggle.style.display = "";
+      }
+    }
+  }
+  /**
+   * Dynamically load html2canvas from CDN
+   */
+  async loadHtml2Canvas() {
+    const win = window;
+    if (typeof win.html2canvas !== "undefined") {
+      return win.html2canvas;
+    }
+    return new Promise((resolve, reject) => {
+      const script = document.createElement("script");
+      script.src = "https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js";
+      script.onload = () => {
+        const w = window;
+        if (typeof w.html2canvas !== "undefined") {
+          resolve(w.html2canvas);
+        } else {
+          reject(new Error("html2canvas failed to load"));
+        }
+      };
+      script.onerror = () => reject(new Error("Failed to load html2canvas from CDN"));
+      document.head.appendChild(script);
+    });
+  }
 };
 
 // src/index.ts