Call Action Bubble

A self-extracting bubble that renders call status system messages like ‘Missed Call’, ‘Call Ended’, and ‘Outgoing Call’ from an SDK call message.

AI Integration Quick Reference

{
  "component": "CometChatCallActionBubble",
  "package": "@cometchat/chat-uikit-react",
  "import": "import { CometChatCallActionBubble } from \"@cometchat/chat-uikit-react\";",
  "description": "Self-extracting bubble for call status system messages. Derives the status text, icon, and error color from the SDK call message and the logged-in user.",
  "cssRootClass": ".cometchat-action-bubble",
  "selfExtracting": true,
  "props": {
    "data": {
      "message": { "type": "CometChat.BaseMessage", "required": true, "note": "The call message (audio/video) in the 'call' category. Drives all extraction." },
      "className": { "type": "string", "default": "undefined", "note": "Additional CSS class for the root element" }
    }
  },
  "rendersThrough": "CometChatActionBubble (base primitive)",
  "usedBy": ["CometChatCallActionPlugin"]
}

Overview

CometChatCallActionBubble renders a centered, pill-shaped call status system message — “Missed Call”, “Call Ended”, “Outgoing Call”, etc. It is self-extracting: pass the SDK call message and the bubble derives the status text, the status icon, and whether to use the error (missed-call) color itself, reading the logged-in user and locale from hooks. This means it works standalone — no plugin required.

It is the component the Call Action Plugin forwards to, and it renders through the presentational CometChatActionBubble base primitive.

Live Preview — interact with the call action bubble.

Open in Storybook ↗

The component renders nothing while the logged-in user is unavailable.

---

Usage

import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatCallActionBubble } from "@cometchat/chat-uikit-react";

function CallStatusMessage({ message }: { message: CometChat.BaseMessage }) {
  return <CometChatCallActionBubble message={message} />;
}

---

What It Derives

The bubble inspects the call’s status and whether it was initiated by the logged-in user to pick the text, icon, and color.

Status Text

Sent by the logged-in user:

Call status	Text
initiated	Outgoing Call
ongoing	Answered Call
ended	Call Ended
cancelled	Cancelled Call
rejected	Rejected Call
unanswered	Unanswered Call
busy	Missed Call

Received:

Call status	Text
initiated	Incoming Call
ongoing	Answered Call
ended	Call Ended
unanswered / cancelled	Missed Call
busy	Busy Call
rejected	Rejected Call

All text is localized.

Status Icon

Condition	Icon class
Missed (received busy / unanswered / cancelled)	--missed-video / --missed-audio
Ended	--call-ended
Sent by me (other statuses)	--outgoing-video / --outgoing-audio
Received (other statuses)	--incoming-video / --incoming-audio

Missed calls additionally render in the error (red) color. Icons are rendered via CSS mask-image — override the mask in your own CSS to use custom icons.

---

Props

message

The call message (audio/video) in the call category. The bubble extracts the status, icon, and text from it. Required.

Type	CometChat.BaseMessage
Required	Yes

---

className

Additional CSS class name applied to the root element.

Type	string
Default	undefined

---

CSS Selectors

The bubble renders through the CometChatActionBubble primitive, so it uses the action-bubble selectors.

Target	Selector
Root container	.cometchat-action-bubble
Icon element	.cometchat-action-bubble__icon
Icon (error state)	.cometchat-action-bubble__icon--error
Text element	.cometchat-action-bubble__text
Text (error state)	.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

Override a specific icon’s mask:

.cometchat-action-bubble__icon--missed-video {
  -webkit-mask-image: url('/my-custom-missed-video.svg');
  mask-image: url('/my-custom-missed-video.svg');
}

---

Next Steps

Call Action Plugin

How call status messages are resolved and rendered in the message list

Group Action Bubble

System messages for group membership changes

Message Bubble

The wrapper that hosts bubble content

Theming

Customize colors, fonts, and spacing