Syncfusion React Chat Ui

Syncfusion React Chat-UI in Syncfusion React

Component Overview

The Chat-UI component provides a complete conversational interface with real-time messaging, file attachments, user presence, and extensive customization options. This skill guides you through implementing chat interfaces for customer support, team collaboration, and interactive applications.

Key Capabilities

The Chat-UI component is an interactive messaging interface featuring:

• Rich Message Support: Text, markdown, formatted content
• User Management: Multi-user conversations, presence status, avatars
• File Attachments: Upload, preview, download with restrictions
• Event System: Lifecycle, interaction, and attachment events
• Templates: Customizable UI for messages, suggestions, footer
• Internationalization: Multi-language and RTL support

Documentation Navigation

Getting Started

📄 Read: references/getting-started.md [blocked]

• Package installation
• Basic component initialization
• CSS theming and imports

Message Management

📄 Read: references/message-management.md [blocked]

• Adding and updating messages
• Auto-scroll to latest messages
• Progressive message loading (on-demand)
• Message configuration (pinned, reply, forward)
• Message status tracking
• Message toolbar customization

User Configuration

📄 Read: references/user-configuration.md [blocked]

• User model setup
• Avatar customization
• User presence status
• CSS class customization

Events and Interactions

📄 Read: references/events-and-interactions.md [blocked]

• Component lifecycle events
• Message sending events
• User typing events (with complete event arguments)
• Attachment upload and click events
• Toolbar click events

Templating System

📄 Read: references/templating-system.md [blocked]

• Empty chat template
• Message custom rendering
• Time break template
• Typing indicator template
• Suggestion template
• Footer template customization

File Attachments

📄 Read: references/file-attachments.md [blocked]

• Enable attachment support
• Configure upload endpoints
• File type and size restrictions
• Drag-and-drop support
• Attachment templates (preview and footer)
• Handle attachment click events

Header Customization

📄 Read: references/header-customization.md [blocked]

• Header visibility and text
• Header icon styling
• Toolbar configuration
• Toolbar item types and events

Appearance and Styling

📄 Read: references/appearance-styling.md [blocked]

• Pompact mode layout for dense conversations
• Claceholder text configuration
• Width and height customization
• CSS class application
• Component-level styling

Timestamp and Time Breaks

📄 Read: references/timestamp-and-timebreaks.md [blocked]

• Show/hide timestamps
• Timestamp format customization
• Time break separators
• Date-wise organization

Typing Indicator

📄 Read: references/typing-indicator.md [blocked]

• Show/hide typing indicator
• Multi-user typing display
• Typing indicator template customization

Mention Integration

📄 Read: references/mention-integration.md [blocked]

• Configure mentionable users
• Customize mention trigger character
• Predefined mentions in messages
• Mention selection events

Globalization and RTL

📄 Read: references/globalization-rtl.md [blocked]

• Localization and language support
• Right-to-Left (RTL) layout
• Typing indicator localization

Quick Start Example

import { ChatUIComponent, MessagesDirective, MessageDirective, UserModel } from '@syncfusion/ej2-react-interactive-chat';import * as React from 'react';import * as ReactDOM from "react-dom";
function App() {    const currentUserModel: UserModel = {        id: "user1",        user: "Albert"    };
    const otherUserModel: UserModel = {        id: "user2",        user: "Michale Suyama"    };
    return (        <ChatUIComponent user={currentUserModel} headerText="Chat Support">            <MessagesDirective>                <MessageDirective text="Hello, how can I help?" author={currentUserModel} />                <MessageDirective text="I need assistance with my order." author={otherUserModel} />            </MessagesDirective>        </ChatUIComponent>    );}
ReactDOM.render(<App />, document.getElementById('container'));

Common Patterns

Create a Support Chat Interface

<ChatUIComponent   user={currentUser}  headerText="Support Chat"  enableAttachments={true}  showTimeStamp={true}  showHeader={true}  messageToolbarSettings={{ items: ['Copy', 'Reply', 'Delete'] }}>  <MessagesDirective>    {/* messages populate here */}  </MessagesDirective></ChatUIComponent>

Add Message Dynamically

const chatRef = useRef<ChatUIComponent>(null);
const addNewMessage = () => {  chatRef.current.addMessage({    author: userModel,    text: "Your message here",    timeStamp: new Date()  });};

Configure Multiple Templates

Implement messageTemplate, emptyChatTemplate, timeBreakTemplate, and suggestionTemplate for complete customization.

Key Props

Common Use Cases

Use Case 1: Customer Support Chat

• Multiple support agents handling customer queries
• File attachment for screenshots and auto-scroll
• Typing indicators to show agent engagement
• Progressive loading for long conversation histories
• Typing indicators to show agent engagement

Use Case 2: Team Collaboration

• Mention team members with @
• Compact mode for group conversations
• Pin important discussions
• Forward messages for reference
• Message editing and deletion

Use Case 3: Multilingual Chat Application

• RTL support for Arabic/Hebrew
• Localized UI strings
• Support for multiple cultures

For complete examples and advanced scenarios, explore individual reference files above.