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

Prop	Type	Purpose
user	UserModel	Current logged-in user
messages	MessageModel[]	Initial message list
headerText	string	Header title
placeholder	string	Input field hint
enableAttachments	boolean	File upload support
showTimeStamp	boolean	Display message timestamps
showHeader	boolean	Show header section
showFooter	boolean	Show input footer
autoScrollToBottom	boolean	Auto-scroll to latest message
loadOnDemand	boolean	Progressive message loading
enableCompactMode	boolean	Left-aligned compact layout
enableRtl	boolean	Right-to-left layout
locale	string	Language/culture code

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.