Core

Overview of CometChat React UI Kit core features, including messaging, media sharing, receipts, presence, reactions, search, and moderation.

AI Integration Quick Reference

Field	Value
Package	@cometchat/chat-uikit-react
Required setup	CometChatUIKit.init(UIKitSettings) then CometChatUIKit.login("UID") — must complete before rendering any component
Core features	Instant Messaging, Media Sharing, Read Receipts, Mark as Unread, Typing Indicator, User Presence, Reactions, Mentions, Quoted Reply, Search, Threaded Conversations, Moderation, Report Message, Group Chat
Key components	CometChatConversations → Conversations, CometChatMessageList → Message List, CometChatMessageComposer → Message Composer, CometChatMessageHeader → Message Header, CometChatUsers → Users, CometChatGroups → Groups, CometChatGroupMembers → Group Members
CSS class prefix	.cometchat-
Theming	Override CSS variables on .cometchat class. See Theming

The UI Kit components work together to deliver a complete chat experience. The sections below map each core feature to the components that power it.

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.

Components	Functionality
Message Composer	The Message Composer is a Component that enables users to write and send a variety of messages.
Message List	The Message List is a Component that renders a list of messages sent and messages received using Text Bubble.

Media Sharing

CometChat supports sharing images, videos, audio files, and documents within conversations.

Components	Functionality
Message Composer	The Message Composer component includes an ActionSheet. This ActionSheet serves as a menu appearing over the app’s context, offering various options for sharing media files.
Message List	The Message List component is responsible for rendering various Media Message bubbles, such as Image, File, Audio & 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. This brings clarity to the communication and ensures users are informed about the status of their messages.

Components	Functionality
Conversations	Conversations is a component that renders conversation list item. Conversation item also displays the delivery status of the last message providing users with real-time updates on the status of their messages.
Message List	Message List is a component that renders different types of message bubbles. Read receipt status is an integral part of all message bubbles, no matter the type and provides real-time updates about the status of the message.
Message Information	Message Information component provides transparency into the status of each sent message, giving the sender insights into whether their message has been delivered and read.

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. When enabled, the message list can automatically start from the first unread message, making it easier to pick up where you left off.

Components	Functionality
Message List	Message List provides the “Mark as unread” option in message actions and supports starting from the first unread message when enabled.
Conversations	Conversations component listens to conversation updates and reflects the updated unread count in real-time.

Typing Indicator

The Typing Indicator feature in CometChat shows when a user is typing a response in real-time, fostering a more interactive and engaging chat environment. This feature enhances the real-time communication experience, making conversations feel more natural and fluid.

Components	Functionality
Conversations	Conversations is a component that renders conversation list item. Conversations item also shows real-time typing status indicators. This means that if a user in a one-on-one chat or a participant in a group chat is currently typing a message.
Message Header	Message Header that renders details of User or Groups in ToolBar. The Message Header also handles the typing indicator functionality. When a user or a member in a group is typing, the 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, offline. This helps users know the best time to initiate a conversation and sets expectations about response times.

Components	Functionality
Conversations	Conversations is a component that renders conversation list item. Conversations item also shows user presence information.
Message Header	Message Header that renders details of user/group. The Message Header also handles user presence information.
Users	Users renders the list of available users with presence information.
Group Members	Group Members renders list of users available in the group. The Group Members component also handles user presence information.

Reactions

CometChat’s Reactions feature adds a layer of expressiveness to your chat application by allowing users to react to messages. With reactions, users can convey a range of emotions or express their thoughts on a particular message without typing out a full response, enhancing their user experience and fostering greater engagement.

Components	Functionality
Message List	Message List is a component that renders different types of message bubbles. Reactions are an integral part and offer a more engaging, expressive way for users to respond to messages.

Mentions

Mentions is a robust feature provided by CometChat that enhances the interactivity and clarity of group or 1-1 chats by allowing users to directly address or refer to specific individuals in a conversation. The feature also supports group mentions like @all, enabling users to quickly notify all members in a group chat simultaneously.

Components	Functionality
Conversations	Conversations component provides an enhanced user experience by integrating the Mentions feature. This means that from the conversation list itself, users can see where they or someone else have been specifically mentioned.
Message Composer	Message Composer is a component that allows users to craft and send various types of messages, including the usage of the mentions feature for direct addressing within the conversation.
Message List	Message List is a component that displays a list of sent and received messages. It also supports the rendering of Mentions, enhancing the readability and interactivity of conversations.

Rich Text Formatting

Rich Text Formatting allows users to style their messages with bold, italic, underline, strikethrough, code, links, lists, and blockquotes. This brings richer expression to conversations and helps users emphasize key points, making communication clearer and more engaging.

Components	Functionality
CompactMessageComposer	CompactMessageComposer provides a built-in rich text editor with formatting toolbar, floating selection toolbar, and keyboard shortcuts for bold, italic, underline, strikethrough, code, links, lists, and blockquotes.
MessageList	MessageList renders formatted messages with the appropriate styling applied, displaying bold, italic, underline, strikethrough, code, links, lists, and blockquote formatting as intended by the sender.

Threaded Conversations

The Threaded Conversations feature enables users to respond directly to a specific message in a chat. This keeps conversations organized and enhances the user experience by maintaining context, especially in group chats.

Components	Functionality
Threaded Message Preview	Threaded Message Preview component displays the parent message along with the number of replies.

Quoted Replies

Quoted Replies is a robust feature provided by CometChat that enables users to quickly reply to specific messages by selecting the “Reply” option from a message’s action menu. This enhances context, keeps conversations organized, and improves overall chat experience in both 1-1 and group chats.

Components	Functionality
Message List	Message List supports replying to messages via the “Reply” option. Users can select “Reply” on a message to open the composer with the quoted reply pre-filled, maintaining context.
Message Composer	Message Composer shows the quoted reply above the input field, providing context for the response.

Group Chat

CometChat facilitates Group Chats, allowing users to have conversations with multiple participants simultaneously. This feature is crucial for team collaborations, group discussions, social communities, and more.

See the Groups component page for details.

Moderation

CometChat’s Message Moderation feature helps maintain a safe and respectful chat environment by automatically filtering and managing inappropriate content. Messages can be automatically blocked or flagged based on predefined rules, ensuring harmful content is handled before it reaches users.

Learn more about setting up moderation rules and managing content in the Moderation documentation.

Components	Functionality
Message List	Message List automatically handles moderated messages, displaying blocked content based on moderation settings.

The Report Message feature enables users to flag messages for review by moderators.

Report Message

The Report Message feature allows users to report inappropriate or harmful messages within the chat. Users can choose from predefined reasons and provide additional remarks for detailed context. This feature helps maintain a safe and respectful chat environment.

Learn more about how flagged messages are handled, reviewed, and moderated in the Flagged Messages documentation.

Components	Functionality
Message List	Message List provides the “Report Message” option in the message actions menu, allowing users to initiate the reporting process for inappropriate messages.

Conversation and Advanced Search

Conversation and Advanced Search is a powerful feature provided by CometChat that enables users to quickly find conversations, messages, and media across chats in real time. It supports filters, scopes, and custom actions, allowing users to locate content efficiently while keeping the chat experience smooth and intuitive.

Components	Functionality
Search	Search allows users to search across conversations and messages in real time. Users can click on a result to open the conversation or jump directly to a specific message.
Message Header	Message Header shows the search button in the chat header, allowing users to search within a conversation.
Message List	Message List shows the selected message when clicked from search results and highlights it in the message list.
Conversations	Conversations displays the search input.

See the Groups component page for details.

---

Next Steps

Components Overview

Browse all available UI Kit components

Theme

Customize the look and feel of your chat UI

Call Features

Add audio and video calling

AI Features

Explore AI-powered chat capabilities