import { eventWithTime } from 'rrweb'; import React from 'react'; /** * User identification information */ interface UserIdentification { /** * User ID for identified users */ userId?: string; /** * Anonymous ID for tracking before identification */ anonymousId?: string; /** * Organization or account ID */ organizationId?: string; /** * Additional user attributes */ userAttributes?: Record; } /** * Configuration options for the Sessionable SDK */ interface SessionableOptions { /** * Your Sessionable API key */ apiKey: string; /** * Custom metadata to include with each session * @default {} */ metadata?: Record; /** * Whether to mask input fields (passwords, text inputs, etc.) * @default false */ maskInputs?: boolean; /** * CSS selector for text content that should be masked * When provided, any text matching this selector will be masked in recordings * Example: '.sensitive-data, [data-mask]' * @default undefined */ maskTextSelector?: string; /** * Enable or disable device ID generation using browser fingerprinting * When true, uses FingerprintJS to generate a consistent device ID based on browser characteristics * When false, falls back to a random UUID for anonymous tracking * @default true */ enableDeviceId?: boolean; /** * Initial user identification */ user?: UserIdentification; /** * API endpoint base URL * @default "https://sessionable.pages.dev" for production * Use "http://localhost:5173" for local development */ apiEndpoint?: string; /** * Enable development mode (uses localhost endpoints) * @default false */ devMode?: boolean; /** * Whether to start recording automatically * @default false */ autoStart?: boolean; } /** * Session metrics and status information */ interface SessionMetrics { /** * Unique ID for this session */ sessionId: string; /** * Total number of events recorded in this session */ eventsRecorded: number; /** * Number of batches sent to the server */ batchesSent: number; /** * Number of batches successfully uploaded */ batchesSuccessful: number; /** * Current connection status with the API */ connectionStatus: 'connected' | 'disconnected' | 'connecting' | 'error'; /** * Last error message if any */ lastError: string | null; /** * Size of the last batch sent */ lastBatchSize: number; /** * Timestamp of the last successful upload */ lastSuccessfulUpload: Date | null; /** * Timestamp when recording started */ recordingStartTime: Date; /** * Whether recording is currently active */ isRecording: boolean; } /** * Payload sent to the Sessionable API */ interface SessionPayload { /** * Unique ID for this session */ session_id: string; /** * Array of recorded events */ events: eventWithTime[]; /** * Metadata associated with this session */ metadata: Record; /** * Anonymous ID for tracking before identification * Required in the new identity system */ anonymous_id: string; /** * User ID for identified users */ user_id?: string; /** * Organization or account ID */ organization_id?: string; /** * Additional user attributes */ user_attributes?: Record; } /** * Interface for the SessionRecorder callback */ interface SessionRecorderHandle { /** * The Sessionable instance (using any to avoid circular dependency) */ instance: any; /** * Method to identify a user */ identifyUser: (userId: string, options?: { organizationId?: string; userAttributes?: Record; }) => void; /** * Method to start recording */ startRecording: () => Promise; /** * Method to stop recording */ stopRecording: () => void; /** * Method to get current metrics */ getMetrics: () => SessionMetrics; /** * Method to get the anonymous ID */ getAnonymousId: () => string | undefined; } /** * Props for the React SessionRecorder component */ interface SessionRecorderProps extends SessionableOptions { /** * Optional children to render */ children?: React.ReactNode; /** * Callback when the Sessionable instance is initialized * This provides access to the instance and convenience methods */ onInstanceReady?: (handle: SessionRecorderHandle) => void; } export type { SessionableOptions as S, SessionMetrics as a, SessionPayload as b, SessionRecorderProps as c };