instantsearch-ui-components/dist/es/components/chat/ChatMessages.d.ts

Common UI components for InstantSearch.

/** @jsx createElement */
import type { ComponentProps, MutableRef, Renderer } from '../../types';
import type { ChatMessageProps, ChatMessageClassNames, ChatMessageTranslations } from './ChatMessage';
import type { ChatMessageErrorProps } from './ChatMessageError';
import type { ChatMessageLoaderProps } from './ChatMessageLoader';
import type { ChatMessageBase, ChatStatus, ClientSideTools } from './types';
export type ChatMessagesTranslations = {
    /**
     * Label for the scroll to bottom button
     */
    scrollToBottomLabel: string;
    /**
     * Text to display in the loader
     */
    loaderText?: string;
    /**
     * Label for the copy to clipboard action
     */
    copyToClipboardLabel?: string;
    /**
     * Label for the regenerate action
     */
    regenerateLabel?: string;
};
export type ChatMessagesClassNames = {
    /**
     * Class names to apply to the root element
     */
    root: string | string[];
    /**
     * Class names to apply to the scroll container
     */
    scroll: string | string[];
    /**
     * Class names to apply to the content container
     */
    content: string | string[];
    /**
     * Class names to apply to the scroll to bottom button
     */
    scrollToBottom: string | string[];
    /**
     * Class names to apply to the scroll to bottom button when hidden
     */
    scrollToBottomHidden: string | string[];
};
export type ChatMessagesProps<TMessage extends ChatMessageBase = ChatMessageBase> = ComponentProps<'div'> & {
    /**
     * Array of messages to display
     */
    messages: TMessage[];
    /**
     * Custom message renderer
     */
    messageComponent?: (props: {
        message: TMessage;
    }) => JSX.Element;
    /**
     * Custom loader component
     */
    loaderComponent?: (props: ChatMessageLoaderProps) => JSX.Element;
    /**
     * Custom error component
     */
    errorComponent?: (props: ChatMessageErrorProps) => JSX.Element;
    /**
     * Custom actions component
     */
    actionsComponent?: ChatMessageProps['actionsComponent'];
    /**
     * The index UI state
     */
    indexUiState: object;
    /**
     * Set the index UI state
     */
    setIndexUiState: (state: object) => void;
    /**
     * Tools available for the assistant
     */
    tools: ClientSideTools;
    /**
     * Current chat status
     */
    status?: ChatStatus;
    /**
     * Whether to hide the scroll to bottom button
     */
    hideScrollToBottom?: boolean;
    /**
     * Callback for reload action
     */
    onReload: (messageId?: string) => void;
    /**
     * Function to close the chat
     */
    onClose: () => void;
    /**
     * Optional class names
     */
    classNames?: Partial<ChatMessagesClassNames>;
    /**
     * Optional message class names
     */
    messageClassNames?: Partial<ChatMessageClassNames>;
    /**
     * Optional translations
     */
    translations?: Partial<ChatMessagesTranslations>;
    /**
     * Optional message translations
     */
    messageTranslations?: Partial<ChatMessageTranslations>;
    /**
     * Optional user message props
     */
    userMessageProps?: Partial<Omit<ChatMessageProps, 'ref' | 'key'>>;
    /**
     * Optional assistant message props
     */
    assistantMessageProps?: Partial<Omit<ChatMessageProps, 'ref' | 'key'>>;
    /**
     * Whether the scroll is at the bottom (controlled state)
     */
    isScrollAtBottom?: boolean;
    /**
     * Whether the messages are clearing (for animation)
     */
    isClearing?: boolean;
    /**
     * Callback for when clearing transition ends
     */
    onClearTransitionEnd?: () => void;
    /**
     * Ref callback for the scroll container element
     */
    scrollRef?: MutableRef<HTMLDivElement | null>;
    /**
     * Ref callback for the content element
     */
    contentRef?: MutableRef<HTMLDivElement | null>;
    /**
     * Callback to scroll to bottom
     */
    onScrollToBottom?: () => void;
};
export declare function createChatMessagesComponent({ createElement, Fragment, }: Renderer): <TMessage extends ChatMessageBase = ChatMessageBase>(userProps: ChatMessagesProps<TMessage>) => JSX.Element;