Angular Chat Message
The Angular Chat component provides a robust messages interface. End users can interact with the message bubbles in various ways, while developers can customize multiple aspects of the messages.
This article covers the essential features for customizing message behavior, appearance, and user interactions within the Chat component. For more information about how to customize the message box (the input area), see Angular Chat Message Box.
Context Menu Message Actions
The context menu actions are specific message actions. When a user right-clicks any message of the Chat, the context menu displays the available actions. Users can 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 a MessageAction array. This lets you 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 }
];When you select an action from the context menu, the component fires the contextMenuActionClick event. The event returns MessageActionEvent as an argument. This allows you to handle the action as needed.
Toolbar Message Actions
The message toolbar actions display as a set of buttons under each message. They provide quick access to common actions users can perform 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 a 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(default)—The toolbar does not display.always—The toolbar always displays.
When the user clicks any of the toolbar action buttons, the component fires the toolbarActionClick event. The event returns the MessageActionEvent as an argument. This allows you to handle the action as needed.
Avatar and Username Visibility
The Chat component lets you toggle the visibility of avatars and usernames for messages. Customize the chat interface based on your application's design requirements.
The following example demonstrates how to change the visibility of avatars and usernames.
To enable or disable the displaying of avatars and usernames, set the showAvatar and showUsername properties to the respective boolean values. By default, both properties are set to true. You can also override these properties from the user-specific settings.
Timestamp Visibility
By default, the timestamp of the message displays 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.
Status Indicators
The Chat component has built-in message status indicators, such as Seen, Delivered, and Sent. These indicators help users understand the current state of their messages and whether the recipient has read or acknowledged them.
The following example demonstrates the built-in status indicators of the Chat messages.
To display the message status, set the status property of the Message to the desired text. When you click the message, the component reveals the status.
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 lets you configure distinct settings for messages sent by different participants. This enables differentiated user experiences based on message ownership by showing or hiding built-in Chat elements and features like avatars, usernames, timestamps, and more.
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.
Messages Styling
The Chat component provides several options for styling messages. Customize their appearance to match your application's design.
Expanding and Collapsing Messages
When messages contain long information that makes it difficult to scan the chat history, you can enable expanding and collapsing 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. Users can 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
Apart from having the standard width and height properties, the Chat also provides an option to set the messages width. The messageWidthMode property controls how the component calculates the width of individual messages. The available options are:
standard(default)—Messages use the standard width calculation.full—The message takes the full width of the chat container.
The following example demonstrates how to toggle between the standard and full width of the Chat messages.
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.