Skip to main content
FieldValue
Plugin IDcall-action
Package@cometchat/chat-uikit-react
Message Typesaudio, video
Message Categoriescall
Included by DefaultYes
Bubble ComponentCometChatActionBubble
Conversation PreviewVideo call / Voice call
Context MenuNone

​
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

StatusSent by meReceivedIcon
InitiatedOutgoing call iconIncoming call iconPhone/video arrow
EndedCall end iconCall end iconRed phone
Missed/Cancelled/UnansweredUnanswered iconMissed call icon (red)Red phone with X
Ongoing/AnsweredOutgoing iconIncoming iconGreen 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

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