Syncfusion Blazor Chat UI

Build feature-rich conversational chat interfaces with the Syncfusion Blazor Chat UI component. This skill provides complete guidance for creating multi-user messaging applications, chat panels, and interactive conversation UIs in Blazor Server, WebAssembly, and Web App projects.

Component Overview

The SfChatUI component is a specialized UI control for building conversational chat applications. It manages the complete chat interface including:

Message Management: Collections of chat messages with full message lifecycle
User Management: Multi-user support with profiles, avatars, and status
Presence Features: Typing indicators, online status, user identification
Rich Rendering: Templates for messages, timestamps, typing indicators, suggestions
File Support: File attachment upload and integration
Event System: Lifecycle events and user interaction callbacks
Customization: Complete styling and theming control

Navigation Guide

Getting Started

📄 Read: references/getting-started.md

Installation and NuGet package setup
Basic component structure and initialization
User and message configuration
Minimal working example with conversation

Messages & Users Management

📄 Read: references/messages-and-users.md

ChatMessage configuration and properties
UserModel setup and properties
Message text content management
Author identification and user assignment
Building message collections and conversation history

User Profiles & Avatars

📄 Read: references/user-profiles-avatars.md

Avatar URL configuration with images
Avatar background color customization
User status indicators (online, offline, busy, away)
Custom CSS styling for users
User identification and display names

Typing Indicators

📄 Read: references/typing-indicators.md

TypingUsers property configuration
Showing/hiding typing status indicators
Managing multiple typing users
Dynamic typing status updates
Typing indicator template customization

Timestamps & Formatting

📄 Read: references/timestamps-and-formatting.md

ShowTimestamp property to enable/disable timestamps
Message timestamp configuration
TimestampFormat customization
TimeBreak separators (Today, Yesterday, specific dates)
TimeBreak template styling

Templates & Customization

📄 Read: references/templates-and-customization.md

EmptyChatTemplate for initial state display
MessageTemplate for custom message rendering
TimeBreakTemplate for date separators
TypingUsersTemplate for typing display
SuggestionTemplate for quick reply buttons
CSS styling and theme integration

Attachments & Events

📄 Read: references/attachments-and-events.md

File attachment configuration (Enable)
SaveUrl and RemoveUrl endpoint setup
AllowedFileTypes filtering
MaxFileSize limits and constraints
SaveFormat options (Blob vs Base64)
Event handling: Created, MessageSend, UserTyping
Attachment events: OnAttachmentUploadReady, UploadSuccess, UploadFailed

Programmatic API & Methods 🆕

📄 Read: references/programmatic-api.md

ScrollToBottomAsync() for navigating to latest messages
ScrollToMessageAsync() for jumping to specific messages
UpdateMessageAsync() for editing existing messages
FocusAsync() for input field control
Complete examples with error handling

Advanced Features 🆕

📄 Read: references/advanced-features.md

AutoScrollToBottom configuration
EnableCompactMode for group chats
Header and Footer customization
Mention system (@mention) setup
Quick reply suggestions
LoadOnDemand for performance
RTL (Right-to-Left) support
Custom styling with CssClass

Quick Start

@using Syncfusion.Blazor.InteractiveChat

<div style="height: 500px; width: 600px;">
    <SfChatUI ID="chatUser" User="CurrentUser" Messages="Messages"></SfChatUI>
</div>

@code {
    private UserModel CurrentUser = new UserModel 
    { 
        ID = "user1", 
        User = "Albert",
        AvatarBgColor = "#4a90e2"
    };

    private UserModel OtherUser = new UserModel 
    { 
        ID = "user2", 
        User = "Michale Suyama",
        AvatarBgColor = "#7cb342"
    };

    private List<ChatMessage> Messages = new()
    {
        new ChatMessage 
        { 
            Text = "Hi, how are you?", 
            Author = new UserModel { ID = "user1", User = "Albert" }
        },
        new ChatMessage 
        { 
            Text = "I'm doing great! How about you?", 
            Author = new UserModel { ID = "user2", User = "Michale Suyama" }
        }
    };
}

Common Patterns

Pattern 1: Multi-User Conversation with Status

Display multiple users with online/offline status indicators:

<SfChatUI ID="chat" User="CurrentUser" Messages="Messages">
</SfChatUI>

@code {
    private UserModel CurrentUser = new UserModel 
    { 
        ID = "user1", 
        User = "Albert",
        StatusIconCss = "e-icons e-user-online"
    };

    private List<ChatMessage> Messages = new();
}

Pattern 2: Chat with Typing Indicators

Show when users are typing:

<SfChatUI 
    ID="chat" 
    User="CurrentUser" 
    Messages="Messages"
    TypingUsers="TypingUsers">
</SfChatUI>

@code {
    private List<UserModel> TypingUsers = new();
    
    private void UserStartTyping(UserModel user)
    {
        TypingUsers.Add(user);
        StateHasChanged();
    }
}

Pattern 3: Custom Message Templates

Personalize message appearance:

<SfChatUI ID="chat" User="CurrentUser" Messages="Messages">
    <MessageTemplate>
        <div class="custom-message">
            <strong>@context.Message.Author.User</strong>
            <p>@((MarkupString)context.Message.Text)</p>
        </div>
    </MessageTemplate>
</SfChatUI>

Pattern 4: Chat with File Attachments

Enable users to share files:

<SfChatUI ID="chat" User="CurrentUser" Messages="Messages">
    <ChatUIAttachment 
        Enable 
        SaveUrl="@SaveUrl" 
        RemoveUrl="@RemoveUrl"
        AllowedFileTypes=".pdf,.docx,.jpg,.png">
    </ChatUIAttachment>
</SfChatUI>

@code {
    private string SaveUrl = "api/upload/save";
    private string RemoveUrl = "api/upload/remove";
}

Pattern 5: Auto-Scroll with Programmatic Control

Automatically scroll to bottom and navigate to specific messages:

<SfChatUI 
    @ref="chatRef"
    ID="chat" 
    User="CurrentUser" 
    Messages="Messages"
    AutoScrollToBottom="true">
</SfChatUI>

<button @onclick="ScrollToBottom">Go to Latest</button>
<button @onclick="FocusInput">Focus Input</button>

@code {
    private SfChatUI chatRef;
    
    private async Task ScrollToBottom()
    {
        await chatRef.ScrollToBottomAsync();
    }
    
    private async Task FocusInput()
    {
        await chatRef.FocusAsync();
    }
}

Pattern 6: Message Editing with UpdateMessageAsync

Edit existing messages programmatically:

<SfChatUI @ref="chatRef" ID="chat" User="CurrentUser" Messages="Messages">
</SfChatUI>

@code {
    private SfChatUI chatRef;
    
    private async Task EditMessage(string messageId, string newText)
    {
        var message = Messages.FirstOrDefault(m => m.ID == messageId);
        if (message != null)
        {
            message.Text = newText;
            await chatRef.UpdateMessageAsync(message, messageId);
        }
    }
}

Pattern 7: Mention System for User Tagging

Enable users to mention others in messages:

<SfChatUI 
    ID="chat" 
    User="CurrentUser" 
    Messages="Messages"
    MentionChar="@"
    MentionUsers="AllUsers"
    ValueSelecting="@OnMentionSelected">
</SfChatUI>

@code {
    private List<UserModel> AllUsers = new()
    {
        new UserModel { ID = "user1", User = "Albert" },
        new UserModel { ID = "user2", User = "Michale" },
        new UserModel { ID = "user3", User = "Reena" }
    };
    
    private void OnMentionSelected(MentionValueSelectingEventArgs<UserModel> args)
    {
        Console.WriteLine($"User mentioned: {args.ItemData.User}");
    }
}

Pattern 8: Compact Mode for Group Chats

Display all messages left-aligned for group chat style:

<SfChatUI 
    ID="chat" 
    User="CurrentUser" 
    Messages="Messages"
    EnableCompactMode="true">
</SfChatUI>

@code {
    // In compact mode, all messages appear on left side
    // Useful for group chat or support ticket interfaces
}

Key Props

Property	Type	Purpose
`ID`	string	Unique component identifier
`User`	UserModel	Current logged-in user
`Messages`	List<ChatMessage>	Conversation messages collection
`ShowTimestamp`	bool	Display message timestamps (default: true)
`TimestampFormat`	string	Date/time format (default: "dd/MM/yyyy hh:mm tt")
`ShowTimeBreak`	bool	Display date separators between messages
`TypingUsers`	List<UserModel>	Users currently typing
`AutoScrollToBottom`	bool	Auto-scroll to bottom on new messages (default: false)
`EnableCompactMode`	bool	Align all messages to left side (default: false)
`Height`	string	Component height (default: "100%")
`Width`	string	Component width (default: "100%")
`HeaderText`	string	Header text display (default: "Chat")
`ShowHeader`	bool	Show/hide header (default: true)
`ShowFooter`	bool	Show/hide footer (default: true)
`Placeholder`	string	Input placeholder text (default: "Type your message…")
`Suggestions`	List<string>	Quick reply suggestions
`MentionChar`	char	Mention trigger character (default: '@')
`MentionUsers`	List<UserModel>	Users available for mention
`LoadOnDemand`	bool	Load messages on demand (default: false)
`CssClass`	string	Custom CSS styling
`EnableRtl`	bool	Right-to-left direction support (default: false)
`EmptyChatTemplate`	RenderFragment	Custom empty state content
`MessageTemplate`	RenderFragment<MessageTemplateContext>	Custom message rendering
`TimeBreakTemplate`	RenderFragment<TimeBreakTemplateContext>	Custom date separator
`TypingUsersTemplate`	RenderFragment<TypingUsersTemplateContext>	Custom typing indicator
`SuggestionTemplate`	RenderFragment<SuggestionTemplateContext>	Custom suggestion display
`FooterTemplate`	RenderFragment	Custom footer area
`PreviewTemplate`	RenderFragment<PreviewTemplateContext>	Custom attachment preview

Programmatic Methods

The Chat UI component provides async methods for programmatic control:

ScrollToBottomAsync()

Scrolls the chat to the bottom, useful for showing latest messages:

@ref="chatRef"

private SfChatUI chatRef;

private async Task ShowLatestMessages()
{
    await chatRef.ScrollToBottomAsync();
}

ScrollToMessageAsync(string messageId)

Navigates to a specific message by ID:

private async Task NavigateToMessage(string targetMessageId)
{
    await chatRef.ScrollToMessageAsync(targetMessageId);
}

UpdateMessageAsync(ChatMessage message, string msgId)

Updates an existing message content:

private async Task EditMessage(string messageId, string newText)
{
    var message = Messages.FirstOrDefault(m => m.ID == messageId);
    if (message != null)
    {
        message.Text = newText;
        await chatRef.UpdateMessageAsync(message, messageId);
    }
}

FocusAsync()

Sets focus on the chat input field:

private async Task FocusChatInput()
{
    await chatRef.FocusAsync();
}

Common Use Cases

Customer Support Chat - Live support widget with agent presence
Team Messaging - Internal communication platform
Bot Integration - AI chatbot with user interface
Community Chat - Multi-user conversation rooms
Help Desk - Ticketing and messaging interface
Social Features - In-app messaging and notifications
Real-time Collaboration - Live chat during shared activities

syncfusion-blazor-chat-ui