Voice Note Bubble - CometChat Docs

AI Integration Quick Reference

Field	Value
Component	`CometChatVoiceNoteBubble`
Since	7.1.0
Package	`@cometchat/chat-uikit-react`
Import	`import { CometChatVoiceNoteBubble } from "@cometchat/chat-uikit-react";`
CSS root class	`.cometchat-audio-bubble`
Primary output	None — renders from the SDK message
Prerequisites	App wrapped in `CometChatProvider` with valid credentials + a logged-in user
Stitching	None — self-extracting from the SDK message
Full props	See Props

Added in 7.1.0. CometChatVoiceNoteBubble is not available in earlier v7 releases — on 7.0.x, upgrade to 7.1.0 or later to use it. Recorded voice notes route here; attached audio files route to CometChatAudiosBubble.

Overview

CometChatVoiceNoteBubble renders audio messages that were recorded via the composer’s voice recorder. It renders using the CometChatAudioBubble waveform player (documented below), giving voice notes a compact play/pause + waveform UI. This bubble renders whenever an audio message carries audioType: "voice_note" in its metadata. Voice notes are always standalone — they never participate in batch grid layouts or multi-attachment grouping.

Routing logic. The audio plugin automatically routes messages based on metadata:

audioType: "voice_note" → CometChatVoiceNoteBubble (this component)
No audioType (attached audio files) → Audio Bubble (CometChatAudiosBubble)

You don’t need to configure this — it’s handled automatically by the plugin system.

Key characteristics:

Waveform playback — play/pause, seekable progress bar, elapsed/total time
Always standalone — voice notes are never grouped or batched with other messages
Metadata-driven — only used when the message has audioType: "voice_note" in metadata
Waveform player — renders with the CometChatAudioBubble player and its CSS selectors

Live Preview — interact with the voice note bubble.Open in Storybook ↗

Usage

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

function VoiceNoteMessage({ message }: { message: CometChat.MediaMessage }) {
  return <CometChatVoiceNoteBubble message={message} />;
}

How Voice Notes Are Tagged

When a user records audio via the composer’s voice recorder, the UIKit stamps audioType: "voice_note" into the message metadata before sending:

{
  "metadata": {
    "audioType": "voice_note"
  }
}

Audio files attached via the attachment menu do not receive this tag — they render as the Audio Bubble (CometChatAudiosBubble) instead.

Props

message

The audio message (voice note). The bubble renders it with the CometChatAudioBubble waveform player. Required.


Type	`CometChat.MediaMessage`
Required	Yes

alignment

Override incoming/outgoing alignment. Defaults to sender-vs-logged-in-user.


Type	`"left" \| "right"`
Default	derived

textFormatters

Text formatters applied to any caption.


Type	`CometChatTextFormatter[]`
Default	`undefined`

className

Additional CSS class applied to the root element.


Type	`string`
Default	`undefined`

The Waveform Player

Voice notes render with the CometChatAudioBubble waveform player — a compact single-audio player with play/pause controls, a waveform progress bar, elapsed/total time, and a download control. It self-extracts the audio attachment from the message, so it can also be used standalone to render a single audio waveform.

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

function Waveform({ message }: { message: CometChat.MediaMessage }) {
  return <CometChatAudioBubble message={message} />;
}

The player accepts the same core props — message (required), alignment, and className.

Attached audio files (not voice notes) render as stacked player cards via CometChatAudiosBubble — see the Audio Bubble page.

CSS Selectors

The voice note renders with the CometChatAudioBubble waveform player, which uses these selectors:

Target	Selector
Root	`.cometchat-audio-bubble`
Sender / receiver	`.cometchat-audio-bubble--sender` / `.cometchat-audio-bubble--receiver`
Container	`.cometchat-audio-bubble__container`
Play button	`.cometchat-audio-bubble__play-button`
Pause button	`.cometchat-audio-bubble__pause-button`
Waveform	`.cometchat-audio-bubble__waveform`
Progress (background)	`.cometchat-audio-bubble__progress-bg`
Progress (foreground)	`.cometchat-audio-bubble__progress-fg`
Time	`.cometchat-audio-bubble__time`
Download button	`.cometchat-audio-bubble__download-button`
Caption	`.cometchat-audio-bubble__caption`

Next Steps

Audio Bubble

Batch-aware bubble for attached audio files

Message Composer

Voice recorder and multi-attachment staging

Image Bubble

Batch-aware image bubble with grid layouts

Message List

Multi-attachment batch grouping in the list

​Overview

​Usage

​How Voice Notes Are Tagged

​Props

​message

​alignment

​textFormatters

​className

​The Waveform Player

​CSS Selectors

​Next Steps

Audio Bubble

Message Composer

Image Bubble

Message List

Overview

Usage

How Voice Notes Are Tagged

Props

message

alignment

textFormatters

className

The Waveform Player

CSS Selectors

Next Steps