@qaiddev/thumbs-embed 1.0.5 → 1.0.7

package/dist/index.d.ts

@@ -1,3 +1,14 @@
+/**
+ * Capture a screenshot of the current page using html2canvas
+ * Returns a base64-encoded WebP data URL, or null on failure
+ */
+export declare function captureDomScreenshot(options?: DomScreenshotOptions): Promise<string | null>;
+
+/**
+ * Intercept fetch() and XMLHttpRequest to capture network errors (4xx/5xx)
+ */
+export declare function captureNetworkErrors(): NetworkCapture;
+
 /**
  * Console message captured during the session
  */
@@ -7,6 +18,24 @@ export declare interface ConsoleError {
     level: "error" | "warn" | "log";
 }
 
+/**
+ * Create a video recorder that captures the screen
+ */
+export declare function createVideoRecorder(options?: VideoRecorderOptions): VideoRecorder;
+
+/**
+ * DOM-based screenshot capture using html2canvas
+ * No browser permission dialog required - reconstructs the page from the DOM
+ */
+export declare interface DomScreenshotOptions {
+    /** Quality of WebP compression (0-1). Default: 0.8 */
+    quality?: number;
+    /** Max width of the screenshot. Default: 1280 */
+    maxWidth?: number;
+    /** Max height of the screenshot. Default: 800 */
+    maxHeight?: number;
+}
+
 /**
  * Element bounds for server-side screenshot fallback
  */
@@ -18,7 +47,7 @@ declare interface ElementBounds {
 }
 
 /**
- * Configuration options for the FeedbackEmbed
+ * Configuration options for the QaidFeedback
  */
 export declare interface FeedbackConfig {
     /** Required: API endpoint URL for submitting feedback */
@@ -29,6 +58,8 @@ export declare interface FeedbackConfig {
     container?: string;
     /** Custom CSS class to apply to thumb buttons. When provided, default button styles are not applied */
     buttonClass?: string;
+    /** Button layout direction. Default: 'horizontal' */
+    direction?: "horizontal" | "vertical";
     /** Position of the feedback buttons. Default: 'bottom-right'. Ignored if container is provided */
     position?: "bottom-right" | "bottom-left" | "top-right" | "top-left";
     /** Offset from edge in pixels. Default: { x: 16, y: 16 } */
@@ -55,10 +86,6 @@ export declare interface FeedbackConfig {
     text?: {
         /** Tooltip text for buttons */
         tooltip?: string;
-        /** Banner text during targeting */
-        bannerText?: string;
-        /** Banner hint text */
-        bannerHint?: string;
         /** Modal title */
         modalTitle?: string;
         /** Modal subtitle */
@@ -80,12 +107,27 @@ export declare interface FeedbackConfig {
     fontSize?: number;
     /** Enable screenshot capture with feedback. Default: false */
     captureScreenshot?: boolean;
+    /** Enable video recording button. Default: false */
+    captureVideo?: boolean;
+    /** Video recording options */
+    videoOptions?: {
+        /** Max recording duration in seconds. Default: 15 */
+        maxDuration?: number;
+    };
+    /** Custom SVG string for record button icon */
+    recordIcon?: string;
     /** When true, buttons are hidden until hovered. Default: false */
     incognito?: boolean;
     /** Custom SVG string for positive feedback button icon */
     positiveIcon?: string;
     /** Custom SVG string for negative feedback button icon */
     negativeIcon?: string;
+    /** When true, hide thumbs up/down buttons (only show video button if enabled). Default: false */
+    hideThumbs?: boolean;
+    /** Custom CSS to inject into the embed's shadow root for theming */
+    css?: string;
+    /** Screenshot capture method. "dom" uses html2canvas (no permission), "permission" uses Screen Capture API. Default: "permission" */
+    screenshotMethod?: "dom" | "permission";
     /** Screenshot options */
     screenshotOptions?: {
         /** Quality of WebP compression (0-1). Default: 1.0 */
@@ -108,9 +150,84 @@ export declare interface FeedbackData {
 }
 
 /**
- * FeedbackEmbed - Standalone feedback collection embed
+ * Payload for updating feedback with a message
+ */
+export declare interface FeedbackMessagePayload {
+    message: string | null;
+}
+
+/**
+ * Payload sent to the feedback API
+ */
+export declare interface FeedbackPayload {
+    feedbackType: "up" | "down";
+    pageUrl: string;
+    /** API key for authenticating with the feedback service */
+    apiKey?: string;
+    elementSelector: string | null;
+    elementText: string | null;
+    consoleErrors: ConsoleError[];
+    screenWidth: number;
+    screenHeight: number;
+    clickX: number;
+    clickY: number;
+    scrollX: number;
+    scrollY: number;
+    /** Base64-encoded screenshot image (WebP) */
+    screenshot: string | null;
+    /** Random UUID stored in visitor's localStorage (for anonymous feedback) */
+    visitorId: string;
+    /** Element bounds for server-side screenshot fallback when client screenshot fails */
+    elementBounds?: ElementBounds | null;
+    /** User agent string for server-side rendering consistency */
+    userAgent?: string;
+}
+
+/**
+ * Response from the feedback API
+ */
+export declare interface FeedbackResponse {
+    id: number;
+}
+
+/**
+ * Detect the best supported MIME type for recording
+ */
+export declare function getSupportedMimeType(): string;
+
+/**
+ * Check if DOM screenshot capture is supported
+ * Requires canvas and basic DOM APIs
+ */
+export declare function isDomScreenshotSupported(): boolean;
+
+/**
+ * Check if video recording is supported in this browser
+ */
+export declare function isVideoRecordingSupported(): boolean;
+
+export declare interface NetworkCapture {
+    errors: NetworkError[];
+    restore: () => void;
+}
+
+/**
+ * Network error captured during the session
+ */
+export declare interface NetworkError {
+    url: string;
+    method: string;
+    status: number;
+    statusText: string;
+    requestBody?: string;
+    responseBody?: string;
+    timestamp: number;
+}
+
+/**
+ * QaidFeedback - Standalone feedback collection embed
  */
-export declare class FeedbackEmbed {
+export declare class QaidFeedback {
     private config;
     private state;
     private feedbackData;
@@ -121,8 +238,18 @@ export declare class FeedbackEmbed {
     private isMobile;
     private visitorId;
     private consoleCapture;
-    private allowedFeatures;
-    private container;
+    private videoRecorder;
+    private networkCapture;
+    private recordedBlob;
+    private recordingIndicator;
+    private videoPreview;
+    private isRecording;
+    private isSendingVideo;
+    private shadowHost;
+    private shadowRoot;
+    private overlayShadowHost;
+    private overlayShadowRoot;
+    private buttonsContainer;
     private isUserProvidedContainer;
     private overlayContainer;
     private captureLayer;
@@ -132,16 +259,24 @@ export declare class FeedbackEmbed {
     private marker;
     private modalContainer;
     private backdrop;
+    private cssVars;
     private boundKeyDown;
     private boundMouseMove;
     private boundClick;
     private boundResize;
     constructor(config: FeedbackConfig);
+    private applyVars;
     private init;
-    private fetchAllowedFeatures;
     private checkMobile;
     private handleResize;
     private createEmbed;
+    /**
+     * Lazily create a separate overlay shadow host on document.body.
+     * This host contains all full-page elements (targeting overlay, marker,
+     * backdrop, modal, recording indicator, video preview) so they escape
+     * clip-path / transform containing blocks in user containers.
+     */
+    private ensureOverlayHost;
     private tooltipElement;
     private showTooltip;
     private hideTooltip;
@@ -164,53 +299,24 @@ export declare class FeedbackEmbed {
     private setupModalInteractions;
     private submitMessage;
     private closeModal;
+    private startRecording;
+    private stopRecording;
+    private showRecordingIndicator;
+    private updateRecordingTimer;
+    private formatTime;
+    private removeRecordingIndicator;
+    private showRecordingPreview;
+    private cancelRecordingPreview;
+    private removeVideoPreview;
+    private submitVideoFeedback;
+    private cleanupRecording;
+    private setButtonsDisabled;
     /**
      * Destroy the embed and clean up all resources
      */
     destroy(): void;
 }
 
-/**
- * Payload for updating feedback with a message
- */
-export declare interface FeedbackMessagePayload {
-    message: string | null;
-}
-
-/**
- * Payload sent to the feedback API
- */
-export declare interface FeedbackPayload {
-    feedbackType: "up" | "down";
-    pageUrl: string;
-    /** API key for authenticating with the feedback service */
-    apiKey?: string;
-    elementSelector: string | null;
-    elementText: string | null;
-    consoleErrors: ConsoleError[];
-    screenWidth: number;
-    screenHeight: number;
-    clickX: number;
-    clickY: number;
-    scrollX: number;
-    scrollY: number;
-    /** Base64-encoded screenshot image (WebP) */
-    screenshot: string | null;
-    /** Random UUID stored in visitor's localStorage (for anonymous feedback) */
-    visitorId: string;
-    /** Element bounds for server-side screenshot fallback when client screenshot fails */
-    elementBounds?: ElementBounds | null;
-    /** User agent string for server-side rendering consistency */
-    userAgent?: string;
-}
-
-/**
- * Response from the feedback API
- */
-export declare interface FeedbackResponse {
-    id: number;
-}
-
 /**
  * Fully resolved configuration with all defaults applied
  * Used internally by the embed after processing user config
@@ -220,6 +326,7 @@ export declare interface ResolvedFeedbackConfig {
     apiKey: string;
     container: string;
     buttonClass: string;
+    direction: "horizontal" | "vertical";
     position: "bottom-right" | "bottom-left" | "top-right" | "top-left";
     offset: {
         x: number;
@@ -235,8 +342,6 @@ export declare interface ResolvedFeedbackConfig {
     buttonSize: "small" | "medium" | "large";
     text: {
         tooltip: string;
-        bannerText: string;
-        bannerHint: string;
         modalTitle: string;
         modalSubtitle: string;
         placeholder: string;
@@ -248,6 +353,7 @@ export declare interface ResolvedFeedbackConfig {
     fontFamily: string;
     fontSize: number;
     captureScreenshot: boolean;
+    screenshotMethod: "dom" | "permission";
     screenshotOptions: {
         quality: number;
         maxWidth: number;
@@ -256,6 +362,13 @@ export declare interface ResolvedFeedbackConfig {
     incognito: boolean;
     positiveIcon: string;
     negativeIcon: string;
+    hideThumbs: boolean;
+    css: string;
+    captureVideo: boolean;
+    videoOptions: {
+        maxDuration: number;
+    };
+    recordIcon: string;
 }
 
 /**
@@ -271,4 +384,36 @@ export declare interface SelectedBounds {
     visible: boolean;
 }
 
+export declare interface VideoRecorder {
+    /** Start recording. Requests getDisplayMedia if not already started. */
+    start(): Promise<void>;
+    /** Stop recording and return the video blob. */
+    stop(): Promise<Blob>;
+    /** Register a callback for each second tick (receives seconds elapsed). */
+    onTick(callback: (elapsed: number) => void): void;
+    /** Register a callback for when recording stops (e.g., browser stop button, max duration). */
+    onStop(callback: (blob: Blob | null) => void): void;
+    /** Clean up all resources. */
+    destroy(): void;
+}
+
+/**
+ * Video capture utilities
+ * Uses getDisplayMedia + MediaRecorder for screen recording
+ */
+export declare interface VideoRecorderOptions {
+    /** Max recording duration in seconds. Default: 15 */
+    maxDuration?: number;
+    /** Video bitrate in bps. Default: 800000 (800kbps) */
+    videoBitsPerSecond?: number;
+}
+
 export { }
+
+
+declare global {
+    interface Window {
+        html2canvas?: (element: HTMLElement, options?: Record<string, unknown>) => Promise<HTMLCanvasElement>;
+    }
+}
+