@agentman/chat-widget/dist/assistantWidget/components/UIManager.d.ts

Agentman Chat Widget for easy integration with web applications

import type { ChatConfig, ChatState, ChatTheme, ChatAssets } from '../types/types';
/**
 * UIManager - Responsible for all DOM-related operations
 *
 * This component handles:
 * - DOM element creation and structure
 * - Event listener attachment and management
 * - UI state updates and transitions
 * - Responsive behavior and layout
 * - Element querying and manipulation
 */
export declare class UIManager {
    private config;
    private theme;
    private assets;
    private containerId;
    private element;
    private boundToggleHandler;
    private boundSendHandler;
    private boundInputKeyHandler;
    private boundResizeHandler;
    private boundExpandHandler?;
    private boundPromptClickHandler?;
    private boundAttachmentClickHandler?;
    private boundFileSelectHandler?;
    private boundAttachmentRemoveHandler?;
    private resizeTimeout;
    private cachedElements;
    private eventListeners;
    private debouncedUpdateSendButton;
    constructor(config: ChatConfig, theme: ChatTheme, assets: ChatAssets, containerId: string, eventHandlers: {
        onToggle: () => void;
        onSend: () => void;
        onInputKey: (e: KeyboardEvent) => void;
        onResize: () => void;
        onExpand?: () => void;
        onPromptClick?: (prompt: string) => void;
        onAttachmentClick?: () => void;
        onFileSelect?: (files: FileList) => void;
        onAttachmentRemove?: (fileId: string) => void;
    });
    /**
     * Create and mount the widget DOM structure
     */
    createAndMount(): HTMLElement;
    /**
     * Update UI based on state changes
     */
    updateUI(state: ChatState): void;
    /**
     * Update theme colors in real-time
     */
    updateTheme(theme: Partial<ChatTheme>): void;
    /**
     * Get specific DOM elements with caching
     */
    getElement(selector: string): HTMLElement | null;
    /**
     * Get the root widget element
     */
    getRootElement(): HTMLElement | null;
    /**
     * Clean up and remove the widget
     */
    destroy(): void;
    /**
     * Generate the complete widget HTML template
     */
    private generateTemplate;
    /**
     * Generate toggle button HTML (for corner variant)
     */
    private generateToggleButton;
    /**
     * Generate main chat container HTML
     */
    private generateMainContainer;
    /**
     * Generate header HTML
     */
    private generateHeader;
    /**
     * Generate messages area HTML
     */
    private generateMessagesArea;
    /**
     * Generate message prompts HTML (compact buttons above input)
     */
    private generateMessagePrompts;
    /**
     * Generate input area HTML
     */
    private generateInputArea;
    /**
     * Generate attachment button and file input
     */
    private generateAttachmentButton;
    /**
     * Generate attachment preview container
     */
    private generateAttachmentPreview;
    /**
     * Generate branding HTML
     */
    private generateBranding;
    /**
     * Apply initial styling to the widget
     */
    private applyInitialStyling;
    /**
     * Mount the widget to the appropriate container
     */
    private mountToContainer;
    /**
     * Attach all event listeners
     */
    private attachEventListeners;
    /**
     * Remove all event listeners
     */
    private removeEventListeners;
    /**
     * Handle input field changes (auto-resize, button state)
     */
    private handleInputChange;
    /**
     * Update send button enabled/disabled state
     */
    private updateSendButtonState;
    /**
     * Setup responsive behavior
     */
    private setupResponsiveBehavior;
    /**
     * Update responsive layout based on screen size
     */
    private updateResponsiveLayout;
    /**
     * Update toggle button styling
     */
    private updateToggleButtonStyling;
    /**
     * Update header styling
     */
    private updateHeaderStyling;
    /**
     * Update input area styling
     */
    private updateInputStyling;
    /**
     * Remove existing widget from DOM
     */
    private removeExistingWidget;
    /**
     * Handle prompt button clicks
     */
    private handlePromptClick;
    /**
     * Clear chat input field
     * Centralized method for clearing input with proper event dispatching
     */
    private clearChatInput;
    /**
     * Hide message prompts after user interaction
     */
    hideMessagePrompts(): void;
    /**
     * Show message prompts (for reset functionality)
     */
    showMessagePrompts(): void;
    /**
     * Show floating prompt bubbles (when widget is closed)
     */
    showFloatingPrompts(): void;
    /**
     * Hide floating prompt bubbles
     */
    hideFloatingPrompts(): void;
    /**
     * Generate floating prompt bubbles HTML (for when widget is closed)
     */
    private generateFloatingPrompts;
    /**
     * Attach event listeners to floating prompt buttons
     */
    private attachFloatingPromptListeners;
    /**
     * Attach attachment-related event listeners
     */
    private attachAttachmentListeners;
    /**
     * Update attachment preview
     */
    updateAttachmentPreview(attachments: any[]): void;
    /**
     * Format file size for display
     */
    private formatFileSize;
    /**
     * Get appropriate icon for file type
     */
    private getFileTypeIcon;
    /**
     * Clear file input
     */
    clearFileInput(): void;
    /**
     * Escape HTML to prevent XSS
     */
    private escapeHtml;
    /**
     * Debounce resize events for performance
     */
    private debounceResize;
    /**
     * Add event listener with cleanup tracking
     */
    private addTrackedEventListener;
    /**
     * Remove all tracked event listeners
     */
    private cleanupAllEventListeners;
}