> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-agent-native-development.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Overview

> Overview of all available UI components

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

## Component Categories

### Conversations

Components for displaying and managing chat conversations.

| Component | Description |
| - | - |
| `cometchat-conversations` | List of all conversations |

### Messages

Components for displaying and sending messages.

| Component | Description |
| - | - |
| `cometchat-message-list` | Scrollable list of messages |
| `cometchat-message-composer` | Message input with attachments, emoji, and rich text |
| `cometchat-message-header` | Header showing conversation info and actions |
| `cometchat-message-bubble` | Individual message bubble |
| `cometchat-thread-header` | Header for threaded message view |
| `cometchat-pinned-messages` | Panel listing a conversation's pinned messages |
| `cometchat-saved-messages` | Panel listing the logged-in user's saved messages |

### Users

Components for user management and display.

| Component | Description |
| - | - |
| `cometchat-users` | List of users |

### Groups

Components for group chat functionality.

| Component | Description |
| - | - |
| `cometchat-groups` | List of groups |
| `cometchat-group-members` | List 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:

```html theme={null}
<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.

```typescript expandable theme={null}
import { CometChatMessageEvents } from '@cometchat/chat-uikit-angular';
import { Subscription } from 'rxjs';

// Subscribe in ngOnInit
this.subscription = CometChatMessageEvents.ccMessageSent.subscribe(({ message, status }) => {
  // react to sent message; `status` is inprogress, success, or error
});

// Cleanup in ngOnDestroy
this.subscription?.unsubscribe();
```

Each component page documents its emitted events in the Events section. See [Events](/ui-kit/angular/events) for the full reference.

### Filters

List-based components accept `RequestBuilder` inputs to control which data loads:

```html theme={null}
<cometchat-message-list
  [user]="chatUser"
  [messagesRequestBuilder]="messagesRequestBuilder">
</cometchat-message-list>
```

```typescript theme={null}
this.messagesRequestBuilder = new CometChat.MessagesRequestBuilder().setLimit(20);
```

### Custom View Slots

Components expose named `ng-template` inputs to replace sections of the default UI:

```html expandable theme={null}
<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:

```css theme={null}
.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

| Component | Purpose | Key Inputs | Page |
| - | - | - | - |
| cometchat-conversations | Scrollable list of recent conversations | `conversationsRequestBuilder`, `itemClick`, `error` | [Conversations](/ui-kit/angular/components/cometchat-conversations) |
| cometchat-users | Scrollable list of users | `usersRequestBuilder`, `itemClick`, `error` | [Users](/ui-kit/angular/components/cometchat-users) |
| cometchat-groups | Scrollable list of groups | `groupsRequestBuilder`, `itemClick`, `error` | [Groups](/ui-kit/angular/components/cometchat-groups) |
| cometchat-group-members | Scrollable list of group members | `group`, `groupMemberRequestBuilder`, `itemClick` | [Group Members](/ui-kit/angular/components/cometchat-group-members) |

### Messages

| Component | Purpose | Key Inputs | Page |
| - | - | - | - |
| cometchat-message-header | Toolbar with avatar, name, status, typing indicator | `user`, `group` | [Message Header](/ui-kit/angular/components/cometchat-message-header) |
| cometchat-message-list | Scrollable message list with reactions, receipts, threads | `user`, `group`, `messagesRequestBuilder` | [Message List](/ui-kit/angular/components/cometchat-message-list) |
| cometchat-message-composer | Rich text input with attachments, mentions, voice notes | `user`, `group`, `placeholderText` | [Message Composer](/ui-kit/angular/components/cometchat-message-composer) |
| cometchat-thread-header | Parent message bubble and reply count for threaded view | `parentMessage` | [Thread Header](/ui-kit/angular/components/cometchat-thread-header) |
| cometchat-pinned-messages | A conversation's pinned messages, with attribution and inline unpin | `user`, `group` | [Pinned Messages](/ui-kit/angular/components/cometchat-pinned-messages) |
| cometchat-saved-messages | The logged-in user's saved messages, across every conversation | *(none — scoped to the logged-in user)* | [Saved Messages](/ui-kit/angular/components/cometchat-saved-messages) |

### Calling

| Component | Purpose | Key Inputs | Page |
| - | - | - | - |
| cometchat-call-buttons | Voice and video call initiation buttons | `user`, `group` | [Call Buttons](/ui-kit/angular/components/cometchat-call-buttons) |
| cometchat-incoming-call | Incoming call notification with accept/decline | `call` | [Incoming Call](/ui-kit/angular/components/cometchat-incoming-call) |
| cometchat-outgoing-call | Outgoing call screen with cancel control | `call` | [Outgoing Call](/ui-kit/angular/components/cometchat-outgoing-call) |
| cometchat-call-logs | Scrollable list of call history | `callLogsRequestBuilder` | [Call Logs](/ui-kit/angular/components/cometchat-call-logs) |

### AI

| Component | Purpose | Key Inputs | Page |
| - | - | - | - |
| cometchat-smart-replies | AI-generated response suggestions | — | [Smart Replies](/ui-kit/angular/components/cometchat-smart-replies) |
| cometchat-conversation-starter | AI-generated opening lines for new chats | — | [Conversation Starter](/ui-kit/angular/components/cometchat-conversation-starter) |
| cometchat-conversation-summary | AI-generated conversation summary panel | `getConversationSummary` | [Conversation Summary](/ui-kit/angular/components/cometchat-conversation-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](/ui-kit/angular/guides/state-management) 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](/ui-kit/angular/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

<CardGroup cols={2}>
  <Card title="Core Features" icon="comments" href="/ui-kit/angular/core-features">
    Chat features included out of the box
  </Card>

  <Card title="Theming" icon="paintbrush" href="/ui-kit/angular/customization/theming">
    Customize colors, fonts, and styles
  </Card>

  <Card title="Extensions" icon="puzzle-piece" href="/ui-kit/angular/extensions">
    Add-on features like polls, stickers, and translation
  </Card>

  <Card title="Guides" icon="book" href="/ui-kit/angular/guides/guides-overview">
    Task-oriented tutorials for common patterns
  </Card>
</CardGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.