ASP.NET Core Chat Templates

The Telerik UI for ASP.NET Core Chat component exposes a rich set of templates that let you fully customize how messages, statuses, timestamps, the empty state, and the header are rendered. For a complete reference of all available template options, refer to the Templates documentation article.

This demo uses the configurator to switch between the supported templates and observe how each one affects the rendering:

• MessageContentTemplate - overrides the content of every message bubble regardless of the author.
• AuthorMessageContentTemplate and ReceiverMessageContentTemplate - render the messages of the current user and the other participants with distinct markup.
• MessageStatusTemplate - customizes the status indicator displayed under each outgoing message.
• TimestampTemplate - controls how the date separators between messages are formatted.
• NoDataTemplate - renders a custom empty-state view when the Chat has no messages.
• HeaderTemplate - replaces the default header with arbitrary markup.

The demo also showcases additional customization APIs that work alongside the templates - MessageStatusSettings with custom icons and CSS classes per status (sent, delivered, seen, failed), MessageActions (context menu), MessageToolbarActions (inline toolbar), FileActions, FilesLayoutMode, AllowMessageCollapse, and the loading() client-side method. Send a message to see the status progression from sent to delivered to seen, or use the configurator buttons to add a failed message and toggle the loading indicator.

This Chat example is part of unique collection of hundreds of ASP.NET Core demos, with which you can see all Telerik ASP.NET Core components and their features in action. View the source code of the demos from the library or directly adapt, and edit them and their theme appearance in Telerik REPL for ASP.NET Core or ThemeBuilder.