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

# Core Features

> Map of CometChat's core chat features to the Angular UIKit components that power each one — instant messaging, media sharing, read receipts, typing indicators, user presence, reactions, mentions, threaded conversations, search, and moderation.

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-docs-v6-beta2-flutter-uikit/h4vApi3aZTZMRkp-/images/94312eb7-intro_web_screens-7ee27b256c54ea069273e198ec2aad4e.png?fit=max&auto=format&n=h4vApi3aZTZMRkp-&q=85&s=33b879cc5454251011b1ef3bac7fcf5e" width="1282" height="802" data-path="images/94312eb7-intro_web_screens-7ee27b256c54ea069273e198ec2aad4e.png" />
</Frame>

| Component                                                                              | Functionality                                                                    |
| -------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- |
| [cometchat-message-composer](/ui-kit/angular/v5/components/cometchat-message-composer) | Provides the input area where users write and send text messages.                |
| [cometchat-message-list](/ui-kit/angular/v5/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-docs-v6-beta2-flutter-uikit/fpMITRfzsXMT2wZU/images/56d32794-feature_media_sharing_web_screens-85d19aa1d4efea1f5bfec8a718e67d1c.png?fit=max&auto=format&n=fpMITRfzsXMT2wZU&q=85&s=bdcb9b6f8b498b598ae81d81d4517133" width="1282" height="802" data-path="images/56d32794-feature_media_sharing_web_screens-85d19aa1d4efea1f5bfec8a718e67d1c.png" />
</Frame>

| Component                                                                              | Functionality                                                                        |
| -------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------ |
| [cometchat-message-composer](/ui-kit/angular/v5/components/cometchat-message-composer) | Includes an ActionSheet that presents options for attaching and sharing media files. |
| [cometchat-message-list](/ui-kit/angular/v5/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-docs-v6-beta2-flutter-uikit/EmpCvyArIkNI25h1/images/bf16bef1-feature_read_receipt_web_screens-68fddd4e39d86dfcb7d41b5e945dcdc3.png?fit=max&auto=format&n=EmpCvyArIkNI25h1&q=85&s=c2d672752cafb7d39f6560215d037dc5" width="1282" height="802" data-path="images/bf16bef1-feature_read_receipt_web_screens-68fddd4e39d86dfcb7d41b5e945dcdc3.png" />
</Frame>

| Component                                                                                    | Functionality                                                                              |
| -------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ |
| [cometchat-conversations](/ui-kit/angular/v5/components/cometchat-conversations)             | Displays the delivery and read status of the last message in each conversation list item.  |
| [cometchat-message-list](/ui-kit/angular/v5/components/cometchat-message-list)               | Shows read receipt indicators on every message bubble, providing real-time status updates. |
| [cometchat-message-information](/ui-kit/angular/v5/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-docs-v6-beta2-flutter-uikit/fpMITRfzsXMT2wZU/images/5de16f7b-feature_typing_indicator_web_screens-da2f83292de9815655d0b5b0ff6fef6f.png?fit=max&auto=format&n=fpMITRfzsXMT2wZU&q=85&s=75bc18f19c80519a0d41857f47ea9ec7" width="1282" height="802" data-path="images/5de16f7b-feature_typing_indicator_web_screens-da2f83292de9815655d0b5b0ff6fef6f.png" />
</Frame>

| Component                                                                          | Functionality                                                                                            |
| ---------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- |
| [cometchat-conversations](/ui-kit/angular/v5/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/v5/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-docs-v6-beta2-flutter-uikit/l_OnVHhTFtMCxAJj/images/dc91a3ce-feature_status_indicator_web_screens-b7e131fd1b9b8b61db986a037c711e06.png?fit=max&auto=format&n=l_OnVHhTFtMCxAJj&q=85&s=26fcfdc6905d0b539abcf3c616f41c2e" width="1282" height="802" data-path="images/dc91a3ce-feature_status_indicator_web_screens-b7e131fd1b9b8b61db986a037c711e06.png" />
</Frame>

| Component                                                                          | Functionality                                                                       |
| ---------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- |
| [cometchat-conversations](/ui-kit/angular/v5/components/cometchat-conversations)   | Displays user presence information alongside each conversation list item.           |
| [cometchat-message-header](/ui-kit/angular/v5/components/cometchat-message-header) | Shows the online/offline status of the user or group in the message header toolbar. |
| [cometchat-users](/ui-kit/angular/v5/components/cometchat-users)                   | Renders the list of available users with their current presence status.             |
| [cometchat-group-members](/ui-kit/angular/v5/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-docs-v6-beta2-flutter-uikit/YMOhj6Aj_j1BFKgB/images/a1c1501b-reactions_web_screens-f04b4e202fdd5d9fd9c86056eed31247.png?fit=max&auto=format&n=YMOhj6Aj_j1BFKgB&q=85&s=d98d93cbce5da5664df3f3319246caaa" width="1282" height="633" data-path="images/a1c1501b-reactions_web_screens-f04b4e202fdd5d9fd9c86056eed31247.png" />
</Frame>

| Component                                                                        | Functionality                                                                              |
| -------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ |
| [cometchat-message-list](/ui-kit/angular/v5/components/cometchat-message-list)   | Renders reaction indicators on message bubbles and provides the reaction picker action.    |
| [cometchat-reactions](/ui-kit/angular/v5/components/cometchat-reactions)         | Displays the reaction bar beneath a message bubble showing all reactions and their counts. |
| [cometchat-reaction-list](/ui-kit/angular/v5/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/v5/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-docs-v6-beta2-flutter-uikit/YMOhj6Aj_j1BFKgB/images/a4778ade-mentions_web_screens-554df9099f110c592be8b32b750d64d2.png?fit=max&auto=format&n=YMOhj6Aj_j1BFKgB&q=85&s=53851d3b6da20a58e06b8d030aae3215" width="1282" height="566" data-path="images/a4778ade-mentions_web_screens-554df9099f110c592be8b32b750d64d2.png" />
</Frame>

| Component                                                                              | Functionality                                                                                          |
| -------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ |
| [cometchat-conversations](/ui-kit/angular/v5/components/cometchat-conversations)       | Shows mention indicators in conversation list items so users can see where they were mentioned.        |
| [cometchat-message-composer](/ui-kit/angular/v5/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/v5/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-docs-v6-beta2-flutter-uikit/KYL4KlE88w2a-VuU/images/c61ec9db-threaded_conversations-3aa9e480dfcc47159d393052f19f313f.png?fit=max&auto=format&n=KYL4KlE88w2a-VuU&q=85&s=e39dc2d280b07261818833d02325d9a6" width="1281" height="1130" data-path="images/c61ec9db-threaded_conversations-3aa9e480dfcc47159d393052f19f313f.png" />
</Frame>

| Component                                                                              | Functionality                                                                       |
| -------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- |
| [cometchat-thread-header](/ui-kit/angular/v5/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/v5/components/cometchat-message-list)         | Renders thread replies when `parentMessageId` is set.                               |
| [cometchat-message-composer](/ui-kit/angular/v5/components/cometchat-message-composer) | Sends replies within a thread when `parentMessageId` is set.                        |

## 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-docs-v6-beta2-flutter-uikit/eZ9OVx9DVzN3_bJi/images/f42ad8d3-group_chat_web_screens-c9204e4c244ca55a7ffe6c9498299625.png?fit=max&auto=format&n=eZ9OVx9DVzN3_bJi&q=85&s=0b14794b8fcd743fe085eb3f439d5f7b" width="1282" height="802" data-path="images/f42ad8d3-group_chat_web_screens-c9204e4c244ca55a7ffe6c9498299625.png" />
</Frame>

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

***

## Next Steps

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

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

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

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