UI Components
CometChat's UI Kit is a set of pre-built UI components that allows you to easily craft an in-app chat with all the essential messaging features.
The UI Components are divided into these modules:
- Chats
- Users
- Groups
- Messages
- Calls
- Shared
Conversations
The conversations module consists of following sub-modules:
| Component | Description | Navigate |
|---|---|---|
CometChatConversationsWithMessages | This component is responsible for displaying the recent conversation between participants in a 1:1 or group chat. It also allows users to send text, images, videos, or other media as messages to communicate with one another in real-time. | Learn more |
CometChatConversations | This component lists the most recent or latest conversations or contacts with whom you have exchanged messages. It provides a convenient way to quickly access and resume conversations with the people you have been in contact with recently. | Learn more |
Users
The users module consists of following sub-modules:
| Component | Description | Navigate |
|---|---|---|
CometChatUsersWithMessages | This component is responsible for listing all the users registered on CometChat. It also allows users to send text, images, videos, or other media as messages to communicate with one another in real-time. | Learn more |
CometChatUsers | This component lists all the users registered on CometChat and also allows users to search for other users. It enables users to find and locate specific individuals based on various search criteria or parameters. Online users are represented with a green colored dot. | Learn more |
Groups
The groups module consists of following sub-modules:
| Component | Description | Navigate |
|---|---|---|
CometChatGroupsWithMessages | This component is responsible for listing all the groups created on CometChat. It also allows group members to send text, images, videos, or other media as messages to communicate with one another in real-time. | Learn more |
CometChatGroups | This component lists all the groups created on CometChat and also allows users to search for groups. It enables users to find and locate specific groups based on various search criteria or parameters. | Learn more |
CometChatGroupMembers | This component lists all the users who have been added or invited to participate in a particular group and have access to its discussions, shared content, and collaboration features. | Learn more |
CometChatAddMembers | This component allows administrators or group owners to add new members to a specific group. It enables administrators or group owners to extend the membership of a group by adding new users to participate in the group's discussions and activities. By utilising this feature, administrators can manage group membership, and control access to group content. | Learn more |
CometChatBannedMembers | This component lists all the users who have been restricted or prohibited from participating in specific groups or conversations. When the user is banned, they are no longer able to access or engage with the content and discussions within the banned group. | Learn more |
CometChatTransferOwnership | This component allows the current owner or administrator of a group to transfer the ownership rights and administrative control of that group to another user. By transferring ownership, the original owner can designate a new user as the group owner, giving them full control and administrative privileges over the group. | Learn more |
Messages
CometChatMessages displays the chat window for the User or Group entities where it shows the list of messages.
| Component | Description | Navigate |
|---|---|---|
CometChatMessages | This component is responsible for displaying the conversation between participants in a 1:1 or group chat. | Learn more |
CometChatMessageList | This is a fundamental component of the chat interface that displays a list of chat messages exchanged between participants in a conversation. It serves as a chronological log of the conversation, presenting messages in the order they were sent. | Learn more |
CometChatMessageHeader | This component contains relevant information relevant to the chat conversation. | Learn more |
CometChatMessageComposer | This component allows users to compose and send messages. It provides a text input area or field where users can enter their messages or responses before sending them to other participants in the conversation. | Learn more |
CometChatThreadedMessages | This component allows users to organize and group related messages into separate conversations within a larger conversation. It provides a way to maintain context, focus, and clarity when multiple discussions or topics are happening simultaneously within a chat. | Learn more |
Calls
| Component | Description | Navigate |
|---|---|---|
CometChatCallButtons | This component provides users with the ability to make calls, access call-related functionalities, and control call settings. Clicking this button typically triggers the call to be placed to the desired recipient. | Learn more |
CometChatOutgoingCall | The outgoing call component is displayed when a user initiates an outgoing call, such as a voice call or a video call. It provides a visual representation of the outgoing call and offers options for the user to manage the call. | Learn more |
CometChatIncomingCall | The incoming call component is displayed when the user receives an incoming call, such as a voice call, video call. It serves as a visual representation of an incoming call and provides options for the user to answer or decline the call. | Learn more |
CometChatOngoingCall | This component is displayed during an ongoing voice or video call. This provides a dedicated screen or interface where users can engage in real-time conversation, view video streams, access call controls, and interact with various call-related features. | Learn more |
Shared
| Component | Description | Navigate |
|---|---|---|
| CometChatSoundManager | CometChatSoundManager provides functionalities for managing audio playback for incoming / outgoing messages in 1:1 or group chat. | Learn more |
| CometChatLocalize | With language localization, CometChat UI Kit adapts to the language of a specific country or region. CometChatLocalize allows you to detect the language of your users based on their browser settings and set the language accordingly. | |
| CometChatTheme | Theme class provides endless number of customisations to improve or transform the look and feel of the UI Kit as per your application need. | Learn more |