Chat

A modern chat component for multi-participant conversations with support for distinct user identities. Perfect for team chats, group discussions, and real-time messaging applications.

These demos showcase a multi-participant chat interface with distinct user identities, avatars, online status indicators, customization options for user visibility and display, event handling for messages and user actions, and compact layouts for smaller spaces.

Chat Controls

Team Chat

11:53

Welcome to the team chat! 👋

Jane Smith

11:54

Thanks John! Looking forward to working together.

Bob Johnson

11:55

Same here! Let's make this project amazing! 🚀

Console log

Multi-participant support link

The Chat component supports multiple users with distinct identities, avatars, and online status indicators. Use Users to manage the chat users and CurrentUserId to identify the current user.

Multi-User Chat

11:53

Hello team! 👋

Jane Smith

11:54

Hi John! Ready for our sprint planning?

Bob Johnson

11:55

Absolutely! I've prepared the user stories.

Alice Brown

11:56

Perfect! Let's get started. 🚀

User Management

Current User:

User List

John Doe

OnlineYou

Jane Smith

Online

Bob Johnson

Offline

Alice Brown

Online

Multi-User Features

User Management

Add and remove users dynamically
Each participant has a unique identity and avatar
Online/offline status tracking
User list displayed in chat header

Message Features

Messages are aligned based on sender (user vs users)
User names shown above messages
Avatar initials generated from participant names
Message timestamps for all users

Customization options link

Customize the appearance and behavior of the Chat component using various properties like ShowUsers, ShowUserNames, MaxVisibleUsers, and ShowClearButton.

Customizable Chat

chat_bubble_outline

No messages yet. Start a conversation!

Display Options

Show Users in Header

Show User Names Above Messages

Show Clear Button

Max Visible Users:

Text Customization

Placeholder Text

Empty Message

Customization Features

Display Controls

ShowUsers - Toggle participant avatars in header
ShowUserNames - Show/hide names above messages
ShowClearButton - Control clear chat button visibility
MaxVisibleUsers - Limit header participant display

Text Customization

Placeholder - Customize input field placeholder
EmptyMessage - Set message when chat is empty
Title - Set chat header title
All text properties support localization

Events and interactions link

Handle chat events like MessageAdded, MessageSent, UserAdded, and ChatCleared to integrate with your application logic and provide real-time updates.

Event Testing Controls

Events Demo

11:53

Welcome to the events demo! 🎉

Jane Smith

11:54

This chat demonstrates all the available events.

Bob Johnson

11:55

Try the buttons above to see events in action!

Console log

Compact chat link

Create a more compact chat interface suitable for smaller spaces or sidebar implementations by adjusting the height and hiding optional elements.

Compact Chat

Team Chat