Install to Claude Code
npx -y skills add https://github.com/syncfusion/blazor-ui-components-skills --skill syncfusion-blazor-chat-uiDescription
syncfusion blazor chat ui
SKILL.md
---
name: syncfusion-blazor-chat-ui
description: Implement the Syncfusion Blazor Chat UI component for conversational chat interfaces in Blazor applications. Use this skill when creating chat applications, messaging interfaces, or multi-user conversations. Covers message management, user models, typing indicators, avatars, timestamps, and file attachments with customizable templates.
metadata:
author: "Syncfusion Inc"
version: "34.1.29"
---
# 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](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](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](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](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](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](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](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](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](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
```csharp
@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:
```csharp
<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:
```csharp
<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:
```csharp
<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:
```csharp
<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:
```csharp
<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:
```csharp
<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:
```csharp
<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:
```csharp
<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:
```csharp
@ref="chatRef"
private SfChatUI chatRef;
private async Task ShowLatestMessages()
{
await chatRef.ScrollToBottomAsync();
}
```
### ScrollToMessageAsync(string messageId)
Navigates to a specific message by ID:
```csharp
private async Task NavigateToMessage(string targetMessageId)
{
await chatRef.ScrollToMessageAsync(targetMessageId);
}
```
### UpdateMessageAsync(ChatMessage message, string msgId)
Updates an existing message content:
```csharp
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:
```csharp
private async Task FocusChatInput()
{
await chatRef.FocusAsync();
}
```
## Common Use Cases
1. **Customer Support Chat** - Live support widget with agent presence
2. **Team Messaging** - Internal communication platform
3. **Bot Integration** - AI chatbot with user interface
4. **Community Chat** - Multi-user conversation rooms
5. **Help Desk** - Ticketing and messaging interface
6. **Social Features** - In-app messaging and notifications
7. **Real-time Collaboration** - Live chat during shared activities