Syncfusion ASP.NET Core Chat-UI Control

Overview

• Rich Message Support: Text content, pinned messages, threaded replies, message forwarding
• User Management: Multi-user conversations, presence status, user configuration
• File Attachments: Upload, preview, download with file type/size restrictions
• Event System: Created, message send, user typing, attachment events
• Templates: Customizable UI for empty chat, messages, typing indicator, suggestions, footer
• Appearance: Configurable placeholder, width, height, CSS classes
• Timestamps: Show/hide timestamps with customizable format
• Advanced Features: Compact mode, globalization, RTL support, speech-to-text

Quick Start Example

@using Syncfusion.EJ2.InteractiveChat;

<div style="height:400px; width:450px">
    <ejs-chatui id="chatUI">
        <e-chatui-user id="user1" user="Albert"></e-chatui-user>
        <e-chatui-messages>
            @foreach (var message in ViewBag.ChatMessagesData)
            {
                <e-chatui-message text="@message.Text" author="@message.Author"></e-chatui-message>
            }
        </e-chatui-messages>
    </ejs-chatui>
</div>

using Syncfusion.EJ2.InteractiveChat;

public ActionResult Default()
{
    var currentUser = new ChatUIUser() { Id = "user1", User = "Albert" };
    var otherUser = new ChatUIUser() { Id = "user2", User = "Michale Suyama" };
    
    var messages = new List<ChatUIMessage>()
    {
        new ChatUIMessage() { Text = "Hi Michale, are we on track?", Author = currentUser },
        new ChatUIMessage() { Text = "Yes, all set!", Author = otherUser }
    };
    
    ViewBag.ChatMessagesData = messages;
    return View();
}

Documentation Navigation

Getting Started

• NuGet package installation and dependencies
• ASP.NET Core project setup with Razor pages
• Tag helper registration and configuration
• CDN stylesheet and script setup
• Script manager registration
• Basic Chat-UI implementation
• Initial user and message configuration

Message Configuration

• Message model setup and properties
• Adding and managing text messages
• Message configuration (ID, text, author, timestamp)
• Pinned messages for important conversations
• Reply-to for threaded conversations
• Forwarded messages and message tracking
• Compact mode for streamlined layouts

User Configuration

• ChatUIUser model setup and properties
• User identity configuration
• Setting current user context
• Multi-user support and management
• User presence and status indicators
• Avatar configuration and styling

Appearance & Styling

• Placeholder text customization
• Width and height configuration
• CSS class application and customization
• Component-level styling
• Theme customization approaches
• Responsive design patterns

Events & Interactions

• Created event for initialization
• Message send event handling
• User typing event detection
• Attachment upload events (before, success, failure)
• Attachment removal and click events
• Event binding patterns and best practices

Methods & API

• addMessage method for programmatic message addition
• updateMessage method for editing existing messages
• scrollToBottom method for view navigation
• Real-time integration with SignalR
• Best practices for performance and error handling

Templates & Customization

• Empty chat template for initial states
• Message custom templates with jsrender
• Time break template for message organization
• Typing indicator template customization
• Suggestion template for auto-complete
• Footer template for custom input areas
• Advanced template patterns and styling

File Attachments

• Enable attachment support with enableAttachments
• Configure attachment settings
• Save and remove URL endpoints
• File type restrictions (allowedFileTypes)
• File size limits (maxFileSize)
• Save format options (Blob vs Base64)
• Drag-and-drop support configuration
• Server path and upload handling

Header & Footer

• Show/hide header with showHeader property
• Header text configuration and display
• Header icon styling with headerIconCss
• Show/hide footer with showFooter property
• Footer template customization
• Input area configuration

Timestamps & Time Breaks

• Show/hide timestamps with showTimeStamp
• Timestamp format customization (timeStampFormat)
• Time break separators for message organization
• Date-wise message grouping
• Timestamp template patterns

Typing Indicators

• Show/hide typing indicator
• Multi-user typing display
• Typing indicator template customization
• User presence detection
• Styling typing indicator UI

Mentions & User References

• Configure mentionable users
• Mention trigger character customization
• Predefined mentions in messages
• Mention selection and events
• Mention item template and styling

Globalization & RTL

• Localization and multi-language support
• Setting culture and locale
• RTL (Right-to-Left) layout support
• Language-specific templates
• Speech-to-text localization

Toolbar Configuration

• Header toolbar configuration and items
• Message toolbar settings and customization
• Toolbar item configuration and events
• Custom toolbar actions and handlers
• Toolbar visibility and styling

Advanced Features

• Load on demand with scroll handling
• Auto-scroll to bottom behavior
• Enable persistence for state management
• Performance optimization techniques
• Server-side data loading strategies

Suggestions Feature

• Enable suggestions with suggestions property
• Suggestion template customization
• Context-based suggestion filtering
• Suggestion selection and handling
• Custom suggestion UI and styling

Common Patterns

Create a Basic Chat Interface

<div style="height:400px; width:500px">
    <ejs-chatui id="chatUI" 
                 placeholder="Type a message..."
                 showHeader="true"
                 headerText="Support Chat">
        <e-chatui-user id="user1" user="Support Agent"></e-chatui-user>
    </ejs-chatui>
</div>

Add Messages with Events

<ejs-chatui id="chatUI" messageSend="onMessageSend">
    <e-chatui-user id="user1" user="Albert"></e-chatui-user>
    <e-chatui-messages>
        @foreach (var message in ViewBag.ChatMessagesData)
        {
            <e-chatui-message text="@message.Text" 
                            author="@message.Author"
                            timeStamp="@message.TimeStamp"></e-chatui-message>
        }
    </e-chatui-messages>
</ejs-chatui>

<script>
    function onMessageSend(args) {
        // Handle message send event
        console.log("Message sent:", args);
    }
</script>

Enable File Attachments

<ejs-chatui id="chatUI" enableAttachments="true">
    <e-chatui-user id="user1" user="Albert"></e-chatui-user>
    <e-chatui-attachmentsettings 
        saveUrl=@Url.Content("https://services.syncfusion.com/aspnet/production/api/FileUploader/Save")
        removeUrl=@Url.Content("https://services.syncfusion.com/aspnet/production/api/FileUploader/Remove")
        maxFileSize="5000000"
        allowedFileTypes=".pdf,.docx,.xlsx">
    </e-chatui-attachmentsettings>
</ejs-chatui>

Key Properties

id

placeholder

width

height

showHeader

headerText

headerToolbar

showFooter

showTimeStamp

timeStampFormat

cssClass

enableAttachments

enableCompactMode

loadOnDemand

autoScrollToBottom

enablePersistence

suggestions

messageToolbarSettings

Common Use Cases

• Multiple support agents handling customer queries
• File attachment for screenshots/documents
• Message history with timestamps
• Typing indicators to show agent engagement
• Header with support agent name and status

• Mention team members with @ mentions
• Pin important discussion points
• Forward messages for reference
• Message editing and deletion
• Multi-user presence indicators

• RTL support for Arabic/Hebrew languages
• Localized UI strings via globalization
• Culture-specific timestamp formats
• Support for multiple character sets