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.
Message Status
The Chat component provides built-in support for displaying message status indicators, such as Seen, Delivered, and Sent. These indicators help users understand the current state of their messages and whether they have been read or acknowledged by the recipient.
To display the message, set the status property of the Message to the desired text. When the message is clicked the status is revealed.
public messages: Messages[] = [
{
id: guid(),
text: "Hello, my name is John",
status: 'Seen',
},
]The following example demonstrates the status of the Chat messages.