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.
Definition
Package:@progress/kendo-angular-conversational-ui
Selector:kendo-chat
Syntax:
<kendo-chat
[messages]="messages"
[authorId]="authorId"
(sendMessage)="onSendMessage($event)"
(executeAction)="onExecuteAction($event)">
</kendo-chat>Inputs
allowMessageCollapse
boolean
Enables the expand or collapse functionality for messages.
false
authorId
string | number
Sets the ID that represents the local user.
Sets the settings for the author's messages.
autoScrollThreshold
string | number
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.
'20%'
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.
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.
[{ id: 'download', label: 'Download', icon: 'download', svgIcon: downloadIcon, disabled: false }]
fileSelectButton
boolean | FileSelectButtonSettings
Sets the File Select Button settings.
true
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
Sets the loading state of the Chat component.
When set to true, a loading button is displayed instead of the send button.
false
Sets the message box settings.
MESSAGE_BOX_SETTINGS
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.
Sets the layout of the files in the message bubble.
'vertical'
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.
Sets the actions of the message toolbar. These actions display in the message toolbar and let you perform specific operations on the message.
[]
Controls the width of the message between the predefined options.
'standard'
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
Sets the number of messages loaded per page in endless scroll mode.
Ignored in scrollable mode.
50
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.
Sets the layout of the quick actions suggested below the messages.
'scroll'
Sets the settings for the receivers' messages.
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.
[]
Controls the scrolling behavior of the message list.
'scrollable'
scrollToBottomButton
boolean
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.
true
sendButton
boolean | SendButtonSettings
Sets the send button settings for the Chat component. Allows customization of the send button appearance, icons and disabled state.
true
showAvatar
boolean
Controls the avatar visibility for the messages.
When set to true, the user avatar displays next to each message bubble.
true
showUsername
boolean
Controls the visibility of usernames in messages.
When set to true, the username displays above each message bubble.
true
speechToTextButton
boolean | SpeechToTextButtonSettings
Sets the Speech to Text button settings.
true
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.
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.
[]
Sets the layout of the suggestions above the message input box.
'scroll'
Controls the visibility of timestamps in messages.
'focus'
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
Sets the default actions that display in the message context menu.
CONTEXT_MENU_ACTIONS
Sets the default actions that display in the file actions DropDownButton.
FILE_ACTIONS
Events
Fires when the user clicks an action in the message context menu.
Fires when the user clicks an action in the file context menu.
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.
Fires when the user clicks an action in the file context menu.
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.
Fires when the user scrolls near the edge of the rendered message window in endless scroll mode.
Fires when the user clicks a referenced message (pinned indicator or reply preview).
Fires when the user clicks the resend button on a failed message.
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.
Fires when the user clicks a suggestion in the message input box.
Fires when the user clicks a quick action button in the message toolbar.
Fires when the user unpins the pinned message. This event triggers when the user clicks the delete button on the pinned message.