> ## 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.

# Core Features

> Review CometChat Angular UI Kit core features for messaging, media sharing, receipts, typing indicators, presence, reactions, threads, and search.

<Accordion title="AI Integration Quick Reference">
  | Field            | Value                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
  | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
  | Package          | `@cometchat/chat-uikit-angular`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
  | Required setup   | `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` — must complete before rendering any component                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
  | Core features    | Instant Messaging, Media Sharing, Read Receipts, Typing Indicator, User Presence, Reactions, Mentions, Rich Text Formatting, Quoted Reply, Search, Threaded Conversations, Moderation, Report Message, Group Chat                                                                                                                                                                                                                                                                                                                                                                                                                                      |
  | Key components   | `CometChatConversations` → [Conversations](/ui-kit/angular/components/cometchat-conversations), `CometChatMessageList` → [Message List](/ui-kit/angular/components/cometchat-message-list), `CometChatMessageComposer` → [Message Composer](/ui-kit/angular/components/cometchat-message-composer), `CometChatMessageHeader` → [Message Header](/ui-kit/angular/components/cometchat-message-header), `CometChatUsers` → [Users](/ui-kit/angular/components/cometchat-users), `CometChatGroups` → [Groups](/ui-kit/angular/components/cometchat-groups), `CometChatGroupMembers` → [Group Members](/ui-kit/angular/components/cometchat-group-members) |
  | CSS class prefix | `.cometchat-`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
  | Theming          | Override CSS variables on `.cometchat` class. See [Theming](/ui-kit/angular/customization/theming)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
</Accordion>

The Angular UIKit components work together to deliver a complete chat experience. The sections below map each core feature to the components that implement it, so you can quickly find the right building block for any capability.

## Instant Messaging

Real-time text messaging is at the heart of CometChat. Users can send and receive instant messages, enabling quick and efficient communication in both one-on-one and group conversations.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/HFXOvmhiLRb5ClID/images/94312eb7-intro_web_screens-7ee27b256c54ea069273e198ec2aad4e.png?fit=max&auto=format&n=HFXOvmhiLRb5ClID&q=85&s=21d2b906314a417cb1a0d583c64ef822" width="1282" height="802" data-path="images/94312eb7-intro_web_screens-7ee27b256c54ea069273e198ec2aad4e.png" />
</Frame>

| Component                                                                           | Functionality                                                                    |
| ----------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- |
| [cometchat-message-composer](/ui-kit/angular/components/cometchat-message-composer) | Provides the input area where users write and send text messages.                |
| [cometchat-message-list](/ui-kit/angular/components/cometchat-message-list)         | Renders the chronological list of sent and received messages using text bubbles. |

## Media Sharing

CometChat supports sharing images, videos, audio files, and documents within conversations.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/v4EbHQCGZ54oJcmr/images/56d32794-feature_media_sharing_web_screens-85d19aa1d4efea1f5bfec8a718e67d1c.png?fit=max&auto=format&n=v4EbHQCGZ54oJcmr&q=85&s=5f550790a7af8780ee725f4d916de25d" width="1282" height="802" data-path="images/56d32794-feature_media_sharing_web_screens-85d19aa1d4efea1f5bfec8a718e67d1c.png" />
</Frame>

| Component                                                                           | Functionality                                                                        |
| ----------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------ |
| [cometchat-message-composer](/ui-kit/angular/components/cometchat-message-composer) | Includes an ActionSheet that presents options for attaching and sharing media files. |
| [cometchat-message-list](/ui-kit/angular/components/cometchat-message-list)         | Renders media message bubbles including Image, File, Audio, and Video bubbles.       |

## Read Receipts

Read Receipts provide visibility into message status, letting users know when a message has been delivered and read. This brings clarity to communication and sets expectations about engagement.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/lqGH-Bgiq2mgS9m9/images/bf16bef1-feature_read_receipt_web_screens-68fddd4e39d86dfcb7d41b5e945dcdc3.png?fit=max&auto=format&n=lqGH-Bgiq2mgS9m9&q=85&s=b5735c3cdf0e2b88c71d6dedf1aeb3ac" width="1282" height="802" data-path="images/bf16bef1-feature_read_receipt_web_screens-68fddd4e39d86dfcb7d41b5e945dcdc3.png" />
</Frame>

| Component                                                                                 | Functionality                                                                              |
| ----------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ |
| [cometchat-conversations](/ui-kit/angular/components/cometchat-conversations)             | Displays the delivery and read status of the last message in each conversation list item.  |
| [cometchat-message-list](/ui-kit/angular/components/cometchat-message-list)               | Shows read receipt indicators on every message bubble, providing real-time status updates. |
| [cometchat-message-information](/ui-kit/angular/components/cometchat-message-information) | Gives the sender detailed insights into whether their message has been delivered and read. |

## Typing Indicator

The Typing Indicator shows when a user is composing a response in real time, making conversations feel more natural and interactive.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/D1t_n71f5KROvakA/images/5de16f7b-feature_typing_indicator_web_screens-da2f83292de9815655d0b5b0ff6fef6f.png?fit=max&auto=format&n=D1t_n71f5KROvakA&q=85&s=2eb483e4c703f75994040e69e8d29eff" width="1282" height="802" data-path="images/5de16f7b-feature_typing_indicator_web_screens-da2f83292de9815655d0b5b0ff6fef6f.png" />
</Frame>

| Component                                                                       | Functionality                                                                                            |
| ------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- |
| [cometchat-conversations](/ui-kit/angular/components/cometchat-conversations)   | Shows real-time typing status indicators in conversation list items for both one-on-one and group chats. |
| [cometchat-message-header](/ui-kit/angular/components/cometchat-message-header) | Dynamically updates to display a "typing…" status when a user or group member is composing a message.    |

## User Presence

User Presence lets users see whether their contacts are online or offline, helping them choose the best time to start a conversation.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/bUk-WwSNpBXF92Yc/images/dc91a3ce-feature_status_indicator_web_screens-b7e131fd1b9b8b61db986a037c711e06.png?fit=max&auto=format&n=bUk-WwSNpBXF92Yc&q=85&s=fffff73cd3d8e8f5e55edf1920e3d291" width="1282" height="802" data-path="images/dc91a3ce-feature_status_indicator_web_screens-b7e131fd1b9b8b61db986a037c711e06.png" />
</Frame>

| Component                                                                       | Functionality                                                                       |
| ------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- |
| [cometchat-conversations](/ui-kit/angular/components/cometchat-conversations)   | Displays user presence information alongside each conversation list item.           |
| [cometchat-message-header](/ui-kit/angular/components/cometchat-message-header) | Shows the online/offline status of the user or group in the message header toolbar. |
| [cometchat-users](/ui-kit/angular/components/cometchat-users)                   | Renders the list of available users with their current presence status.             |
| [cometchat-group-members](/ui-kit/angular/components/cometchat-group-members)   | Renders group member lists with presence information for each member.               |

## Reactions

Reactions let users express emotions or respond to messages without typing a full reply, adding expressiveness and boosting engagement.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/COIVd1spJ2SNEi43/images/a1c1501b-reactions_web_screens-f04b4e202fdd5d9fd9c86056eed31247.png?fit=max&auto=format&n=COIVd1spJ2SNEi43&q=85&s=3cb4da0cbec10614c56d3354941dc7ec" width="1282" height="633" data-path="images/a1c1501b-reactions_web_screens-f04b4e202fdd5d9fd9c86056eed31247.png" />
</Frame>

| Component                                                                     | Functionality                                                                              |
| ----------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ |
| [cometchat-message-list](/ui-kit/angular/components/cometchat-message-list)   | Renders reaction indicators on message bubbles and provides the reaction picker action.    |
| [cometchat-reactions](/ui-kit/angular/components/cometchat-reactions)         | Displays the reaction bar beneath a message bubble showing all reactions and their counts. |
| [cometchat-reaction-list](/ui-kit/angular/components/cometchat-reaction-list) | Shows the full list of users who reacted to a message, grouped by reaction type.           |
| [cometchat-reaction-info](/ui-kit/angular/components/cometchat-reaction-info) | Displays a tooltip or popover with details about a specific reaction on hover.             |

## Mentions

Mentions allow users to directly address specific individuals in a conversation using `@username`. The feature also supports `@all` to notify every member in a group chat simultaneously.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/O4T1K2wxFuaRj1dC/images/a4778ade-mentions_web_screens-554df9099f110c592be8b32b750d64d2.png?fit=max&auto=format&n=O4T1K2wxFuaRj1dC&q=85&s=1cd2c15b185827bff609c9af43b6c585" width="1282" height="566" data-path="images/a4778ade-mentions_web_screens-554df9099f110c592be8b32b750d64d2.png" />
</Frame>

| Component                                                                           | Functionality                                                                                          |
| ----------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ |
| [cometchat-conversations](/ui-kit/angular/components/cometchat-conversations)       | Shows mention indicators in conversation list items so users can see where they were mentioned.        |
| [cometchat-message-composer](/ui-kit/angular/components/cometchat-message-composer) | Provides the mention picker that appears as users type `@`, allowing them to select a user to mention. |
| [cometchat-message-list](/ui-kit/angular/components/cometchat-message-list)         | Renders mention highlights within message text, making mentioned names visually distinct.              |

## Threaded Conversations

Threaded Conversations enable users to respond directly to a specific message, keeping discussions organized and maintaining context — especially useful in group chats.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/1W9AWrFs7khmFUQr/images/c61ec9db-threaded_conversations-3aa9e480dfcc47159d393052f19f313f.png?fit=max&auto=format&n=1W9AWrFs7khmFUQr&q=85&s=b1e7b6c4883416049f7aa5052422c113" width="1281" height="1130" data-path="images/c61ec9db-threaded_conversations-3aa9e480dfcc47159d393052f19f313f.png" />
</Frame>

| Component                                                                           | Functionality                                                                       |
| ----------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- |
| [cometchat-thread-header](/ui-kit/angular/components/cometchat-thread-header)       | Displays the parent message along with the reply count at the top of a thread view. |
| [cometchat-message-list](/ui-kit/angular/components/cometchat-message-list)         | Renders thread replies when `parentMessageId` is set.                               |
| [cometchat-message-composer](/ui-kit/angular/components/cometchat-message-composer) | Sends replies within a thread when `parentMessageId` is set.                        |

## Quoted Replies

Quoted Replies enable users to quickly reply to specific messages by selecting the "Reply" option from a message's action menu. This enhances context, keeps conversations organized, and improves overall chat experience in both one-on-one and group chats.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/Q9hXgWwUd_GuOSiy/images/f42ad8d3-swipe-to-reply_web_screens-c9204e4c244ca55a7ffe6c9498299625.png?fit=max&auto=format&n=Q9hXgWwUd_GuOSiy&q=85&s=15d58389e20d1a26ec3ed07b99fc07a9" width="1280" height="800" data-path="images/f42ad8d3-swipe-to-reply_web_screens-c9204e4c244ca55a7ffe6c9498299625.png" />
</Frame>

| Component                                                                           | Functionality                                                                                                                                                           |
| ----------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [cometchat-message-list](/ui-kit/angular/components/cometchat-message-list)         | Supports replying to messages via the "Reply" option. Users can select "Reply" on a message to open the composer with the quoted reply pre-filled, maintaining context. |
| [cometchat-message-composer](/ui-kit/angular/components/cometchat-message-composer) | Shows the quoted reply above the input field, providing context for the response.                                                                                       |

## Rich Text Formatting

Rich Text Formatting allows users to style their messages with bold, italic, underline, strikethrough, code, links, lists, and blockquotes. This brings richer expression to conversations and helps users emphasize key points, making communication clearer and more engaging.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/8cgqMAd3zN9nJFvD/images/compact-message-composer.png?fit=max&auto=format&n=8cgqMAd3zN9nJFvD&q=85&s=1e79d224862b0297f1628d08566800d0" width="1162" height="204" data-path="images/compact-message-composer.png" />
</Frame>

| Component                                                                           | Functionality                                                                                                                                                                                     |
| ----------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [cometchat-message-composer](/ui-kit/angular/components/cometchat-message-composer) | Provides a built-in rich text editor with formatting toolbar, floating selection toolbar, and keyboard shortcuts for bold, italic, underline, strikethrough, code, links, lists, and blockquotes. |
| [cometchat-message-list](/ui-kit/angular/components/cometchat-message-list)         | Renders formatted messages with the appropriate styling applied, displaying bold, italic, underline, strikethrough, code, links, lists, and blockquote formatting as intended by the sender.      |

<Note>
  See the [Rich Text Formatting Guide](/ui-kit/angular/guides/rich-text-formatting) for detailed usage instructions.
</Note>

## Group Chat

CometChat facilitates group conversations, allowing multiple participants to communicate simultaneously — ideal for team collaborations, group discussions, and social communities.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/Mh-tK73gC5erLrBQ/images/f42ad8d3-group_chat_web_screens-c9204e4c244ca55a7ffe6c9498299625.png?fit=max&auto=format&n=Mh-tK73gC5erLrBQ&q=85&s=d2bcabb0be4923d94ab29ac0e2975909" width="1282" height="802" data-path="images/f42ad8d3-group_chat_web_screens-c9204e4c244ca55a7ffe6c9498299625.png" />
</Frame>

| Component                                                                     | Functionality                                                                        |
| ----------------------------------------------------------------------------- | ------------------------------------------------------------------------------------ |
| [cometchat-groups](/ui-kit/angular/components/cometchat-groups)               | Renders the list of available groups with search, join, and create capabilities.     |
| [cometchat-group-members](/ui-kit/angular/components/cometchat-group-members) | Displays the members of a group with roles, presence status, and management actions. |

## Moderation

CometChat's Message Moderation feature helps maintain a safe and respectful chat environment by automatically filtering and managing inappropriate content. Messages can be automatically blocked or flagged based on predefined rules, ensuring harmful content is handled before it reaches users.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/0eOzL56FCaSxJW2j/images/react-uikit-moderation-overview.png?fit=max&auto=format&n=0eOzL56FCaSxJW2j&q=85&s=095bafb7e15dae6ff2a9b7f62b31b219" width="1680" height="972" data-path="images/react-uikit-moderation-overview.png" />
</Frame>

<Note>
  Learn more about setting up moderation rules and managing content in the [Moderation](/moderation/overview) documentation.
</Note>

| Component                                                                   | Functionality                                                                                      |
| --------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- |
| [cometchat-message-list](/ui-kit/angular/components/cometchat-message-list) | Automatically handles moderated messages, displaying blocked content based on moderation settings. |

## Report Message

The Report Message feature allows users to report inappropriate or harmful messages within the chat. Users can choose from predefined reasons and provide additional remarks for detailed context. This feature helps maintain a safe and respectful chat environment.

<Note>
  Learn more about how flagged messages are handled, reviewed, and moderated in the [Flagged Messages](/moderation/flagged-messages) documentation.
</Note>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/i0vh1P6i5DrS-EhP/images/react-uikit-report-message-overview.png?fit=max&auto=format&n=i0vh1P6i5DrS-EhP&q=85&s=3e79fe9424ee43014bdf58b41896272e" width="1440" height="800" data-path="images/react-uikit-report-message-overview.png" />
</Frame>

| Component                                                                   | Functionality                                                                                                                                  |
| --------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
| [cometchat-message-list](/ui-kit/angular/components/cometchat-message-list) | Provides the "Report Message" option in the message actions menu, allowing users to initiate the reporting process for inappropriate messages. |

## Conversation and Advanced Search

Conversation and Advanced Search enables users to quickly find conversations, messages, and media across chats in real time. It supports filters, scopes, and custom actions, allowing users to locate content efficiently while keeping the chat experience smooth and intuitive.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/RxKy5RgybeX-8GbH/images/1ab7cd1b-search_message_item_view_default_web_screens-2895b996369fcaa0e59203664c628b7b.png?fit=max&auto=format&n=RxKy5RgybeX-8GbH&q=85&s=ab6d5dfe425c84c04fbf95b5fc81c151" width="1280" height="800" data-path="images/1ab7cd1b-search_message_item_view_default_web_screens-2895b996369fcaa0e59203664c628b7b.png" />
</Frame>

| Component                                                                       | Functionality                                                                                                                                                       |
| ------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [cometchat-search](/ui-kit/angular/components/cometchat-search)                 | Allows users to search across conversations and messages in real time. Users can click on a result to open the conversation or jump directly to a specific message. |
| [cometchat-message-header](/ui-kit/angular/components/cometchat-message-header) | Shows the search button in the chat header, allowing users to search within a conversation.                                                                         |
| [cometchat-message-list](/ui-kit/angular/components/cometchat-message-list)     | Shows the selected message when clicked from search results and highlights it in the message list.                                                                  |
| [cometchat-conversations](/ui-kit/angular/components/cometchat-conversations)   | Displays the search input for filtering conversations.                                                                                                              |

<Note>
  See the [Search Messages Guide](/ui-kit/angular/guides/search-messages) for detailed implementation instructions.
</Note>

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Components Overview" icon="grid-2" href="/ui-kit/angular/components/components-overview">
    Browse all available Angular UIKit components
  </Card>

  <Card title="Theme" icon="palette" href="/ui-kit/angular/customization/theming">
    Customize the look and feel of your chat UI
  </Card>

  <Card title="Call Features" icon="phone" href="/ui-kit/angular/call-features">
    Add audio and video calling
  </Card>

  <Card title="AI Smart Chat Features" icon="robot" href="/ui-kit/angular/ai-features">
    Explore AI-powered chat capabilities
  </Card>
</CardGroup>