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

# Message Bubble Styling

> Customize incoming and outgoing message bubbles in CometChat Flutter UI Kit.

<Accordion title="AI Agent Component Spec">
  | Field        | Value                                                                                                                                                                                      |
  | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
  | Outgoing     | `CometChatOutgoingMessageBubbleStyle`                                                                                                                                                      |
  | Incoming     | `CometChatIncomingMessageBubbleStyle`                                                                                                                                                      |
  | Action       | `CometChatActionBubbleStyle`                                                                                                                                                               |
  | AI Assistant | `CometChatAiAssistantBubbleStyle`                                                                                                                                                          |
  | Usage        | Add to `ThemeData.extensions` or pass to `CometChatMessageListStyle`                                                                                                                       |
  | Bubble types | Text, Image, Video, Audio, File, Poll, Sticker, Voice Call, Video Call, Link Preview, Collaborative Document, Collaborative Whiteboard, Message Translation, Deleted, Action, AI Assistant |
  | Source       | [GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/shared_uikit/lib/src/models/extension_bubble_styles)                                                                 |
</Accordion>

Customize message bubbles using `CometChatOutgoingMessageBubbleStyle` and `CometChatIncomingMessageBubbleStyle`.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/TO10Bmu50bb5qPTI/images/2e13a5bb-incoming_outgoing_bubbles-81152924459c679f53280557ac02d67a.png?fit=max&auto=format&n=TO10Bmu50bb5qPTI&q=85&s=8874f43990be4c95dbe0b20214058dfa" width="1448" height="328" data-path="images/2e13a5bb-incoming_outgoing_bubbles-81152924459c679f53280557ac02d67a.png" />
</Frame>

***

## Global Theming

Apply bubble styles globally via `ThemeData.extensions`:

```dart theme={null}
MaterialApp(
  theme: ThemeData(
    extensions: [
      CometChatOutgoingMessageBubbleStyle(
        backgroundColor: Color(0xFFF76808),
      ),
      CometChatIncomingMessageBubbleStyle(
        backgroundColor: Color(0xFFFEEDE1),
      ),
    ],
  ),
)
```

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/jpEUuHUk-hvu4tQT/images/a93d0db6-all_bubbles_customized-e22a94b3411ba69f1253afe125faf191.png?fit=max&auto=format&n=jpEUuHUk-hvu4tQT&q=85&s=ac7d5518c4858c8fd567aabcb9ea2d87" width="683" height="1321" data-path="images/a93d0db6-all_bubbles_customized-e22a94b3411ba69f1253afe125faf191.png" />
</Frame>

***

## Component-Level Styling

Pass styles directly to `CometChatMessageList`:

```dart theme={null}
CometChatMessageList(
  user: user,
  style: CometChatMessageListStyle(
    outgoingMessageBubbleStyle: CometChatOutgoingMessageBubbleStyle(
      backgroundColor: Color(0xFFF76808),
    ),
    incomingMessageBubbleStyle: CometChatIncomingMessageBubbleStyle(
      backgroundColor: Color(0xFFFEEDE1),
    ),
  ),
)
```

***

## Bubble Types

### Text Bubble

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/7emVxEQ5MCxvzC60/images/1c8970f5-text_bubble_customized-7e864e9942e622a04619f92451de0d4e.png?fit=max&auto=format&n=7emVxEQ5MCxvzC60&q=85&s=49c8327deaffce0edf18b2d399d291a4" width="1200" height="396" data-path="images/1c8970f5-text_bubble_customized-7e864e9942e622a04619f92451de0d4e.png" />
</Frame>

```dart theme={null}
CometChatOutgoingMessageBubbleStyle(
  textBubbleStyle: CometChatTextBubbleStyle(
    backgroundColor: Color(0xFFF76808),
  ),
)
```

### Image Bubble

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/Gp90C5sdVtuRR4t7/images/7e6e9700-image_bubble_customized-58c6a19de71aa161622c6ee4aa062f15.png?fit=max&auto=format&n=Gp90C5sdVtuRR4t7&q=85&s=7ccdb21fcc669a4002096706590434d2" width="1200" height="1392" data-path="images/7e6e9700-image_bubble_customized-58c6a19de71aa161622c6ee4aa062f15.png" />
</Frame>

```dart theme={null}
CometChatOutgoingMessageBubbleStyle(
  imageBubbleStyle: CometChatImageBubbleStyle(
    backgroundColor: Color(0xFFF76808),
  ),
)
```

### Video Bubble

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/Gp90C5sdVtuRR4t7/images/80e14e9c-video_bubble_customized-74b3ce65670970b341ad94d6409d76b9.png?fit=max&auto=format&n=Gp90C5sdVtuRR4t7&q=85&s=e52a2ab70d48b3708789766fbcebbdd6" width="1200" height="1016" data-path="images/80e14e9c-video_bubble_customized-74b3ce65670970b341ad94d6409d76b9.png" />
</Frame>

```dart theme={null}
CometChatOutgoingMessageBubbleStyle(
  videoBubbleStyle: CometChatVideoBubbleStyle(
    backgroundColor: Color(0xFFF76808),
    playIconColor: Color(0xFFF76808),
  ),
)
```

### Audio Bubble

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/ubfBSdV1t6rmjxeA/images/8895ffba-audio_bubble_customized-f0ceb0a2fde1327593fcaa6c9f0ec9e9.png?fit=max&auto=format&n=ubfBSdV1t6rmjxeA&q=85&s=b9f45ee9d6c87e0ab336c4a315cb1dba" width="1200" height="640" data-path="images/8895ffba-audio_bubble_customized-f0ceb0a2fde1327593fcaa6c9f0ec9e9.png" />
</Frame>

```dart theme={null}
CometChatIncomingMessageBubbleStyle(
  audioBubbleStyle: CometChatAudioBubbleStyle(
    backgroundColor: Color(0xFFFEEDE1),
    downloadIconColor: Color(0xFFF76808),
    audioBarColor: Color(0xFFF76808),
    playIconColor: Color(0xFFF76808),
  ),
)
```

### File Bubble

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/xIG5VBdyNJ5cYSqE/images/d488197b-file_bubble_customized-93b686d830f7a472541c47d9233f4385.png?fit=max&auto=format&n=xIG5VBdyNJ5cYSqE&q=85&s=5b4578b117fde2348b55078f9678bdf6" width="1200" height="632" data-path="images/d488197b-file_bubble_customized-93b686d830f7a472541c47d9233f4385.png" />
</Frame>

```dart theme={null}
CometChatIncomingMessageBubbleStyle(
  fileBubbleStyle: CometChatFileBubbleStyle(
    backgroundColor: Color(0xFFFEEDE1),
    downloadIconTint: Color(0xFFF76808),
  ),
)
```

### Poll Bubble

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/2SVOPiSpm0QEqRoz/images/ee285dd1-poll_bubble_customized-354912ae5af49e77df7b8b6555f74892.png?fit=max&auto=format&n=2SVOPiSpm0QEqRoz&q=85&s=374997f4507d8249269d8dc0ad3b0447" width="1200" height="1412" data-path="images/ee285dd1-poll_bubble_customized-354912ae5af49e77df7b8b6555f74892.png" />
</Frame>

```dart theme={null}
CometChatOutgoingMessageBubbleStyle(
  pollsBubbleStyle: CometChatPollsBubbleStyle(
    backgroundColor: Color(0xFFF76808),
    progressBackgroundColor: Color(0xFFFBAA75),
    iconColor: Color(0xFFF76808),
  ),
)
```

### Call Bubble

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/PrOf0fpV33FkfOMB/images/1058d1c0-video_call_bubble_customized-5fcb5e6ecc0a81c54ef955f6b5093320.png?fit=max&auto=format&n=PrOf0fpV33FkfOMB&q=85&s=01ebe0957f696d904bd55ca5c8c01bc2" width="1200" height="600" data-path="images/1058d1c0-video_call_bubble_customized-5fcb5e6ecc0a81c54ef955f6b5093320.png" />
</Frame>

```dart theme={null}
CometChatOutgoingMessageBubbleStyle(
  videoCallBubbleStyle: CometChatCallBubbleStyle(
    backgroundColor: Color(0xFFF76808),
    iconColor: Color(0xFFF76808),
    buttonTextStyle: TextStyle(color: Colors.white),
    dividerColor: Color(0xFFFBAA75),
  ),
)
```

### Link Preview Bubble

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/XgQ9DxAoWn0btB5m/images/614945dc-link_preview_bubble_customized-86ba4c4262848e9a0c65258f283e48e2.png?fit=max&auto=format&n=XgQ9DxAoWn0btB5m&q=85&s=72f949686d1b697d839b1d0e6f29b94b" width="1200" height="1836" data-path="images/614945dc-link_preview_bubble_customized-86ba4c4262848e9a0c65258f283e48e2.png" />
</Frame>

```dart theme={null}
CometChatOutgoingMessageBubbleStyle(
  linkPreviewBubbleStyle: CometChatLinkPreviewBubbleStyle(
    backgroundColor: Color(0xFFFBAA75),
  ),
  textBubbleStyle: CometChatTextBubbleStyle(
    backgroundColor: Color(0xFFF76808),
  ),
)
```

### Deleted Message Bubble

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/2SVOPiSpm0QEqRoz/images/eca46e37-deleted_bubble_customized-5676220503c8daedf981aa8e4b18732c.png?fit=max&auto=format&n=2SVOPiSpm0QEqRoz&q=85&s=5680cd26d81ead0ad79239bb8f02d29e" width="1200" height="396" data-path="images/eca46e37-deleted_bubble_customized-5676220503c8daedf981aa8e4b18732c.png" />
</Frame>

```dart theme={null}
CometChatOutgoingMessageBubbleStyle(
  deletedBubbleStyle: CometChatDeletedBubbleStyle(
    backgroundColor: Color(0xFFF76808),
  ),
)
```

### Collaborative Bubbles

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/PrOf0fpV33FkfOMB/images/123b88a7-collaborative_whiteboard_customized-91c3ec20aef900a3d1523e850b756ddb.png?fit=max&auto=format&n=PrOf0fpV33FkfOMB&q=85&s=c7f6722941ea70194ea722de0e50405c" width="1200" height="1336" data-path="images/123b88a7-collaborative_whiteboard_customized-91c3ec20aef900a3d1523e850b756ddb.png" />
</Frame>

```dart theme={null}
// Collaborative Whiteboard
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),
  ),
)

// Collaborative Document
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),
  ),
)
```

### Sticker Bubble

```dart theme={null}
CometChatOutgoingMessageBubbleStyle(
  stickerBubbleStyle: CometChatStickerBubbleStyle(
    backgroundColor: Color(0xFFF76808),
    borderRadius: BorderRadius.circular(12),
  ),
)
```

### Voice Call Bubble

```dart theme={null}
CometChatOutgoingMessageBubbleStyle(
  voiceCallBubbleStyle: CometChatCallBubbleStyle(
    backgroundColor: Color(0xFFF76808),
    iconColor: Color(0xFFFFFFFF),
    buttonTextStyle: TextStyle(color: Colors.white),
  ),
)
```

### Action Message Bubble

Style activity-driven notifications like "User joined" or "User left":

```dart theme={null}
ThemeData(
  extensions: [
    CometChatActionBubbleStyle(
      textStyle: TextStyle(color: Color(0xFFF76808)),
      border: Border.all(color: Color(0xFFF76808)),
      backgroundColor: Color(0xFFFEEDE1),
    ),
  ],
)
```

### AI Assistant Bubble

```dart theme={null}
ThemeData(
  extensions: [
    CometChatAiAssistantBubbleStyle(
      backgroundColor: Colors.transparent,
      textColor: Color(0xFF141414),
      textStyle: TextStyle(fontFamily: 'Roboto'),
    ),
  ],
)
```

***

## Style Properties Reference

### CometChatOutgoingMessageBubbleStyle

| Property                             | Type                                      | Description                                |
| ------------------------------------ | ----------------------------------------- | ------------------------------------------ |
| `backgroundColor`                    | `Color?`                                  | Background color of the message bubble     |
| `border`                             | `BoxBorder?`                              | Border of the message bubble               |
| `borderRadius`                       | `BorderRadiusGeometry?`                   | Border radius of the message bubble        |
| `messageBubbleBackgroundImage`       | `DecorationImage?`                        | Background image for the bubble            |
| `threadedMessageIndicatorTextStyle`  | `TextStyle?`                              | Text style for threaded message indicator  |
| `threadedMessageIndicatorIconColor`  | `Color?`                                  | Icon color for threaded message indicator  |
| `messageBubbleAvatarStyle`           | `CometChatAvatarStyle?`                   | Style for sender avatar                    |
| `messageReceiptStyle`                | `CometChatMessageReceiptStyle?`           | Style for message receipts                 |
| `messageBubbleReactionStyle`         | `CometChatReactionsStyle?`                | Style for message reactions                |
| `messageBubbleDateStyle`             | `CometChatDateStyle?`                     | Style for message date                     |
| `textBubbleStyle`                    | `CometChatTextBubbleStyle?`               | Style for text messages                    |
| `imageBubbleStyle`                   | `CometChatImageBubbleStyle?`              | Style for image messages                   |
| `videoBubbleStyle`                   | `CometChatVideoBubbleStyle?`              | Style for video messages                   |
| `audioBubbleStyle`                   | `CometChatAudioBubbleStyle?`              | Style for audio messages                   |
| `fileBubbleStyle`                    | `CometChatFileBubbleStyle?`               | Style for file messages                    |
| `pollsBubbleStyle`                   | `CometChatPollsBubbleStyle?`              | Style for poll messages                    |
| `stickerBubbleStyle`                 | `CometChatStickerBubbleStyle?`            | Style for sticker messages                 |
| `voiceCallBubbleStyle`               | `CometChatCallBubbleStyle?`               | Style for voice call bubbles               |
| `videoCallBubbleStyle`               | `CometChatCallBubbleStyle?`               | Style for video call bubbles               |
| `linkPreviewBubbleStyle`             | `CometChatLinkPreviewBubbleStyle?`        | Style for link preview bubbles             |
| `collaborativeDocumentBubbleStyle`   | `CometChatCollaborativeBubbleStyle?`      | Style for collaborative document bubbles   |
| `collaborativeWhiteboardBubbleStyle` | `CometChatCollaborativeBubbleStyle?`      | Style for collaborative whiteboard bubbles |
| `messageTranslationBubbleStyle`      | `CometChatMessageTranslationBubbleStyle?` | Style for translated messages              |
| `deletedBubbleStyle`                 | `CometChatDeletedBubbleStyle?`            | Style for deleted messages                 |
| `moderationStyle`                    | `CometChatModerationStyle?`               | Style for moderated messages               |
| `messagePreviewStyle`                | `CometChatMessagePreviewStyle?`           | Style for message previews                 |
| `exceptionStyle`                     | `CometChatExceptionStyle?`                | Style for exception views                  |

### CometChatIncomingMessageBubbleStyle

Includes all properties from `CometChatOutgoingMessageBubbleStyle` except `messageReceiptStyle`, `moderationStyle`, and `exceptionStyle`, plus:

| Property                 | Type                               | Description                    |
| ------------------------ | ---------------------------------- | ------------------------------ |
| `senderNameTextStyle`    | `TextStyle?`                       | Text style for sender name     |
| `aiAssistantBubbleStyle` | `CometChatAIAssistantBubbleStyle?` | Style for AI assistant bubbles |

### CometChatActionBubbleStyle

| Property          | Type         | Description                       |
| ----------------- | ------------ | --------------------------------- |
| `backgroundColor` | `Color?`     | Background color of action bubble |
| `border`          | `BoxBorder?` | Border of action bubble           |
| `textStyle`       | `TextStyle?` | Text style for action message     |

### CometChatAiAssistantBubbleStyle

| Property          | Type         | Description                             |
| ----------------- | ------------ | --------------------------------------- |
| `backgroundColor` | `Color?`     | Background color of AI assistant bubble |
| `textColor`       | `Color?`     | Text color                              |
| `textStyle`       | `TextStyle?` | Text style for AI messages              |