@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 'react';
import { JSX } from 'react/jsx-runtime';
import { PopupAnimation } from '@progress/kendo-react-popup';
import { PopupProps } from '@progress/kendo-react-popup';
import * as React_2 from 'react';
import { SpeechToTextButtonProps } from '@progress/kendo-react-buttons';
import { SVGIcon } from '@progress/kendo-react-common';
import { SVGIcon as SVGIcon_2 } from '@progress/kendo-svg-icons';
import { TextAreaProps } from '@progress/kendo-react-inputs';
import { UploadProps } from '@progress/kendo-react-upload';

/**
 * Defines a quick action for a message.
 * The `value` is interpreted by the action `type`.
 */
export declare interface Action {
    /**
     * A predefined or custom `string` type for the action.
     */
    type: ActionType;
    /**
     * The value associated with the action.
     */
    value: any;
    /**
     * Optional title for the quick action.
     * If not set, the Chat displays `value`.
     */
    title?: string;
}

/**
 * Specifies the button type of a quick action ([see examples]({% slug quick_actions_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 in your 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.
 */
export declare interface AIPromptCardInterface {
    /**
     * Custom template for AIPromptCard header.
     */
    header?: (props: AIPromptOutputInterface) => default_2.ReactNode;
    /**
     * Custom template for AIPromptCard body.
     */
    body?: (props: AIPromptOutputInterface) => default_2.ReactNode;
    /**
     * Custom template for AIPromptCard actions.
     */
    actions?: (props: AIPromptOutputInterface) => default_2.ReactNode;
}

declare interface AIPromptCardInterface_2 {
    /**
     * Custom template for AIPromptCard body.
     */
    body?: (props: InlineAIPromptOutputInterface) => default_2.ReactNode;
    /**
     * Custom template for AIPromptCard actions.
     */
    actions?: (props: InlineAIPromptOutputInterface) => default_2.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_2.ForwardRefExoticComponent<AIPromptContentProps & default_2.RefAttributes<HTMLDivElement>>;

/**
 * The props of the AIPromptContent component.
 */
declare interface AIPromptContentProps {
    /**
     * Specifies the AIPromptContent children elements.
     */
    children?: default_2.ReactNode;
    /**
     * Specifies the callback for cancel action.
     */
    onCancel?: () => void;
    /**
     * Specifies if the streaming indicator should be shown.
     */
    streaming?: boolean;
}

/**
 * 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_2.ReactNode;
}

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

export declare interface AIPromptOutputInterface {
    /**
     * EUnique identifier of the output item.
     * ```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_2.ReactNode;
    /**
     * Optional `subTitle` content.
     * ```jsx
     * const output = { subTitle: 'Generated Subtitle', responseContent: 'Generated content' };
     * ```
     */
    subTitle?: default_2.ReactNode;
    /**
     * Prompt that produced this output.
     * ```jsx
     * const output = { prompt: 'User prompt', responseContent: 'Generated content' };
     * ```
     */
    prompt?: string;
    /**
     * Generated response content.
     * ```jsx
     * const output = { responseContent: 'Generated content' };
     * ```
     */
    responseContent: string;
    /**
     * Indicates if this output is a retry.
     * ```jsx
     * const output = { isRetry: true, responseContent: 'Generated content' };
     * ```
     */
    isRetry?: boolean;
    /**
     * Rating type applied to the output.
     * ```jsx
     * const output = { ratingType: 'positive', responseContent: 'Generated content' };
     * ```
     */
    ratingType?: string;
    /**
     * Command that triggered the prompt generation.
     * ```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;
    /**
     * 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;
}

/**
 * Props of the AIPrompt component.
 */
export declare interface AIPromptProps extends default_2.HTMLAttributes<HTMLElement> {
    /**
     * Inline styles for the root element.
     * ```jsx
     * <AIPrompt style={{ backgroundColor: 'lightblue' }} />
     * ```
     */
    style?: default_2.CSSProperties;
    /**
     * Sets the name of the `activeView` property:
     * ```jsx
     * <AIPrompt activeView="promptView" />
     * ```
     */
    activeView: typeof promptViewDefaults.name | typeof outputViewDefaults.name | typeof commandsViewDefaults.name | string;
    /**
     * Items rendered in the toolbar.
     * The items rendered in the toolbar. the `toolbarItems` property:
     * ```jsx
     * <AIPrompt toolbarItems={[<CustomToolbarItem />]} />
     * ```
     */
    toolbarItems?: (AIPromptToolbarItemInterface | default_2.ReactNode)[];
    /**
     * Output items generated from prompts.
     *
     * @hidden
     */
    outputs?: AIPromptOutputInterface[];
    /**
     * Custom content rendered inside the component.
     * ```jsx
     * <AIPrompt>
     *   <div>Custom content</div>
     * </AIPrompt>
     * ```
     */
    children?: default_2.ReactNode;
    /**
     * Placeholder text for the prompt input.
     * ```jsx
     * <AIPrompt promptPlaceholder="Type your prompt here..." />
     * ```
     */
    promptPlaceholder?: string;
    /**
     * Text direction of the component.
     * ```jsx
     * <AIPrompt dir="rtl" />
     * ```
     */
    dir?: string;
    /**
     * Fires when the active view changes. Provides the new view name.
     * ```jsx
     * <AIPrompt onActiveViewChange={(name) => console.log('Active view changed to:', name)} />
     * ```
     */
    onActiveViewChange?: (name: string) => void;
    /**
     * Fires when a command is executed.
     * ```jsx
     * <AIPrompt onCommandExecute={(command) => console.log('Command executed:', command)} />
     * ```
     */
    onCommandExecute?: (command: CommandInterface) => void;
    /**
     * Fires when a prompt is requested. Provides the prompt and optional target output.
     * ```jsx
     * <AIPrompt onPromptRequest={(prompt) => console.log('Prompt requested:', prompt)} />
     * ```
     */
    onPromptRequest?: (prompt?: string, outputItem?: AIPromptOutputInterface) => void;
    /**
     * Fires when the prompt is canceled.
     * ```jsx
     * <AIPrompt onCancel={() => console.log('Prompt cancelled')} />
     * ```
     */
    onCancel?: () => void;
    /**
     * Indicates streaming state of the prompt.
     * ```jsx
     * <AIPrompt streaming={true} />
     * ```
     */
    streaming?: boolean;
    /**
     * Indicates loading state of the prompt.
     * ```jsx
     * <AIPrompt loading={true} />
     * ```
     */
    loading?: boolean;
    /**
     * Optionally specifies the rendering for the suggestions displayed in the AI Prompt component.
     */
    suggestionsView?: SuggestionsView;
}

/**
 * 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_2;
    /**
     * 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[];
    /**
     * Show speech to text button in input. When true, shows the button with default settings.
     * When an object is provided, passes those props directly to the SpeechToTextButton component.
     *
     * @default false
     */
    enableSpeechToText?: boolean | SpeechToTextButtonProps;
}

/**
 * Represents the KendoReact AIPromptViewRender component.
 */
export declare const AIPromptViewRender: (props: AIPromptViewRenderProps) => default_2.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_2.ReactNode;
}

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

/**
 * Specifies the layout for 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 const Chat: React_2.ForwardRefExoticComponent<ChatProps & React_2.RefAttributes<HTMLDivElement>>;

/**
 * Arguments for the `actionexecute` event of the Chat.
 */
export declare interface ChatActionExecuteEvent extends Omit<BaseEvent<React_2.Component>, 'target'> {
    /**
     * The executed action.
     */
    action: Action;
    /**
     * The target message.
     */
    target?: Message;
}

/**
 * Represents a file attachment in a Chat message.
 */
export declare interface ChatFile {
    /**
     * Unique identifier for the file.
     */
    id: string;
    /**
     * Name of the file.
     */
    name: string;
    /**
     * Size of the file in bytes.
     */
    size: number;
    /**
     * MIME type of the file (for example, `application/pdf`).
     */
    type: string;
    /**
     * Optional URL to download or view the file.
     */
    url?: string;
    /**
     * Optional preview image URL for the file.
     */
    thumbnailUrl?: string;
}

/**
 * Represents the ChatMessage component.
 */
export declare const ChatMessage: React_2.FC<ChatMessageProps>;

/**
 * Represents a Chat message box.
 */
export declare interface ChatMessageBoxProps {
    /**
     * Input message element of the Chat.
     */
    messageInput: React.ReactElement;
    /**
     * Send button element of the Chat.
     */
    sendButton: React.ReactElement;
}

/**
 * Represents the properties of `ChatMessage` component.
 */
export declare interface ChatMessageProps {
    /**
     * 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;
    /**
     * Represents the date format of the message date.
     */
    dateFormat?: string;
    /**
     * Sets the `selected` state of the component.
     */
    selected: boolean;
    /**
     * Determines whether messages can be collapsed/expanded when multiple consecutive messages are from the same author.
     */
    allowMessageCollapse?: boolean;
    /**
     * @hidden
     * Defines the actions that will be displayed in the message toolbar.
     * This can include buttons for actions like reply, edit, delete, etc.
     */
    messageToolbarActions?: MessageAction[];
    /**
     * @hidden
     * Defines the actions that will be displayed in the message context menu.
     * This can include buttons for actions like reply, edit, delete, etc.
     */
    messageContextMenuActions?: MessageAction[];
    /**
     * @hidden
     */
    isSender?: boolean;
}

/**
 * Represents the properties available to the `messageTemplate` custom component.
 *
 * For more information, refer to the [Message Template]({% slug customization_message_templates_chat %}) article.
 */
export declare interface ChatMessageTemplateProps {
    /**
     * The message data object containing all information about the message to be rendered.
     */
    item: MessageModel;
}

export declare interface ChatProps extends FieldMappingConfig {
    /**
     * CSS class of the Chat DOM element.
     */
    className?: string;
    /**
     * ID of the Chat component.
     */
    id?: string;
    /**
     * Messages of the Chat. Can be an array of `Message` objects or raw data objects
     * that map using the field mapping configuration.
     */
    messages: Message[] | any[];
    /**
     * ID of the local user. Identifies messages authored by the local user.
     */
    authorId: number | string;
    /**
     * React functional or class component used as a message template. The corresponding [`message`]({% slug api_conversational-ui_message %}) is passed as an `item` property.
     */
    messageTemplate?: React.ComponentType<ChatMessageTemplateProps>;
    /**
     * React functional or class component used as an attachment template ([see example]({% slug attachments_chat %}#toc-attachment-templates)). The corresponding [`attachment`]({% slug api_conversational-ui_attachment %}) is passed as an `item` property.
     */
    attachmentTemplate?: any;
    /**
     * Width of the Chat.
     */
    width?: string | number;
    /**
     * Height of the Chat.
     */
    height?: string | number;
    /**
     * Fires when the user types a message and clicks **Send** or presses **Enter**. Emits [`SendMessageEvent`]({% slug api_conversational-ui_ChatSendMessageEvent %}).
     *
     * > The Chat does not automatically update with the new message.
     */
    onSendMessage?: (event: ChatSendMessageEvent) => 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 [`ExecuteActionEvent`]({% slug api_conversational-ui_chatactionexecuteevent %}). The event is preventable. If you call `preventDefault`, the built-in action is suppressed.
     */
    onActionExecute?: (event: ChatActionExecuteEvent) => void;
    /**
     * Direction of the Chat component.
     */
    dir?: string;
    /**
     * Text displayed inside the new message input when empty.
     */
    placeholder?: string;
    /**
     * Enables customization or override of the default message box item ([see example]({% slug customization_messagebox_templates_chat %})).
     */
    messageBox?: React.ComponentType<ChatMessageBoxProps>;
    /**
     * Represents the ChatMessage component.
     */
    message?: React.ComponentType<ChatMessageProps>;
    /**
     * List of message suggestions displayed above the message input.
     */
    suggestions?: ChatSuggestion[];
    /**
     * Template for suggestion items displayed above the message input.
     */
    suggestionTemplate?: React.ComponentType<SuggestionTemplateProps>;
    /**
     * Fires when a suggestion is clicked. Provides the clicked suggestion.
     */
    onSuggestionClick?: (suggestion: ChatSuggestion) => void;
    /**
     * Template for the header of the Chat component.
     */
    headerTemplate?: React.ReactElement | (() => React.ReactElement);
    /**
     * Template for the timestamp of the message.
     */
    timestampTemplate?: React.ComponentType<{
        item: DateMarker;
    }>;
    /**
     * Template for status items below each message.
     */
    statusTemplate?: React.ComponentType<StatusTemplateProps>;
    /**
     * Enables expand or collapse for messages to save space.
     */
    allowMessageCollapse?: boolean;
    /**
     * Actions displayed in the message toolbar.
     */
    messageToolbarActions?: MessageAction[];
    /**
     * Actions displayed in the message context menu.
     */
    messageContextMenuActions?: MessageAction[];
    /**
     * Actions displayed for files in the message.
     */
    fileActions?: MessageAction[];
    /**
     * Fires when a message is unpinned. Provides the message.
     */
    onUnpin?: (message: Message) => void;
    /**
     * Sets the message width mode.
     * - `full`&mdash;Message occupies the full width of the Chat.
     * - `standard`&mdash;Message occupies a standard width for a compact display.
     *
     * @default 'standard'
     */
    messageWidthMode?: 'full' | 'standard';
    /**
     * Enables the speech-to-text functionality in the Chat.
     * This allows users to dictate messages instead of typing them.
     */
    speechToTextConfig?: boolean | SpeechToTextButtonProps;
    /**
     * Sets the upload configuration for the Chat component.
     * This can be used to customize the file upload behavior, such as accepted file types and maximum file size.
     */
    uploadConfig?: boolean | UploadProps;
    /**
     * Configures the appearance and behavior of the send button in the Chat component.
     */
    sendButtonConfig?: ButtonProps;
    /**
     * Fires when a toolbar action is executed on a message. Provides the action and target message.
     */
    onToolbarAction?: (action: MessageAction, event: React.SyntheticEvent<any>, target: Message) => void;
    /**
     * Fires when a context menu action is executed on a message. Provides the action and target message.
     */
    onContextMenuAction?: (action: MessageAction, event: React.SyntheticEvent<any>, target: Message) => void;
    /**
     * Fires when a file action is executed on a message. Provides the action and target file.
     */
    onFileAction?: (action: FileAction, event: React.SyntheticEvent<any>, target: ChatFile) => void;
    /**
     * Fires when a download action is executed on a message. Provides the selected files and parent message.
     */
    onDownload?: (files: ChatFile[], message: Message) => void;
    /**
     * Fires when the input value changes. Provides the new input value.
     */
    onInputValueChange?: (value: string) => void;
    /**
     * Input value of the Chat component.
     */
    inputValue?: string;
}

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

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

/**
 * Represents the structure of a chat suggestion item that can be displayed above the message input.
 *
 * @interface ChatSuggestion
 */
export declare interface ChatSuggestion {
    /**
     * The unique identifier for the suggestion.
     */
    id: string | number;
    /**
     * The text content of the suggestion that will be displayed to the user.
     */
    text: string;
    /**
     * An optional description that provides additional context for the suggestion.
     */
    description?: string;
    /**
     * Determines whether the suggestion is disabled and cannot be clicked.
     */
    disabled?: boolean;
    /**
     * The visual style for displaying the suggestion. Can be 'classic' for rectangular styling or 'modern' for chip-like styling.
     */
    suggestionsView?: SuggestionsView;
}

/**
 * Arguments for the `toolbaractionexecute` event of the Chat.
 */
export declare interface ChatToolbarActionExecuteEvent extends BaseEvent<React_2.Component> {
    /**
     * 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;
    /**
     * Optional prompt function that takes selected text and returns a formatted prompt.
     * This is used by default commands and can be used by custom commands.
     */
    prompt?: (selection: string) => string;
}

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

/**
 * @hidden
 */
declare interface DateMarker {
    type: 'date-marker';
    timestamp: Date;
    trackBy: any;
}

/**
 * Default field mapping configuration.
 * These are the standard field names expected by the Chat component.
 *
 * @hidden
 */
export declare const DEFAULT_FIELD_MAPPING: Required<FieldMappingConfig>;

/**
 * Extracts field mapping configuration from ChatProps
 *
 * @param props - ChatProps containing field mapping properties
 * @returns FieldMappingConfig object
 */
export declare const extractFieldMappingFromProps: (props: any) => FieldMappingConfig;

/**
 * Configuration for mapping custom data fields to Chat properties.
 * Lets the Chat work with various data source formats by mapping
 * your field names to expected Chat interface properties.
 */
export declare interface FieldMappingConfig {
    /**
     * Field name for message text content.
     *
     * @default 'text'
     */
    textField?: string;
    /**
     * Field name for message status.
     *
     * @default 'status'
     */
    statusField?: string;
    /**
     * Field name for message author ID.
     *
     * @default 'authorId'
     */
    authorIdField?: string;
    /**
     * Field name for message author name (when flattened).
     *
     * @default 'authorName'
     */
    authorNameField?: string;
    /**
     * Field name for message author avatar URL (when flattened).
     *
     * @default 'authorImageUrl'
     */
    authorImageUrlField?: string;
    /**
     * Field name for alt text of the author's avatar (when flattened).
     *
     * @default 'authorImageAltText'
     */
    authorImageAltTextField?: string;
    /**
     * Field name for message ID.
     *
     * @default 'id'
     */
    idField?: string;
    /**
     * Field name for message timestamp.
     *
     * @default 'timestamp'
     */
    timestampField?: string;
    /**
     * Field name for file attachments.
     *
     * @default 'files'
     */
    filesField?: string;
    /**
     * Field name for message attachments.
     *
     * @default 'attachments'
     */
    attachmentsField?: string;
    /**
     * Field name for reply-to message ID.
     *
     * @default 'replyToId'
     */
    replyToIdField?: string;
    /**
     * Field name for message deletion status.
     *
     * @default 'isDeleted'
     */
    isDeletedField?: string;
    /**
     * Field name for message pinned status.
     *
     * @default 'isPinned'
     */
    isPinnedField?: string;
    /**
     * Field name for the `typing` property of a message.
     *
     * @default 'typing'
     */
    typingField?: string;
    /**
     * Field name for the `suggestedActions` property of a message.
     *
     * @default 'suggestedActions'
     */
    suggestedActionsField?: string;
}

/**
 * Represents a file action that can be performed on a file in the chat.
 */
export declare interface FileAction extends MessageAction {
}

/**
 * Represents a Hero Card component. Hero cards host a single large image and action buttons with text content.
 */
export declare const HeroCard: React_2.FC<HeroCardProps>;

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

export declare interface HeroCardProps {
    /**
     * The URL of the hero card image.
     */
    imageUrl: string;
    /**
     * The alt text for the hero card image.
     */
    altText?: 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;
}

export declare const InlineAIPrompt: (props: InlineAIPromptProps) => JSX.Element;

export declare interface InlineAIPromptOutputInterface {
    /**
     * Example usage of the `id` property:
     * ```jsx
     * const output = { id: 1, responseContent: 'Generated content' };
     * ```
     */
    id: string | number;
    /**
     * 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;
}

declare interface InlineAIPromptPopupProps {
    /**
     * Controls the visibility of the popup.
     *
     * @default false
     */
    show?: boolean;
    /**
     * The element that serves as an anchor for the popup.
     */
    anchor?: HTMLElement | null;
    /**
     * Fires when the popup is opened.
     */
    onOpen?: (event: {
        target: any;
    }) => void;
    /**
     * Fires when the popup is closed.
     */
    onClose?: (event: {
        target: any;
    }) => void;
    /**
     * Controls the animation of the popup.
     *
     * @default true
     */
    animate?: boolean | PopupAnimation;
    /**
     * The container element where the popup will be rendered.
     * If not specified, the popup will be rendered in the document body.
     */
    appendTo?: HTMLElement;
    /**
     * Object which passes props directly to the Popup component.
     */
    popupOptions?: PopupProps;
    /**
     * The content to render inside the popup.
     */
    children?: default_2.ReactNode;
    /**
     * Additional CSS styles for the popup content.
     */
    style?: default_2.CSSProperties;
}

export declare interface InlineAIPromptProps extends Omit<default_2.HTMLAttributes<HTMLElement>, 'onCopy'>, InlineAIPromptPopupProps {
    /**
     * Inline styles for the root element.
     * ```jsx
     * <InlineAIPrompt style={{ backgroundColor: 'lightblue' }} />
     * ```
     */
    style?: default_2.CSSProperties;
    /**
     * Collection of outputs to display as cards.
     */
    outputs?: InlineAIPromptOutputInterface[];
    /**
     * Template that lets you define custom Card fields for header, body, and actions. Overrides defaults.
     */
    outputCard?: AIPromptCardInterface_2;
    /**
     * Placeholder text for the prompt input.
     */
    promptPlaceholder?: string;
    /**
     * Initial value of the prompt input.
     */
    promptValue?: string;
    /**
     * Fires when the user submits a prompt.
     */
    onPromptRequest?: (prompt: string, outputItem?: InlineAIPromptOutputInterface) => void;
    /**
     * Fires when the cancel action occurs.
     */
    onPromptCancel?: () => void;
    /**
     * Fires when the user clicks the Copy button.
     */
    onCopy?: (output: InlineAIPromptOutputInterface) => void;
    /**
     * Fires when the user clicks the Discard button.
     */
    onDiscard?: (output: InlineAIPromptOutputInterface) => void;
    /**
     * Collection of output actions rendered in the card actions.
     * If not set, default actions (`copy`, `discard`) are used. You can override built-ins.
     */
    outputActions?: OutputActionInterface[];
    /**
     * Fires when an action command executes.
     * Built-in `copy` and `discard` actions are handled internally.
     * All other actions call this handler.
     */
    onOutputAction?: (command: OutputActionInterface, output: InlineAIPromptOutputInterface) => void;
    /**
     * Custom component used to render the prompt input.
     */
    promptInput?: CustomComponent<TextAreaProps>;
    /**
     * Custom component used to render the generate button.
     */
    generateButton?: CustomComponent<ButtonProps>;
    /**
     * Shows speech-to-text button in the input. When `true`, shows the button with default settings.
     * When you pass an object, forwards its props to the `SpeechToTextButton` component.
     *
     * @default false
     */
    enableSpeechToText?: boolean | SpeechToTextButtonProps;
    /**
     * Indicates if the content is streaming.
     */
    streaming?: boolean;
    /**
     * Collection of commands rendered in the context menu.
     * If not set, default AI text editing commands are used.
     */
    commands?: CommandInterface[];
    /**
     * The width of the component.
     */
    width?: number | string;
    /**
     * The height of the component.
     */
    height?: number | string;
    /**
     * Fires when a command from the context menu executes. Provides the selected command and current prompt value.
     */
    onCommandExecute?: (command: CommandItemInterface) => void;
}

/**
 * Checks if the provided message data is already in the standard Message format
 *
 * @param message - Message data to check
 * @returns True if the message is in standard format, false otherwise
 */
export declare const isStandardMessageFormat: (message: any) => message is Message;

/**
 * Maps an array of raw data objects to Message array
 *
 * @param dataArray - Array of raw data objects
 * @param fieldMapping - Field mapping configuration (optional)
 * @returns Array of mapped Message objects
 */
export declare const mapDataArrayToMessages: (dataArray: any[], fieldMapping?: FieldMappingConfig) => Message[];

/**
 * Maps raw data object to standardized Message interface using field mapping configuration
 *
 * @param data - Raw data object from external source
 * @param fieldMapping - Field mapping configuration (optional)
 * @returns Mapped Message object
 */
export declare const mapDataToMessage: (data: any, fieldMapping?: FieldMappingConfig) => Message;

/**
 * Maps a standard Message object back to custom field format
 * This is useful when you receive a new message in standard format but need to convert it
 * to your custom field mapping for data storage or API calls
 *
 * @param message - Standard Message object
 * @param fieldMapping - Field mapping configuration (optional)
 * @returns Object with custom field names
 */
export declare const mapMessageToCustomFormat: (message: Message, fieldMapping?: FieldMappingConfig) => any;

/**
 * Represents a Chat message.
 *
 * > * Provide the `author` field.
 * > * [Local users]({% slug api_conversational-ui_chatprops %}#toc-user) display to the right in left-to-right languages and to the left in right-to-left languages.
 * > * If `typing` is `true`, the Chat displays a typing indicator instead of text.
 */
export declare interface Message {
    /**
     * Unique identifier of the message.
     */
    id: number | string;
    /**
     * Author of the message.
     */
    author: User;
    /**
     * Layout used for displaying message attachments, if any ([see example]({% slug attachments_chat %}#toc-display-modes)).
     */
    attachmentLayout?: AttachmentLayout;
    /**
     * Optional message attachments ([see example]({% slug attachments_chat %})).
     */
    attachments?: Attachment[];
    /**
     * Suggested quick actions displayed below this message ([see example]({% slug quick_actions_suggested_actions_chat %}#toc-defining-quick-actions)).
     *
     * > The Chat displays suggested actions only for the last message in the conversation.
     */
    suggestedActions?: Action[];
    /**
     * Optional status string for the message.
     * Displays when you select the message by mouse or keyboard.
     */
    status?: string;
    /**
     * Optional text for the message.
     * Some messages contain only attachments or quick actions.
     */
    text?: string;
    /**
     * Time when the message was composed.
     */
    timestamp?: Date;
    /**
     * Indicates if the user is still typing the message.
     * If `true`, the Chat displays a typing indicator instead of the message.
     */
    typing?: boolean;
    /**
     * Indicates if the message is loading.
     * If `true`, the Chat displays a skeleton placeholder instead of the content.
     */
    isLoading?: boolean;
    /**
     * Indicates if the message is pinned.
     */
    isPinned?: boolean;
    /**
     * Date and time when the message was pinned.
     */
    pinnedAt?: Date;
    /**
     * User who pinned the message.
     */
    pinnedBy?: User;
    /**
     * ID of the message this message replies to.
     */
    replyToId?: number | string;
    /**
     * Indicates if the message has been deleted.
     */
    isDeleted?: boolean;
    /**
     * Files attached to the message.
     */
    files?: any[];
    /**
     * Index used for keyboard selection navigation.
     */
    selectionIndex?: number;
}

/**
 * Represents a message action that can be displayed in the message toolbar.
 */
declare interface MessageAction {
    /**
     * The unique identifier for the action.
     */
    id: string;
    /**
     * The label to display for the action.
     */
    label: string;
    /**
     * The SVG icon to display for the action.
     */
    svgIcon?: SVGIcon;
    /**
     * The icon to display for the action.
     */
    icon?: string;
}

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

export declare interface OutputActionInterface {
    /**
     * Unique identifier for the action command.
     */
    id: string;
    /**
     * Text displayed on the button.
     */
    text: string;
    /**
     * SVG icon displayed on the button.
     */
    svgIcon?: any;
    /**
     * Theme color of the button.
     */
    themeColor?: ButtonProps['themeColor'];
    /**
     * Title attribute (tooltip) for the button.
     */
    title?: string;
    /**
     * If `true`, adds a spacer in the action commands section for visual separation.
     * Useful for visually separating groups of actions.
     */
    spacer?: boolean;
}

/**
 * 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 the properties available to the `statusTemplate` custom component.
 */
export declare interface StatusTemplateProps {
    /**
     * Message item containing the status information.
     */
    item: Message;
}

export declare const SuggestionGroup: React_2.FC<SuggestionGroupProps>;

declare interface SuggestionGroupProps {
    suggestions: ChatSuggestion[];
    onSuggestionClick?: (suggestion: ChatSuggestion) => void;
    suggestionTemplate?: React_2.ComponentType<SuggestionTemplateProps>;
    suggestionsView?: SuggestionsView;
}

/**
 * Represents the rendering options for suggestions in the AI Prompt component.
 * 'suggestionsView' can be either 'classic' or 'modern'.
 * - 'classic': Uses a rectangular styling for suggestions.
 * - 'modern': Uses a chip-like styling for suggestions.
 */
export declare type SuggestionsView = 'classic' | 'modern';

export declare interface SuggestionTemplateProps {
    /**
     * The suggestion object containing the data to be rendered.
     */
    suggestion: ChatSuggestion;
    /**
     * A callback function that is called when the suggestion is clicked.
     */
    onClick?: (event: React_2.MouseEvent<HTMLElement>) => void;
}

/**
 * Represents a participant in a Chat conversation.
 */
export declare interface User {
    /**
     * Unique ID for this user.
     * Typically a number. Can be a string or an object.
     */
    id: any;
    /**
     * Optional displayed name for the user.
     */
    name?: string;
    /**
     * Optional avatar image URL for the user.
     */
    avatarUrl?: string;
    /**
     * Optional avatar image `alt` text for the user.
     */
    avatarAltText?: string;
}

export { }