syncfusion-react-chat-ui

What this skill does

# 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](references/getting-started.md)
- Package installation
- Basic component initialization
- CSS theming and imports

### Message Management
📄 **Read:** [references/message-management.md](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](references/user-configuration.md)
- User model setup
- Avatar customization
- User presence status
- CSS class customization

### Events and Interactions
📄 **Read:** [references/events-and-interactions.md](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](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](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](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](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](references/timestamp-and-timebreaks.md)
- Show/hide timestamps
- Timestamp format customization
- Time break separators
- Date-wise organization

### Typing Indicator
📄 **Read:** [references/typing-indicator.md](references/typing-indicator.md)
- Show/hide typing indicator
- Multi-user typing display
- Typing indicator template customization

### Mention Integration
📄 **Read:** [references/mention-integration.md](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](references/globalization-rtl.md)
- Localization and language support
- Right-to-Left (RTL) layout
- Typing indicator localization


## Quick Start Example

```tsx
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
```tsx
<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
```tsx
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.**