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

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

Message Management

📄 Read: references/message-management.md

• 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

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

Events and Interactions

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

• 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

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

File Attachments

📄 Read: references/file-attachments.md

• 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

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

Appearance and Styling

📄 Read: references/appearance-styling.md

• 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

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

Typing Indicator

📄 Read: references/typing-indicator.md

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

Mention Integration

📄 Read: references/mention-integration.md

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

Globalization and RTL

📄 Read: references/globalization-rtl.md

• 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.