> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-agent-native-development.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Customizing Message Bubbles

> Customize CometChat Flutter UI Kit message bubbles with incoming and outgoing styles, theme extensions, reactions, timestamps, and avatars.

<Accordion title="AI Integration Quick Reference">
  | Field | Value |
  | - | - |
  | Package | `cometchat_chat_uikit` |
  | Import | `import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';` |
  | Purpose | Customize CometChat Flutter UI Kit message bubbles with incoming and outgoing styles, theme extensions, reactions, timestamps, and avatars. |
  | Key classes | `CometChatIncomingMessageBubbleStyle` · `CometChatOutgoingMessageBubbleStyle` · `CometChatCollaborativeBubbleStyle` · `CometChatTextBubbleStyle` · `CometChatCallBubbleStyle` · `CometChatDeletedBubbleStyle` · `CometChatFileBubbleStyle` |
  | Related | [Message Template](/ui-kit/flutter/message-template) · [Component Styling](/ui-kit/flutter/component-styling) |
</Accordion>

The CometChat V6 UI Kit provides `CometChatOutgoingMessageBubbleStyle` and `CometChatIncomingMessageBubbleStyle` for fine-grained control over message bubble appearance. These classes extend `ThemeExtension`, allowing customizations through global theming or explicit style objects.

## How These Classes Help

### 1. Targeted Customization

Customize specific attributes of message bubbles:

* Background color, border radius, text style
* Specialized bubbles: Audio, File, Collaborative, Poll, Deleted, Link Preview, Sticker, Call bubbles
* Reactions, timestamps, avatars, and borders

### 2. Unified Global Theming

Apply styles via Flutter's global theming or pass them to `CometChatMessageListStyle`:

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    MaterialApp(
      title: 'Your app',
      theme: ThemeData(
        extensions: [
          CometChatIncomingMessageBubbleStyle(
            backgroundColor: Color(0xFFF76808),
          ),
          CometChatOutgoingMessageBubbleStyle(
            backgroundColor: Color(0xFFF76808),
          ),
        ],
      ),
      home: ...,
    );
    ```
  </Tab>
</Tabs>

### 3. Ease of Integration

Pass styles directly to `CometChatMessageList`:

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatMessageList(
      user: user,
      group: group,
      style: CometChatMessageListStyle(
        incomingMessageBubbleStyle: CometChatIncomingMessageBubbleStyle(),
        outgoingMessageBubbleStyle: CometChatOutgoingMessageBubbleStyle(),
      ),
    )
    ```
  </Tab>
</Tabs>

## Customizable Message Bubbles

### Text Bubble

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    ThemeData(
      extensions: [
        CometChatOutgoingMessageBubbleStyle(
          textBubbleStyle: CometChatTextBubbleStyle(
            backgroundColor: Color(0xFFF76808),
          ),
        ),
        CometChatIncomingMessageBubbleStyle(
          textBubbleStyle: CometChatTextBubbleStyle(
            backgroundColor: Color(0xFFFEEDE1),
          ),
        ),
      ],
    )
    ```
  </Tab>
</Tabs>

### Image Bubble

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    ThemeData(
      extensions: [
        CometChatOutgoingMessageBubbleStyle(
          imageBubbleStyle: CometChatImageBubbleStyle(
            backgroundColor: Color(0xFFF76808),
          ),
        ),
        CometChatIncomingMessageBubbleStyle(
          imageBubbleStyle: CometChatImageBubbleStyle(
            backgroundColor: Color(0xFFFEEDE1),
          ),
        ),
      ],
    )
    ```
  </Tab>
</Tabs>

### Video Bubble

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    ThemeData(
      extensions: [
        CometChatOutgoingMessageBubbleStyle(
          videoBubbleStyle: CometChatVideoBubbleStyle(
            backgroundColor: Color(0xFFF76808),
            playIconColor: Color(0xFFF76808),
          ),
        ),
        CometChatIncomingMessageBubbleStyle(
          videoBubbleStyle: CometChatVideoBubbleStyle(
            backgroundColor: Color(0xFFFEEDE1),
            playIconColor: Color(0xFFF76808),
          ),
        ),
      ],
    )
    ```
  </Tab>
</Tabs>

### Voice Note Bubble

Styles the voice-note (recorded audio) bubble via `voiceNoteBubbleStyle` and `CometChatVoiceNoteBubbleStyle`.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    ThemeData(
      extensions: [
        CometChatOutgoingMessageBubbleStyle(
          voiceNoteBubbleStyle: CometChatVoiceNoteBubbleStyle(
            backgroundColor: Color(0xFFF76808),
            playIconColor: Color(0xFFF76808),
          ),
        ),
        CometChatIncomingMessageBubbleStyle(
          voiceNoteBubbleStyle: CometChatVoiceNoteBubbleStyle(
            backgroundColor: Color(0xFFFEEDE1),
            downloadIconColor: Color(0xFFF76808),
            audioBarColor: Color(0xFFF76808),
            playIconColor: Color(0xFFF76808),
          ),
        ),
      ],
    )
    ```
  </Tab>
</Tabs>

<Note>
  The older `audioBubbleStyle` / `CometChatAudioBubbleStyle` names are deprecated aliases of `voiceNoteBubbleStyle` / `CometChatVoiceNoteBubbleStyle` and still work, but prefer the voice-note names.
</Note>

### File Bubble

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    ThemeData(
      extensions: [
        CometChatOutgoingMessageBubbleStyle(
          fileBubbleStyle: CometChatFileBubbleStyle(
            backgroundColor: Color(0xFFF76808),
          ),
        ),
        CometChatIncomingMessageBubbleStyle(
          fileBubbleStyle: CometChatFileBubbleStyle(
            backgroundColor: Color(0xFFFEEDE1),
            downloadIconTint: Color(0xFFF76808),
          ),
        ),
      ],
    )
    ```
  </Tab>
</Tabs>

### Sticker Bubble

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    ThemeData(
      extensions: [
        CometChatOutgoingMessageBubbleStyle(
          stickerBubbleStyle: CometChatStickerBubbleStyle(
            backgroundColor: Color(0xFFF76808),
          ),
        ),
        CometChatIncomingMessageBubbleStyle(
          stickerBubbleStyle: CometChatStickerBubbleStyle(
            backgroundColor: Color(0xFFFEEDE1),
          ),
        ),
      ],
    )
    ```
  </Tab>
</Tabs>

### Call Bubble

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    ThemeData(
      extensions: [
        CometChatOutgoingMessageBubbleStyle(
          videoCallBubbleStyle: CometChatCallBubbleStyle(
            backgroundColor: Color(0xFFF76808),
            iconColor: Color(0xFFF76808),
            buttonTextStyle: TextStyle(color: Colors.white),
            dividerColor: Color(0xFFFBAA75),
          ),
        ),
        CometChatIncomingMessageBubbleStyle(
          videoCallBubbleStyle: CometChatCallBubbleStyle(
            backgroundColor: Color(0xFFFEEDE1),
            iconColor: Color(0xFFF76808),
            buttonTextStyle: TextStyle(color: Color(0xFFF76808)),
          ),
        ),
      ],
    )
    ```
  </Tab>
</Tabs>

### Collaborative Whiteboard Bubble

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    ThemeData(
      extensions: [
        CometChatOutgoingMessageBubbleStyle(
          collaborativeWhiteboardBubbleStyle: CometChatCollaborativeBubbleStyle(
            backgroundColor: Color(0xFFF76808),
            iconTint: Color(0xFFFFFFFF),
            titleStyle: TextStyle(fontWeight: FontWeight.bold, color: Color(0xFFFFFFFF)),
            buttonTextStyle: TextStyle(color: Color(0xFFFFFFFF)),
            dividerColor: Color(0xFFFBAA75),
          ),
        ),
        CometChatIncomingMessageBubbleStyle(
          collaborativeWhiteboardBubbleStyle: CometChatCollaborativeBubbleStyle(
            backgroundColor: Color(0xFFFEEDE1),
            iconTint: Color(0xFFF76808),
            titleStyle: TextStyle(fontWeight: FontWeight.bold),
            buttonTextStyle: TextStyle(color: Color(0xFFF76808)),
          ),
        ),
      ],
    )
    ```
  </Tab>
</Tabs>

### Collaborative Document Bubble

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    ThemeData(
      extensions: [
        CometChatOutgoingMessageBubbleStyle(
          collaborativeDocumentBubbleStyle: CometChatCollaborativeBubbleStyle(
            backgroundColor: Color(0xFFF76808),
            iconTint: Color(0xFFFFFFFF),
            titleStyle: TextStyle(fontWeight: FontWeight.bold, color: Color(0xFFFFFFFF)),
            buttonTextStyle: TextStyle(color: Color(0xFFFFFFFF)),
            dividerColor: Color(0xFFFBAA75),
          ),
        ),
        CometChatIncomingMessageBubbleStyle(
          collaborativeDocumentBubbleStyle: CometChatCollaborativeBubbleStyle(
            backgroundColor: Color(0xFFFEEDE1),
            iconTint: Color(0xFFF76808),
            titleStyle: TextStyle(fontWeight: FontWeight.bold),
            buttonTextStyle: TextStyle(color: Color(0xFFF76808)),
          ),
        ),
      ],
    )
    ```
  </Tab>
</Tabs>

### Poll Bubble

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    ThemeData(
      extensions: [
        CometChatOutgoingMessageBubbleStyle(
          pollsBubbleStyle: CometChatPollsBubbleStyle(
            backgroundColor: Color(0xFFF76808),
            progressBackgroundColor: Color(0xFFFBAA75),
            iconColor: Color(0xFFF76808),
          ),
        ),
        CometChatIncomingMessageBubbleStyle(
          pollsBubbleStyle: CometChatPollsBubbleStyle(
            backgroundColor: Color(0xFFFEEDE1),
            progressBackgroundColor: Color(0xFFDCDCDC),
            progressColor: Color(0xFFF76808),
            iconColor: Colors.white,
            selectedOptionColor: Color(0xFFF76808),
          ),
        ),
      ],
    )
    ```
  </Tab>
</Tabs>

### Link Preview Bubble

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    ThemeData(
      extensions: [
        CometChatOutgoingMessageBubbleStyle(
          linkPreviewBubbleStyle: CometChatLinkPreviewBubbleStyle(
            backgroundColor: Color(0xFFFBAA75),
          ),
          textBubbleStyle: CometChatTextBubbleStyle(
            backgroundColor: Color(0xFFF76808),
          ),
        ),
        CometChatIncomingMessageBubbleStyle(
          linkPreviewBubbleStyle: CometChatLinkPreviewBubbleStyle(
            backgroundColor: Color(0xFFFBAA75),
          ),
          textBubbleStyle: CometChatTextBubbleStyle(
            backgroundColor: Color(0xFFFEEDE1),
          ),
        ),
      ],
    )
    ```
  </Tab>
</Tabs>

### Action Message Bubble

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    ThemeData(
      extensions: [
        CometChatActionBubbleStyle(
          textStyle: TextStyle(color: Color(0xFFF76808)),
          border: Border.all(color: Color(0xFFF76808)),
          backgroundColor: Color(0xFFFEEDE1),
        ),
      ],
    )
    ```
  </Tab>
</Tabs>

### Deleted Message Bubble

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    ThemeData(
      extensions: [
        CometChatOutgoingMessageBubbleStyle(
          deletedBubbleStyle: CometChatDeletedBubbleStyle(
            backgroundColor: Color(0xFFF76808),
          ),
        ),
        CometChatIncomingMessageBubbleStyle(
          deletedBubbleStyle: CometChatDeletedBubbleStyle(
            backgroundColor: Color(0xFFFEEDE1),
          ),
        ),
      ],
    )
    ```
  </Tab>
</Tabs>

### AI Assistant Bubble

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    ThemeData(
      extensions: [
        CometChatAIAssistantBubbleStyle(
          backgroundColor: Colors.transparent,
          textColor: const Color(0xFF141414),
        ),
      ],
    )
    ```
  </Tab>
</Tabs>

## Multiple Attachments

When `enableMultipleAttachments` is on, a message's images / videos / audio files / documents render through dedicated **multi-attachment** bubbles. These are styled differently from the single-attachment bubbles above: each has its own `ThemeExtension` class that you register **directly** in `ThemeData.extensions` — they are *not* nested inside `CometChatIncomingMessageBubbleStyle` / `CometChatOutgoingMessageBubbleStyle`.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    ThemeData(
      extensions: [
        CometChatImagesBubbleStyle(placeholderColor: Color(0xFFFEEDE1)),
        CometChatVideosBubbleStyle(playIconColor: Color(0xFFF76808)),
        CometChatAudiosBubbleStyle(playIconColor: Color(0xFFF76808)),
        CometChatFilesBubbleStyle(backgroundColor: Color(0xFFFEEDE1)),
      ],
    )
    ```
  </Tab>
</Tabs>

<Note>
  Both families can coexist. The single-attachment `imageBubbleStyle` / `videoBubbleStyle` / `voiceNoteBubbleStyle` / `fileBubbleStyle` apply when a message carries one attachment (or when multiple attachments are disabled); the classes below apply to the multi-attachment grids and lists.
</Note>

### Images Bubble — `CometChatImagesBubbleStyle`

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-agent-native-development/Y7tnXGnxeD6Z3sW-/images/imagesbubble.png?fit=max&auto=format&n=Y7tnXGnxeD6Z3sW-&q=85&s=209477346885823f71d61f90f8a3e3be" alt="Images bubble rendering a 2×2 grid of image attachments with a +N overflow tile" width="1200" height="1392" data-path="images/imagesbubble.png" />
</Frame>

The count-based image grid (1 / 2 / 3 / 4 / 5+ with a "+N" overflow tile).

| Property | Description |
| - | - |
| `tileBorderRadius` | Corner radius of each image tile. |
| `gridSpacing` | Gap between tiles. |
| `placeholderColor` | Fill shown while a tile loads, and behind the "no preview" glyph. |
| `overflowScrimColor` | Scrim over the "+N" tile when there are more images than cells. |
| `overflowTextStyle` | Text style of the "+N" count. |
| `captionTextStyle` | Text style of the caption below the grid. |

### Videos Bubble — `CometChatVideosBubbleStyle`

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-agent-native-development/B43GJBM-vOCcvXwh/images/videosbubble.png?fit=max&auto=format&n=B43GJBM-vOCcvXwh&q=85&s=79902632d60d76e8487ca9560c6ba6c3" alt="Videos bubble rendering a 2×2 grid of video attachments with play badges and a +N overflow tile" width="1200" height="1384" data-path="images/videosbubble.png" />
</Frame>

The video grid — poster frames under a play badge, with an optional duration chip.

| Property | Description |
| - | - |
| `tileBorderRadius` | Corner radius of each video tile. |
| `gridSpacing` | Gap between tiles. |
| `placeholderColor` | Poster placeholder fill. |
| `playIconBackgroundColor` | Background of the centered play badge. |
| `playIconColor` | Play glyph colour. |
| `nameTextStyle` | Text style for a video's name label. |
| `durationChipBackgroundColor` | Background of the `m:ss` duration pill. |
| `durationChipTextStyle` | Duration-pill text style. |
| `showVideoDuration` | Whether to show the duration chip. |
| `overflowScrimColor` / `overflowTextStyle` | The "+N" overflow tile. |
| `captionTextStyle` | Caption text style. |

### Audios Bubble — `CometChatAudiosBubbleStyle`

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-agent-native-development/Kil4OsVPVHtkWKHK/images/audiobubble.png?fit=max&auto=format&n=Kil4OsVPVHtkWKHK&q=85&s=1be49901892c9a596de00480a379b5ad" alt="Audios bubble rendering a stack of inline audio player rows with a Show more toggle" width="1200" height="1520" data-path="images/audiobubble.png" />
</Frame>

The stack of inline audio-file player rows (picked audio files, not voice notes).

| Property | Description |
| - | - |
| `rowBackgroundColor` | Background of each player row. |
| `rowBorderRadius` | Row corner radius. |
| `rowSpacing` | Gap between rows. |
| `playIconBackgroundColor` | Play/pause circle background. |
| `playIconColor` | Play/pause glyph colour. |
| `sliderActiveColor` / `sliderInactiveColor` / `sliderThumbColor` | Seek-bar colours. |
| `nameTextStyle` | File-name text style. |
| `durationTextStyle` | Elapsed/total time text style. |
| `downloadIconColor` | Download icon colour. |
| `captionTextStyle` | Caption text style. |

### Files Bubble — `CometChatFilesBubbleStyle`

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-agent-native-development/6eR_gFeN8DXfGhGn/images/filesbubble.png?fit=max&auto=format&n=6eR_gFeN8DXfGhGn&q=85&s=739bed6c158d08edafcc42f1b351a554" alt="Files bubble rendering a stack of document cards with type icon, name, size and download, plus a Show more toggle" width="1200" height="1240" data-path="images/filesbubble.png" />
</Frame>

The list of document/file cards (icon + name + download).

| Property | Description |
| - | - |
| `backgroundColor` | File-card background. |
| `cardBorderRadius` | Card corner radius. |
| `cardSpacing` | Gap between cards. |
| `iconPlateColor` | Background plate behind the file-type icon. |
| `titleTextStyle` | File-name text style. |
| `subtitleTextStyle` | Size / type line text style. |
| `downloadIconTint` | Download icon tint. |
| `toggleTextStyle` | "Show more / less" toggle text style (for 4+ files). |
| `captionTextStyle` | Caption text style. |

### Media Grid — `CometChatMediaGridStyle`

The lower-level grid the **Images** and **Videos** bubbles build on. Most apps style via the two bubble classes above; register `CometChatMediaGridStyle` directly only to control the grid layer everywhere at once.

| Property | Description |
| - | - |
| `cellBorderRadius` | Grid-cell corner radius. |
| `placeholderColor` | Cell placeholder fill. |
| `playBadgeBackgroundColor` / `playBadgeIconColor` | Video play badge. |
| `durationChipBackgroundColor` / `durationChipTextStyle` | Duration pill. |
| `nameTextStyle` | Cell name text style. |
| `overflowScrimColor` / `overflowTextStyle` | The "+N" overflow tile. |
| `showVideoDuration` | Whether to show duration chips. |
| `tripleLayout` | Arrangement for a 3-item grid (`auto` / hero-top / hero-left). |
| `heroFraction` | The hero cell's share of a 3-item grid. |


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.