@progress/kendo-react-conversational-ui/index.d.ts

React Chat component allows the user to participate in chat sessions with users or chat bots. KendoReact Conversational UI components

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import { BaseEvent } from '@progress/kendo-react-common';
import { ButtonProps } from '@progress/kendo-react-buttons';
import { CustomComponent } from '@progress/kendo-react-common';
import { default as default_2 } from 'prop-types';
import { default as default_3 } from 'react';
import { JSX } from 'react/jsx-runtime';
import * as React_2 from 'react';
import { SVGIcon } from '@progress/kendo-svg-icons';
import { SVGIcon as SVGIcon_2 } from '@progress/kendo-react-common';
import { TextAreaProps } from '@progress/kendo-react-inputs';

/**
 * Defines a quick action for a message.
 * The value is interpreted according to the specified action type.
 */
export declare interface Action {
    /**
     * A predefined or custom (string) type for the action.
     */
    type: ActionType;
    /**
     * The value which is associated with the action.
     */
    value: any;
    /**
     * An optional title for the quick action.
     * If omitted, the Chat displays the value instead.
     */
    title?: string;
}

/**
 * The button type of the quick action
 * ([see examples]({% slug suggested_actions_chat %})).
 *
 * * `openUrl`—Opens a new browser window with the specified URL.
 * * `reply`—Sends the action value as a reply in the Chat.
 * * `call`—Treats a value as a phone number.
 * Similar to clicking a [telephone link](https://css-tricks.com/the-current-state-of-telephone-links/).
 * * other—
 * Handled by user code in the [`ExecuteActionEvent`]({% slug api_conversational-ui_chatactionexecuteevent %}).
 */
export declare type ActionType = 'openUrl' | 'reply' | 'call' | any;

/**
 * Represents the KendoReact AIPrompt component.
 */
export declare const AIPrompt: (props: AIPromptProps) => JSX.Element;

/**
 * The fields of the AIPromptOutputView card prop.
 */
declare interface AIPromptCardInterface {
    /**
     * Custom template for AIPromptCard header.
     */
    header?: (props: AIPromptOutputInterface) => default_3.ReactNode;
    /**
     * Custom template for AIPromptCard body.
     */
    body?: (props: AIPromptOutputInterface) => default_3.ReactNode;
    /**
     * Custom template for AIPromptCard actions.
     */
    actions?: (props: AIPromptOutputInterface) => default_3.ReactNode;
}

/**
 * The props of the AIPromptCommandsView component.
 */
export declare const AIPromptCommandsView: (props: AIPromptCommandsViewProps) => JSX.Element;

/**
 * The props of the AIPromptCommandsView component.
 */
declare interface AIPromptCommandsViewProps {
    /**
     * The collection of commands that will be rendered in the Command view.
     */
    commands?: CommandInterface[];
    /**
     * Fires each time the user clicks over a Command view command. Exposes the selected command as event data.
     */
    onCommandExecute?: (command: CommandItemInterface) => void;
}

/**
 * Represents the KendoReact AIPromptContent component.
 */
export declare const AIPromptContent: default_3.ForwardRefExoticComponent<AIPromptContentProps & default_3.RefAttributes<HTMLDivElement>>;

/**
 * The props of the AIPromptContent component.
 */
declare interface AIPromptContentProps {
    /**
     * Specifies the AIPromptContent children elements.
     */
    children?: default_3.ReactNode;
}

/**
 * Represents the KendoReact AIPromptFooter component.
 */
export declare const AIPromptFooter: (props: AIPromptFooterProps) => JSX.Element;

/**
 * The props of the AIPromptFooter component.
 */
declare interface AIPromptFooterProps {
    /**
     * Specifies the AIPromptFooter children elements.
     */
    children?: default_3.ReactNode;
}

/**
 * @hidden
 */
declare interface AIPromptHeaderProps {
    activeView: string;
    toolbarItems: (AIPromptToolbarItemInterface | default_3.ReactNode)[];
    activeViewChange?: (viewName: string) => void;
}

export declare interface AIPromptOutputInterface {
    /**
     * Example usage of the `id` property:
     * ```jsx
     * const output = { id: 1, responseContent: 'Generated content' };
     * ```
     */
    id: string | number;
    /**
     * Example usage of the `title` property:
     * ```jsx
     * const output = { title: 'Generated Title', responseContent: 'Generated content' };
     * ```
     */
    title?: default_3.ReactNode;
    /**
     * Example usage of the `subTitle` property:
     * ```jsx
     * const output = { subTitle: 'Generated Subtitle', responseContent: 'Generated content' };
     * ```
     */
    subTitle?: default_3.ReactNode;
    /**
     * Example usage of the `prompt` property:
     * ```jsx
     * const output = { prompt: 'User prompt', responseContent: 'Generated content' };
     * ```
     */
    prompt?: string;
    /**
     * Example usage of the `responseContent` property:
     * ```jsx
     * const output = { responseContent: 'Generated content' };
     * ```
     */
    responseContent: string;
    /**
     * Example usage of the `isRetry` property:
     * ```jsx
     * const output = { isRetry: true, responseContent: 'Generated content' };
     * ```
     */
    isRetry?: boolean;
    /**
     * Example usage of the `ratingType` property:
     * ```jsx
     * const output = { ratingType: 'positive', responseContent: 'Generated content' };
     * ```
     */
    ratingType?: string;
    /**
     * Optionally specifies a command, if the prompt generation was triggered via a command.
     * ```jsx
     * const output = { command: { name: 'Retry' }, responseContent: 'Generated content' };
     * ```
     */
    command?: CommandInterface;
}

/**
 * Represents the KendoReact AIPromptOutputView component.
 */
export declare const AIPromptOutputView: (props: AIPromptOutputViewProps) => JSX.Element;

/**
 * The props of the AIPromptOutputView component.
 */
declare interface AIPromptOutputViewProps {
    /**
     * The collection of generated prompt outputs that will be rendered in the Output view.
     */
    outputs?: AIPromptOutputInterface[];
    /**
     * Represents a template that allows you to define custom Card fields for:
     * header
     * body
     * actions
     * The custom fields will override the default one.
     */
    outputCard?: AIPromptCardInterface;
    /**
     * Specifies if the rating buttons in each card will be rendered.
     * By default, rating buttons are not rendered.
     *
     * @default false
     */
    showOutputRating?: boolean;
    onRetry?: (value: any) => void;
    /**
     * Fires each time the user clicks Copy button in the card.
     */
    onCopy?: () => void;
    /**
     * Fires each time the user clicks a rating button in the card.
     */
    onOutputRating?: () => void;
}

/**
 * The props of the AIPrompt component.
 */
export declare interface AIPromptProps extends default_3.HTMLAttributes<HTMLElement> {
    /**
     * Example usage of the `style` property:
     * ```jsx
     * <AIPrompt style={{ backgroundColor: 'lightblue' }} />
     * ```
     */
    style?: default_3.CSSProperties;
    /**
     * Example usage of the `activeView` property:
     * ```jsx
     * <AIPrompt activeView="promptView" />
     * ```
     */
    activeView: typeof promptViewDefaults.name | typeof outputViewDefaults.name | typeof commandsViewDefaults.name | string;
    /**
     * Example usage of the `toolbarItems` property:
     * ```jsx
     * <AIPrompt toolbarItems={[<CustomToolbarItem />]} />
     * ```
     */
    toolbarItems?: (AIPromptToolbarItemInterface | default_3.ReactNode)[];
    /**
     * Example usage of the `outputs` property:
     * ```jsx
     * <AIPrompt outputs={[{ id: 1, responseContent: 'Generated content' }]} />
     * ```
     */
    outputs?: AIPromptOutputInterface[];
    /**
     * Example usage of the `children` property:
     * ```jsx
     * <AIPrompt>
     *   <div>Custom content</div>
     * </AIPrompt>
     * ```
     */
    children?: default_3.ReactNode;
    /**
     * Example usage of the `promptPlaceholder` property:
     * ```jsx
     * <AIPrompt promptPlaceholder="Type your prompt here..." />
     * ```
     */
    promptPlaceholder?: string;
    /**
     * Example usage of the `dir` property:
     * ```jsx
     * <AIPrompt dir="rtl" />
     * ```
     */
    dir?: string;
    /**
     * Example usage of the `onActiveViewChange` property:
     * ```jsx
     * <AIPrompt onActiveViewChange={(name) => console.log('Active view changed to:', name)} />
     * ```
     */
    onActiveViewChange?: (name: string) => void;
    /**
     * Example usage of the `onCommandExecute` property:
     * ```jsx
     * <AIPrompt onCommandExecute={(command) => console.log('Command executed:', command)} />
     * ```
     */
    onCommandExecute?: (command: CommandInterface) => void;
    /**
     * Example usage of the `onPromptRequest` property:
     * ```jsx
     * <AIPrompt onPromptRequest={(prompt) => console.log('Prompt requested:', prompt)} />
     * ```
     */
    onPromptRequest?: (prompt?: string, outputItem?: AIPromptOutputInterface) => void;
}

/**
 * An interface for the AIPromptToolbarItem.
 */
export declare interface AIPromptToolbarItemInterface {
    /**
     * Defines the name of the view witch is related to.
     */
    name: string;
    /**
     * Defines the svgIcon used in the Toolbar button.
     */
    buttonIcon?: SVGIcon;
    /**
     * Defines the text used in the Toolbar button.
     */
    buttonText?: string;
}

/**
 * The props of the AIPromptCommandsView component.
 */
export declare const AIPromptView: (props: AIPromptViewProps) => JSX.Element;

/**
 * The properties of the AIPromptView component.
 */
export declare interface AIPromptViewProps {
    /**
     * Accepts a custom component that can be used to render the prompt input. See example [here]({% slug customization_aiprompt %}).
     */
    promptInput?: CustomComponent<TextAreaProps>;
    /**
     * Accepts a custom component that can be used to render the generate button. See example [here]({% slug customization_aiprompt %}).
     */
    generateButton?: CustomComponent<ButtonProps>;
    /**
     * The value of the prompt input.
     */
    promptValue?: string;
    /**
     * The suggestions that will be displayed in the prompt view. See example [here]({% slug suggestions_aiprompt %}).
     */
    promptSuggestions?: string[];
}

/**
 * Represents the KendoReact AIPromptViewRender component.
 */
export declare const AIPromptViewRender: (props: AIPromptViewRenderProps) => default_3.ReactNode;

/**
 * The props of the AIPromptViewRender component.
 */
declare interface AIPromptViewRenderProps {
    /**
     * Specifies the name of the view.
     */
    name: string;
    /**
     * Specifies the AIPromptViewRender children elements.
     */
    children: default_3.ReactNode;
}

/**
 * Represents a message attachment
 * ([see examples]({% slug attachments_chat %})).
 *
 */
export declare interface Attachment {
    /**
     * The content type identifier for the attachment.
     * Typically a MIME type. Can also be any string.
     */
    contentType: string;
    /**
     * The content of the attachment.
     */
    content: any;
    /**
     * (Optional) The title of the attachment.
     */
    title?: string;
    /**
     * (Optional) The subtitle of the attachment.
     */
    subtitle?: string;
}

/**
 * Specifies the layout for the message attachments.
 *
 * The supported values are:
 * * `"list"`&mdash;A vertical list.
 * * `"carousel"`&mdash;A horizontal, scrollable list. Also called a card deck.
 */
export declare type AttachmentLayout = 'list' | 'carousel';

/**
 * Represents the [KendoReact Chat component]({% slug overview_convui %}).
 */
export declare class Chat extends React_2.Component<ChatProps, ChatState> {
    /**
     * @hidden
     */
    static propTypes: {
        messages: default_2.Requireable<(object | null | undefined)[]>;
        user: default_2.Requireable<object>;
        messageTemplate: default_2.Requireable<any>;
        attachmentTemplate: default_2.Requireable<any>;
        width: default_2.Requireable<NonNullable<string | number | null | undefined>>;
        onMessageSend: default_2.Requireable<(...args: any[]) => any>;
        onActionExecute: default_2.Requireable<(...args: any[]) => any>;
        dir: default_2.Requireable<string>;
        messageBox: default_2.Requireable<any>;
    };
    /**
     * @hidden
     */
    static defaultProps: {
        messages: never[];
        dateFormat: string;
        message: typeof ChatMessage;
    };
    /**
     * @hidden
     */
    readonly state: ChatState;
    private chatWrapperEl;
    private viewItemsWrapperEl;
    private newMsgComp;
    private timeoutIdForChatLosingFocus;
    private nextTickId;
    private viewItems;
    private isDirectionRightToLeft;
    private scrollToBottomOnLoadingData;
    private readonly showLicenseWatermark;
    constructor(props: ChatProps);
    /**
     * @hidden
     */
    render(): JSX.Element;
    /**
     * @hidden
     */
    componentDidMount(): void;
    /**
     * @hidden
     */
    componentWillUnmount(): void;
    /**
     * @hidden
     */
    componentDidUpdate(prevProps: ChatProps): void;
    private getClassNames;
    private checkIsDirectionRightToLeft;
    private onFocus;
    private onBlur;
    private onSelectionRequested;
    private onKeyDown;
    private renderViewItems;
    private onMessageSend;
    private onActionExecute;
    private scrollViewItemsToBottom;
    private getViewItemsFromMsgs;
}

/**
 * The arguments for the `actionexecute` event of the Chat.
 */
export declare interface ChatActionExecuteEvent extends BaseEvent<Chat> {
    /**
     * The executed action.
     */
    action: Action;
}

/**
 * Represents the ChatMessage component.
 */
export declare class ChatMessage extends FocusableUponSelection<ChatMessageProps, {}> {
    /**
     * @hidden
     */
    static defaultProps: {
        dateFormat: string;
        tabIndex: number;
    };
    /**
     * @hidden
     */
    render(): JSX.Element;
    private getMainView;
    private getTimestampView;
    private getStatusView;
    private getClassNames;
}

/**
 * Represents a Chat message box.
 */
export declare interface ChatMessageBoxProps {
    /**
     * Sets the input message of the Chat component.
     */
    messageInput: React.ReactElement;
    /**
     * Sets the toolbar button of the Chat component.
     */
    toolbarButton: React.ReactElement;
    /**
     * Sets the send button of the Chat component.
     */
    sendButton: React.ReactElement;
}

/**
 * Represents the properties of [ChatMessage] (% slug api_conversational-ui_chatmessage %) component.
 */
export declare interface ChatMessageProps extends FocusableUponSelectionProps {
    /**
     * Represents the data item of the `Message`.
     */
    item: MessageModel;
    /**
     * Represents the React Component rendered inside the `Message`.
     */
    template?: React_2.ComponentType<ChatMessageTemplateProps>;
    /**
     * @hidden
     */
    onRequestSelection: any;
    /**
     * Represents the tab index attribute.
     */
    tabIndex?: number;
    /**
     * @hidden
     */
    isFirstItemInGroup: boolean;
    /**
     * @hidden
     */
    isLastItemInGroup: boolean;
    /**
     * @hidden
     */
    isOnlyItemInGroup: boolean;
    /**
     * Represents the date format of the message date.
     */
    dateFormat?: string;
}

/**
 * The arguments for the `messagesend` event of the Chat.
 */
export declare interface ChatMessageSendEvent extends BaseEvent<Chat> {
    /**
     * The new message.
     */
    message: Message;
}

/**
 * Represents the properties available to the `messageTemplate` custom component.
 *
 * For more information, refer to the [Message Template]({% slug message_templates_chat %}) article.
 */
export declare interface ChatMessageTemplateProps {
    item: MessageModel;
}

export declare interface ChatProps {
    /**
     * Sets a class of the Chat DOM element.
     */
    className?: string;
    /**
     * Sets the messages of the Chat.
     */
    messages: Message[];
    /**
     * Sets the [`User`]({% slug api_conversational-ui %}) instance for the local user. The User ID identifies messages that are authored by the local user.
     */
    user: User;
    /**
     * A React functional or class component which is used as a message template. The corresponding [`message`]({% slug api_conversational-ui_message %}) is passed to the component as a property by the name `item`.
     */
    messageTemplate?: React.ComponentType<ChatMessageTemplateProps>;
    /**
     * A React functional or class component which is used as an attachment template ([see example]({% slug attachments_chat %}#toc-attachment-templates)). The corresponding [`attachment`]({% slug api_conversational-ui_attachment %}) is passed to the component as a property by the name `item`.
     */
    attachmentTemplate?: any;
    /**
     * Sets the width of the Chat.
     */
    width?: string | number;
    /**
     * Determines if the toolbar will be rendered.
     */
    showToolbar?: any;
    /**
     * Renders a toolbar inside the Chat.
     */
    toolbar?: any;
    /**
     * Fires when the user types a message and clicks the **Send** button or presses **Enter**. Emits the [`MessageSendEvent`]({% slug api_conversational-ui_chatmessagesendevent %}).
     *
     * > The Chat is not automatically updated with the new message.
     */
    onMessageSend?: (event: ChatMessageSendEvent) => void;
    /**
     * Fires when the user clicks a quick action button. The Chat internally handles the `reply`, `openUrl`, and `call` [known actions]({% slug api_conversational-ui_actiontype %}). Emits the [`ExecuteActionEvent`]({% slug api_conversational-ui_chatactionexecuteevent %}). The event is preventable. If `preventDefault` is called, the built-in action will be suppressed.
     */
    onActionExecute?: (event: ChatActionExecuteEvent) => void;
    /**
     * Fires when the user clicks the button to show or hide the toolbar.
     */
    onToolbarActionExecute?: (event: ChatToolbarActionExecuteEvent) => void;
    /**
     * Sets the direction of the Chat component.
     */
    dir?: string;
    /**
     * The text which is visible inside the new message input when the message input is empty.
     */
    placeholder?: string;
    /**
     * Enables the customization or the override of the default message box item in the Conversational UI
     * ([see example]({% slug custom-rendering_chat %})).
     */
    messageBox?: React.ComponentType<ChatMessageBoxProps>;
    /**
     * Represents the ChatMessage component.
     */
    message?: React.ComponentType<ChatMessageProps>;
}

/**
 * @hidden
 */
export declare interface ChatState {
    selectedItemIndex: number | null;
    isFirstRender: boolean;
}

/**
 * The arguments for the `toolbaractionexecute` event of the Chat.
 */
export declare interface ChatToolbarActionExecuteEvent extends BaseEvent<Chat> {
    /**
     * The new toolbarShow value.
     */
    show: boolean;
}

/**
 * An interface for the command in the Command view.
 */
export declare interface CommandInterface extends CommandItemInterface {
    /**
     * Collection with nested commands.
     */
    children?: CommandItemInterface[];
}

/**
 * An interface for the command item.
 */
export declare interface CommandItemInterface {
    /**
     * The unique identifier of the command.
     */
    id: string;
    /**
     * Specifies the command text.
     */
    text: string;
    /**
     * Specifies the name of the SVG icon that will be rendered for the command.
     */
    svgIcon?: SVGIcon_2;
}

/**
 * Specifies the default values for Commands view Toolbar.
 */
export declare const commandsViewDefaults: AIPromptToolbarItemInterface;

/**
 * @hidden
 */
declare abstract class FocusableUponSelection<P extends FocusableUponSelectionProps, S = {}> extends React_2.Component<P, S> {
    protected elementToFocus: any;
    /**
     * @hidden
     */
    componentDidUpdate(prevProps: any): void;
}

/**
 * @hidden
 */
declare interface FocusableUponSelectionProps {
    /**
     * Sets the `selected` state of the component.
     */
    selected: boolean;
}

/**
 * Represents a Hero Card component. Hero cards host a single large image and action buttons with text content.
 */
export declare class HeroCard extends React_2.Component<HeroCardProps, {}> {
    /**
     * @hidden
     */
    render(): JSX.Element;
    private onBtnClick;
    private getActionsView;
    private getTitleView;
    private getSubtitleView;
}

/**
 * The arguments for the `actionexecute` event of the hero card.
 */
export declare interface HeroCardActionExecuteEvent extends BaseEvent<HeroCard> {
    /**
     * The executed action.
     */
    action: Action;
}

export declare interface HeroCardProps {
    /**
     * The URL of the hero card image.
     */
    imageUrl: string;
    /**
     * The title of the hero card.
     */
    title: string;
    /**
     * The subtitle of the hero card.
     */
    subtitle: string;
    /**
     * An array with the possible quick actions for this hero card.
     */
    actions: Action[];
    /**
     * Fires when the user clicks a button.
     */
    onActionExecute?: (event: HeroCardActionExecuteEvent) => void;
    /**
     * Max width of the card image.
     */
    imageMaxWidth?: string | number;
}

/**
 * Represents a Chat message.
 *
 * > * You are required to provide the `author` field.
 * > * [Local users]({% slug api_conversational-ui_chatprops %}#toc-user) are displayed to the
 * right in left-to-right languages and to the left in right-to-left languages.
 * > * If `typing` is set to `true`, the Chat displays a typing indicator instead of text.
 */
export declare interface Message {
    /**
     * The author of the message.
     */
    author: User;
    /**
     * The layout that will be used for displaying message attachments, if any
     * ([see example]({% slug attachments_chat %}#toc-display-modes)).
     */
    attachmentLayout?: AttachmentLayout;
    /**
     * (Optional) The message attachments
     * ([see example]({% slug attachments_chat %})).
     */
    attachments?: Attachment[];
    /**
     * The suggested quick actions that will be displayed below this message
     * ([see example]({% slug suggested_actions_chat %}#toc-defining-quick-actions)).
     *
     * > Suggested actions are displayed only for the last message in the conversation.
     */
    suggestedActions?: Action[];
    /**
     * An optional status string for the message.
     * The status is displayed when the message is selected&mdash;either
     * by clicking on it or by using the keyboard navigation shortcuts.
     */
    status?: string;
    /**
     * (Optional) The text for the message.
     * For example, certain messages can contain
     * only attachments or quick actions.
     */
    text?: string;
    /**
     * The time at which the message was composed.
     *
     */
    timestamp?: Date;
    /**
     * A Boolean value which indicates if the message is still being typed by the user.
     * If set to `true`, the Chat displays a typing indicator instead of the actual message.
     */
    typing?: boolean;
}

/**
 * Represents the data item of a single `Message`.
 */
export declare interface MessageModel extends Message, Selectable {
}

/**
 * Specifies the default values for Output view Toolbar.
 */
export declare const outputViewDefaults: AIPromptToolbarItemInterface;

/**
 * @hidden
 */
export declare const PromptHeader: (props: AIPromptHeaderProps) => JSX.Element;

/**
 * Specifies the default values for Prompt view Toolbar.
 */
export declare const promptViewDefaults: AIPromptToolbarItemInterface;

/**
 * @hidden
 */
declare interface Selectable {
    selectionIndex: number;
}

/**
 * Represents a participant in a Chat conversation.
 */
export declare interface User {
    /**
     * A unique ID for this user.
     * Typically, the ID is a number.
     * Can also be a string or an object.
     */
    id: any;
    /**
     * (Optional) The displayed name for the user.
     */
    name?: string;
    /**
     * (Optional) An avatar image for the user.
     */
    avatarUrl?: string;
    /**
     * (Optional) An avatar image alt text for the user.
     */
    avatarAltText?: string;
}

export { }