syncfusion-blazor-chat-ui

What this skill does

# 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="@"
    Ment