Voice Note Bubble

A dedicated bubble for recorded voice notes with waveform playback, rendered when audio messages carry the voice_note metadata tag.

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 when enableMultipleAttachments is true (the default in v7) and the 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
• enableMultipleAttachments: false → legacy CometChatAudioBubble for all audio

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 — 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

---

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