Chat

Example

Razor

<kendo-chat>
    <action-button></action-button>
    <author-message-settings></author-message-settings>
    <datasource></datasource>
    <file-actions></file-actions>
    <file-attachment></file-attachment>
    <files-template></files-template>
    <header-items></header-items>
    <message-actions></message-actions>
    <message-box></message-box>
    <message-group-template></message-group-template>
    <message-reference-template></message-reference-template>
    <message-status-settings></message-status-settings>
    <message-template></message-template>
    <message-toolbar-actions></message-toolbar-actions>
    <messages />
    <receiver-message-settings></receiver-message-settings>
    <speech-to-text />
    <suggested-actions-template></suggested-actions-template>
    <suggestions></suggestions>
    <suggestions-template></suggestions-template>
    <timestamp-template></timestamp-template>
    <toolbar></toolbar>
    <user />
</kendo-chat>

ChildTags

Tag Name	Details
action-button	ChatActionButtonSettingsTagHelper
author-message-settings	ChatMessageSettingsTagHelper
datasource	DataSourceTagHelper
file-actions	ChatFileActionsTagHelper
file-attachment	ChatFileAttachmentSettingsTagHelper
files-template	TemplateTagHelper
header-items	AppBarItemsTagHelper
message-actions	ChatMessageActionsTagHelper
message-box	ChatMessageBoxSettingsTagHelper
message-group-template	TemplateTagHelper
message-reference-template	TemplateTagHelper
message-status-settings	ChatMessageStatusSettingsSettingsTagHelper
message-template	TemplateTagHelper
message-toolbar-actions	ChatMessageToolbarActionsTagHelper
messages	ChatMessagesSettingsTagHelper
receiver-message-settings	ChatMessageSettingsTagHelper
speech-to-text	ChatSpeechToTextSettingsTagHelper
suggested-actions-template	TemplateTagHelper
suggestions	ChatSuggestionsTagHelper
suggestions-template	TemplateTagHelper
timestamp-template	TemplateTagHelper
toolbar	ChatToolbarSettingsTagHelper
user	ChatUserSettingsTagHelper

Attributes

Attribute	Type	Description
name	String	Sets the name of the component.
as-module	Boolean	Specifies whether the initialization script of the component will be rendered as a JavaScript module.
is-in-client-template	Boolean	When placing a Tag Helper within a Kendo Template, set the type to text/html and add the is-in-client-template="true" attribute.
deferred	Boolean	Suppress initialization script rendering. Note that this options should be used in conjunction with DeferredScripts method.
allow-message-collapse	Boolean	Enables or disables message collapsing functionality for expandable messages. When enabled, long messages can be collapsed to save screen space.
attachment-layout	ChatAttachmentLayout	Sets the default layout mode for rich attachments.
attachment-layout-field	String	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.
attachments-field	String	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.
attachment-template-handler	String	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. This option expects the name of a JavaScript function that will be called to return the template.
author-id	String	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).
author-id-field	String	Specifies the field name in the data source from which the message author's unique identifier will be read.
author-image-alt-text-field	String	Specifies the field name in the data source from which the alt text for the author's avatar image will be read.
author-image-url-field	String	Specifies the field name in the data source from which the URL for the author's avatar image will be read.
author-name-field	String	Specifies the field name in the data source from which the author's display name will be read.
auto-assign-id	Boolean	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.
auto-bind	Boolean	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.
auto-scroll-threshold	Double	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.
bind-to	IEnumerable<ChatMessage>	The collection of data items which the data source contains.
datasource-id	String	The data source id
dir	TextDirection	Specifies the text direction of the Chat.
failed-field	String	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.
files-field	String	Specifies the field name in the data source from which the array of files attached to a message will be read.
files-layout-mode	ChatFilesLayout	Controls the layout mode for file attachments within messages.
files-template-handler	String	The template used to render file attachments in messages. This option expects the name of a JavaScript function that will be called to return the template.
files-template-id	String	The template used to render file attachments in messages. This option expects the ID of the script element that contains the template.
header-template-handler	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. This option expects the name of a JavaScript function that will be called to return the template.
height	String	Sets the height of the Chat component.
id-field	String	Specifies the field name in the data source from which the unique identifier for each message will be read.
is-deleted-field	String	Specifies the field name in the data source that indicates whether a message has been deleted.
is-pinned-field	String	Specifies the field name in the data source that indicates whether a message is pinned.
is-typing-field	String	Specifies the field name in the data source that indicates whether a message is currently being typed.
loading	Boolean	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.
message-box-template-handler	String	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. This option expects the name of a JavaScript function that will be called to return the template.
message-content-template-handler	String	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. This option expects the name of a JavaScript function that will be called to return the template.
message-group-template-handler	String	The template used to render message groups. This option expects the name of a JavaScript function that will be called to return the template.
message-group-template-id	String	The template used to render message groups. This option expects the ID of the script element that contains the template.
message-reference-template-handler	String	The template used to render message references (replies and pinned messages). This option expects the name of a JavaScript function that will be called to return the template.
message-reference-template-id	String	The template used to render message references (replies and pinned messages). This option expects the ID of the script element that contains the template.
message-status-template-handler	String	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. This option expects the name of a JavaScript function that will be called to return the template.
message-template-handler	String	The template used to render individual messages. This option expects the name of a JavaScript function that will be called to return the template.
message-template-id	String	The template used to render individual messages. This option expects the ID of the script element that contains the template.
message-time-format	String	The format string used to display message timestamps.
message-width-mode	ChatMessageWidth	Sets the message width mode.
no-data-template-handler	String	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. This option expects the name of a JavaScript function that will be called to return the template.
on-context-menu-action	String	The name of the JavaScript function that will handle the contextMenuAction event. Fired when a message context menu action is executed. This event allows you to handle custom message actions and respond to user interactions with message context menus.
on-download	String	The name of the JavaScript function that will handle the download event. Fired when a download action is triggered, either from the "Download All" button or from a file menu download action.
on-execute-action	String	The name of the JavaScript function that will handle the executeAction event. Fired when the user clicks an action button in an attachment card. Use this event to handle custom actions defined in attachment data.
on-file-menu-action	String	The name of the JavaScript function that will handle the fileMenuAction event. Fired when a file context menu action is executed. This event allows you to handle custom file actions and respond to user interactions with file attachments.
on-file-remove	String	The name of the JavaScript function that will handle the fileRemove event. Fired when the user removes a file attachment.
on-file-select	String	The name of the JavaScript function that will handle the fileSelect event. Fired when the user selects files using the file attachment button.
on-input	String	The name of the JavaScript function that will handle the input event. Fired when the user types in the message input field.
on-resend-message	String	The name of the JavaScript function that will handle the resendMessage event. Fired when the user clicks the retry button on a failed message. Use this event to re-attempt message delivery.
on-send-message	String	The name of the JavaScript function that will handle the sendMessage event. Fired when the user clicks the action button (send or stop). This is the primary event for handling message submission and stop generation requests.The postMessage method do not trigger this event.
on-suggestion-click	String	The name of the JavaScript function that will handle the suggestionClick event. Fired when a user clicks a suggestion in the Chat. Global suggestions always trigger this event. Per-message suggestedActions trigger this event when suggestionsBehavior is set to "insert"; otherwise they flow through sendMessage.
on-toolbar-action	String	The name of the JavaScript function that will handle the toolbarAction event. Fired when a toolbar action is executed on a message. This event allows you to handle custom toolbar actions and respond to user interactions with message controls.
on-unpin	String	The name of the JavaScript function that will handle the unpin event. Fired when a pinned message is unpinned. This event is triggered when a user clicks the close (X) button on a pinned message.
reply-to-id-field	String	Specifies the field name in the data source that contains the ID of the message being replied to.
script-attributes	IDictionary<String,Object>	Sets the attributes that will be added to the script tag of the component's initialization script.
scroll-to-bottom-button	Boolean	Shows or hides the scroll-to-bottom button that appears when the user scrolls up in the message list.
show-avatar	Boolean	Controls whether avatars are displayed next to messages. This is a global setting that can be overridden per-user via authorMessageSettings and receiverMessageSettings.
show-username	Boolean	Controls whether usernames are displayed above messages. This is a global setting that can be overridden per-user via authorMessageSettings and receiverMessageSettings.
skip-sanitization	Boolean	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.
status-field	String	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.
suggested-actions-layout-mode	SuggestionsLayoutMode	Layout mode for suggested actions.
suggested-actions-scrollable	Boolean	Deprecated: Use suggestedActionsLayoutMode instead.Enables or disables scrollable behavior for suggested actions.
suggested-actions-template-handler	String	The template used to render suggested actions. This option expects the name of a JavaScript function that will be called to return the template.
suggested-actions-template-id	String	The template used to render suggested actions. This option expects the ID of the script element that contains the template.
suggestions-behavior	ChatSuggestionsBehavior	Controls what happens when a user selects a suggestion.
suggestions-layout-mode	SuggestionsLayoutMode	The layout mode for the message box suggestions.
suggestions-scrollable	Boolean	Deprecated: Use suggestionsLayoutMode instead.Enables or disables scrollable behavior for message suggestions.
suggestions-template-handler	String	The template used to render message suggestions. This option expects the name of a JavaScript function that will be called to return the template.
suggestions-template-id	String	The template used to render message suggestions. This option expects the ID of the script element that contains the template.
text-field	String	Specifies the field name in the data source from which the message text content will be read.
timestamp-field	String	Specifies the field name in the data source from which the message timestamp will be read.
timestamp-template-handler	String	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. This option expects the name of a JavaScript function that will be called to return the template.
timestamp-template-id	String	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. This option expects the ID of the script element that contains the template.
timestamp-visibility	ChatTimestampVisibility	Controls the visibility of message timestamps.
user-status-template-handler	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. This option expects the name of a JavaScript function that will be called to return the template.
width	String	Sets the width of the Chat component.