ChatProps

Premium

Updated on Mar 27, 2026

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).
autoScrollThreshold?	string | number	'20%'	Specifies the minimum offset between the top of the latest receiver message and the top edge of the visible message area when auto-scrolling on new receiver messages. Accepts a percentage string relative to the visible message area height (for example, '30%') or an absolute pixel value as a number. When a new receiver message arrives and the user is near or at the bottom of the scrollable message list, the Chat scrolls down so that at least this much space is kept between the new message and the top of the visible area. This ensures older messages remain partially in view rather than being scrolled out entirely. Has no effect on author messages, which always scroll to the bottom. Negative values are intentionally allowed so receiver messages can scroll fully to the bottom if needed. tsx // Keep at least 30% of the visible message area above the new receiver message <Chat autoScrollThreshold='30%' /> // Keep at least 80px above the new receiver message <Chat autoScrollThreshold={80} />
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		Sets the controlled input value of the Chat component. When provided, the Chat operates in controlled mode and you must handle onInputValueChange to update the value. tsx const [inputValue, setInputValue] = useState(''); <Chat inputValue={inputValue} onInputValueChange={setInputValue} />
isDeletedField?	string	'isDeleted'	Field name for message deletion status.
isFailedField?	string	'isFailed'	Field name for message failed status. Indicates whether the message has failed to send.
isPinnedField?	string	'isPinned'	Field name for message pinned status.
loading?	boolean	false	Specifies whether the Send button is transformed to a stop button. tsx <Chat loading={true} />
messageBox?	React.ComponentType<ChatMessageBoxProps>		Enables customization or override of the default message box item (see example).
messageBoxSettings?	MessageBoxSettings		Configuration for the Message Box (PromptBox component). tsx <Chat messageBoxSettings={{ rows: 5, maxTextAreaHeight: '300' }} />
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.
onResendMessage?	(event: ChatResendMessageEvent) => void		Fires when the user clicks the Retry button on a failed message. Emits ChatResendMessageEvent. tsx const handleResend = (event: ChatResendMessageEvent) => { console.log('Resending message:', event.message); // Implement retry logic }; <Chat onResendMessage={handleResend} />
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.
scrollToBottomButton?	boolean	true	Enables or disables the scroll-to-bottom button that appears when the user scrolls up. When enabled, a floating action button appears to allow quick navigation to the latest messages. tsx <Chat scrollToBottomButton={false} />
sendButtonConfig?	boolean | 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.
style?	React.CSSProperties		Represents the styles that are applied to the Chat. tsx <Chat style={{ maxWidth: '400px' }} />
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 | UploadButtonProps		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.