Overview
The UI Kit comprises a variety of widgets, each designed to work seamlessly with one another to deliver a comprehensive and intuitive chat experience. Here’s how different UI Kit widgets work together to achieve CometChat’s Core features:Instant Messaging
At the heart of CometChat’s functionality is the ability to support real-time text messaging. Users can send and receive instant messages, fostering quick and efficient communication.| Widgets | Functionality |
|---|---|
| MessageComposer | Enables users to write and send a variety of messages. In V6, powered by MessageComposerBloc with rich text formatting support. |
| MessageList | Renders a list of messages sent and received using TextBubble. In V6, powered by MessageListBloc with diffutil_dart for efficient updates. |
Media Sharing
Beyond text, CometChat allows users to share various media types within their conversations — images, videos, audio files, and documents.| Widgets | Functionality |
|---|---|
| MessageComposer | Has ActionSheet for sharing media files. V6 adds inline audio recorder and multi-attachment support (in progress). |
| MessageList | Renders different Media Message bubbles like Image Bubble, File Bubble, Audio Bubble, Video Bubble. |
Read Receipts
CometChat’s Read Receipts feature provides visibility into the message status, letting users know when a message has been delivered and read.| Widgets | Functionality |
|---|---|
| Conversations | Displays the delivery status of the last message. |
| MessageList | Read receipt status is an integral part of all message bubbles. |
| MessageInformation | Provides transparency into the status of each sent message. |
Mark As Unread
Mark as Unread feature allows users to manually mark messages as unread, helping them keep track of important conversations they want to revisit later.| Widgets | Functionality |
|---|---|
| Message List | Provides the “Mark as unread” option in message actions and supports starting from the first unread message. |
| Conversations | Reflects the updated unread count in real-time. |
Typing Indicator
The Typing Indicator feature shows when a user is typing a response in real-time.| Widgets | Functionality |
|---|---|
| Conversations | Shows real-time typing status indicators in conversation items. |
| Message Header | Dynamically updates to display a ‘typing…’ status in real-time. |
User Presence
CometChat’s User Presence feature allows users to see whether their contacts are online or offline.| Widgets | Functionality |
|---|---|
| Conversations | Shows user presence information in conversation items. |
| Message Header | Handles user Presence information in the toolbar. |
| Users | Renders users Presence information in the user list. |
| Group Members | Handles user Presence information in the member list. |
Reactions
CometChat’s Reactions feature allows users to react to messages with emojis.| Widgets | Functionality |
|---|---|
| MessageList | Reactions are an integral part of all message bubbles. Width-aware display shows visible reactions + “+N” overflow indicator. |
Mentions
Mentions enhances interactivity by allowing users to directly address specific individuals in a conversation. Supports@all for group mentions.
| Widgets | Functionality |
|---|---|
| Conversations | Shows where users have been specifically mentioned. |
| MessageComposer | Allows users to use the Mentions feature for direct addressing. |
| MessageList | Supports the rendering of Mentions in messages. |
Quoted Reply
Quoted Reply enables users to quickly reply to specific messages by selecting the “Reply” option from a message’s action menu.| Widgets | Functionality |
|---|---|
| MessageList | Supports replying to messages via the “Reply” option. |
| MessageComposer | Shows the quoted reply above the input field using CometChatMessagePreview (renamed from CometChatEditPreview in V5). |
Threaded Conversations
The Threaded Conversations feature enables users to respond directly to a specific message in a chat.| Widgets | Functionality |
|---|---|
| Threaded Messages | Displays all replies made to a particular message. In V6, powered by ThreadedHeaderBloc. |
Conversation and Advanced Search
Enables users to quickly find conversations, messages, and media across chats in real time.| Widgets | Functionality |
|---|---|
| Search | Allows users to search across conversations and messages. In V6, powered by a single consolidated SearchBloc. |
| Message Header | Shows the search button in the chat header. |
| MessageList | Shows the selected message when clicked from search results. |
Moderation
CometChat’s Message Moderation feature helps maintain a safe and respectful chat environment by automatically filtering and managing inappropriate content.| Widgets | Functionality |
|---|---|
| Message List | Automatically handles moderated messages, displaying blocked content appropriately. |
Report Message
The Report Message feature allows users to report inappropriate or harmful messages within the chat.| Widgets | Functionality |
|---|---|
| MessageList | Provides the “Report Message” option in the message actions menu. |