Skip to main content
CometChat UIKit provides a comprehensive set of pre-built components for building chat experiences.

​
Component Categories

​
Conversations

Components for displaying and managing chat conversations.
ComponentDescription
cometchat-conversationsList of all conversations

​
Messages

Components for displaying and sending messages.
ComponentDescription
cometchat-message-listScrollable list of messages
cometchat-message-composerMessage input with attachments, emoji, and rich text
cometchat-message-headerHeader showing conversation info and actions
cometchat-message-bubbleIndividual message bubble
cometchat-thread-headerHeader for threaded message view

​
Users

Components for user management and display.
ComponentDescription
cometchat-usersList of users

​
Groups

Components for group chat functionality.
ComponentDescription
cometchat-groupsList of groups
cometchat-group-membersList of group members

​
Component API Pattern

All Angular UIKit components share a consistent API surface.

​
Actions

Actions control component behavior. They split into two categories: Predefined Actions are built into the component and execute automatically on user interaction (e.g., clicking send dispatches the message). No configuration needed. User-Defined Actions are @Output() callbacks that fire on specific events. Override them to customize behavior: 
<cometchat-message-list
  [user]="chatUser"
  (threadRepliesClick)="onThreadRepliesClick($event)"
  (error)="onError($event)">
</cometchat-message-list>
Each component page documents its available outputs in the Actions section.

​
Events

Events enable decoupled communication between components. A component emits events that other parts of the application can subscribe to without direct references. 
import { CometChatMessageEvents } from '@cometchat/chat-uikit-angular';
import { Subscription } from 'rxjs';

// Subscribe in ngOnInit
this.subscription = CometChatMessageEvents.ccMessageSent.subscribe((message) => {
  // react to sent message
});

// Cleanup in ngOnDestroy
this.subscription?.unsubscribe();
Each component page documents its emitted events in the Events section. See Events for the full reference.

​
Filters

List-based components accept RequestBuilder inputs to control which data loads: 
<cometchat-message-list
  [user]="chatUser"
  [messagesRequestBuilder]="messagesRequestBuilder">
</cometchat-message-list>

this.messagesRequestBuilder = new CometChat.MessagesRequestBuilder().setLimit(20);

​
Custom View Slots

Components expose named ng-template inputs to replace sections of the default UI: 
<cometchat-message-header
  [user]="chatUser"
  [titleView]="customTitle"
  [subtitleView]="customSubtitle"
  [leadingView]="customAvatar">
</cometchat-message-header>

<ng-template #customTitle let-user>
  <span>{{ user.getName() }}</span>
</ng-template>

<ng-template #customSubtitle let-user>
  <span>Custom subtitle</span>
</ng-template>

<ng-template #customAvatar let-user>
  <img [src]="user.getAvatar()" alt="avatar" />
</ng-template>

​
CSS Overrides

Every component has a root CSS class (.cometchat-<component>) for style customization: 
.cometchat .cometchat-message-list .cometchat-text-bubble__body-text {
  font-family: "SF Pro";
}

​
Component Catalog

All components are imported from @cometchat/chat-uikit-angular.

​
Conversations and Lists

ComponentPurposeKey InputsPage
cometchat-conversationsScrollable list of recent conversationsconversationsRequestBuilder, itemClick, errorConversations
cometchat-usersScrollable list of usersusersRequestBuilder, itemClick, errorUsers
cometchat-groupsScrollable list of groupsgroupsRequestBuilder, itemClick, errorGroups
cometchat-group-membersScrollable list of group membersgroup, groupMemberRequestBuilder, itemClickGroup Members

​
Messages

ComponentPurposeKey InputsPage
cometchat-message-headerToolbar with avatar, name, status, typing indicatoruser, groupMessage Header
cometchat-message-listScrollable message list with reactions, receipts, threadsuser, group, messagesRequestBuilderMessage List
cometchat-message-composerRich text input with attachments, mentions, voice notesuser, group, placeholderTextMessage Composer
cometchat-thread-headerParent message bubble and reply count for threaded viewparentMessageThread Header

​
Calling

ComponentPurposeKey InputsPage
cometchat-call-buttonsVoice and video call initiation buttonsuser, groupCall Buttons
cometchat-incoming-callIncoming call notification with accept/declinecallIncoming Call
cometchat-outgoing-callOutgoing call screen with cancel controlcallOutgoing Call
cometchat-call-logsScrollable list of call historycallLogsRequestBuilderCall Logs

​
AI

ComponentPurposeKey InputsPage
cometchat-smart-repliesAI-generated response suggestions—Smart Replies
cometchat-conversation-starterAI-generated opening lines for new chats—Conversation Starter
cometchat-conversation-summaryAI-generated conversation summary panelgetConversationSummaryConversation Summary

​
Architecture

The UIKit is a set of independent components that compose into chat layouts. A typical two-panel layout uses four core components:
  • cometchat-conversations — sidebar listing recent conversations (users and groups)
  • cometchat-message-header — toolbar showing avatar, name, online status, and typing indicator
  • cometchat-message-list — scrollable message feed with reactions, receipts, and threads
  • cometchat-message-composer — rich text input with attachments, mentions, and voice notes
Data flow: selecting a conversation in cometchat-conversations yields a CometChat.User or CometChat.Group object. That object is passed as an input ([user] or [group]) to cometchat-message-header, cometchat-message-list, and cometchat-message-composer. The message components use the SDK internally — cometchat-message-composer sends messages, cometchat-message-list receives them via real-time listeners. The UIKit supports a Hybrid Approach for wiring components: by default, components subscribe to ChatStateService for active chat state, but explicit @Input() bindings always take priority. This lets you start with zero-config service-based wiring and override individual components as needed. See the State Management guide for a full comparison and code examples. Components communicate through a publish/subscribe event bus (CometChatMessageEvents, CometChatConversationEvents, CometChatGroupEvents, etc.). A component emits events that other components or application code can subscribe to without direct references. See Events for the full list. Each component accepts @Output() callbacks, ng-template view slot inputs for replacing UI sections, RequestBuilder inputs for data filtering, and CSS variable overrides on .cometchat-<component> classes.

​
Next Steps

Core Features

Chat features included out of the box

Theming

Customize colors, fonts, and styles

Extensions

Add-on features like polls, stickers, and translation

Guides

Task-oriented tutorials for common patterns