Syncfusion Aspnetmvc Chat UI

Syncfusion ASP.NET MVC Chat UI

The Syncfusion ASP.NET MVC Chat UI (Syncfusion.EJ2.InteractiveChat.ChatUI) is a feature-rich conversational interface component for building real-time chat applications, AI assistants, and bot integrations. It supports structured messages, user avatars, typing indicators, file attachments, mention tagging, markdown rendering, and extensive template customization.

Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• NuGet package installation (Syncfusion.EJ2.MVC5)
• Namespace, stylesheet, and script references
• Script manager registration
• Basic Chat UI rendering with @Html.EJS().ChatUI()
• Configuring initial messages and current user

Messages

📄 Read: references/messages.md

• ChatUIMessage model: Text, Id, Author, Timestamp, Status, AttachedFile
• Pinned messages, reply-to threading (ChatUIReplyTo with Timestamp, TimestampFormat, MentionUsers), forwarded messages
• Compact mode, auto-scroll, quick reply suggestions
• Message toolbar with MessageToolbarItemClickedEventArgs (item, message, cancel, event)
• Message status: IconCss, Text, Tooltip usage
• Markdown content rendering with marked + DOMPurify

User Configuration

📄 Read: references/user-configuration.md

• ChatUIUser model: Id, User, AvatarUrl, AvatarBgColor, CssClass, StatusIconCss
• Defining the current user with the User property
• Avatar images, fallback initials, background color
• Presence status icons (online, offline, busy, away)

Header and Toolbar

📄 Read: references/header-and-toolbar.md

• Show/hide header (ShowHeader), header text and icon
• ChatUIToolbarSettings — header toolbar items
• Toolbar item properties: IconCss, Type, Text, Visible, Disabled, Tooltip, CssClass, Align, TabIndex, Template
• ItemClicked event handler

Footer and Templates

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

• Show/hide footer (ShowFooter), custom footer template
• Empty chat template, message template, suggestion template
• Typing users template, time break template
• Template context variables (message, index, users, messageDate, suggestion)

Events and Methods

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

• Created, MessageSend, UserTyping events with full event args (cancel, isTyping, message, user, itemData)
• addMessage() — add message as string or object
• updateMessage() — edit an existing message by ID
• scrollToBottom() — programmatic scroll to latest message
• scrollToMessage(messageId) — scroll to a specific message by ID
• focus() — programmatically focus the chat input textarea
• Accessing the ChatUI instance via ej.base.getInstance()

Appearance and Layout

📄 Read: references/appearance-and-layout.md

• Placeholder, Width, Height, CssClass
• Timestamps (ShowTimeStamp, TimeStampFormat)
• Time breaks (ShowTimeBreak, TimeBreakTemplate)
• Typing indicator (TypingUsers)
• Load on demand (LoadOnDemand) for long conversation histories
• Persistence (EnablePersistence) — save and restore state across page reloads

File Attachments

📄 Read: references/file-attachments.md

• Enable file attachments (EnableAttachments)
• AttachmentSettings: SaveUrl, RemoveUrl, AllowedFileTypes, MaxFileSize, SaveFormat, Path
• Drag-and-drop, maximum file count
• Custom attachment and preview templates
• Pre-populating attachments on messages at initial render (AttachedFile)
• Attachment lifecycle events and ChatAttachmentClickEventArgs (file, cancel, event)

Mentions and Globalization

📄 Read: references/mentions-and-globalization.md

• MentionUsers list, @ mention trigger popup
• Custom trigger character (MentionTriggerChar)
• Predefined mentions in message text using {0}, {1} placeholders
• MentionSelect event
• Localization (Locale, ej.base.L10n.load) and RTL (EnableRtl)

Bot Integrations and Speech-to-Text

📄 Read: references/bot-integrations.md

• Microsoft Bot Framework (Direct Line) integration
• Google Dialogflow integration
• Speech-to-Text via Web Speech API + SpeechToText component
• Secure token server pattern
• MessageSend + addMessage() integration pattern
• Troubleshooting common bot connection issues

Quick Start Example

Controller (HomeController.cs):

using Syncfusion.EJ2.InteractiveChat;

public ActionResult Index()
{
    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 for the deadline?", Author = currentUser },
        new ChatUIMessage { Text = "Yes, the design phase is complete.", Author = otherUser },
        new ChatUIMessage { Text = "I'll review it and send feedback by today.", Author = currentUser }
    };

    ViewBag.CurrentUser = currentUser;
    ViewBag.Messages    = messages;
    return View();
}

View (Index.cshtml):

@using Syncfusion.EJ2.InteractiveChat

<div style="height:400px; width:450px;">
    @Html.EJS().ChatUI("chatUI")
        .User(ViewBag.CurrentUser)
        .Messages(ViewBag.Messages)
        .HeaderText("Team Chat")
        .Render()
</div>

Required layout references (_Layout.cshtml):

<head>
    <link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/fluent.css" />
    <script src="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/dist/ej2.min.js"></script>
</head>
<body>
    ...
    @Html.EJS().ScriptManager()
</body>

Common Patterns

Programmatically Add a Message (Bot Reply)

function onMessageSend(args) {
    var chatUI = ej.base.getInstance(document.getElementById('chatUI'), ejs.interactivechat.ChatUI);
    fetch('/api/bot/reply', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ text: args.message.text })
    })
    .then(r => r.json())
    .then(data => chatUI.addMessage({ text: data.reply, author: botUser }));
}

Enable File Attachments

@Html.EJS().ChatUI("chatUI")
    .User(ViewBag.CurrentUser)
    .EnableAttachments(true)
    .AttachmentSettings(new ChatUIFileAttachmentSettings {
        SaveUrl = Url.Content("https://services.syncfusion.com/aspnet/production/api/FileUploader/Save"),
        RemoveUrl = Url.Content("https://services.syncfusion.com/aspnet/production/api/FileUploader/Remove")
    })
    .Render()

Show Typing Indicator (Client-Side)

function onCreated() {
    var chatUI = ej.base.getInstance(document.getElementById('chatUI'), ejs.interactivechat.ChatUI);
    chatUI.typingUsers = [{ id: "user2", user: "Michale Suyama" }];
    chatUI.dataBind();
}

Key Properties Reference