Syncfusion React Chat-UI in Syncfusion React

Component Overview

Key Capabilities

• 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

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

Message Management

• 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

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

Events and Interactions

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

Templating System

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

File Attachments

• 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

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

Appearance and Styling

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

Timestamp and Time Breaks

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

Typing Indicator

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

Mention Integration

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

Globalization and RTL

• 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

messageTemplate

emptyChatTemplate

timeBreakTemplate

suggestionTemplate

Key Props

user

messages

headerText

placeholder

enableAttachments

showTimeStamp

showHeader

showFooter

autoScrollToBottom

loadOnDemand

enableCompactMode

enableRtl

locale

Common Use Cases

• 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

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

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