Angular Chat Message
The Angular Chat component provides comprehensive message management capabilities that enable users to interact with chat messages in various ways.
This article covers the essential features for customizing message behavior, appearance, and user interactions within the Chat component.
Context Menu Message Actions
The context menu actions are specific message actions which are available when a user right-clicks any message of the Chat.
Upon right-clicking a message, the context menu will display the available actions, allowing users to quickly perform the desired action without navigating away from the chat interface.
The following example demonstrates how to add custom context menu actions to the Chat messages and handle their associated functionalities.
The default actions are Copy and Reply. However, you can extend them and add any other custom actions like Delete, Pin, Forward and others by setting the messageContextMenuActions property of the Chat to MessageAction array. This provides a way to customize the user experience and add functionality that is specific to your application.
public messageContextMenuActions: MessageAction[] = [
{ id: 'copy', label: 'Copy', svgIcon: copyIcon },
{ id: 'reply', label: 'Reply', svgIcon: undoIcon },
{ id: 'delete', label: 'Delete', svgIcon: trashIcon },
{ id: 'pin', label: 'Pin', svgIcon: pinIcon }
];Upon selecting an action from the context menu, the contextMenuActionClick event is emitted, returning MessageActionEvent as an argument, allowing you to handle the action accordingly.
Toolbar Message Actions
The message toolbar actions are displayed as a set of buttons under each message. They provide quick access to common actions that can be performed on the message such as copy, forward, download and others.
The following example demonstrates how to implement custom toolbar message actions and dynamically control their visibility.
To customize the message toolbar actions, set the messageToolbarActions property of the Chat to MessageAction array.
public messageToolbarActions: MessageAction[] = [
{ id: 'refresh', label: 'Refresh', svgIcon: switchIcon },
{ id: 'forward', label: 'Forward', svgIcon: forwardIcon },
{ id: 'download', label: 'Download', svgIcon: downloadIcon }
];You can control the visibility of the message toolbar by setting the messageToolbarVisibility property to one of the following values:
hidden—The toolbar is not displayed (default).always—The toolbar is always visible.
Upon clicking any of the toolbar action buttons, the toolbarActionClick event is emitted, returning the MessageActionEvent as an argument. This allows you to handle the action accordingly.
Messages Styling
The Chat component provides several options for styling messages, allowing you to customize their appearance to match your application's design.
Expanding and Collapsing Messages
In some cases, messages may contain information that can make it difficult for users to quickly scan the chat history and find relevant messages.
To improve readability, you can enable the expanding and collapsing functionality of the Chat messages. This allows users to click on a message to expand it and view the full content, or collapse it to hide the content and save space in the chat window.
To enable this feature, set the allowMessageCollapse property of the Chat to true.
<kendo-chat [allowMessageCollapse]="true"></kendo-chat>The following example demonstrates how to toggle between the expanded and collapsed states of the Chat messages.
Messages Width
The Chat component provides several properties to control the dimensions and layout of messages, allowing you to customize the appearance to fit your application's design requirements.
Apart from having the standart width and height properties, the Chat also provides an option to set the messages width. The messageWidthMode property controls how the width of individual messages is calculated within the Chat component. The available options are:
standard(default)—Messages use the standard width calculation.full—The message takes the full width of the chat container.
These dimension properties work together to provide a flexible layout system that adapts to different screen sizes and design requirements while maintaining optimal readability of the chat messages.
The following example demonstrates how to toggle between the standard and full width of the Chat messages.
Speech To Text
The Chat component supports built-in speech-to-text functionality which is enabled by default, making it accessible for users who prefer voice input or have typing difficulties.
To disabled this feature set the enableSpeechToText input to false.
<kendo-chat [enableSpeechToText]="false"></kendo-chat>The following example demonstrates how to customize the appearance of the built-in SpeechToTextButton.
Message Box Value Persistence
The value of the message box is the text that the user has composed but not yet sent.
The Chat component provides comprehensive control over the message input through the inputValue property and inputValueChange event.
Use the inputValue property to set the value of the message box and handle inputValueChange event whenever the user types in the message input box. This allows tracking changes in real-time and helps implement features like auto-saving drafts, validating input, or pre-filling the message box based on user context.
<kendo-chat
[inputValue]="messageBoxValue"
(inputValueChange)="onInputValueChange($event)">
</kendo-chat>The following example demonstrates how to persist the user input when the Chat visibility is programmatically controlled.