Blazor ChatUI Example - Custom Message Templates

Chat UI / Template

This sample demonstrates the template functionality of the Chat UI component, showing how you can customize various elements of the chat interface. It highlights the ability to adjust the appearance of message items, time breaks, and empty chat screens using templates.

Loading Syncfusion Blazor Server Demos…

Order Assistant

Just a second, we're preparing your chat...

In this example, a bot provides order tracking updates by customizing each message using the templates. The MessageTemplate property components the layout of messages, including the avatar, message content, and suggestions. The TimeBreakTemplate adjusts the display of time breaks, showing either "Today" or the specific date.

The bot sends a default response when a message is sent, and suggestions appear below the message. When a suggestion is clicked, the bot replies with a new message or set of suggestions, demonstrating how templates enhance the interaction flow within the Chat UI component.

Transform your Blazor web apps today with Syncfusion® Blazor components
100+ high-performance and responsive UI components
Dedicated support
Hassle-free licensing
TRY IT FOR FREE