Blazor ChatUI Example - API Methods Usage

Loading Syncfusion Blazor Server Demos…

Design Community

October 25, 2024

10/25 07:30 AM

Hey Michale, Charlie! Seen the latest posts in the Design Community? Amazing projects!

Michale Suyama

10/25 08:00 AM

Hi Alice! Yes, Dana’s new UI design is incredible.

Charlie

10/25 11:00 AM

Hey! I loved Dana’s use of color. Frank’s typography guide was great too.

Jordan Peele

10/25 11:30 AM

Dana’s work is so inspiring!

October 26, 2024

10/26 11:00 AM

Absolutely! Any new community events planned?

Michale Suyama

10/26 12:15 PM

We should organize a design challenge.

Janet

10/26 12:17 PM

I am excited to see the new projects.

Charlie

10/26 12:30 PM

Great idea! Let’s discuss it in the next meeting.

July 05, 2026

07/05 06:44 PM

Sounds good! This community is so inspiring.

Michale Suyama

07/05 06:44 PM

Agreed! Excited to see everyone’s ideas.

Charlie

07/05 06:44 PM

I am looking forward to the design challenge.

Properties

This sample demonstrates the properties available in the Chat UI component, showcasing how various features can be customized through the property panel. It highlights the flexibility of the component, allowing users to adjust timestamps, headers, footers, time breaks, and more.

Customizable APIs and Properties:

TimestampFormat - Allows users to change the timestamp format by selecting an option from the property panel.
ShowTimestamp - Controls whether the timestamp is displayed in the chat conversation.
ShowTimeBreak - Enables or disables the display of time breaks in the chat interface.
ShowHeader - Allows users to toggle the visibility of the chat header.
ShowFooter - Toggles the visibility of the chat footer.
EnableCompactMode - Reduces spacing and left-aligns all messages to display more content within the visible chat area.
TypingUsers - Manages the list of users who are typing, updated through multi-select options in the property panel.
MentionUsers - Configurable list of users that can be tagged using '@' in chat messages.
StatusIconCss - Defines a CSS class for the status bar icon, with built-in styles for Online, Offline, Away, and Busy statuses, while allowing further customization.
MessageToolbar - Configures the toolbar that appears on individual messages, allowing customization of actions such as copy, forward, reply, pin, and delete. Supports adding, removing, or reordering toolbar items based on application needs.

These properties can be adjusted via the property panel for a highly flexible and customizable chat experience.