ChatBuilder

Initializes a new instance of the Chat class.

Configures the action button (send/stop button) in the message input area. Allows customization of icons, text labels, and loading state appearance.

Enables or disables message collapsing functionality for expandable messages. When enabled, long messages can be collapsed to save screen space.

Sets the default layout mode for rich attachments (cards, images) within messages. Individual messages can override this setting via their attachmentLayout data property.

The field of the message data item that provides the attachment layout mode for that specific message. Allows per-message override of the global attachmentLayout setting.

The field of the message data item that provides the rich attachments array. Each attachment object can contain contentType, title, subtitle, thumbnailUrl, and actions properties.

The template used to render individual attachments within messages. Receives the attachment data object and should return an HTML string. When not set, the default attachment rendering is used.The function receives the attachment object with properties such as title, subtitle, image, contentType, and content.

The template used to render individual attachments within messages. Receives the attachment data object and should return an HTML string. When not set, the default attachment rendering is used.The function receives the attachment object with properties such as title, subtitle, image, contentType, and content.

Specifies the unique identifier of the current user. If not set, a GUID will be generated automatically. This determines which messages are displayed as "own messages" (right-aligned) versus "other messages" (left-aligned).

Specifies the field name in the data source from which the message author's unique identifier will be read.

Specifies the field name in the data source from which the alt text for the author's avatar image will be read.

Specifies the field name in the data source from which the URL for the author's avatar image will be read.

User-specific message settings applied to messages sent by the current user (author). These settings override the global display options like showAvatar, showUsername, and messageWidthMode for author messages only. See also receiverMessageSettings.The object accepts the following properties: showAvatar - Boolean - Whether to show the avatar for author messages.; showUsername - Boolean - Whether to show the username for author messages.; messageWidthMode - String - Message width mode: "standard" or "full".; allowMessageCollapse - Boolean - Whether author messages can be collapsed.; messageTemplate - Function - Template override for author messages. Receives the same arguments as messageTemplate.; messageContentTemplate - Function - Content template override for author messages. Receives the current message object.; enableFileActions - Boolean - Whether file actions are enabled for author messages.; enableContextMenuActions - Boolean - Whether context menu actions are enabled for author messages.; messageToolbarActions - Array - Toolbar actions specific to author messages. or messageActions - Array - Context menu actions specific to author messages..

Specifies the field name in the data source from which the author's display name will be read.

Enables or disables automatic assignment of a unique ID to each message posted in the chat. When enabled, messages without an explicit ID will be assigned a generated unique identifier.This option should be set to false if the chat is configured to work with a remote data source and the messages are created on the server. In that case, the id should be assigned on the server itself.

Controls whether the Chat will automatically fetch data from the data source when initialized. When set to false, you must manually call the data source's fetch() method.

Defines the amount of space that is preserved above a newly auto-scrolled incoming message when the user is already near the bottom of the message list. Accepts either a pixel value or a percentage of the visible message list area.

Binds the component to an IEnumerable collection.

Sets the DataSource configuration of the Chat for remote data binding.

Sets the DataSource configuration of the Chat for remote data binding.

Specifies the text direction of the Chat.

Specifies the delay in milliseconds before the Chat loads older or newer messages after the user reaches an endless-scroll edge. The delay applies only to endless edge-trigger loading and does not affect the scroll-to-bottom button behavior or separator updates.

Configures the client-side events.

The field of the message data item that provides the failed flag. When true, the message is rendered with a failed state indicator and a retry button.

Defines the collection of actions that will be rendered in the context menu for file attachments. Each action represents an operation that users can perform on files (download, delete, preview, etc.).

Configures the file select button (attachment button) in the message input area. Can be set to: true: Shows the button with default settings; false: Hides the button completely (does not render) or Object: Shows the button with custom configuration.

Configures the file select button (attachment button) in the message input area. Can be set to: true: Shows the button with default settings; false: Hides the button completely (does not render) or Object: Shows the button with custom configuration.

Specifies the field name in the data source from which the array of files attached to a message will be read.

Controls the layout mode for file attachments within messages. Available modes are "vertical" (stacked), "horizontal" (side-by-side with scrolling), and "wrap" (wrapping flow layout).

The template used to render file attachments in messages.

The template used to render file attachments in messages.

The template used to render file attachments in messages.

Defines the collection of items that will be rendered in the Chat header. Each item represents a component or content that appears in the header area above the message list. The items follow the same structure as AppBar items.

A custom template function for rendering the chat header. When set, this overrides the headerItems configuration and provides full control over the header content. The function should return an HTML string.

A custom template function for rendering the chat header. When set, this overrides the headerItems configuration and provides full control over the header content. The function should return an HTML string.

Sets the height of the Chat component.

Specifies the field name in the data source from which the unique identifier for each message will be read.

Specifies the field name in the data source that indicates whether a message has been deleted.

Specifies the field name in the data source that indicates whether a message is pinned.

Specifies the field name in the data source that indicates whether a message is currently being typed.

Sets the initial loading state of the Chat component. When true, the send button displays a loading/stop indicator instead of the send icon. This is useful for AI chat applications where generating responses takes time. See also the loading method for toggling this state at runtime.

Defines the collection of actions that will be rendered in the context menu for messages. By default, the Chat includes four actions: Reply, Copy, and Pin. You can customize this list by providing your own actions or combining default actions with custom ones.Default actions: { name: "reply", text: "Reply", icon: "undo" }; { name: "copy", text: "Copy", icon: "copy" }; { name: "pin", text: "Pin", icon: "pin" } or { name: "delete", text: "Delete", icon: "trash" }.

Configures the message input box (PromptBox) settings. Allows customization of the input mode, rows, height, and nested file select button settings.

The template used to render the message input area at the bottom of the Chat. The function receives no arguments and should return an HTML string for the custom message box markup.When using a custom template, the first textarea or supported text input inside the template is used as the message input. To enable send button behavior, add an element with the ref-chat-message-box-send-button attribute. If the template contains input[type='file'] elements, they participate in the file selection flow.

The template used to render the message input area at the bottom of the Chat. The function receives no arguments and should return an HTML string for the custom message box markup.When using a custom template, the first textarea or supported text input inside the template is used as the message input. To enable send button behavior, add an element with the ref-chat-message-box-send-button attribute. If the template contains input[type='file'] elements, they participate in the file selection flow.

A custom template function for rendering the content area inside message bubbles. This template controls only the text/content portion of messages, not the entire message group structure. When set, it is used for both author and receiver messages unless overridden by authorMessageSettings.messageContentTemplate or receiverMessageSettings.messageContentTemplate.

A custom template function for rendering the content area inside message bubbles. This template controls only the text/content portion of messages, not the entire message group structure. When set, it is used for both author and receiver messages unless overridden by authorMessageSettings.messageContentTemplate or receiverMessageSettings.messageContentTemplate.

The template used to render message groups.

The template used to render message groups.

The template used to render message groups.

The template used to render message references (replies and pinned messages).

The template used to render message references (replies and pinned messages).

The template used to render message references (replies and pinned messages).

Allows localization of the strings that are used in the component.

Custom settings for message status display, allowing you to configure icons, text, and CSS classes for each message delivery status. The object should be a mapping from status values ("sent", "delivered", "seen", "failed") to settings objects.Each status settings object accepts: icon - String - Font icon name to display.; text - String - Text label for the status. or cssClass - String - Additional CSS class to apply to the status element..

A custom template function for rendering message status indicators. Receives a context object with status (the status string) and message (the message object). When set, this overrides the default status rendering and messageStatusSettings.

A custom template function for rendering message status indicators. Receives a context object with status (the status string) and message (the message object). When set, this overrides the default status rendering and messageStatusSettings.

The template used to render individual messages.

The template used to render individual messages.

The template used to render individual messages.

The format string used to display message timestamps.

Defines the collection of actions that will be rendered in the message toolbar.

Sets the messages width mode.

A custom template function for rendering an empty state when the chat has no messages. When set, the template output is displayed in place of the empty message list area, providing a visual cue that the conversation has not started yet.

A custom template function for rendering an empty state when the chat has no messages. When set, the template output is displayed in place of the empty message list area, providing a visual cue that the conversation has not started yet.

Documents the default endless batch size.When scrollMode is set to "endless", the effective batch size comes from dataSource.pageSize() for the initial latest window, older/newer adjacent loads, and jump requests. Configure the bound DataSource page size for endless mode instead of relying on a separate Chat range contract, because a root Chat pageSize value does not override the bound DataSource page size.If the bound DataSource does not declare a valid page size, the Chat seeds the DataSource with the default endless batch size of 20 before the first endless load.

Provides a stable root-level collection that the Chat can use for pinned-message banners when the current endless-scroll window does not contain the pinned target.This option is most useful with scrollMode set to "endless" and a server-paged dataSource.The Chat uses the last item in the pinnedMessages array as the active pinned banner. Each item can be a full message object or a partial object, but it must contain enough data to identify the target and render the pinned banner.If the pinned target is not part of the current remote window, the Chat can still render the banner from pinnedMessages while using the endless endpoint to load the target batch when the banner is clicked.

User-specific message settings applied to messages received from other users. These settings override the global display options like showAvatar, showUsername, and messageWidthMode for receiver messages only. See also authorMessageSettings.The object accepts the following properties: showAvatar - Boolean - Whether to show the avatar for receiver messages.; showUsername - Boolean - Whether to show the username for receiver messages.; messageWidthMode - String - Message width mode: "standard" or "full".; allowMessageCollapse - Boolean - Whether receiver messages can be collapsed.; messageTemplate - Function - Template override for receiver messages. Receives the same arguments as messageTemplate.; messageContentTemplate - Function - Content template override for receiver messages. Receives the current message object.; enableFileActions - Boolean - Whether file actions are enabled for receiver messages.; enableContextMenuActions - Boolean - Whether context menu actions are enabled for receiver messages.; messageToolbarActions - Array - Toolbar actions specific to receiver messages. or messageActions - Array - Context menu actions specific to receiver messages..

Specifies the field name in the data source that contains the ID of the message being replied to.

The scroll mode for the scrollable behavior.

Shows or hides the scroll-to-bottom button that appears when the user scrolls up in the message list.

Controls whether avatars are displayed next to messages. This is a global setting that can be overridden per-user via authorMessageSettings and receiverMessageSettings.

Controls whether usernames are displayed above messages. This is a global setting that can be overridden per-user via authorMessageSettings and receiverMessageSettings.

Controls whether HTML sanitization is skipped when rendering message content. When set to true, the Chat component will not automatically encode HTML entities in message text, allowing for rich HTML content to be displayed. This is useful when integrating with markdown parsers or when you need to display pre-formatted HTML content.Warning: Setting this to true can introduce security vulnerabilities if user input is not properly sanitized elsewhere in your application. Only use this option when you trust the content source or have implemented your own sanitization logic.

Configures speech-to-text functionality in the message input. The button is always visible. When null or not configured, the button is enabled by default. Use { enable: false } to disable it.

Configures speech-to-text functionality in the message input. The button is always visible. When null or not configured, the button is enabled by default. Use { enable: false } to disable it.

Specifies the field name in the data source from which the message status will be read. The status describes the delivery state of the message (e.g. "Sending", "Sent", "Delivered", "Seen", "Failed"). See also messageStatusSettings.

Layout mode for suggested actions.

Enables or disables scrollable behavior for suggested actions.

The template used to render suggested actions.

The template used to render suggested actions.

The template used to render suggested actions.

Defines the collection of suggested messages that users can quickly select. These appear as clickable buttons below the message input area, allowing users to send common responses quickly.

Controls what happens when a user selects a message suggestion. Supported values: "send": The suggestion text is immediately sent as a message. or "insert": The suggestion text is inserted into the message box input, allowing the user to edit it before sending..

The layout mode for the message box suggestions.

Enables or disables scrollable behavior for message suggestions.

The template used to render message suggestions.

The template used to render message suggestions.

The template used to render message suggestions.

Specifies the field name in the data source from which the message text content will be read.

Specifies the field name in the data source from which the message timestamp will be read.

The template used to render timestamp elements that separate message groups by date. When set to null, the default timestamp logic is used which displays relative dates like "Today", "Yesterday", "Last Wednesday", or absolute dates for older messages.The template function receives an object with date (parsed Date object) and message (current message object) properties and should return the complete HTML structure for the timestamp element.Returning null or an empty string will hide the time breaks from the chat.

The template used to render timestamp elements that separate message groups by date. When set to null, the default timestamp logic is used which displays relative dates like "Today", "Yesterday", "Last Wednesday", or absolute dates for older messages.The template function receives an object with date (parsed Date object) and message (current message object) properties and should return the complete HTML structure for the timestamp element.Returning null or an empty string will hide the time breaks from the chat.

The template used to render timestamp elements that separate message groups by date. When set to null, the default timestamp logic is used which displays relative dates like "Today", "Yesterday", "Last Wednesday", or absolute dates for older messages.The template function receives an object with date (parsed Date object) and message (current message object) properties and should return the complete HTML structure for the timestamp element.Returning null or an empty string will hide the time breaks from the chat.

Controls the visibility of message timestamps. Supported values: "onFocus": Timestamps are only visible for selected/focused messages (default behavior). or "hidden": Timestamps are never visible for any messages..

Configures the toolbar of the Chat.

Configures the user information of the Chat.

The template used to render the user status content shown next to the latest message in a receiver group. The function receives a context object with a message field, where message.author contains the normalized author data, and should return an HTML string.

The template used to render the user status content shown next to the latest message in a receiver group. The function receives a context object with a message field, where message.author contains the normalized author data, and should return an HTML string.

Sets the width of the Chat component.