ChatComponent

Updated on Nov 11, 2025

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.
enableFileSelect	boolean | FileSelectSettings	true	Sets the File Select settings.
enableSpeechToText	boolean | SpeechToTextButtonSettings	true	Sets the Speech to Text button settings.
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.
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.
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.
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.
sendButtonSettings	SendButtonSettings	{ fillMode: 'solid', rounded: 'full', size: 'medium', themeColor: 'primary', icon: 'paper-plane', svgIcon: paperPlaneIcon}	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.
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.
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.
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.