UI Components - CometChat Docs

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.

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

Angular

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

<div>
  <CometChatUI></CometChatUI>
</div>

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

Angular

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>

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

Angular

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>

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

Angular

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>

CometChatMessages

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

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.

Angular

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	This property when set to true will return only the friends of the logged-in user. Value could be true or false	Optional

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.

Angular

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

CometChatConversationList

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

Angular

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

​CometChatUI

​CometChatUserListWithMessages

​CometChatGroupListWithMessages

​CometChatConversationListWithMessages

​CometChatMessages

​CometChatUserList

​CometChatGroupList

​CometChatConversationList