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.
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.
User Management
User List
John Doe
OnlineYouJane Smith
OnlineBob Johnson
OfflineAlice Brown
OnlineMulti-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.
Display Options
Text Customization
Customization Features
Display Controls
ShowUsers- Toggle participant avatars in headerShowUserNames- Show/hide names above messagesShowClearButton- Control clear chat button visibilityMaxVisibleUsers- Limit header participant display
Text Customization
Placeholder- Customize input field placeholderEmptyMessage- Set message when chat is emptyTitle- 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.
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
Minimal Chat
Compact Chat Features
Space-Saving Options
- Reduced height for sidebar implementations
- Hide participant names to save vertical space
- Limit visible users in header
- Remove optional UI elements (clear button, title)
Use Cases
- Sidebar chat panels
- Mobile-responsive layouts
- Embedded chat widgets
- Minimal notification systems
Radzen Blazor Components, © 2018-2026 Radzen.
Source Code licensed under
MIT