ChatComponent

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		Specifies the id representing the local user.
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 }]	Specifies the actions available 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[]		Specifies the actions available 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.
messages	Message[]		Defines the array of messages displayed in the Chat. Each message can include a timestamp for unique identification. For more information, see ngFor - Change Tracking.
messageToolbarActions	MessageAction[]	[]	Specifies the actions available in the message toolbar. These actions display in the message toolbar and let you perform specific operations on the message.
messageToolbarVisibility	MessageToolbarVisibility	'hidden'	Sets the visibility of the message toolbar.
messageWidthMode	MessageWidthMode	'standard'	Switches 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 structures to the expected Message format.
placeholder	string		Sets the placeholder text for the message input box.
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.
suggestions	ChatSuggestion[]	[]	Sets the suggestions to 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.
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 }]	Specifies the default actions available in the message context menu.
defaultFileActions	FileAction[]		Specifies the default actions available in the file actions DropDownButton.

Events

Name	Type	Description
contextMenuActionClick	EventEmitter<MessageActionEvent>	Emits when the user clicks an action in the message context menu.
download	EventEmitter<FileDownloadEvent>	Emits when the user clicks an action in the file context menu.
executeAction	EventEmitter<ExecuteActionEvent>	Emits 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>	Emits when the user clicks an action in the file context menu.
fileRemove	EventEmitter<ChatFile>	Emits when the user removes a file from the message input box.
fileSelect	EventEmitter<SelectEvent>	Emits when the user selects a file in the message input box.
inputValueChange	EventEmitter<string>	Emits when the user types in the message input box.
sendMessage	EventEmitter<SendMessageEvent>	Emits 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>	Emits when the user clicks a suggestion in the message input box.
toolbarActionClick	EventEmitter<MessageActionEvent>	Emits when the user clicks a quick action button in the message toolbar.
unpin	EventEmitter<Message>	Emits when the user unpins the pinned message. This event triggers when the user clicks the delete button on the pinned message.