Message TemplatesPremium
The Chat component allows you to customize the appearance and content of messages through various template options, providing full control over how messages are rendered.
You can implement the following message template customizations:
- Custom Message Templates—Create custom React components to control message appearance and layout
- Adding Images to Messages—Display images alongside text content using custom message templates
- Displaying Markdown Content—Render Markdown content within messages using external libraries
Custom Message Templates
The Chat allows you to customize the appearance of messages through the messageTemplate property.
To set a custom message template, create a React component and assign it to the messageTemplate property of the Chat component.
Adding Images to Messages
The following example demonstrates how to create custom message templates that can display images alongside text content. This approach gives you full control over image rendering, including sizing, positioning, and layout.
Displaying Markdown Content
The following example demonstrates how to render Markdown by utilizing the marked library.