> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-llms-scoped-indexes.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-llms-scoped-indexes/2jSVlYXfUL_4P-jB/images/2e13a5bb-incoming_outgoing_bubbles-81152924459c679f53280557ac02d67a.png?fit=max&auto=format&n=2jSVlYXfUL_4P-jB&q=85&s=c933944f952e4f77534d3f84c96dde51" 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-llms-scoped-indexes/ZaDaKVdnqtokXiZK/images/a93d0db6-all_bubbles_customized-e22a94b3411ba69f1253afe125faf191.png?fit=max&auto=format&n=ZaDaKVdnqtokXiZK&q=85&s=92ba6101df65226432f5ed1c0ec7a2b1" 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-llms-scoped-indexes/K_p4Iy5Yo4hNoo1I/images/1c8970f5-text_bubble_customized-7e864e9942e622a04619f92451de0d4e.png?fit=max&auto=format&n=K_p4Iy5Yo4hNoo1I&q=85&s=67a90ba9a70e2fa236771240b6bb191a" 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-llms-scoped-indexes/LUAnk4kNde8CLq7p/images/7e6e9700-image_bubble_customized-58c6a19de71aa161622c6ee4aa062f15.png?fit=max&auto=format&n=LUAnk4kNde8CLq7p&q=85&s=c8e3ab8d7b90c6ce1011bbcf54a3d9f5" 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-llms-scoped-indexes/LUAnk4kNde8CLq7p/images/80e14e9c-video_bubble_customized-74b3ce65670970b341ad94d6409d76b9.png?fit=max&auto=format&n=LUAnk4kNde8CLq7p&q=85&s=0a2e3c391d796a294143486240240120" 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-llms-scoped-indexes/-nSFFcS2LLIkMyn9/images/8895ffba-audio_bubble_customized-f0ceb0a2fde1327593fcaa6c9f0ec9e9.png?fit=max&auto=format&n=-nSFFcS2LLIkMyn9&q=85&s=53f06268b1e39decad5a6fcbf8a0b085" 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-llms-scoped-indexes/MwUD0WbYp0FmjMsd/images/d488197b-file_bubble_customized-93b686d830f7a472541c47d9233f4385.png?fit=max&auto=format&n=MwUD0WbYp0FmjMsd&q=85&s=0496487af7ec3f6f9368f6d15e5b7d9a" 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-llms-scoped-indexes/KBUX2d7UNeNDowv9/images/ee285dd1-poll_bubble_customized-354912ae5af49e77df7b8b6555f74892.png?fit=max&auto=format&n=KBUX2d7UNeNDowv9&q=85&s=ae13ca023cc6419e0ee7b974638279b0" 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-llms-scoped-indexes/pqFD_6VENUUyLlCi/images/1058d1c0-video_call_bubble_customized-5fcb5e6ecc0a81c54ef955f6b5093320.png?fit=max&auto=format&n=pqFD_6VENUUyLlCi&q=85&s=cf1acfc981dbb24e3b269e9b6a14487f" 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-llms-scoped-indexes/zeinwsYvDYBDwir-/images/614945dc-link_preview_bubble_customized-86ba4c4262848e9a0c65258f283e48e2.png?fit=max&auto=format&n=zeinwsYvDYBDwir-&q=85&s=4b209ea4d2a08854176e83c4e3e8c1fe" 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-llms-scoped-indexes/KBUX2d7UNeNDowv9/images/eca46e37-deleted_bubble_customized-5676220503c8daedf981aa8e4b18732c.png?fit=max&auto=format&n=KBUX2d7UNeNDowv9&q=85&s=4d67d574a0961a4bb7cbb0d812b03a58" 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-llms-scoped-indexes/pqFD_6VENUUyLlCi/images/123b88a7-collaborative_whiteboard_customized-91c3ec20aef900a3d1523e850b756ddb.png?fit=max&auto=format&n=pqFD_6VENUUyLlCi&q=85&s=b96635729b0791751190f04d5ea63876" 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.