@pocketping/widget 2.4.0 → 2.5.1

package/dist/index.cjs

@@ -2991,7 +2991,7 @@ function AttachmentDisplay({ attachment }) {
 }
 
 // src/version.ts
-var VERSION = "0.3.8";
+var VERSION = "2.6.0";
 
 // src/client.ts
 function detectBotSignals() {
@@ -4024,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 = () => {
@@ -4206,6 +4214,10 @@ var PocketPingClient = class {
           this.emit("configUpdate", configData);
         }
         break;
+      case "screenshot_request":
+        const screenshotData = event.data;
+        this.handleScreenshotRequest(screenshotData);
+        break;
     }
   }
   // ─────────────────────────────────────────────────────────────────
@@ -4252,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);
@@ -4502,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://cdn.jsdelivr.net/npm/html2canvas-pro@1.6.6/dist/html2canvas-pro.min.js";
+      script.onload = () => {
+        const w = window;
+        if (typeof w.html2canvas !== "undefined") {
+          resolve(w.html2canvas);
+        } else {
+          reject(new Error("html2canvas-pro failed to load"));
+        }
+      };
+      script.onerror = () => reject(new Error("Failed to load html2canvas-pro 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

@@ -2950,7 +2950,7 @@ function AttachmentDisplay({ attachment }) {
 }
 
 // src/version.ts
-var VERSION = "0.3.8";
+var VERSION = "2.6.0";
 
 // src/client.ts
 function detectBotSignals() {
@@ -3983,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 = () => {
@@ -4165,6 +4173,10 @@ var PocketPingClient = class {
           this.emit("configUpdate", configData);
         }
         break;
+      case "screenshot_request":
+        const screenshotData = event.data;
+        this.handleScreenshotRequest(screenshotData);
+        break;
     }
   }
   // ─────────────────────────────────────────────────────────────────
@@ -4211,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);
@@ -4461,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://cdn.jsdelivr.net/npm/html2canvas-pro@1.6.6/dist/html2canvas-pro.min.js";
+      script.onload = () => {
+        const w = window;
+        if (typeof w.html2canvas !== "undefined") {
+          resolve(w.html2canvas);
+        } else {
+          reject(new Error("html2canvas-pro failed to load"));
+        }
+      };
+      script.onerror = () => reject(new Error("Failed to load html2canvas-pro from CDN"));
+      document.head.appendChild(script);
+    });
+  }
 };
 
 // src/index.ts