Chat
Kendo UI Chat component
Definition
Namespace:Kendo.Mvc.UI
Assembly:Kendo.Mvc.dll
Syntax:
public class Chat : WidgetBase, IWidget, IHtmlAttributesContainer, IScriptableComponentInheritance: objectWidgetBaseChat
Implements:
Inherited Members
Constructors
Initializes a new instance of the Chat class.
public Chat(ViewContext viewContext, IJavaScriptInitializer initializer, IUrlGenerator urlGenerator)The view context
initializerIJavaScriptInitializerThe JavaScriptInitializer
urlGeneratorIUrlGeneratorThe URL generator.
Properties
Configures the action button (send/stop button) in the message input area. Allows customization of icons, text labels, and loading state appearance.
public ChatActionButtonSettings ActionButton { get; set; }Enables or disables message collapsing functionality for expandable messages. When enabled, long messages can be collapsed to save screen space.
public bool? AllowMessageCollapse { get; set; }Sets the default layout mode for rich attachments.
public ChatAttachmentLayout? AttachmentLayout { get; set; }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.
public string AttachmentLayoutField { get; set; }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.
public string AttachmentsField { get; set; }The handler for the AttachmentTemplate
public string AttachmentTemplateHandler { get; set; }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).
public string AuthorId { get; set; }Specifies the field name in the data source from which the message author's unique identifier will be read.
public string AuthorIdField { get; set; }Specifies the field name in the data source from which the alt text for the author's avatar image will be read.
public string AuthorImageAltTextField { get; set; }Specifies the field name in the data source from which the URL for the author's avatar image will be read.
public string AuthorImageUrlField { get; set; }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..
public ChatMessageSettings AuthorMessageSettings { get; set; }Specifies the field name in the data source from which the author's display name will be read.
public string AuthorNameField { get; set; }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.
public bool? AutoAssignId { get; set; }Controls whether the Chat will automatically fetch data from the data source when initialized.When scrollMode is set to "endless" and the dataSource uses serverPaging, autoBind: false is not supported. Remote endless mode always starts with a Chat-managed latest-window request, and manual dataSource.read() and dataSource.fetch() calls are not supported for that mode.
public bool? AutoBind { get; set; }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.
public double? AutoScrollThreshold { get; set; }public DataSource DataSource { get; }public string DataSourceId { get; set; }Specifies the text direction of the Chat.
public TextDirection? Dir { get; set; }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.
public double? EndlessScrollDebounceDelay { get; set; }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.
public string FailedField { get; set; }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.).
public List<ChatFileAction> FileActions { get; set; }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.
public ChatFileAttachmentSettings FileAttachment { get; set; }Specifies the field name in the data source from which the array of files attached to a message will be read.
public string FilesField { get; set; }Controls the layout mode for file attachments within messages.
public ChatFilesLayout? FilesLayoutMode { get; set; }The handler that returns the template used for FilesTemplate
public string FilesTemplateHandler { get; set; }The id of the script element used for FilesTemplate
public string FilesTemplateId { get; set; }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.
public List<AppBarItem> HeaderItems { get; set; }The handler for the HeaderTemplate
public string HeaderTemplateHandler { get; set; }Specifies the field name in the data source from which the unique identifier for each message will be read.
public string IdField { get; set; }Specifies the field name in the data source that indicates whether a message has been deleted.
public string IsDeletedField { get; set; }Specifies the field name in the data source that indicates whether a message is pinned.
public string IsPinnedField { get; set; }Specifies the field name in the data source that indicates whether a message is currently being typed.
public string IsTypingField { get; set; }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.
public bool? Loading { get; set; }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" }.
public List<ChatMessageAction> MessageActions { get; set; }Configures the built-in message input box (PromptBox). Use this option to customize the default input mode, row count, and auto-grow height when messageBoxTemplate is not set.
public ChatMessageBoxSettings MessageBox { get; set; }The handler for the MessageBoxTemplate
public string MessageBoxTemplateHandler { get; set; }The handler for the MessageContentTemplate
public string MessageContentTemplateHandler { get; set; }The handler that returns the template used for MessageGroupTemplate
public string MessageGroupTemplateHandler { get; set; }The id of the script element used for MessageGroupTemplate
public string MessageGroupTemplateId { get; set; }The handler that returns the template used for MessageReferenceTemplate
public string MessageReferenceTemplateHandler { get; set; }The id of the script element used for MessageReferenceTemplate
public string MessageReferenceTemplateId { get; set; }Allows localization of the strings that are used in the component.
public ChatMessagesSettings Messages { get; set; }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..
public ChatMessageStatusSettingsSettings MessageStatusSettings { get; set; }The handler for the MessageStatusTemplate
public string MessageStatusTemplateHandler { get; set; }The handler that returns the template used for MessageTemplate
public string MessageTemplateHandler { get; set; }The id of the script element used for MessageTemplate
public string MessageTemplateId { get; set; }The format string used to display message timestamps.
public string MessageTimeFormat { get; set; }Defines the collection of actions that will be rendered in the message toolbar.
public List<ChatMessageToolbarAction> MessageToolbarActions { get; set; }public ChatMessageWidth? MessageWidthMode { get; set; }The handler for the NoDataTemplate
public string NoDataTemplateHandler { get; set; }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.
public double? PageSize { get; set; }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.
public List<ChatPinnedMessage> PinnedMessages { get; set; }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..
public ChatMessageSettings ReceiverMessageSettings { get; set; }Specifies the field name in the data source that contains the ID of the message being replied to.
public string ReplyToIdField { get; set; }The scroll mode for the scrollable behavior.
public ChatScrollMode? ScrollMode { get; set; }Shows or hides the floating scroll-to-bottom button that appears when the user moves away from the latest messages. In endless scrolling mode, the button is also used to return to the latest rendered batch before scrolling to its bottom.
public bool? ScrollToBottomButton { get; set; }Controls whether avatars are displayed next to messages. This is a global setting that can be overridden per-user via authorMessageSettings and receiverMessageSettings.
public bool? ShowAvatar { get; set; }Controls whether usernames are displayed above messages. This is a global setting that can be overridden per-user via authorMessageSettings and receiverMessageSettings.
public bool? ShowUsername { get; set; }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.
public bool? SkipSanitization { get; set; }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.
public ChatSpeechToTextSettings SpeechToText { get; set; }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.
public string StatusField { get; set; }Layout mode for suggested actions.
public SuggestionsLayoutMode? SuggestedActionsLayoutMode { get; set; }Deprecated: Use suggestedActionsLayoutMode instead.Enables or disables scrollable behavior for suggested actions.
public bool? SuggestedActionsScrollable { get; set; }The handler that returns the template used for SuggestedActionsTemplate
public string SuggestedActionsTemplateHandler { get; set; }The id of the script element used for SuggestedActionsTemplate
public string SuggestedActionsTemplateId { get; set; }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.
public List<ChatSuggestion> Suggestions { get; set; }Controls what happens when a user selects a suggestion.
public ChatSuggestionsBehavior? SuggestionsBehavior { get; set; }The layout mode for the message box suggestions.
public SuggestionsLayoutMode? SuggestionsLayoutMode { get; set; }Deprecated: Use suggestionsLayoutMode instead.Enables or disables scrollable behavior for message suggestions.
public bool? SuggestionsScrollable { get; set; }The handler that returns the template used for SuggestionsTemplate
public string SuggestionsTemplateHandler { get; set; }The id of the script element used for SuggestionsTemplate
public string SuggestionsTemplateId { get; set; }Specifies the field name in the data source from which the message text content will be read.
public string TextField { get; set; }Specifies the field name in the data source from which the message timestamp will be read.
public string TimestampField { get; set; }The handler that returns the template used for TimestampTemplate
public string TimestampTemplateHandler { get; set; }The id of the script element used for TimestampTemplate
public string TimestampTemplateId { get; set; }Controls the visibility of message timestamps.
public ChatTimestampVisibility? TimestampVisibility { get; set; }The handler for the UserStatusTemplate
public string UserStatusTemplateHandler { get; set; }Methods
public override IDictionary<string, object> Serialize()Overrides:
Writes the HTML.
protected override void WriteHtml(HtmlTextWriter writer)The HtmlTextWriter.
Overrides:
Writes the initialization script.
public override void WriteInitializationScript(TextWriter writer)The TextWriter.
Overrides: