Blazor Chat UI Documentation Overview

24 Sep 202612 minutes to read

Introduction to Syncfusion Blazor Chat UI

The Blazor Chat UI is a powerful and feature-rich UI component designed for building chat and conversational interfaces with high performance and flexibility. It offers a comprehensive set of enterprise-grade capabilities, including message configuration with status and reply support, timestamps, time breaks, typing indicators, and mention integration, along with seamless connections to chat bots such as Google Dialogflow and Microsoft Bot Framework. Built for scalability, it enables developers to create responsive messaging experiences for support chats, collaboration tools, and social applications with ease.

Common use cases

The Blazor Chat UI is ideal for a wide range of business scenarios:

Use Case Description Key Features
Customer Support Chats Connect customers with support agents or AI bots Bot Integrations, Typing Indicator
Team Collaboration Enable person-to-person and group messaging in business apps Messages, Mentions, Timestamps
Social & Community Apps Build engaging user-to-user chat experiences Messages, File Attachments, Templates
AI Chat Front-Ends Present AI-generated conversations in a familiar chat UI Suggestion Template, Speech-to-Text
In-App Messaging Add messaging alongside dashboard or productivity features Load on-Demand, Header, Footer
Formal Reporting Interfaces Share conversations and documents for review File Attachments, Message Options

Messages

The chat experience is built from a configurable message collection. The following features define how messages are displayed and behave:

Feature Purpose Key Benefit
Configuring Messages Define the message collection and its authors Complete conversation control
Defining the Current User Identify which messages belong to the signed in user Correct message alignment
Defining Message Status Show sent, delivered, and read states Delivery transparency
Pinning a Message Keep important messages at the top Visible key information
Replying to a Message Quote and respond to specific messages Clear conversation threads
Forwarding a Message Share a message with other chats Easy message sharing
Enabling Auto-Scroll Keep the latest message in view Hands-free reading
Enabling Compact Mode Fit more messages in less space Dense but readable views
Displaying Markdown Content Render rich text, lists, and code in messages Professional formatting

Chat bot integrations

The Blazor Chat UI connects to conversational AI services through server-side handlers:

Platform Key Benefit Best For
Google Dialogflow Natural language bot conversations AI-powered support bots
Microsoft Bot Framework Enterprise bot ecosystem integration Azure-based bot solutions

Conversation context & timing

The Blazor Chat UI provides elements that make conversations easier to follow and more engaging:

Feature Purpose Key Benefit
Timestamp Show when each message was sent Message timing clarity
Setting timestamp format Control the timestamp display format Culture appropriate display
Time break Visually separate messages by date Long-history readability
Typing indicator Show when the other user is typing Live conversation feedback
Load on-Demand Load message history lazily as the user scrolls Performance with long histories

Mentions

The Mention integration lets users tag other participants directly in messages:

Feature Purpose Key Benefit
Configure Mention Users Define which users can be mentioned Team aware tagging
Customize the Mention trigger character Change the character that activates mentions Familiar input patterns
Predefined Mentions in Messages Highlight mentions in existing content Rich rendered conversations
Configure mentionSelect Handle mention selection with custom logic Tailored mention behavior

Layout & customization

The Blazor Chat UI offers extensive layout and styling options for creating professional chat views:

Header & Footer

Feature Purpose Key Benefit
Header Show conversation info and toolbar at the top Contextual conversation header
Toolbar Add actions to the header toolbar Quick access controls
Footer Show the message input area at the bottom Standard chat input
Footer template Replace the default footer with custom UI Custom input experiences

Templates

Feature Purpose Key Benefit
Empty chat template Display custom content when no messages exist Welcoming empty states
Message template Customize message rendering Branded message bubbles
Time break template Restyle the date separators Consistent visual design
Typing indicator template Custom typing indicator visuals Branded presence feedback
Suggestion template Restyle suggested responses Custom suggestion chips

File Attachments & Dimensions

Feature Purpose Key Benefit
Enable file attachments Let users share files in messages Richer conversations
Setting file type Restrict uploads to allowed formats Safe file handling
Setting file size Limit individual file sizes Predictable uploads
Setting placeholder Guide users on what to type Intuitive input experience
Setting width and Setting height Control component dimensions Precise layout integration
Setting CSS class Apply custom CSS themes Themed experiences

Speech support

The Blazor Chat UI enables voice driven interactions using browser-based speech services:

Feature Purpose Key Benefit
Speech to Text Convert spoken input into message text Hands-free messaging

Globalization & accessibility

The Blazor Chat UI is fully accessible and compliant with Web Content Accessibility Guidelines (WCAG) standards:

  • Localization - Translate the UI into different languages
  • Right-to-Left (RTL) - RTL rendering for RTL languages
  • WAI-ARIA Attributes - Accessible roles and attributes for the Blazor chat UI
  • Keyboard interaction - Complete component operation via keyboard
    • Enter - Send a message when the input is focused
    • Tab / Shift+Tab - Move focus forward and backward
    • Page Up / Page Down - Scroll through the chat history
    • Ctrl+Home / Ctrl+End - Jump to the first or most recent message
    • Arrow Keys / Home / End - Navigate the toolbar items
  • Ensuring Accessibility - accessibility-checker and axe-core validation guidance

Advanced features

The Blazor Chat UI includes sophisticated capabilities designed for complex enterprise scenarios:

Feature Purpose Use Case Key Benefit
Methods Programmatically update messages and scroll to the latest message Dynamic, code-driven control Automation friendly API
Events Handle message sending, typing, and attachment events Custom workflows and integrations Deep integration points
Content Security Policy Configure CSP rules for strict security environments Security-restricted deployments Compliant enterprise deployment

System requirements

The Blazor Chat UI works with:

  • Blazor Version: .NET 8.0 or higher
  • Hosting Models: Blazor Server, Blazor WebAssembly, Blazor Web App
  • Browsers: Chrome, Firefox, Safari, Edge (latest versions)
  • Mobile: iOS Safari, Android Chrome

Getting Started:

Popular Features:

Support & Resources