Voice Note Bubble - CometChat Docs

AI Integration Quick Reference

{
  "component": "CometChatVoiceNoteBubble",
  "package": "@cometchat/chat-uikit-react",
  "import": "import { CometChatVoiceNoteBubble } from \"@cometchat/chat-uikit-react\";",
  "description": "Voice note bubble. Renders for audio messages explicitly tagged audioType='voice_note'. Delegates to CometChatAudioBubble internally for waveform playback. Always standalone (no grid).",
  "cssRootClass": ".cometchat-audio-bubble",
  "selfExtracting": true,
  "multiAttachment": true,
  "props": {
    "data": {
      "message": { "type": "CometChat.MediaMessage", "required": true, "note": "Must have metadata audioType='voice_note'." },
      "alignment": { "type": "\"left\" | \"right\"", "note": "Defaults to sender-vs-logged-in-user." },
      "textFormatters": { "type": "CometChatTextFormatter[]" },
      "batchPosition": { "type": "\"first\" | \"middle\" | \"last\" | \"single\"", "note": "Always 'single' for voice notes — they never participate in grid layouts." },
      "className": { "type": "string" }
    }
  }
}

Overview

CometChatVoiceNoteBubble renders audio messages that were recorded via the composer’s voice recorder. It is a thin wrapper around CometChatAudioBubble, providing the same waveform playback 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) → CometChatAudiosBubble

You don’t need to configure this — it’s handled automatically by the plugin system. The legacy CometChatAudioBubble remains available as a deprecated standalone component, but the list no longer switches to it.

Key characteristics:

Waveform playback — play/pause, seekable progress bar, elapsed/total time
Always standalone — batchPosition is always 'single'; voice notes are never grouped with other messages
Metadata-driven — only used when the message has audioType: "voice_note" in metadata
Delegates to CometChatAudioBubble — inherits its styling and 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 CometChatAudiosBubble instead.

Props

message

The audio message (voice note). The bubble delegates rendering to CometChatAudioBubble. 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`

batchPosition

Batch position. Always 'single' for voice notes — they never participate in grid layouts.


Type	`"first" \| "middle" \| "last" \| "single"`
Default	`undefined`

className

Additional CSS class applied to the root element.


Type	`string`
Default	`undefined`

CSS Selectors

CometChatVoiceNoteBubble delegates to CometChatAudioBubble — it uses the same CSS selectors:

Target	Selector
Root	`.cometchat-audio-bubble`
Sender / receiver	`.cometchat-audio-bubble--sender` / `.cometchat-audio-bubble--receiver`
Play button	`.cometchat-audio-bubble__play-button`
Pause button	`.cometchat-audio-bubble__pause-button`
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

Audios Bubble

Multi-attachment audio file bubble (non-voice-notes)

Audio Bubble (Legacy)

Legacy single-attachment audio bubble

Message Composer

Voice recorder and multi-attachment staging

Images Bubble

Multi-attachment image bubble

​Overview

​Usage

​How Voice Notes Are Tagged

​Props

​message

​alignment

​textFormatters

​batchPosition

​className

​CSS Selectors

​Next Steps

Audios Bubble

Audio Bubble (Legacy)

Message Composer

Images Bubble

Overview

Usage

How Voice Notes Are Tagged

Props

message

alignment

textFormatters

batchPosition

className

CSS Selectors

Next Steps