@multiplayer-app/session-recorder-browser 1.2.22 → 1.2.24

package/dist/sessionWidget/UIManager.js

@@ -0,0 +1,135 @@
+import { insertTrustedHTML } from '../utils';
+import { RecordIcon } from './templates/icons';
+import { finalPopoverTemplate } from './templates/finalPopover';
+import { initialPopoverTemplate } from './templates/initialPopover';
+import { recordingOverlayTemplate } from './templates/recordingOverlay';
+import { submitSessionDialogTemplate } from './templates/submitSessionDialog';
+import { toastTemplate } from './templates/toast';
+export class UIManager {
+    /**
+     * Constructor initializes the UIManager with necessary DOM elements
+     * @param recorderButton - The main button to start recording
+     * @param initialPopover - Popover shown when starting the session
+     * @param finalPopover - Popover shown when the session ends
+     * @param previewModal - Modal to preview the recorded session
+     * @param recordingOverlay - Overlay element for recording indication in extension
+     * @param submitSessionDialog - Dialog that opens when recording is stopped from extension
+     * @param toast - Toast element for showing success messages
+     * @param widgetTextOverrides - Configuration for customizable text
+     * @param showContinuousRecording - Whether continuous recording is enabled
+     */
+    constructor(recorderButton, initialPopover, finalPopover, recordingOverlay, submitSessionDialog, toast, widgetTextOverrides, showContinuousRecording) {
+        this.toastTimeout = null;
+        this.recorderButton = recorderButton;
+        this.initialPopover = initialPopover;
+        this.finalPopover = finalPopover;
+        this.recordingOverlay = recordingOverlay;
+        this.submitSessionDialog = submitSessionDialog;
+        this.toast = toast;
+        this.widgetTextOverrides = widgetTextOverrides;
+        this.showContinuousRecording = showContinuousRecording;
+    }
+    /**
+     * Sets the properties for the recorder button, including its class,
+     * tooltip, and inner HTML content (Record icon)
+     */
+    setRecorderButtonProps() {
+        this.recorderButton.className = 'mp-session-debugger-button';
+        this.recorderButton.dataset.tooltip = 'Record an issue';
+        insertTrustedHTML(this.recorderButton, `${RecordIcon}`);
+    }
+    /**
+     * Sets the properties for the recording overlay, including its classes,
+     * tooltip, and inner HTML content
+     */
+    setOverlayProps() {
+        this.recordingOverlay.className = 'mp-recording-overlay hidden';
+        insertTrustedHTML(this.recordingOverlay, recordingOverlayTemplate);
+    }
+    /**
+     * Sets the properties for the session submission dialog, including its classes,
+     * tooltip, and inner HTML content
+     */
+    setSubmitSessionDialogProps() {
+        this.submitSessionDialog.id = 'mp-submission-dialog';
+        this.submitSessionDialog.className = 'hidden';
+        insertTrustedHTML(this.submitSessionDialog, submitSessionDialogTemplate(this.widgetTextOverrides));
+    }
+    /**
+     * Sets up the initial popover with its class and inner HTML structure.
+     * The popover includes a logo, heading, and start recording button.
+     */
+    setInitialPopoverProps() {
+        this.initialPopover.className =
+            'mp-session-debugger-popover mp-initial-popover hidden';
+        insertTrustedHTML(this.initialPopover, initialPopoverTemplate(this.widgetTextOverrides, this.showContinuousRecording));
+    }
+    /**
+     * Sets up the final popover with its class and inner HTML structure.
+     * The popover allows the user to preview or send the bug report after recording.
+     */
+    setFinalPopoverProps() {
+        this.finalPopover.className = 'mp-session-debugger-popover hidden';
+        insertTrustedHTML(this.finalPopover, finalPopoverTemplate(this.widgetTextOverrides));
+    }
+    /**
+     * Updates the popover button to reflect a loading state.
+     *
+     * When `isLoading` is true, the button is disabled and shows a loading message.
+     * When `isLoading` is false, the button is enabled and resets to its default label.
+     *
+     * @param isLoading - Whether the popover button should show a loading state.
+     */
+    setPopoverLoadingState(isLoading) {
+        const button = this.initialPopover.querySelector('.mp-session-debugger-popover-button');
+        if (!button) {
+            return;
+        }
+        button.classList.toggle('disabled', isLoading);
+        button.textContent = isLoading ? 'Starting to record...' : 'Start recording';
+    }
+    setTimerValue(time) {
+        const timerElement = this.recordingOverlay.querySelector('.timer');
+        if (!timerElement) {
+            return;
+        }
+        insertTrustedHTML(timerElement, time);
+    }
+    /**
+     * Sets the properties for the toast element, including its classes
+     */
+    setToastProps() {
+        this.toast.className = 'mp-toast hidden';
+    }
+    /**
+     * Shows a toast message with optional session URL
+     * @param message - The message to display
+     * @param sessionUrl - Optional URL to open when clicking the button
+     * @param duration - Duration in milliseconds to show the toast (default: 10000ms)
+     */
+    showToast(config, duration = 10000) {
+        var _a;
+        insertTrustedHTML(this.toast, toastTemplate(config));
+        this.toast.className = `mp-toast mp-toast-${config.type}`;
+        if ((_a = config.button) === null || _a === void 0 ? void 0 : _a.onClick) {
+            const button = this.toast.querySelector('.mp-toast-button');
+            button === null || button === void 0 ? void 0 : button.addEventListener('click', config.button.onClick);
+        }
+        if (this.toastTimeout) {
+            clearTimeout(this.toastTimeout);
+        }
+        this.toastTimeout = setTimeout(() => {
+            this.hideToast();
+        }, duration);
+    }
+    /**
+     * Hides the toast message
+     */
+    hideToast() {
+        this.toast.classList.add('hidden');
+        if (this.toastTimeout) {
+            clearTimeout(this.toastTimeout);
+        }
+    }
+}
+//# sourceMappingURL=UIManager.js.map

package/dist/sessionWidget/UIManager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UIManager.js","sourceRoot":"","sources":["../../src/sessionWidget/UIManager.ts"],"names":[],"mappings":"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"}

package/dist/sessionWidget/buttonStateConfigs.d.ts

@@ -0,0 +1,83 @@
+/**
+ * ButtonState defines the possible states of the recorder button.
+ * It includes IDLE, RECORDING, CANCEL, SENT and LOADING states.
+ */
+export declare enum ButtonState {
+    IDLE = "IDLE",
+    RECORDING = "RECORDING",
+    CANCEL = "CANCEL",
+    SENT = "SENT",
+    LOADING = "LOADING",
+    CONTINUOUS_DEBUGGING = "CONTINUOUS_DEBUGGING"
+}
+export declare enum ContinuousRecordingSaveButtonState {
+    IDLE = "IDLE",
+    SAVING = "SAVING",
+    SAVED = "SAVED",
+    ERROR = "ERROR"
+}
+/**
+ * buttonStates object provides properties for each button state:
+ * IDLE, RECORDING, CANCEL, and SENT.
+ */
+export declare const buttonStates: {
+    IDLE: {
+        icon: string;
+        tooltip: string;
+        classes: never[];
+        excludeClasses: string[];
+    };
+    RECORDING: {
+        icon: string;
+        tooltip: string;
+        classes: never[];
+        excludeClasses: string[];
+    };
+    CANCEL: {
+        icon: string;
+        tooltip: string;
+        classes: never[];
+        excludeClasses: string[];
+    };
+    SENT: {
+        icon: string;
+        tooltip: string;
+        classes: string[];
+        excludeClasses: string[];
+    };
+    LOADING: {
+        icon: string;
+        tooltip: string;
+        classes: never[];
+        excludeClasses: string[];
+    };
+    CONTINUOUS_DEBUGGING: {
+        icon: string;
+        tooltip: string;
+        classes: never[];
+        excludeClasses: string[];
+    };
+};
+export declare const continuousRecordingSaveButtonStates: {
+    IDLE: {
+        textContent: string;
+        disabled: boolean;
+        classes: never[];
+    };
+    SAVING: {
+        disabled: boolean;
+        textContent: string;
+        classes: never[];
+    };
+    SAVED: {
+        disabled: boolean;
+        textContent: string;
+        classes: never[];
+    };
+    ERROR: {
+        disabled: boolean;
+        textContent: string;
+        classes: never[];
+    };
+};
+//# sourceMappingURL=buttonStateConfigs.d.ts.map

package/dist/sessionWidget/buttonStateConfigs.js

@@ -0,0 +1,86 @@
+import { CapturingIcon, CheckmarkIcon, CloseIcon, RecordIcon } from './templates/icons';
+/**
+ * ButtonState defines the possible states of the recorder button.
+ * It includes IDLE, RECORDING, CANCEL, SENT and LOADING states.
+ */
+export var ButtonState;
+(function (ButtonState) {
+    ButtonState["IDLE"] = "IDLE";
+    ButtonState["RECORDING"] = "RECORDING";
+    ButtonState["CANCEL"] = "CANCEL";
+    ButtonState["SENT"] = "SENT";
+    ButtonState["LOADING"] = "LOADING";
+    ButtonState["CONTINUOUS_DEBUGGING"] = "CONTINUOUS_DEBUGGING";
+})(ButtonState || (ButtonState = {}));
+export var ContinuousRecordingSaveButtonState;
+(function (ContinuousRecordingSaveButtonState) {
+    ContinuousRecordingSaveButtonState["IDLE"] = "IDLE";
+    ContinuousRecordingSaveButtonState["SAVING"] = "SAVING";
+    ContinuousRecordingSaveButtonState["SAVED"] = "SAVED";
+    ContinuousRecordingSaveButtonState["ERROR"] = "ERROR";
+})(ContinuousRecordingSaveButtonState || (ContinuousRecordingSaveButtonState = {}));
+/**
+ * buttonStates object provides properties for each button state:
+ * IDLE, RECORDING, CANCEL, and SENT.
+ */
+export const buttonStates = {
+    [ButtonState.IDLE]: {
+        icon: RecordIcon,
+        tooltip: 'Record an issue',
+        classes: [],
+        excludeClasses: ['animate-rotate', 'mp-button-blue'],
+    },
+    [ButtonState.RECORDING]: {
+        icon: CapturingIcon,
+        tooltip: 'The session is recording. Click to end.',
+        classes: [],
+        excludeClasses: ['mp-button-blue', 'animate-rotate'],
+    },
+    [ButtonState.CANCEL]: {
+        icon: CloseIcon,
+        tooltip: 'Click to cancel',
+        classes: [],
+        excludeClasses: ['animate-rotate', 'mp-button-blue'],
+    },
+    [ButtonState.SENT]: {
+        icon: CheckmarkIcon,
+        tooltip: 'We\'ve sent it over! Thanks!',
+        classes: ['mp-button-blue'],
+        excludeClasses: ['animate-rotate'],
+    },
+    [ButtonState.LOADING]: {
+        icon: RecordIcon,
+        tooltip: 'Starting to record...',
+        classes: [],
+        excludeClasses: ['animate-rotate', 'mp-button-blue'],
+    },
+    [ButtonState.CONTINUOUS_DEBUGGING]: {
+        icon: CapturingIcon,
+        tooltip: 'You’re continuously recording.',
+        classes: [],
+        excludeClasses: ['mp-button-blue', 'animate-rotate'],
+    },
+};
+export const continuousRecordingSaveButtonStates = {
+    [ContinuousRecordingSaveButtonState.IDLE]: {
+        textContent: 'Save recording',
+        disabled: false,
+        classes: [],
+    },
+    [ContinuousRecordingSaveButtonState.SAVING]: {
+        disabled: true,
+        textContent: 'Saving recording...',
+        classes: [],
+    },
+    [ContinuousRecordingSaveButtonState.SAVED]: {
+        disabled: true,
+        textContent: 'Saved',
+        classes: [],
+    },
+    [ContinuousRecordingSaveButtonState.ERROR]: {
+        disabled: true,
+        textContent: 'Error saving the recording',
+        classes: [],
+    },
+};
+//# sourceMappingURL=buttonStateConfigs.js.map

package/dist/sessionWidget/buttonStateConfigs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"buttonStateConfigs.js","sourceRoot":"","sources":["../../src/sessionWidget/buttonStateConfigs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAA;AAEvF;;;GAGG;AACH,MAAM,CAAN,IAAY,WAOX;AAPD,WAAY,WAAW;IACrB,4BAAa,CAAA;IACb,sCAAuB,CAAA;IACvB,gCAAiB,CAAA;IACjB,4BAAa,CAAA;IACb,kCAAmB,CAAA;IACnB,4DAA6C,CAAA;AAC/C,CAAC,EAPW,WAAW,KAAX,WAAW,QAOtB;AAED,MAAM,CAAN,IAAY,kCAKX;AALD,WAAY,kCAAkC;IAC5C,mDAAa,CAAA;IACb,uDAAiB,CAAA;IACjB,qDAAe,CAAA;IACf,qDAAe,CAAA;AACjB,CAAC,EALW,kCAAkC,KAAlC,kCAAkC,QAK7C;AAED;;;GAGG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE;QAClB,IAAI,EAAE,UAAU;QAChB,OAAO,EAAE,iBAAiB;QAC1B,OAAO,EAAE,EAAE;QACX,cAAc,EAAE,CAAC,gBAAgB,EAAE,gBAAgB,CAAC;KACrD;IACD,CAAC,WAAW,CAAC,SAAS,CAAC,EAAE;QACvB,IAAI,EAAE,aAAa;QACnB,OAAO,EAAE,yCAAyC;QAClD,OAAO,EAAE,EAAE;QACX,cAAc,EAAE,CAAC,gBAAgB,EAAE,gBAAgB,CAAC;KACrD;IACD,CAAC,WAAW,CAAC,MAAM,CAAC,EAAE;QACpB,IAAI,EAAE,SAAS;QACf,OAAO,EAAE,iBAAiB;QAC1B,OAAO,EAAE,EAAE;QACX,cAAc,EAAE,CAAC,gBAAgB,EAAE,gBAAgB,CAAC;KACrD;IACD,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE;QAClB,IAAI,EAAE,aAAa;QACnB,OAAO,EAAE,8BAA8B;QACvC,OAAO,EAAE,CAAC,gBAAgB,CAAC;QAC3B,cAAc,EAAE,CAAC,gBAAgB,CAAC;KACnC;IACD,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE;QACrB,IAAI,EAAE,UAAU;QAChB,OAAO,EAAE,uBAAuB;QAChC,OAAO,EAAE,EAAE;QACX,cAAc,EAAE,CAAC,gBAAgB,EAAE,gBAAgB,CAAC;KACrD;IACD,CAAC,WAAW,CAAC,oBAAoB,CAAC,EAAE;QAClC,IAAI,EAAE,aAAa;QACnB,OAAO,EAAE,gCAAgC;QACzC,OAAO,EAAE,EAAE;QACX,cAAc,EAAE,CAAC,gBAAgB,EAAE,gBAAgB,CAAC;KACrD;CACF,CAAA;AAED,MAAM,CAAC,MAAM,mCAAmC,GAAG;IACjD,CAAC,kCAAkC,CAAC,IAAI,CAAC,EAAE;QACzC,WAAW,EAAE,gBAAgB;QAC7B,QAAQ,EAAE,KAAK;QACf,OAAO,EAAE,EAAE;KACZ;IACD,CAAC,kCAAkC,CAAC,MAAM,CAAC,EAAE;QAC3C,QAAQ,EAAE,IAAI;QACd,WAAW,EAAE,qBAAqB;QAClC,OAAO,EAAE,EAAE;KACZ;IACD,CAAC,kCAAkC,CAAC,KAAK,CAAC,EAAE;QAC1C,QAAQ,EAAE,IAAI;QACd,WAAW,EAAE,OAAO;QACpB,OAAO,EAAE,EAAE;KACZ;IACD,CAAC,kCAAkC,CAAC,KAAK,CAAC,EAAE;QAC1C,QAAQ,EAAE,IAAI;QACd,WAAW,EAAE,4BAA4B;QACzC,OAAO,EAAE,EAAE;KACZ;CACF,CAAA"}

package/dist/sessionWidget/constants.d.ts

@@ -0,0 +1,5 @@
+export declare const POPOVER_WIDTH = 300;
+export declare const NON_DRAGGABLE_OFFSET = 10;
+export declare const POPOVER_DISTANCE_FROM_BUTTON = 25;
+export declare const POSITION_STATE_KEY = "mp-recorder-button-position";
+//# sourceMappingURL=constants.d.ts.map

package/dist/sessionWidget/constants.js

@@ -0,0 +1,5 @@
+export const POPOVER_WIDTH = 300;
+export const NON_DRAGGABLE_OFFSET = 10;
+export const POPOVER_DISTANCE_FROM_BUTTON = 25;
+export const POSITION_STATE_KEY = 'mp-recorder-button-position';
+//# sourceMappingURL=constants.js.map

package/dist/sessionWidget/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../src/sessionWidget/constants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAA;AAChC,MAAM,CAAC,MAAM,oBAAoB,GAAG,EAAE,CAAA;AACtC,MAAM,CAAC,MAAM,4BAA4B,GAAG,EAAE,CAAA;AAC9C,MAAM,CAAC,MAAM,kBAAkB,GAAG,6BAA6B,CAAA"}

package/dist/sessionWidget/dragManager.d.ts

@@ -0,0 +1,16 @@
+export declare class DragManager {
+    private isDragging;
+    private dragStarted;
+    private isOnLeftHalfOfScreen;
+    private recorderButton;
+    private recorderPlacement;
+    private onDragEnd;
+    private updatePopoverPosition;
+    private onRecordingButtonClick;
+    constructor(recorderButton: HTMLButtonElement, recorderPlacement: string, onDragEnd?: (isDragging: boolean, isDragStarted: boolean, isOnLeftHalfOfScreen: boolean) => void, updatePopoverPosition?: () => void, onRecordingButtonClick?: (e: MouseEvent) => void);
+    init(): void;
+    private loadStoredPosition;
+    private savePosition;
+    private setupDragListeners;
+}
+//# sourceMappingURL=dragManager.d.ts.map

package/dist/sessionWidget/dragManager.js

@@ -0,0 +1,114 @@
+import { POSITION_STATE_KEY } from './constants';
+export class DragManager {
+    constructor(recorderButton, recorderPlacement, onDragEnd = () => { }, updatePopoverPosition = () => { }, onRecordingButtonClick = () => { }) {
+        this.isDragging = false;
+        this.dragStarted = false;
+        this.isOnLeftHalfOfScreen = false;
+        this.recorderButton = recorderButton;
+        this.recorderPlacement = recorderPlacement;
+        this.onDragEnd = onDragEnd;
+        this.updatePopoverPosition = updatePopoverPosition;
+        this.onRecordingButtonClick = onRecordingButtonClick;
+    }
+    init() {
+        this.loadStoredPosition();
+        this.setupDragListeners();
+    }
+    loadStoredPosition() {
+        const savedPosition = localStorage.getItem(POSITION_STATE_KEY);
+        if (!savedPosition) {
+            return;
+        }
+        let { right, bottom } = JSON.parse(savedPosition);
+        if (right == null || bottom == null) {
+            return;
+        }
+        // Check for old stored values (decimals) from localStorage
+        const isStoredAsDecimal = right > 0 && right <= 1 && bottom > 0 && bottom <= 1;
+        if (isStoredAsDecimal) {
+            right = right * window.innerWidth;
+            bottom = bottom * window.innerHeight;
+        }
+        else {
+            right = (right / 100) * window.innerWidth;
+            bottom = (bottom / 100) * window.innerHeight;
+        }
+        right = Math.min(Math.max(right, 0), window.innerWidth);
+        bottom = Math.min(Math.max(bottom, 0), window.innerHeight);
+        requestAnimationFrame(() => {
+            this.recorderButton.classList.remove(this.recorderPlacement);
+            this.recorderButton.style.right = `${right}px`;
+            this.recorderButton.style.bottom = `${bottom}px`;
+            this.isOnLeftHalfOfScreen = right > window.innerWidth / 2;
+            this.recorderButton.classList.toggle('button-leftside', this.isOnLeftHalfOfScreen);
+            this.updatePopoverPosition();
+        });
+    }
+    savePosition(r, b) {
+        const right = (r / window.innerWidth) * 100;
+        const bottom = (b / window.innerHeight) * 100;
+        localStorage.setItem(POSITION_STATE_KEY, JSON.stringify({ right, bottom }));
+    }
+    setupDragListeners() {
+        this.recorderButton.addEventListener('mousedown', (e) => {
+            const onMouseUp = () => {
+                const isDraggable = !this.recorderButton.classList.contains('no-draggable');
+                if (this.isDragging || !isDraggable) {
+                    this.recorderButton.classList.toggle('button-leftside', this.isOnLeftHalfOfScreen);
+                    this.isDragging = false;
+                    document.body.style.userSelect = '';
+                    if (isDraggable) {
+                        const finalRight = parseFloat(this.recorderButton.style.right);
+                        const finalBottom = parseFloat(this.recorderButton.style.bottom);
+                        this.savePosition(finalRight, finalBottom);
+                        document.removeEventListener('mousemove', onMouseMove);
+                    }
+                    if (!this.dragStarted) {
+                        this.updatePopoverPosition();
+                        this.onRecordingButtonClick(e);
+                    }
+                    this.onDragEnd(this.isDragging, this.dragStarted, this.isOnLeftHalfOfScreen);
+                }
+                this.recorderButton.classList.remove('no-hover');
+                document.removeEventListener('mouseup', onMouseUp);
+            };
+            if (this.recorderButton.classList.contains('no-draggable')) {
+                this.isDragging = false;
+                this.dragStarted = false;
+                document.addEventListener('mouseup', onMouseUp);
+                return;
+            }
+            this.recorderButton.classList.add('no-hover');
+            this.isDragging = true;
+            this.dragStarted = false;
+            const startX = e.clientX;
+            const startY = e.clientY;
+            const buttonRect = this.recorderButton.getBoundingClientRect();
+            const viewportWidth = window.innerWidth;
+            const viewportHeight = window.innerHeight;
+            const onMouseMove = (moveEvent) => {
+                const deltaX = moveEvent.clientX - startX;
+                const deltaY = moveEvent.clientY - startY;
+                // If mouse moved significantly, consider it a drag
+                if (Math.abs(deltaX) > 3 || Math.abs(deltaY) > 3) {
+                    this.dragStarted = true;
+                    this.recorderButton.classList.remove(this.recorderPlacement);
+                    const newLeft = Math.max(0, Math.min(viewportWidth - buttonRect.width, buttonRect.left + deltaX));
+                    const newTop = Math.max(0, Math.min(viewportHeight - buttonRect.height, buttonRect.top + deltaY));
+                    const newRight = viewportWidth - newLeft - buttonRect.width;
+                    const newBottom = viewportHeight - newTop - buttonRect.height;
+                    this.isOnLeftHalfOfScreen = newRight > viewportWidth / 2;
+                    requestAnimationFrame(() => {
+                        this.recorderButton.style.right = `${newRight}px`;
+                        this.recorderButton.style.bottom = `${newBottom}px`;
+                    });
+                }
+            };
+            document.addEventListener('mousemove', onMouseMove);
+            document.addEventListener('mouseup', onMouseUp);
+            document.body.style.userSelect = 'none';
+            e.preventDefault();
+        });
+    }
+}
+//# sourceMappingURL=dragManager.js.map

package/dist/sessionWidget/dragManager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dragManager.js","sourceRoot":"","sources":["../../src/sessionWidget/dragManager.ts"],"names":[],"mappings":"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"}

package/dist/sessionWidget/index.d.ts

@@ -0,0 +1,86 @@
+import 'rrweb-player/dist/style.css';
+import { Observable } from 'lib0/observable';
+import { SessionWidgetConfig, SessionState, ToastConfig } from '../types';
+import { ButtonState, ContinuousRecordingSaveButtonState } from './buttonStateConfigs';
+type SessionWidgetEvents = 'toggle' | 'pause' | 'resume' | 'cancel' | 'continuous-debugging' | 'save';
+export declare class SessionWidget extends Observable<SessionWidgetEvents> {
+    readonly recorderButton: HTMLButtonElement;
+    private readonly initialPopover;
+    private readonly finalPopover;
+    private readonly overlay;
+    private readonly submitSessionDialog;
+    private readonly toast;
+    private _isStarted;
+    private _isPaused;
+    private _isInitialized;
+    private _recorderPlacement;
+    private _error;
+    private _initialPopoverVisible;
+    private _finalPopoverVisible;
+    private _buttonState;
+    private _continuousRecording;
+    private _showContinuousRecording;
+    private _widgetTextOverrides;
+    private uiManager;
+    private readonly commentTextarea;
+    private buttonDraggabilityObserver;
+    private dragManager;
+    buttonClickExternalHandler: (() => boolean | void) | null;
+    showRecorderButton: boolean;
+    timerInterval: any;
+    seconds: number;
+    set buttonState(newState: ButtonState);
+    private set initialPopoverVisible(value);
+    private set finalPopoverVisible(value);
+    get error(): string;
+    set error(v: string);
+    set isStarted(v: boolean);
+    set isPaused(v: boolean);
+    constructor();
+    updateState(state: SessionState | null, continuousRecording: boolean): void;
+    updateContinuousRecordingState(checked: boolean, disabled?: boolean): void;
+    updateSaveContinuousDebugSessionState(state: ContinuousRecordingSaveButtonState): void;
+    /**
+     * Shows a toast message with optional action button
+     * @param config - The toast configuration including message, type, and optional button
+     * @param duration - Duration in milliseconds to show the toast (default: 10000ms)
+     */
+    showToast(config: ToastConfig, duration?: number): void;
+    /**
+     * Hides the currently displayed toast message
+     */
+    hideToast(): void;
+    private handleClickOutside;
+    private observeButtonDraggableMode;
+    init(options: SessionWidgetConfig): void;
+    private appendElements;
+    private addRecorderDragFunctionality;
+    private updatePopoverPosition;
+    private addEventListeners;
+    private handleStopRecording;
+    handleUIReseting(): void;
+    private handleCloseInitialPopover;
+    private handleCloseFinalPopover;
+    onRequestError(): void;
+    private handleDismissRecording;
+    private resetRecordingButton;
+    private addListener;
+    private onRecordingButtonClick;
+    private updateButton;
+    private handleContinuousRecordingChange;
+    private handleSaveContinuousDebugSession;
+    private startRecording;
+    private onStart;
+    private onStop;
+    private onPause;
+    private onResume;
+    private onCancel;
+    enable(): void;
+    disable(): void;
+    destroy(): void;
+    startTimer(): void;
+    stopTimer(): void;
+    makeOverlayDraggable(): void;
+}
+export {};
+//# sourceMappingURL=index.d.ts.map