> ## 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.

# 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-agent-native-development/xgDwSFh8m8tSmxiB/images/2e13a5bb-incoming_outgoing_bubbles-81152924459c679f53280557ac02d67a.png?fit=max&auto=format&n=xgDwSFh8m8tSmxiB&q=85&s=450d61675ef31865614e5be0c4a11e6b" 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-agent-native-development/-wBEWpNl3B5_KrQl/images/a93d0db6-all_bubbles_customized-e22a94b3411ba69f1253afe125faf191.png?fit=max&auto=format&n=-wBEWpNl3B5_KrQl&q=85&s=a163091eb23af37ada75a5f16375b8ef" 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-agent-native-development/SMElrdmiSSLO5uY3/images/1c8970f5-text_bubble_customized-7e864e9942e622a04619f92451de0d4e.png?fit=max&auto=format&n=SMElrdmiSSLO5uY3&q=85&s=6fb8813afd0d1b786dcd78581a3abcce" 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-agent-native-development/xl-X6qUWkdH6FtQ-/images/7e6e9700-image_bubble_customized-58c6a19de71aa161622c6ee4aa062f15.png?fit=max&auto=format&n=xl-X6qUWkdH6FtQ-&q=85&s=c8fb8e8639dac91dbfe92f26334a91c1" 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-agent-native-development/xl-X6qUWkdH6FtQ-/images/80e14e9c-video_bubble_customized-74b3ce65670970b341ad94d6409d76b9.png?fit=max&auto=format&n=xl-X6qUWkdH6FtQ-&q=85&s=052761149c5cd05f173099c007b18276" 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-agent-native-development/o6_jwBoLsrhv9wxF/images/8895ffba-audio_bubble_customized-f0ceb0a2fde1327593fcaa6c9f0ec9e9.png?fit=max&auto=format&n=o6_jwBoLsrhv9wxF&q=85&s=7699c2fae40446645d19efc457a071f4" 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-agent-native-development/KfFXCsLIxfFsMpMX/images/d488197b-file_bubble_customized-93b686d830f7a472541c47d9233f4385.png?fit=max&auto=format&n=KfFXCsLIxfFsMpMX&q=85&s=ac3d43abb437db4708e6e21f09f99beb" 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-agent-native-development/vWp90eEvc1uVif6U/images/ee285dd1-poll_bubble_customized-354912ae5af49e77df7b8b6555f74892.png?fit=max&auto=format&n=vWp90eEvc1uVif6U&q=85&s=b88a91473e2a74f511e6a292c83b045b" 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-agent-native-development/BcLoqN2WGF-Pr9Oq/images/1058d1c0-video_call_bubble_customized-5fcb5e6ecc0a81c54ef955f6b5093320.png?fit=max&auto=format&n=BcLoqN2WGF-Pr9Oq&q=85&s=ac3d8c144399f28ee1ef2db954340d8b" 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-agent-native-development/HLchJxiyL985oyZg/images/614945dc-link_preview_bubble_customized-86ba4c4262848e9a0c65258f283e48e2.png?fit=max&auto=format&n=HLchJxiyL985oyZg&q=85&s=8f55f3b0142ce23b7ca6c1e15ec10199" 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-agent-native-development/vWp90eEvc1uVif6U/images/eca46e37-deleted_bubble_customized-5676220503c8daedf981aa8e4b18732c.png?fit=max&auto=format&n=vWp90eEvc1uVif6U&q=85&s=1d95b3fc4c69fa6959d820c30fce6a93" 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-agent-native-development/BcLoqN2WGF-Pr9Oq/images/123b88a7-collaborative_whiteboard_customized-91c3ec20aef900a3d1523e850b756ddb.png?fit=max&auto=format&n=BcLoqN2WGF-Pr9Oq&q=85&s=336b60ebb70cd364d48f39c9f322fa71" 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 |


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