@wabbit-dashboard/embed 1.0.0

package/dist/wabbit-embed.d.ts

@@ -0,0 +1,926 @@
+/**
+ * Type definitions for Wabbit Embed SDK
+ */
+/**
+ * Chat widget configuration
+ *
+ * Note: apiKey and apiUrl are inherited from WabbitConfig
+ * They can be overridden here if needed for chat-specific configuration
+ */
+interface ChatConfig {
+    enabled: boolean;
+    collectionId: string;
+    apiKey?: string;
+    apiUrl?: string;
+    wsUrl?: string;
+    position?: 'bottom-right' | 'bottom-left';
+    triggerType?: 'button' | 'auto' | 'scroll';
+    triggerDelay?: number;
+    theme?: 'auto' | 'light' | 'dark';
+    primaryColor?: string;
+    welcomeMessage?: string;
+    placeholder?: string;
+}
+/**
+ * Form field types
+ */
+type FormFieldType = 'text' | 'email' | 'number' | 'textarea' | 'select' | 'radio' | 'checkbox' | 'rating';
+/**
+ * Form field definition
+ */
+interface FormField {
+    id: string;
+    type: FormFieldType;
+    label: string;
+    placeholder?: string;
+    required: boolean;
+    options?: string[];
+    max?: number;
+}
+/**
+ * Form settings
+ */
+interface FormSettings {
+    successMessage?: string;
+}
+/**
+ * Form definition from API
+ */
+interface FormDefinition {
+    formId: string;
+    name?: string;
+    fields: FormField[];
+    settings: FormSettings;
+}
+/**
+ * Form submission response
+ */
+interface FormSubmissionResponse {
+    success: boolean;
+    message?: string;
+    error?: string;
+    submissionId?: string;
+}
+/**
+ * Form widget configuration
+ *
+ * Note: apiKey and apiUrl are inherited from WabbitConfig
+ * They can be overridden here if needed for form-specific configuration
+ */
+interface FormConfig {
+    enabled: boolean;
+    containerId?: string;
+    formId: string;
+    apiKey?: string;
+    apiUrl?: string;
+    theme?: 'auto' | 'light' | 'dark';
+    primaryColor?: string;
+    onSubmit?: (data: Record<string, any>, submissionId?: string) => void;
+    onError?: (error: Error) => void;
+    onLoad?: () => void;
+}
+/**
+ * Email capture configuration
+ */
+interface EmailCaptureConfig {
+    enabled: boolean;
+    triggerAfterMessages?: number;
+    title?: string;
+    description?: string;
+    fields?: ('email' | 'name' | 'company')[];
+    onCapture?: (data: Record<string, string>) => void;
+}
+/**
+ * Global SDK configuration
+ */
+interface WabbitConfig {
+    apiKey: string;
+    apiUrl?: string;
+    wsUrl?: string;
+    chat?: ChatConfig;
+    forms?: FormConfig;
+    emailCapture?: EmailCaptureConfig;
+    onReady?: () => void;
+    onError?: (error: Error) => void;
+}
+
+/**
+ * Main Wabbit SDK class
+ *
+ * This is the main entry point for initializing and managing
+ * all Wabbit widgets (chat, forms, email capture).
+ */
+
+/**
+ * Wabbit SDK main class
+ */
+declare class Wabbit {
+    private static instance;
+    private config;
+    private constructor();
+    /**
+     * Initialize the Wabbit SDK
+     *
+     * @param config - SDK configuration
+     * @returns Wabbit instance
+     *
+     * @example
+     * ```typescript
+     * const wabbit = Wabbit.init({
+     *   apiKey: 'pk_live_xxx',
+     *   chat: { enabled: true, collectionId: 'abc123' }
+     * });
+     * ```
+     */
+    static init(config: WabbitConfig): Wabbit;
+    /**
+     * Get the current Wabbit instance
+     *
+     * @returns Wabbit instance or null if not initialized
+     */
+    static getInstance(): Wabbit | null;
+    /**
+     * Destroy the SDK instance and cleanup
+     */
+    static destroy(): void;
+    /**
+     * Get current configuration
+     */
+    getConfig(): WabbitConfig;
+    private chatWidget;
+    private formsWidget;
+    private emailCaptureWidget;
+    /**
+     * Get chat widget instance
+     */
+    get chat(): any;
+    /**
+     * Get forms widget instance
+     */
+    get forms(): any;
+    /**
+     * Get email capture widget instance
+     */
+    get emailCapture(): any;
+    /**
+     * Initialize legacy forms (backward compatibility)
+     *
+     * Automatically initializes forms with data-wabbit-form-id attribute
+     * This maintains compatibility with the old embed-form.js script
+     */
+    private initLegacyForms;
+    /**
+     * Initialize legacy forms when DOM is ready
+     */
+    private initLegacyFormsOnReady;
+    /**
+     * Setup observer for dynamically added legacy forms
+     */
+    private setupLegacyFormObserver;
+}
+
+/**
+ * Chat Widget - Main class that integrates all chat components
+ */
+
+declare class ChatWidget {
+    private config;
+    private wsClient;
+    private bubble;
+    private panel;
+    private isOpen;
+    private cleanup;
+    private themeCleanup;
+    constructor(config: ChatConfig);
+    /**
+     * Initialize the chat widget
+     */
+    init(): Promise<void>;
+    /**
+     * Setup WebSocket event handlers
+     */
+    private setupWebSocketHandlers;
+    /**
+     * Handle trigger type configuration
+     */
+    private handleTriggerType;
+    /**
+     * Get WebSocket URL
+     */
+    private getWebSocketUrl;
+    /**
+     * Handle send message
+     * Made public so EmailCaptureWidget can hook into it
+     */
+    handleSendMessage(content: string): void;
+    /**
+     * Open the chat panel
+     */
+    open(): void;
+    /**
+     * Close the chat panel
+     */
+    close(): void;
+    /**
+     * Toggle chat panel
+     */
+    toggle(): void;
+    /**
+     * Send a message programmatically
+     */
+    sendMessage(content: string): void;
+    /**
+     * Setup theme watcher for 'auto' theme mode
+     */
+    private setupThemeWatcher;
+    /**
+     * Destroy the widget and cleanup
+     */
+    destroy(): void;
+}
+
+/**
+ * WebSocket client for chat functionality
+ *
+ * Based on demo-website/src/lib/websocket.ts but without React dependencies
+ */
+type ConnectionStatus = 'disconnected' | 'connecting' | 'connected' | 'reconnecting';
+interface Message {
+    id: string;
+    role: 'user' | 'assistant' | 'system';
+    content: string;
+    timestamp: Date;
+    metadata?: any;
+}
+declare class ChatWebSocketClient {
+    private ws;
+    private apiKey;
+    private sessionId;
+    private status;
+    private reconnectAttempts;
+    private maxReconnectAttempts;
+    private reconnectDelay;
+    private wsUrl;
+    onStatusChange: ((status: ConnectionStatus) => void) | null;
+    onWelcome: ((sessionId: string, collectionId: string, message: string) => void) | null;
+    onMessage: ((message: Message) => void) | null;
+    onMessageHistory: ((messages: Message[]) => void) | null;
+    onError: ((error: string) => void) | null;
+    onDisconnect: (() => void) | null;
+    constructor(apiKey: string, wsUrl: string, sessionId?: string | null);
+    private setStatus;
+    getStatus(): ConnectionStatus;
+    connect(): Promise<void>;
+    private handleMessage;
+    sendMessage(content: string, metadata?: any): void;
+    disconnect(): void;
+    private attemptReconnect;
+    clearSession(): void;
+    getStoredSessionId(): string | null;
+}
+
+/**
+ * Chat Bubble - Floating button component
+ */
+type ChatBubblePosition = 'bottom-right' | 'bottom-left';
+interface ChatBubbleOptions {
+    position: ChatBubblePosition;
+    onClick: () => void;
+}
+declare class ChatBubble {
+    private element;
+    private options;
+    constructor(options: ChatBubbleOptions);
+    /**
+     * Create and render the bubble
+     */
+    render(): HTMLElement;
+    /**
+     * Show the bubble
+     */
+    show(): void;
+    /**
+     * Hide the bubble
+     */
+    hide(): void;
+    /**
+     * Remove the bubble from DOM
+     */
+    destroy(): void;
+}
+
+/**
+ * Chat Panel - Expandable chat window component
+ */
+
+type ChatPanelPosition = 'bottom-right' | 'bottom-left';
+interface ChatPanelOptions {
+    position: ChatPanelPosition;
+    welcomeMessage?: string;
+    placeholder?: string;
+    onSendMessage: (content: string) => void;
+    onClose: () => void;
+    disabled?: boolean;
+}
+declare class ChatPanel {
+    private element;
+    private messagesContainer;
+    private inputElement;
+    private sendButton;
+    private options;
+    private messages;
+    private isWaitingForResponse;
+    constructor(options: ChatPanelOptions);
+    /**
+     * Create and render the panel
+     */
+    render(): HTMLElement;
+    /**
+     * Add a message to the panel
+     */
+    addMessage(message: Message): void;
+    /**
+     * Add multiple messages
+     */
+    setMessages(messages: Message[]): void;
+    /**
+     * Add system message
+     */
+    addSystemMessage(content: string): void;
+    /**
+     * Set waiting for response state
+     */
+    setWaitingForResponse(waiting: boolean): void;
+    /**
+     * Set disabled state
+     */
+    setDisabled(disabled: boolean): void;
+    /**
+     * Render a single message
+     */
+    private renderMessage;
+    /**
+     * Format message content (simple markdown-like)
+     */
+    private formatMessage;
+    /**
+     * Handle send message
+     */
+    private handleSend;
+    /**
+     * Update send button state
+     */
+    private updateSendButtonState;
+    /**
+     * Scroll to bottom of messages
+     */
+    private scrollToBottom;
+    /**
+     * Show the panel
+     */
+    show(): void;
+    /**
+     * Hide the panel
+     */
+    hide(): void;
+    /**
+     * Remove the panel from DOM
+     */
+    destroy(): void;
+}
+
+/**
+ * Form Widget
+ *
+ * Main class for managing form widgets
+ */
+
+/**
+ * Form Widget class
+ */
+declare class FormWidget {
+    private config;
+    private container;
+    private formElement;
+    private styles;
+    private renderer;
+    private apiClient;
+    private currentTheme;
+    private themeCleanup;
+    private formObserver;
+    constructor(config: FormConfig);
+    /**
+     * Initialize the form widget
+     */
+    init(): void;
+    /**
+     * Load and render form
+     */
+    private loadForm;
+    /**
+     * Find container element
+     */
+    private findContainer;
+    /**
+     * Attach form submit handler
+     */
+    private attachSubmitHandler;
+    /**
+     * Setup rating field interactions
+     */
+    private setupRatingInteractions;
+    /**
+     * Update rating star colors
+     */
+    private updateRatingStars;
+    /**
+     * Handle form submission
+     */
+    private handleSubmit;
+    /**
+     * Format error message to be user-friendly
+     * Removes HTTP status codes and technical details
+     */
+    private formatErrorMessage;
+    /**
+     * Show success message
+     */
+    private showSuccess;
+    /**
+     * Show error message
+     */
+    private showError;
+    /**
+     * Setup theme watcher
+     */
+    private setupThemeWatcher;
+    /**
+     * Update form theme
+     */
+    private updateFormTheme;
+    /**
+     * Calculate hover color (darker by 10%)
+     */
+    private calculateHoverColor;
+    /**
+     * Get API URL from script tag (for backward compatibility)
+     */
+    private getApiUrlFromScript;
+    /**
+     * Destroy the form widget
+     */
+    destroy(): void;
+}
+
+/**
+ * Theme detection utilities
+ */
+type Theme = 'light' | 'dark';
+/**
+ * Detect current theme from the page
+ *
+ * Simple detection:
+ * 1. Check data-theme attribute (explicit setting)
+ * 2. Check dark class (common pattern)
+ * 3. Default to light (most pages are light)
+ *
+ * Note: We default to 'light' instead of checking system preference
+ * because most web pages are light-themed, and it's better to have
+ * readable dark text on light background than light text on light background.
+ *
+ * @returns Current theme ('light' or 'dark')
+ */
+declare function detectTheme(): Theme;
+/**
+ * Watch for theme changes
+ *
+ * @param callback - Callback to execute when theme changes
+ * @returns Cleanup function
+ */
+declare function watchTheme(callback: (theme: Theme) => void): () => void;
+
+/**
+ * Form styles management
+ *
+ * Handles theme-aware styling and dynamic style injection
+ */
+
+/**
+ * Theme color schemes for forms
+ */
+interface ThemeColors {
+    formBg: string;
+    labelColor: string;
+    inputBg: string;
+    inputText: string;
+    inputBorder: string;
+    inputBorderFocus: string;
+    placeholderColor: string;
+    radioColor: string;
+    ratingInactive: string;
+    errorBg: string;
+    errorColor: string;
+    errorBorder: string;
+    successBg: string;
+    successColor: string;
+    successBorder: string;
+    buttonBg: string;
+    buttonBgHover: string;
+}
+/**
+ * Form styles manager
+ */
+declare class FormStyles {
+    private styleElement;
+    private currentTheme;
+    private styleId;
+    private _primaryColor;
+    /**
+     * Theme color schemes
+     */
+    private themes;
+    constructor(primaryColor?: string, containerId?: string);
+    /**
+     * Get current theme colors
+     */
+    getColors(theme?: Theme): ThemeColors;
+    /**
+     * Update theme
+     */
+    updateTheme(theme: Theme): void;
+    /**
+     * Update primary color
+     */
+    updatePrimaryColor(color: string): void;
+    /**
+     * Get primary color (for reference)
+     */
+    getPrimaryColor(): string;
+    /**
+     * Darken a color by a percentage
+     */
+    private darkenColor;
+    /**
+     * Inject styles into document
+     */
+    private injectStyles;
+    /**
+     * Generate CSS for form styles
+     */
+    private generateCSS;
+    /**
+     * Cleanup styles
+     */
+    destroy(): void;
+}
+
+/**
+ * Form renderer
+ *
+ * Handles rendering form HTML from form definition
+ */
+
+/**
+ * Form renderer class
+ */
+declare class FormRenderer {
+    private styles;
+    constructor(styles: FormStyles);
+    /**
+     * Render form HTML
+     */
+    render(formData: FormDefinition, theme: Theme): string;
+    /**
+     * Render a single field
+     */
+    private renderField;
+    /**
+     * Render text input field
+     */
+    private renderTextInput;
+    /**
+     * Render textarea field
+     */
+    private renderTextarea;
+    /**
+     * Render select field
+     */
+    private renderSelect;
+    /**
+     * Render radio group
+     */
+    private renderRadio;
+    /**
+     * Render checkbox group
+     */
+    private renderCheckbox;
+    /**
+     * Render rating field
+     */
+    private renderRating;
+}
+
+/**
+ * API client for making HTTP requests
+ */
+/**
+ * API client options
+ */
+interface ApiClientOptions {
+    baseUrl: string;
+    apiKey: string;
+    timeout?: number;
+}
+/**
+ * Request options for API calls
+ */
+interface RequestOptions {
+    /**
+     * Whether to include API key in headers (default: true)
+     * Set to false for public endpoints like form definitions
+     */
+    requireAuth?: boolean;
+}
+/**
+ * API response wrapper
+ */
+interface ApiResponse<T = any> {
+    success: boolean;
+    data?: T;
+    error?: string;
+    message?: string;
+}
+/**
+ * API client class
+ */
+declare class ApiClient {
+    private baseUrl;
+    private apiKey;
+    private timeout;
+    constructor(options: ApiClientOptions);
+    /**
+     * Make a GET request
+     *
+     * @param endpoint - API endpoint path
+     * @param options - Request options (e.g., requireAuth)
+     */
+    get<T = any>(endpoint: string, options?: RequestOptions): Promise<ApiResponse<T>>;
+    /**
+     * Make a POST request
+     *
+     * @param endpoint - API endpoint path
+     * @param data - Request body data
+     * @param options - Request options (e.g., requireAuth)
+     */
+    post<T = any>(endpoint: string, data?: any, options?: RequestOptions): Promise<ApiResponse<T>>;
+    /**
+     * Make a request
+     */
+    private request;
+}
+
+/**
+ * Simple event emitter for SDK
+ */
+type EventHandler = (...args: any[]) => void;
+/**
+ * Simple event emitter class
+ */
+declare class EventEmitter {
+    private events;
+    /**
+     * Subscribe to an event
+     */
+    on(event: string, handler: EventHandler): void;
+    /**
+     * Unsubscribe from an event
+     */
+    off(event: string, handler: EventHandler): void;
+    /**
+     * Emit an event
+     */
+    emit(event: string, ...args: any[]): void;
+    /**
+     * Remove all listeners for an event
+     */
+    removeAllListeners(event?: string): void;
+    /**
+     * Get listener count for an event
+     */
+    listenerCount(event: string): number;
+}
+
+/**
+ * Configuration management utilities
+ */
+
+/**
+ * Validate SDK configuration
+ *
+ * @param config - Configuration to validate
+ * @throws {Error} If configuration is invalid
+ */
+declare function validateConfig(config: Partial<WabbitConfig>): void;
+/**
+ * Merge configuration with defaults
+ *
+ * @param config - User configuration
+ * @returns Merged configuration with defaults
+ */
+declare function mergeConfig(config: WabbitConfig): WabbitConfig;
+
+/**
+ * DOM utility functions
+ */
+/**
+ * Escape HTML to prevent XSS attacks
+ *
+ * @param text - Text to escape
+ * @returns Escaped HTML string
+ */
+declare function escapeHtml(text: string): string;
+/**
+ * Wait for DOM to be ready
+ *
+ * @param callback - Callback to execute when DOM is ready
+ */
+declare function onDOMReady(callback: () => void): void;
+/**
+ * Create a DOM element with attributes
+ *
+ * @param tag - HTML tag name
+ * @param attributes - Element attributes
+ * @param children - Child elements or text
+ * @returns Created element
+ */
+declare function createElement(tag: string, attributes?: Record<string, string>, children?: (Node | string)[]): HTMLElement;
+
+/**
+ * localStorage wrapper with type safety
+ */
+/**
+ * Storage interface
+ */
+interface Storage {
+    getItem(key: string): string | null;
+    setItem(key: string, value: string): void;
+    removeItem(key: string): void;
+    clear(): void;
+    length?: number;
+    key?: (index: number) => string | null;
+}
+/**
+ * Safe storage wrapper
+ */
+declare class SafeStorage {
+    private storage;
+    private prefix;
+    constructor(storage?: Storage, prefix?: string);
+    /**
+     * Get item from storage
+     */
+    get<T = any>(key: string): T | null;
+    /**
+     * Set item in storage
+     */
+    set<T = any>(key: string, value: T): boolean;
+    /**
+     * Remove item from storage
+     */
+    remove(key: string): void;
+    /**
+     * Clear all items with prefix
+     */
+    clear(): void;
+}
+declare const storage: SafeStorage;
+
+/**
+ * Email Capture Modal Component
+ *
+ * Vanilla JavaScript implementation of the email capture modal
+ */
+
+interface EmailCaptureData {
+    email: string;
+    name?: string;
+    company?: string;
+}
+declare class EmailCaptureModal {
+    private config;
+    private overlay;
+    private modal;
+    private isOpen;
+    private onSubmitCallback?;
+    private onDismissCallback?;
+    constructor(config: EmailCaptureConfig);
+    /**
+     * Show the email capture modal
+     */
+    show(onSubmit: (data: EmailCaptureData, dontShowAgain: boolean) => Promise<void>, onDismiss?: () => void): void;
+    /**
+     * Hide the email capture modal
+     */
+    hide(): void;
+    /**
+     * Render the modal
+     */
+    private render;
+    /**
+     * Render a form field
+     */
+    private renderField;
+    /**
+     * Attach event listeners
+     */
+    private attachEventListeners;
+    /**
+     * Handle form submission
+     */
+    private handleSubmit;
+    /**
+     * Handle dismiss
+     */
+    private handleDismiss;
+    /**
+     * Set form disabled state
+     */
+    private setFormDisabled;
+    /**
+     * Show error message
+     */
+    private showError;
+    /**
+     * Validate email format
+     */
+    private isValidEmail;
+    /**
+     * Destroy the modal
+     */
+    destroy(): void;
+}
+
+/**
+ * Email Capture Widget
+ *
+ * Manages email capture modal and integrates with chat widget
+ */
+
+declare class EmailCaptureWidget {
+    private config;
+    private modal;
+    private messageCount;
+    private emailCaptured;
+    private wsClient;
+    private onCaptureCallback?;
+    constructor(config: EmailCaptureConfig);
+    /**
+     * Initialize the email capture widget
+     */
+    init(): void;
+    /**
+     * Set WebSocket client (from ChatWidget)
+     */
+    setWebSocketClient(wsClient: any): void;
+    /**
+     * Handle new message (called by ChatWidget)
+     */
+    handleMessage(): void;
+    /**
+     * Show the email capture modal
+     */
+    private showModal;
+    /**
+     * Handle email submission
+     */
+    private handleEmailSubmit;
+    /**
+     * Handle modal dismiss
+     */
+    private handleDismiss;
+    /**
+     * Destroy the widget
+     */
+    destroy(): void;
+}
+
+/**
+ * Wabbit Embed SDK
+ *
+ * Unified widget library for embedding chat, forms, and email capture
+ * functionality into customer websites.
+ *
+ * @packageDocumentation
+ */
+
+declare function init(config: WabbitConfig): Wabbit;
+declare function getInstance(): Wabbit | null;
+declare function destroy(): void;
+declare const WabbitSDK: {
+    init: typeof init;
+    getInstance: typeof getInstance;
+    destroy: typeof destroy;
+};
+
+export { ApiClient, ChatBubble, ChatPanel, ChatWebSocketClient, ChatWidget, EmailCaptureModal, EmailCaptureWidget, EventEmitter, FormRenderer, FormStyles, FormWidget, SafeStorage, Wabbit, createElement, WabbitSDK as default, destroy, detectTheme, escapeHtml, getInstance, init, mergeConfig, onDOMReady, storage, validateConfig, watchTheme };
+export type { ApiClientOptions, ApiResponse, ChatConfig, ConnectionStatus, EmailCaptureConfig, EmailCaptureData, FormConfig, FormDefinition, FormField, FormFieldType, FormSettings, FormSubmissionResponse, Message, RequestOptions, WabbitConfig };