syncfusion-blazor-chat-ui

# 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