Poll Bubble

Renders poll messages with voting functionality, progress bars, voter avatars, and optimistic UI updates.

AI Integration Quick Reference

{
  "component": "CometChatPollBubble",
  "package": "@cometchat/chat-uikit-react",
  "import": "import { CometChatPollBubble } from \"@cometchat/chat-uikit-react\";",
  "description": "Renders poll messages with voting, progress bars, voter avatars, and optimistic updates.",
  "cssRootClass": ".cometchat-poll-bubble",
  "props": {
    "data": {
      "message": { "type": "CometChat.CustomMessage", "default": "required" },
      "loggedInUser": { "type": "CometChat.User", "default": "undefined" }
    },
    "behavior": {
      "alignment": { "type": "'left' | 'right' | 'center'", "default": "'left'" },
      "disableInteraction": { "type": "boolean", "default": "false" }
    },
    "callbacks": {
      "onVoteSubmit": { "type": "(event: CometChatPollVoteEvent) => void", "default": "undefined" },
      "onVoteError": { "type": "(event: CometChatPollVoteErrorEvent) => void", "default": "undefined" }
    }
  }
}

Where It Fits

CometChatPollBubble is rendered by CometChatPollsPlugin inside the message list when a poll message (extension_poll type, custom category) is displayed. The plugin extracts poll data from message metadata and passes the full message object to the bubble.

import { CometChatPollBubble } from "@cometchat/chat-uikit-react";
import "@cometchat/chat-uikit-react/css-variables.css";

function PollMessage({ message, loggedInUser }) {
  return (
    <CometChatPollBubble
      message={message}
      alignment="left"
      loggedInUser={loggedInUser}
      onVoteSubmit={(e) => console.log("Voted:", e.optionText)}
    />
  );
}

Minimal Render

import { CometChatPollBubble } from "@cometchat/chat-uikit-react";
import "@cometchat/chat-uikit-react/css-variables.css";

function Demo() {
  return <CometChatPollBubble message={pollMessage} />;
}

Root CSS class: .cometchat-poll-bubble

Features

• Extracts poll data from metadata["@injected"]["extensions"]["polls"]
• Displays question, options with radio indicators, vote counts, and progress bars
• Stacked voter avatars (up to 3 per option)
• Optimistic UI — vote updates instantly, rolls back on API error
• Vote change support — click a different option to change your vote
• Sender/receiver styling variants (purple bg / grey bg)
• Full keyboard accessibility (Enter/Space to vote, Tab between options)
• ARIA: role="radiogroup", role="radio", aria-checked, role="progressbar"

Props

All props are optional unless noted otherwise.

---

message

The CometChat CustomMessage containing poll data in its metadata. Required.

Type	CometChat.CustomMessage
Default	—

---

alignment

Bubble alignment — determines sender/receiver styling.

Type	'left' | 'right' | 'center'
Default	'left'

---

loggedInUser

The logged-in user. Used to determine which option the user voted for.

Type	CometChat.User
Default	undefined

---

disableInteraction

Disables all interaction. Used in thread header to prevent voting on the parent message.

Type	boolean
Default	false

---

onVoteSubmit

Callback when a vote is successfully submitted.

Type	(event: CometChatPollVoteEvent) => void
Default	undefined

---

onVoteError

Callback when vote submission fails.

Type	(event: CometChatPollVoteErrorEvent) => void
Default	undefined

CSS Selectors

Target	Selector
Root	.cometchat-poll-bubble
Incoming variant	.cometchat-poll-bubble--incoming
Outgoing variant	.cometchat-poll-bubble--outgoing
Question	.cometchat-poll-bubble__question
Options list	.cometchat-poll-bubble__options
Single option	.cometchat-poll-bubble__option
Radio circle	.cometchat-poll-bubble__option-radio-circle
Option text	.cometchat-poll-bubble__option-text
Vote count	.cometchat-poll-bubble__option-count
Progress bar	.cometchat-poll-bubble__option-progress
Progress fill	.cometchat-poll-bubble__option-progress-bar
Voter avatar	.cometchat-poll-bubble__option-avatar