Group Action Bubble

A self-extracting bubble that renders group action system messages like ‘Alice joined’ and ‘Bob was kicked’ from an SDK group-action message.

AI Integration Quick Reference

{
  "component": "CometChatGroupActionBubble",
  "package": "@cometchat/chat-uikit-react",
  "import": "import { CometChatGroupActionBubble } from \"@cometchat/chat-uikit-react\";",
  "description": "Self-extracting bubble for group membership system messages. Derives the localized action text from the SDK group-action message.",
  "cssRootClass": ".cometchat-action-bubble",
  "selfExtracting": true,
  "props": {
    "data": {
      "message": { "type": "CometChat.BaseMessage", "required": true, "note": "The group-action message (member joined/left/added/kicked/banned/scope change). Drives all extraction." },
      "className": { "type": "string", "default": "undefined", "note": "Additional CSS class for the root element" }
    }
  },
  "rendersThrough": "CometChatActionBubble (base primitive)",
  "usedBy": ["CometChatGroupActionPlugin"]
}

Overview

CometChatGroupActionBubble renders a centered, pill-shaped group action system message — “Alice joined”, “Admin kicked Bob”, “Admin made Bob a moderator”, etc. It is self-extracting: pass the SDK group-action message and the bubble derives the localized action text itself (via the shared action-text utility), reading the locale from hooks. This means it works standalone — no plugin required.

It is the component the Group Action Plugin forwards to, and it renders through the presentational CometChatActionBubble base primitive. Group action bubbles have no icon and no sender attribution.

Live Preview — interact with the group action bubble.

Open in Storybook ↗

The component renders nothing if the derived action text is empty.

---

Usage

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

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

---

Supported Actions

The bubble derives localized text for each group membership change:

Action	Example text
Member joined	”Alice joined”
Member left	”Bob left”
Member kicked	”Admin kicked Bob”
Member banned	”Admin banned Charlie”
Member unbanned	”Admin unbanned Charlie”
Scope changed	”Admin made Bob a moderator”
Member added	”Admin added Dave”

---

Props

message

The group-action message (member joined / left / added / kicked / banned / scope change). The bubble extracts the localized action 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
Action text	.cometchat-action-bubble__text

---

Next Steps

Group Action Plugin

How group membership messages are resolved and rendered in the message list

Call Action Bubble

System messages for call status

Message Bubble

The wrapper that hosts bubble content

Theming

Customize colors, fonts, and spacing