ChatProps

Premium

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.

Name	Type	Default	Description
allowMessageCollapse?	boolean		Enables expand or collapse for messages to save space.
attachmentsField?	string	'attachments'	Field name for message attachments.
attachmentTemplate?	any		React functional or class component used as an attachment template (see example). The corresponding attachment is passed as an item property.
authorId	string | number		ID of the local user. Identifies messages authored by the local user.
authorIdField?	string	'authorId'	Field name for message author ID.
authorImageAltTextField?	string	'authorImageAltText'	Field name for alt text of the author's avatar (when flattened).
authorImageUrlField?	string	'authorImageUrl'	Field name for message author avatar URL (when flattened).
authorMessageSettings?	MessageSettings		Configuration settings for author messages (messages from the local user). These settings override global message settings for author messages. If both global and author-specific settings are provided, the author-specific settings take precedence.
authorNameField?	string	'authorName'	Field name for message author name (when flattened).
className?	string		CSS class of the Chat DOM element.
dir?	string		Direction of the Chat component.
fileActions?	MessageAction[]		Actions displayed for files in the message.
filesField?	string	'files'	Field name for file attachments.
headerTemplate?	ReactElement<unknown> | () => ReactElement<unknown>		Template for the header of the Chat component.
height?	string | number		Height of the Chat.
id?	string		ID of the Chat component.
idField?	string	'id'	Field name for message ID.
inputValue?	string		Input value of the Chat component.
isDeletedField?	string	'isDeleted'	Field name for message deletion status.
isPinnedField?	string	'isPinned'	Field name for message pinned status.
messageBox?	React.ComponentType<ChatMessageBoxProps>		Enables customization or override of the default message box item (see example).
messageContentTemplate?	React.ComponentType<ChatMessageTemplateProps>		React functional or class component used as a message content template. Rendered inside the .k-bubble-content element when provided. The corresponding message is passed as an item property.
messageContextMenuActions?	MessageAction[]		Actions displayed in the message context menu.
messageFilesLayout?	FilesLayoutMode	'vertical'	Sets the file layout mode for file attachments in messages. vertical—Files are displayed in a vertical list layout. wrap—Files are displayed in a wrapped layout. horizontal—Files are displayed in a horizontal list layout with scrollable overflow.
messages	any[] | Message[]		Messages of the Chat. Can be an array of Message objects or raw data objects that map using the field mapping configuration.
messageTemplate?	React.ComponentType<ChatMessageTemplateProps>		React functional or class component used as a message template. The corresponding message is passed as an item property.
messageToolbarActions?	MessageAction[]		Actions displayed in the message toolbar.
messageWidthMode?	MessageWidthMode	'standard'	Sets the message width mode. full—Message occupies the full width of the Chat. standard—Message occupies a standard width for a compact display.
noDataTemplate?	ReactElement<unknown> | () => ReactElement<unknown>		Template for the empty Chat state when no messages are present. Only renders when there are no messages and this template is provided.
onActionExecute?	(event: ChatActionExecuteEvent) => void		Fires when the user clicks a quick action button. The Chat internally handles the reply, openUrl, and call known actions. Emits ExecuteActionEvent. The event is preventable. If you call preventDefault, the built-in action is suppressed.
onContextMenuAction?	(action: MessageAction, event: SyntheticEvent<any>, target: Message) => void		Fires when a context menu action is executed on a message. Provides the action and target message.
onDownload?	(files: ChatFile[], message: Message) => void		Fires when a download action is executed on a message. Provides the selected files and parent message.
onFileAction?	(action: FileAction, event: SyntheticEvent<any>, target: ChatFile) => void		Fires when a file action is executed on a message. Provides the action and target file.
onInputValueChange?	(value: string) => void		Fires when the input value changes. Provides the new input value.
onSendMessage?	(event: ChatSendMessageEvent) => void		Fires when the user types a message and clicks Send or presses Enter. Emits SendMessageEvent. The Chat does not automatically update with the new message.
onSuggestionClick?	(suggestion: ChatSuggestion) => void		Fires when a suggestion is clicked. Provides the clicked suggestion.
onToolbarAction?	(action: MessageAction, event: SyntheticEvent<any>, target: Message) => void		Fires when a toolbar action is executed on a message. Provides the action and target message.
onUnpin?	(message: Message) => void		Fires when a message is unpinned. Provides the message.
placeholder?	string		Text displayed inside the new message input when empty.
quickActionsLayout?	QuickActionsLayoutMode	'scroll'	Controls how quick actions behave when they exceed available space. scroll—Quick actions scroll horizontally without navigation buttons. wrap—Quick actions wrap to new lines when they overflow. scrollbuttons—Quick actions scroll horizontally with navigation buttons.
receiverMessageSettings?	MessageSettings		Configuration settings for receiver messages (messages from other users). These settings override global message settings for receiver messages. If both global and receiver-specific settings are provided, the receiver-specific settings take precedence.
replyToIdField?	string	'replyToId'	Field name for reply-to message ID.
sendButtonConfig?	ButtonProps		Configures the appearance and behavior of the send button in the Chat component.
showAvatar?	boolean	true	Controls whether avatars are displayed for messages. Can be overridden by author-specific and receiver-specific settings.
showUsername?	boolean	true	Controls whether author names are displayed for messages. Can be overridden by author-specific and receiver-specific settings.
speechToTextConfig?	boolean | SpeechToTextButtonProps		Enables the speech-to-text functionality in the Chat. This allows users to dictate messages instead of typing them.
statusField?	string	'status'	Field name for message status.
statusTemplate?	React.ComponentType<StatusTemplateProps>		Template for status items below each message.
suggestedActionsField?	string	'suggestedActions'	Field name for the suggestedActions property of a message.
suggestions?	ChatSuggestion[]		List of message suggestions displayed above the message input.
suggestionsLayout?	SuggestionsLayoutMode	'scroll'	Controls how suggestions behave when they exceed available space. scroll—Suggestions scroll horizontally without navigation buttons. wrap—Suggestions wrap to new lines when they overflow. scrollbuttons—Suggestions scroll horizontally with navigation buttons.
suggestionTemplate?	React.ComponentType<SuggestionTemplateProps>		Template for suggestion items displayed above the message input.
textField?	string	'text'	Field name for message text content.
timestampField?	string	'timestamp'	Field name for message timestamp.
timestampTemplate?	React.ComponentType<{ item: DateMarker; }>		Template for the timestamp of the message.
timestampVisibility?	TimestampVisibilityMode	'onFocus'	Controls when timestamps are visible for messages. onFocus—Timestamps are only visible for selected/focused messages. hidden—Timestamps are never visible for any messages.
typingField?	string	'typing'	Field name for the typing property of a message.
uploadConfig?	boolean | UploadProps		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.
userStatusTemplate?	React.ComponentType<UserStatusTemplateProps>		Template for user status display next to avatars. Only rendered when an avatar for the user is provided.
width?	string | number		Width of the Chat.