Call Action Plugin - CometChat Docs

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

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”

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:

.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');
}

​Overview

​Bubble Rendering

​Call Status Icons

​Status Text Mapping

​Context Menu Options

​Conversation Preview

​CSS Selectors