langflow-chatbot/dist/components/ChatWidget.d.ts

Add a Langflow-powered chatbot to your website.

import { LangflowChatClient } from '../clients/LangflowChatClient';
import { Logger } from '../utils/logger';
import { DatetimeHandler } from '../utils/datetimeUtils';
import { Labels, Template } from '../types';
/**
 * Configuration options for the ChatWidget.
 */
export interface ChatWidgetConfigOptions {
    labels?: Partial<Labels>;
    template?: Partial<Template & {
        widgetHeaderTemplate?: string;
    }>;
    /** Optional datetime format string (e.g., 'HH:mm') for displaying message timestamps. */
    datetimeFormat?: string;
}
/**
 * The main ChatWidget class.
 * Orchestrates the chat functionality by managing various sub-components:
 * - TemplateManager: Handles HTML templates.
 * - DisplayManager: Manages DOM updates for messages.
 * - SessionManager: Manages session ID and history.
 * - MessageProcessor: Handles message sending and processing logic.
 */
export declare class ChatWidget {
    private element;
    private chatClient;
    private enableStream;
    private currentBotMessageElement;
    private onSessionIdUpdateCallback?;
    /** Internal configuration with defaults applied. */
    private config;
    private sendButtonClickListener?;
    private chatInputKeyPressListener?;
    private resetButtonClickListener?;
    private logger;
    private messageProcessor;
    private displayManager;
    private templateManager;
    private sessionManager;
    private uiCallbacks;
    private messageParser;
    /**
     * Constructs a ChatWidget instance.
     * @param {HTMLElement} containerElement - The HTML element to render the widget into.
     * @param {LangflowChatClient} chatClient - The client for API interactions.
     * @param {boolean} [enableStream=true] - Whether to enable streaming for bot responses.
     * @param {ChatWidgetConfigOptions} configOptions - Configuration options for the widget.
     * @param {Logger} logger - Logger instance.
     * @param {string} [initialSessionId] - Optional initial session ID.
     * @param {(sessionId: string) => void} [onSessionIdUpdate] - Optional callback for when the session ID is updated.
     */
    constructor(containerElement: HTMLElement, chatClient: LangflowChatClient, enableStream: boolean | undefined, configOptions: ChatWidgetConfigOptions, logger: Logger, initialSessionId?: string, onSessionIdUpdate?: (sessionId: string) => void);
    /**
     * Renders the initial structure of the chat widget using templates.
     * Sets the widget title if provided and ensures essential DOM elements are present.
     */
    private render;
    /**
     * Sets up event listeners for the chat input and send button.
     */
    private setupEventListeners;
    /**
     * Removes event listeners from chat input and send button.
     * Called during destruction to prevent memory leaks.
     */
    private removeEventListeners;
    /**
     * Handles the send button click event.
     * @param {HTMLInputElement} chatInput - The chat input element.
     */
    private handleSendButtonClick;
    /**
     * Processes the user's message: adds it to the display, clears the input,
     * and passes it to the MessageProcessor.
     * @param {string} message - The message text from the user.
     * @param {HTMLInputElement} chatInput - The chat input element (to clear it after sending).
     */
    private processMessage;
    /**
     * Sets the session ID for the chat widget and loads its history.
     * Delegates to ChatSessionManager and notifies external listeners.
     * @param {string | null} newSessionId - The new session ID, or null to clear the session.
     */
    setSessionId(newSessionId: string | null): Promise<void>;
    /**
     * Destroys the chat widget instance, removing event listeners and clearing its content.
     */
    destroy(): void;
    /**
     * Registers a custom datetime handler function with the DisplayManager.
     * @param {DatetimeHandler} handler - The datetime handler function to register.
     */
    registerDatetimeHandler(handler: DatetimeHandler): void;
    /**
     * Enables or disables the chat input field and send button.
     * @param {boolean} disabled - True to disable, false to enable.
     */
    private setInputDisabled;
    /**
     * Gets the internal, resolved configuration of the widget (including defaults).
     * @returns {Readonly<typeof this.config>} The read-only internal configuration.
     */
    getInternalConfig(): Readonly<typeof this.config>;
    /**
     * Returns the main HTML element of the chat widget.
     * @returns {HTMLElement} The main widget element.
     */
    getWidgetElement(): HTMLElement;
    /**
     * Handles the click event for the reset button.
     * Clears the current session and dispatches a 'chatReset' event.
     */
    private handleResetButtonClick;
}