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).
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.
message?	React.ComponentType<ChatMessageProps>		Represents the ChatMessage component.
messageBox?	React.ComponentType<ChatMessageBoxProps>		Enables customization or override of the default message box item (see example).
messageContextMenuActions?	MessageAction[]		Actions displayed in the message context menu.
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?	"full" | "standard"	'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.
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.
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.
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.
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.
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.
width?	string | number		Width of the Chat.