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
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.