CometChat Pro Documentation

You'll find comprehensive guides and documentation to help you start working with CometChat as quickly as possible. Let's jump right in!

UI Components

UI Components are building blocks of the UI Kit. UI Components are a set of custom classes specially designed to build a rich chat app. There are different UI Components available in the
UI Kit Library.

1. CometChatUI

CometChatUI is an option to launch a fully functional chat application using the UI Kit. In CometChatUI all the UI Components are interlinked and work together to launch a fully functional chat on your website/application

import { CometChatUI } from "../components/CometChatUI/CometChat/cometchat-ui.module";
<div>
  <CometChatUI></CometChatUI>
</div>

2. CometChatUserListWithMessages

The CometChatUserListWithMessages is a component with a list of users. The component has all the necessary listeners and methods required to display the user's list and shows the set of the messages/chats of the selected user

import { CometChatUserListWithMessages } from "../components/Users/CometChat-user-list-with-messages/cometchat-user-list-with-messages.module";
<div>
  <cometchat-user-list-with-messages></cometchat-user-list-with-messages>
</div>

3. CometChatGroupListWithMessages

The CometChatGroupListWithMessages is a component with a list of groups. The component has all the necessary listeners and methods required to display the group's list and shows the set of the messages/chats of the selected group

import { CometChatGroupListWithMessages } from "../components/Groups/CometChat-group-with-messages/cometchat-group-list-with-messages.module";
<div>
  <cometchat-group-list-with-messages></cometchat-group-list-with-messages>
</div>

4. CometChatMessages

The CometChatMessages is a component with a list of messages/chats and shows the message component header and message composer.

5. CometChatConversationListWithMessages

The CometChatConversationListWithMessages is a component with a list of recent conversations. The component has all the necessary listeners and methods required to display the recent conversation list and shows the set of the messages/chats of the selected recent conversation

import { CometChatConversationListWithMessages } from "../components/Chats/CometChat-conversation-list-with-messages/cometchat-conversation-list-with-messages.module";
<div>
  <cometchat-conversation-list-with-messages></cometchat-conversation-list-with-messages>
</div>

6. CometChatUserList

The CometChatUserList is a component that displays the list of users available to chat. You can use this component within your app if you wish to display the list of users.

import { CometChatUserList } from "../components/Users/CometChat-user-list/cometchat-user-list.module";
<div>
  <cometchat-user-list [friendsOnly]=true> </cometchat-user-list>
</div>

Parameter

Description

Type

friendsOnly

Value could be true or false
This property when set to true will return only the friends of the logged-in user.

Optional

7. CometChatGroupList

The CometChatGroupList is a component that displays the list of groups available. You can use this component within your app if you wish to display the list of groups.

import { CometChatGroupList } from "../components/Groups/CometChat-group-list/cometchat-group-list.module";
<div>
  <cometchat-group-list>
</cometchat-group-list>
</div>

8.CometChatConversationList

You can use the CometChatConversationList component to display the list of recent conversations that the logged-in user was a part of.

import { CometChatConversationList } from "../components/Chats/CometChat-conversation-list/cometchat-conversation-list.module";
<div>
  <cometchat-conversation-list></cometchat-conversation-list>
</div>

Updated 5 months ago


UI Components


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.