ChatComponent

Updated on May 4, 2026

Represents the Kendo UI Chat component for Angular.

Provides a conversational UI for chat-based applications. Supports message templates, attachments, localization, and user actions.

html

<kendo-chat
  [messages]="messages"
  [authorId]="authorId"
  (sendMessage)="onSendMessage($event)"
  (executeAction)="onExecuteAction($event)">
</kendo-chat>

Selector

kendo-chat

Inputs

Name	Type	Default	Description
allowMessageCollapse	boolean	false	Enables the expand or collapse functionality for messages.
authorId	string | number		Sets the ID that represents the local user.
authorMessageSettings	MessageSettings		Sets the settings for the author's messages.
autoScrollThreshold	string | number	'20%'	Sets the minimum distance from the top of the visible message area that prevents auto-scrolling when a new receiver message arrives. Accepts a percentage string (for example, '30%') or a pixel value as a number. Set to 0 to always auto-scroll to new messages. Has no effect on author messages, which always scroll to the bottom. For more details, refer to the Auto-Scroll Threshold article.
endIndex	number		Sets the exclusive end index of the currently loaded batch within the full conversation. Used with remote data sources in endless scroll mode to determine whether more messages exist beyond the current batch. For more details, refer to the Endless Scrolling with Remote Data section in the documentation.
fileActions	FileAction[]	[{ id: 'download', label: 'Download', icon: 'download', svgIcon: downloadIcon, disabled: false }]	Sets the actions that display in the file as items of a DropDownButton. These actions display when you click the file DropDownButton and let you perform specific operations on the file. The default action is download and is defined by its id.
fileSelectButton	boolean | FileSelectButtonSettings	true	Sets the File Select Button settings.
height	string | number		Sets the height of the Chat component. Accepts a string with CSS units (for example, '400px', '50%') or a number (interpreted as pixels). The minimum height is 600px.
inputValue	string	''	Sets the value of the Message Box.
loading	boolean	false	Sets the loading state of the Chat component. When set to true, a loading button is displayed instead of the send button.
messageBoxSettings	MessageBoxSettings		Sets the message box settings.
messageContextMenuActions	MessageAction[]		Sets the actions that display in the message as a context menu. These actions display as menu items and let you perform specific operations on the message. The default actions are copy and reply and are defined by their id.
messageFilesLayout	FilesLayoutMode	'vertical'	Sets the layout of the files in the message bubble.
messages	any[]		Sets the Chat messages. Accepts an array of Message objects, but can also accept custom data types. For more information, check Data Binding section in the documentation.
messageToolbarActions	MessageAction[]	[]	Sets the actions of the message toolbar. These actions display in the message toolbar and let you perform specific operations on the message.
messageWidthMode	MessageWidthMode	'standard'	Controls the width of the message between the predefined options.
modelFields	ConversationalUIModelFields		Sets the names of the model fields from which the Chat reads its data. Lets you map custom data types to the expected Message format.
pageSize	number	50	Sets the number of messages loaded per page in endless scroll mode. Ignored in scrollable mode.
pinnedMessages	Message[]	[]	Sets the full set of pinned messages in the conversation. Used with remote data sources in endless scroll mode to render the pinned message indicator when the pinned message is outside the currently loaded batch. For more details, refer to the Endless Scrolling with Remote Data section in the documentation.
placeholder	string		Sets the placeholder text for the message input box.
quickActionsLayout	QuickActionsLayoutMode	'scroll'	Sets the layout of the quick actions suggested below the messages.
receiverMessageSettings	MessageSettings		Sets the settings for the receivers' messages.
repliedToMessages	Message[]	[]	Sets the messages that serve as reply targets for messages in the currently loaded batch but exist outside it. Used with remote data sources in endless scroll mode to render reply previews when the replied-to message is not in the current batch. For more details, refer to the Endless Scrolling with Remote Data section in the documentation.
scrollMode	ScrollMode	'scrollable'	Controls the scrolling behavior of the message list.
scrollToBottomButton	boolean	true	Controls whether a scroll to bottom button is rendered at the bottom of the Chat. Displayed only when the user has scrolled the component upward.
sendButton	boolean | SendButtonSettings	true	Sets the send button settings for the Chat component. Allows customization of the send button appearance, icons and disabled state.
showAvatar	boolean	true	Controls the avatar visibility for the messages. When set to true, the user avatar displays next to each message bubble.
showUsername	boolean	true	Controls the visibility of usernames in messages. When set to true, the username displays above each message bubble.
speechToTextButton	boolean | SpeechToTextButtonSettings	true	Sets the Speech to Text button settings.
startIndex	number		Sets the index of the first message in the currently loaded batch within the full conversation. Used with remote data sources in endless scroll mode to compute the range for the next loadMore call. For more details, refer to the Endless Scrolling with Remote Data section in the documentation.
suggestions	ChatSuggestion[]	[]	Sets the suggestions that display in the message input box. Suggestions display as a list of clickable items that let you quickly insert predefined text into the message input.
suggestionsLayout	SuggestionsLayoutMode	'scroll'	Sets the layout of the suggestions above the message input box.
timestampVisibility	TimestampVisibilityMode	'focus'	Controls the visibility of timestamps in messages.
total	number		Sets the total number of messages in the conversation when using endless scrolling with remote data source. For more details, refer to the Endless Scrolling with Remote Data section in the documentation.
width	string | number		Sets the width of the Chat component. Accepts a string with CSS units (for example, '400px', '50%') or a number (interpreted as pixels). The minimum width is 320px.

Fields

Name	Type	Default	Description
defaultContextMenuActions	MessageAction[]	[{ id: 'copy', label: 'Copy', icon: 'copy', svgIcon: copyIcon, disabled: false }, { id: 'reply', label: 'Reply', icon: 'undo', svgIcon: undoIcon, disabled: false }]	Sets the default actions that display in the message context menu.
defaultFileActions	FileAction[]	[{ id: 'download', label: 'Download', icon: 'download', svgIcon: downloadIcon, disabled: false }]	Sets the default actions that display in the file actions DropDownButton.

Events

Name	Type	Description
contextMenuActionClick	EventEmitter<MessageActionEvent>	Fires when the user clicks an action in the message context menu.
download	EventEmitter<FileDownloadEvent>	Fires when the user clicks an action in the file context menu.
executeAction	EventEmitter<ExecuteActionEvent>	Fires when the user clicks a quick action button. The Chat internally handles known actions such as reply, openUrl, and call. The event is preventable. Calling preventDefault suppresses the built-in action.
fileActionClick	EventEmitter<FileActionEvent>	Fires when the user clicks an action in the file context menu.
fileRemove	EventEmitter<ChatFile>	Fires when the user removes a file from the message input box.
fileSelect	EventEmitter<SelectEvent>	Fires when the user selects a file in the message input box.
inputValueChange	EventEmitter<string>	Fires when the user types in the message input box.
loadMore	EventEmitter<ChatLoadMoreEvent>	Fires when the user scrolls near the edge of the rendered message window in endless scroll mode.
referencedMessageClick	EventEmitter<ChatReferencedMessageClickEvent>	Fires when the user clicks a referenced message (pinned indicator or reply preview).
resendMessage	EventEmitter<ResendMessageEvent>	Fires when the user clicks the resend button on a failed message.
sendMessage	EventEmitter<SendMessageEvent>	Fires when the user sends a message by clicking the Send button or pressing Enter. The message is not automatically added to the messages array.
suggestionExecute	EventEmitter<ChatSuggestion>	Fires when the user clicks a suggestion in the message input box.
toolbarActionClick	EventEmitter<MessageActionEvent>	Fires when the user clicks a quick action button in the message toolbar.
unpin	EventEmitter<Message>	Fires when the user unpins the pinned message. This event triggers when the user clicks the delete button on the pinned message.