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 toolbar actions for all messages. For user-specific toolbar actions, refer to the User-Specific Settings section.
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.
Avatar and Username Visibility
The Chat component allows you to toggle the visibility of avatars and usernames for messages, allowing you to customize the chat interface according to your application's design requirements.
To enable or disable the display of avatars and usernames, set the showAvatar and showUsername to boolean values. By default, both properties are set to true. These properties can be overridden from the user-specific settings. For more details, refer to the User-Specific Settings section.
The following example demonstrates how to toggle the visibility of avatars and usernames.
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
When messages contain long information that makes it difficult to scan chat history, you can enable expanding and collapsing functionality to improve readability.
The following example demonstrates how to toggle between the expanded and collapsed states of the Chat messages.
Long messages display in a collapsed state by default to save space in the chat window, allowing users to expand them to view the full content.
To enable this feature, set the allowMessageCollapse property of the Chat to true.
<kendo-chat [allowMessageCollapse]="true"></kendo-chat>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.
The following example demonstrates how to toggle between the standard and full width of the Chat messages.
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.
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.
The following example demonstrates the status of the Chat messages.
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',
},
]You can customize the status indicators by providing your own text or using different styles to match your application's design. Refer to the Status Template article for more details.
User-Specific Settings
The Chat component allows you to configure distinct settings for messages sent by different participants, enabling differentiated user experiences based on message ownership.
To implement user-specific settings, set the authorMessageSettings and receiverMessageSettings properties to MessageSettings objects.
The following example demonstrates the supported user-specific settings by the Chat.
Timestamp Visibility
By default, the timestamp of the message is displayed when you select or focus a message. You can hide the timestamp for all messages by setting the timestampVisibility property to hidden.
The following example demonstrates the supported timestamps visibility options.