Message AppearancePremium
The Chat component provides several options for styling messages, allowing you to customize their appearance to match your application's design.
The Chat component supports the following appearance customization options:
- Expanding and Collapsing Messages—Configure messages to expand and collapse for better readability
- Messages Width—Control the width calculation and layout of individual messages
- Avatar Visibility—Control whether avatars are displayed for message groups
- Username Visibility—Control whether author names are displayed for message groups
- Timestamp Visibility—Control when timestamps are displayed for messages
- Role-Specific Configuration—Customize appearance differently for author versus receiver messages
Expanding and Collapsing Messages
In some cases, messages may contain information that makes 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 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.
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 the standard 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 standard width calculation.full—Messages take 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.
Avatar Visibility
The showAvatar property controls whether avatars are displayed for message groups. By default, avatars are visible.
Username Visibility
The showUsername property controls whether author names are displayed for message groups. By default, usernames are visible.
Timestamp Visibility
The timestampVisibility property controls when timestamps are displayed for messages. The available modes are 'onFocus' (default) which shows timestamps only for selected messages, and 'hidden' which never displays timestamps.