Chat

Example

Razor

<kendo-chat>
    <datasource></datasource>
    <file-actions></file-actions>
    <header-items></header-items>
    <message-actions></message-actions>
    <message-toolbar-actions></message-toolbar-actions>
    <messages />
    <suggestions></suggestions>
    <toolbar></toolbar>
    <user />
</kendo-chat>

ChildTags

Tag Name	Details
datasource	DataSourceTagHelper
file-actions	ChatFileActionsTagHelper
header-items	AppBarItemsTagHelper
message-actions	ChatMessageActionsTagHelper
message-toolbar-actions	ChatMessageToolbarActionsTagHelper
messages	ChatMessagesSettingsTagHelper
suggestions	ChatSuggestionsTagHelper
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.
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.
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.
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.
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.
file-attachment	Boolean	Enables or disables file attachment functionality in the message input.
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-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.
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.
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-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	MessageWidthMode	Sets the message width mode.
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-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-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-send-message	String	The name of the JavaScript function that will handle the sendMessage event. Fired when a message is about to be sent or when the send process is triggered. This event allows you to modify the message before it's sent or handle stop generation requests.
on-suggestion-click	String	The name of the JavaScript function that will handle the suggestionClick event. Fired when a user clicks on a suggested message or action. This event is useful for tracking user engagement with suggestions and handling custom suggestion logic.
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.
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.
speech-to-text	Boolean	Enables or disables speech-to-text functionality in the message input.
suggested-actions-scrollable	Boolean	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-scrollable	Boolean	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.
width	String	Sets the width of the Chat component.