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

# Call Action Plugin

> Renders call action system messages like 'Missed Call', 'Call Ended', 'Incoming Call'.

<Accordion title="AI Integration Quick Reference">
  | Field                | Value                         |
  | -------------------- | ----------------------------- |
  | Plugin ID            | `call-action`                 |
  | Package              | `@cometchat/chat-uikit-react` |
  | Message Types        | `audio`, `video`              |
  | Message Categories   | `call`                        |
  | Included by Default  | Yes                           |
  | Bubble Component     | `CometChatActionBubble`       |
  | Conversation Preview | Video call / Voice call       |
  | Context Menu         | None                          |
</Accordion>

## Overview

The Call Action plugin handles messages of type `audio` and `video` in category `call`. These are system messages generated when calls are initiated, answered, missed, or ended. They render as centered, pill-shaped bubbles with a call status icon.

***

## Bubble Rendering

* **Centered pill** — same style as action bubbles
* **Status icon** — colored icon indicating call direction and outcome
* **Status text** — localized description (e.g., "Missed Call", "Outgoing Call", "Call Ended")

### Call Status Icons

| Status                      | Sent by me         | Received               | Icon              |
| --------------------------- | ------------------ | ---------------------- | ----------------- |
| Initiated                   | Outgoing call icon | Incoming call icon     | Phone/video arrow |
| Ended                       | Call end icon      | Call end icon          | Red phone         |
| Missed/Cancelled/Unanswered | Unanswered icon    | Missed call icon (red) | Red phone with X  |
| Ongoing/Answered            | Outgoing icon      | Incoming icon          | Green phone       |

### Status Text Mapping

**Sent by me:**

* `initiated` → "Outgoing Call"
* `cancelled` → "Cancelled Call"
* `rejected` → "Rejected Call"
* `ended` → "Call Ended"
* `unanswered` → "Unanswered Call"

**Received:**

* `initiated` → "Incoming Call"
* `ended` → "Call Ended"
* `unanswered`/`cancelled` → "Missed Call"
* `busy` → "Busy Call"

***

## Context Menu Options

None — call action messages have no context menu.

***

## Conversation Preview

Returns: `Video call` or `Voice call` based on the call type (localized).

***

## CSS Selectors

| Target              | Selector                                         |
| ------------------- | ------------------------------------------------ |
| Bubble root         | `.cometchat-action-bubble`                       |
| Icon                | `.cometchat-action-bubble__icon`                 |
| Icon (error)        | `.cometchat-action-bubble__icon--error`          |
| Text                | `.cometchat-action-bubble__text`                 |
| Text (error)        | `.cometchat-action-bubble__text--error`          |
| Missed video icon   | `.cometchat-action-bubble__icon--missed-video`   |
| Missed audio icon   | `.cometchat-action-bubble__icon--missed-audio`   |
| Outgoing video icon | `.cometchat-action-bubble__icon--outgoing-video` |
| Outgoing audio icon | `.cometchat-action-bubble__icon--outgoing-audio` |
| Incoming video icon | `.cometchat-action-bubble__icon--incoming-video` |
| Incoming audio icon | `.cometchat-action-bubble__icon--incoming-audio` |
| Call ended icon     | `.cometchat-action-bubble__icon--call-ended`     |

Icons are rendered via CSS `mask-image`. Override the mask in your own CSS to use custom icons:

```css theme={null}
.cometchat-action-bubble__icon--missed-video {
  -webkit-mask-image: url('/my-custom-missed-video-icon.svg');
  mask-image: url('/my-custom-missed-video-icon.svg');
}
```