> ## Documentation Index
> Fetch the complete documentation index at: https://www.cometchat.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Overview

> Browse all prebuilt UI components in the CometChat React UI Kit — conversations, messages, users, groups, calls, search, and AI.

<Accordion title="AI Integration Quick Reference">
  | Field            | Value                                                                             |
  | ---------------- | --------------------------------------------------------------------------------- |
  | Package          | `@cometchat/chat-uikit-react`                                                     |
  | Required setup   | `CometChatUIKit.init()` + `CometChatUIKit.login()` before rendering any component |
  | Callback actions | `on<Event>={(param) => {}}`                                                       |
  | Data filtering   | `<entity>RequestBuilder={new CometChat.<Entity>RequestBuilder()}`                 |
  | Toggle features  | `hide<Feature>={true}` or `show<Feature>={true}`                                  |
  | Custom rendering | `<slot>View={(<params>) => JSX}`                                                  |
  | CSS overrides    | Target `.cometchat-<component>` class in global CSS                               |
  | Calling          | Requires separate `@cometchat/calls-sdk-javascript` package                       |
</Accordion>

## Architecture

The UI Kit is a set of independent components that compose into chat layouts. A typical two-panel layout uses four core components:

* **CometChatConversations** — sidebar listing recent conversations (users and groups)
* **CometChatMessageHeader** — toolbar showing avatar, name, online status, and typing indicator
* **CometChatMessageList** — scrollable message feed with reactions, receipts, and threads
* **CometChatMessageComposer** — rich text input with attachments, mentions, and voice notes

Data flow: selecting a conversation in CometChatConversations yields a `CometChat.User` or `CometChat.Group` object. That object is passed as a prop (`user` or `group`) to CometChatMessageHeader, CometChatMessageList, and CometChatMessageComposer. The message components use the SDK internally — CometChatMessageComposer sends messages, CometChatMessageList receives them via real-time listeners.

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/react/events) for the full list.

Each component accepts callback props (`on<Event>`), view slot props (`<slot>View`) for replacing UI sections, `RequestBuilder` props for data filtering, and CSS variable overrides on `.cometchat-<component>` classes.

***

## Component Catalog

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

### Conversations and Lists

| Component              | Purpose                                 | Key Props                                               | Page                                         |
| ---------------------- | --------------------------------------- | ------------------------------------------------------- | -------------------------------------------- |
| CometChatConversations | Scrollable list of recent conversations | `conversationsRequestBuilder`, `onItemClick`, `onError` | [Conversations](/ui-kit/react/conversations) |
| CometChatUsers         | Scrollable list of users                | `usersRequestBuilder`, `onItemClick`, `onError`         | [Users](/ui-kit/react/users)                 |
| CometChatGroups        | Scrollable list of groups               | `groupsRequestBuilder`, `onItemClick`, `onError`        | [Groups](/ui-kit/react/groups)               |
| CometChatGroupMembers  | Scrollable list of group members        | `group`, `groupMemberRequestBuilder`, `onItemClick`     | [Group Members](/ui-kit/react/group-members) |

### Messages

| Component                | Purpose                                                   | Key Props                                                           | Page                                               |
| ------------------------ | --------------------------------------------------------- | ------------------------------------------------------------------- | -------------------------------------------------- |
| CometChatMessageHeader   | Toolbar with avatar, name, status, typing indicator       | `user`, `group`, `enableAutoSummaryGeneration`                      | [Message Header](/ui-kit/react/message-header)     |
| CometChatMessageList     | Scrollable message list with reactions, receipts, threads | `user`, `group`, `messagesRequestBuilder`, `goToMessageId` (string) | [Message List](/ui-kit/react/message-list)         |
| CometChatMessageComposer | Rich text input with attachments, mentions, voice notes   | `user`, `group`, `onSendButtonClick`, `placeholderText`             | [Message Composer](/ui-kit/react/message-composer) |
| CometChatMessageTemplate | Pre-defined structure for custom message bubbles          | `type`, `category`, `contentView`, `headerView`, `footerView`       | [Message Template](/ui-kit/react/message-template) |
| CometChatThreadHeader    | Parent message bubble and reply count for threaded view   | `parentMessage`, `onClose`, `hideReceipts`, `textFormatters`        | [Thread Header](/ui-kit/react/thread-header)       |

### Calling

| Component             | Purpose                                        | Key Props                                               | Page                                         |
| --------------------- | ---------------------------------------------- | ------------------------------------------------------- | -------------------------------------------- |
| CometChatCallButtons  | Voice and video call initiation buttons        | `user`, `group`, `onVoiceCallClick`, `onVideoCallClick` | [Call Buttons](/ui-kit/react/call-buttons)   |
| CometChatIncomingCall | Incoming call notification with accept/decline | `call`, `onAccept(call)`, `onDecline(call)`             | [Incoming Call](/ui-kit/react/incoming-call) |
| CometChatOutgoingCall | Outgoing call screen with cancel control       | `call`, `onCloseClicked`                                | [Outgoing Call](/ui-kit/react/outgoing-call) |
| CometChatCallLogs     | Scrollable list of call history                | `callLogsRequestBuilder`, `onItemClick`                 | [Call Logs](/ui-kit/react/call-logs)         |

### Search and AI

| Component                | Purpose                                            | Key Props                                                                                                                           | Page                                                 |
| ------------------------ | -------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------- |
| CometChatSearch          | Real-time search across conversations and messages | `onConversationClicked(conversation, searchKeyword?)`, `onMessageClicked(message, searchKeyword?)`, `uid`, `guid`, `textFormatters` | [Search](/ui-kit/react/search)                       |
| CometChatAIAssistantChat | AI agent chat with streaming, suggestions, history | `user`, `onSendButtonClick(message, previewMessageMode?)`, `aiAssistantTools`                                                       | [AI Assistant Chat](/ui-kit/react/ai-assistant-chat) |

## Component API Pattern

All 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 callback props that fire on specific events. Override them to customize behavior:

```tsx lines theme={null}
<CometChatMessageList
  user={chatUser}
  onThreadRepliesClick={(message) => openThreadPanel(message)}
  onError={(error) => logError(error)}
/>
```

### Events

Events enable decoupled communication between components. A component emits events that other parts of the application can subscribe to without direct references.

```tsx lines theme={null}
import { CometChatMessageEvents } from "@cometchat/chat-uikit-react";

const sub = CometChatMessageEvents.ccMessageSent.subscribe((message) => {
  // react to sent message
});

// cleanup
sub?.unsubscribe();
```

Each component page documents its emitted events in the Events section.

### Filters

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

```tsx lines theme={null}
<CometChatMessageList
  user={chatUser}
  messagesRequestBuilder={
    new CometChat.MessagesRequestBuilder().setLimit(20)
  }
/>
```

### Custom View Slots

Components expose named view slots to replace sections of the default UI:

```tsx lines theme={null}
<CometChatMessageHeader
  user={chatUser}
  titleView={<CustomTitle />}
  subtitleView={<CustomSubtitle />}
  leadingView={<CustomAvatar />}
/>
```

### CSS Overrides

Every component has a root CSS class (`.cometchat-<component>`) for style customization:

```css lines theme={null}
.cometchat-message-list .cometchat-text-bubble__body-text {
  font-family: "SF Pro";
}
```

***

## Next Steps

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

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

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

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