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

Add a Langflow-powered chatbot to your website.

import { LangflowChatClient } from '../clients/LangflowChatClient';
import { ChatWidgetConfigOptions } from './ChatWidget';
import { Logger, LogLevel } from '../utils/logger';
/**
 * Configuration options for the FloatingChatWidget.
 */
export interface FloatingChatWidgetConfig {
    /** Configuration options to pass down to the underlying ChatWidget instance. */
    chatWidgetConfig?: Partial<ChatWidgetConfigOptions>;
    /** Position of the floating widget on the screen. */
    position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
    /** Optional initial session ID to pass to the ChatWidget. */
    initialSessionId?: string;
    /** Optional callback for when the session ID is updated by the ChatWidget. */
    onSessionIdUpdate?: (sessionId: string) => void;
    /** Optional datetime format string to pass to the ChatWidget. */
    datetimeFormat?: string;
    /** Whether the chat panel should be open 부담initialization. */
    isOpen?: boolean;
    /** Whether to show the close/minimize button on the chat panel header. */
    showCloseButton?: boolean;
    /** Whether to show the floating toggle button. */
    showToggleButton?: boolean;
    /** Text content for the floating toggle button (if shown). */
    toggleButtonText?: string;
    /** Title displayed in the header of the chat panel. */
    widgetTitle?: string;
    /** Desired log level for the widget's logger. */
    logLevel?: LogLevel;
    /** Optional custom width for the floating panel (e.g., '500px'). Applied as a CSS variable. */
    floatingPanelWidth?: string;
    /** Optional custom HTML template for the floating widget's header. */
    floatingWidgetHeaderTemplate?: string;
    /** Optional container ID for attaching listeners or custom behavior. The container element will be available via getContainerElement(). */
    containerId?: string;
}
/**
 * Provides a floating, toggleable chat interface that wraps the main ChatWidget.
 * Manages the visibility and placement of the chat panel and the toggle button.
 */
export declare class FloatingChatWidget {
    private config;
    private floatingButton;
    private chatContainer;
    private chatWidgetInstance;
    private isChatVisible;
    private chatClient;
    private enableStream;
    private logger;
    private chatResetListener?;
    private static validatePosition;
    /**
     * Constructs a FloatingChatWidget instance.
     * @param {LangflowChatClient} chatClient - The client for API interactions.
     * @param {boolean} [enableStream=true] - Whether to enable streaming for bot responses (passed to ChatWidget).
     * @param {FloatingChatWidgetConfig} [userConfig={}] - User-provided configuration options.
     * @param {Logger} [logger] - Optional logger instance. If not provided, a new one is created.
     */
    constructor(chatClient: LangflowChatClient, enableStream?: boolean, userConfig?: FloatingChatWidgetConfig, logger?: Logger);
    /**
     * Creates the necessary DOM elements for the floating widget:
     * - The floating toggle button.
     * - The chat panel container, including its header (title, minimize button).
     * - The host div for the inner ChatWidget instance.
     * It then instantiates the inner ChatWidget within the host div.
     */
    private _createElements;
    /**
     * Sets up event listeners for the floating widget, primarily for the toggle button.
     */
    private _setupEventListeners;
    /**
     * Toggles the visibility of the chat panel and the floating button.
     */
    toggleChatVisibility(): void;
    /**
     * Shows the chat panel.
     * @param {boolean} [initial=false] - If true, sets display style directly without toggling, for initial setup.
     */
    showChat(initial?: boolean): void;
    /**
     * Scrolls to bottom when the panel becomes visible.
     * Uses requestAnimationFrame to ensure the panel is fully rendered before scrolling.
     */
    private scrollToBottomWhenVisible;
    /**
     * Hides the chat panel.
     * @param {boolean} [initial=false] - If true, sets display style directly without toggling, for initial setup.
     */
    hideChat(initial?: boolean): void;
    /**
     * Destroys the FloatingChatWidget instance.
     * This includes destroying the inner ChatWidget instance and removing the floating widget's DOM elements.
     */
    destroy(): void;
    /**
     * Returns the main DOM element for the chat panel.
     * @returns {HTMLElement | null} The chat panel element.
     */
    getPanelElement(): HTMLElement | null;
    /**
     * Returns the container element for attaching listeners or custom behavior.
     * @returns {HTMLElement | null} The container element.
     */
    getContainerElement(): HTMLElement | null;
}