ChatProps

Premium

Configuration interface for mapping custom data fields to Chat component properties. This allows the Chat component to work with various data source formats by mapping custom field names to the expected Chat interface properties.

Name	Type	Default	Description
allowMessageCollapse?	boolean		Enables the expand/collapse functionality for the messages in the Chat. This allows users to collapse or expand messages to save space in the chat window.
attachmentsField?	string	'attachments'	Field name for message attachments.
attachmentTemplate?	any		A React functional or class component which is used as an attachment template (see example). The corresponding attachment is passed to the component as a property by the name item.
authorId	string | number		Sets the ID of the local user. The ID identifies messages that are 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 in data source).
authorImageUrlField?	string	'authorImageUrl'	Field name for message author avatar URL (when flattened in data source).
authorNameField?	string	'authorName'	Field name for message author name (when flattened in data source).
className?	string		Sets a class of the Chat DOM element.
dir?	string		Sets the direction of the Chat component.
fileActions?	MessageAction[]
filesField?	string	'files'	Field name for file attachments.
headerTemplate?	ReactElement<unknown> | () => ReactElement<unknown>		Defines the template for the header of the Chat component.
height?	string | number		Sets the height of the Chat.
id?	string		Sets the id of the Chat component.
idField?	string	'id'	Field name for message ID.
inputValue?	string		Sets the 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 the customization or the override of the default message box item in the Conversational UI (see example).
messageContextMenuActions?	MessageAction[]		Defines the actions that will be displayed in the message context menu.
messages	any[] | Message[]		Sets the messages of the Chat. Can be an array of Message objects or raw data objects that will be mapped using the field mapping configuration.
messageTemplate?	React.ComponentType<ChatMessageTemplateProps>		A React functional or class component which is used as a message template. The corresponding message is passed to the component as a property by the name item.
messageToolbarActions?	MessageAction[]		Defines the actions that will be displayed in the message toolbar. This can include buttons for actions like reply, edit, delete, etc.
messageWidthMode?	"full" | "standard"		Sets the message width mode. The default value is standard. full—The message occupies the full width of the chat. standard—The message occupies a standard width, allowing for more 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 the ExecuteActionEvent. The event is preventable. If preventDefault is called, the built-in action will be suppressed.
onContextMenuAction?	(action: MessageAction, event: SyntheticEvent<any>, target: Message) => void		Fires when a context menu action is executed on a message. The event contains the action that was executed and the target message.
onDownload?	(files: ChatFile[], message: Message) => void		Fires when a download action is executed on a message. The event contains the action that was executed and the target file.
onFileAction?	(action: FileAction, event: SyntheticEvent<any>, target: ChatFile) => void		Fires when a file action is executed on a message. The event contains the action that was executed and the target file.
onInputValueChange?	(value: string) => void		Fires when the input value changes. The event contains the new input value.
onSendMessage?	(event: ChatSendMessageEvent) => void		Fires when the user types a message and clicks the Send button or presses Enter. Emits the SendMessageEvent. The Chat is not automatically updated with the new message.
onSuggestionClick?	(suggestion: ChatSuggestion) => void		Fires when a suggestion is clicked. The event contains the clicked suggestion.
onToolbarAction?	(action: MessageAction, event: SyntheticEvent<any>, target: Message) => void		Fires when a toolbar action is executed on a message. The event contains the action that was executed and the target message.
onUnpin?	(message: Message) => void		Fires when a message in unpinned. The event contains the message that was unpinned.
placeholder?	string		The text which is visible inside the new message input when the message input is 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>		Defines the template for the status items below each message.
suggestedActionsField?	string	'suggestedActions'	Field name for the suggestedActions prop of a message.
suggestions?	ChatSuggestion[]		Defines the list of message suggestions that will be displayed above the message input.
suggestionTemplate?	React.ComponentType<SuggestionTemplateProps>		Defines the template for the suggestions items that will be 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; }>		Defines the template for the timestamp of the message.
typingField?	string	'typing'	Field name for the typing prop 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		Sets the width of the Chat.