> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-agent-in-group-react-v6.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-in-group-react-v6/ISrSQKUqQ1MtSM8O/images/2e13a5bb-incoming_outgoing_bubbles-81152924459c679f53280557ac02d67a.png?fit=max&auto=format&n=ISrSQKUqQ1MtSM8O&q=85&s=96584a811d01c70e76a010335b147a50" 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-in-group-react-v6/lFF45O1CcDkVMfu4/images/a93d0db6-all_bubbles_customized-e22a94b3411ba69f1253afe125faf191.png?fit=max&auto=format&n=lFF45O1CcDkVMfu4&q=85&s=26fc63314ba5f3af71e4e7b553633d98" 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-in-group-react-v6/JoK2O2F7IYCQF1_g/images/1c8970f5-text_bubble_customized-7e864e9942e622a04619f92451de0d4e.png?fit=max&auto=format&n=JoK2O2F7IYCQF1_g&q=85&s=6da69909ffc1ec88840a4619b438e534" 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-in-group-react-v6/-aV5rjAnFmfmGI_M/images/7e6e9700-image_bubble_customized-58c6a19de71aa161622c6ee4aa062f15.png?fit=max&auto=format&n=-aV5rjAnFmfmGI_M&q=85&s=35a39713073ac17d790566f1be62ca71" 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-in-group-react-v6/-aV5rjAnFmfmGI_M/images/80e14e9c-video_bubble_customized-74b3ce65670970b341ad94d6409d76b9.png?fit=max&auto=format&n=-aV5rjAnFmfmGI_M&q=85&s=bebaa49779708959ed203700b402309e" 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-in-group-react-v6/hvldi1e9uY_02hWX/images/8895ffba-audio_bubble_customized-f0ceb0a2fde1327593fcaa6c9f0ec9e9.png?fit=max&auto=format&n=hvldi1e9uY_02hWX&q=85&s=c9f872b59f10b7914efb640fe7c7adf0" 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-in-group-react-v6/fW0PxkjcCIs_jips/images/d488197b-file_bubble_customized-93b686d830f7a472541c47d9233f4385.png?fit=max&auto=format&n=fW0PxkjcCIs_jips&q=85&s=3c687a8c29e3893a834ec1b14e51f9fc" 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-in-group-react-v6/wITpHRGFWGJvJnmU/images/ee285dd1-poll_bubble_customized-354912ae5af49e77df7b8b6555f74892.png?fit=max&auto=format&n=wITpHRGFWGJvJnmU&q=85&s=b1f93a4f3f88f692edd224d10608e06f" 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-in-group-react-v6/aRTT1Z3XQ9tvRy7f/images/1058d1c0-video_call_bubble_customized-5fcb5e6ecc0a81c54ef955f6b5093320.png?fit=max&auto=format&n=aRTT1Z3XQ9tvRy7f&q=85&s=648c8fed677d13fded28b5ca4ee284ed" 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-in-group-react-v6/iIeExfBhmmmkVYg_/images/614945dc-link_preview_bubble_customized-86ba4c4262848e9a0c65258f283e48e2.png?fit=max&auto=format&n=iIeExfBhmmmkVYg_&q=85&s=077f649d4b6b6473a6af21844155b023" 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-in-group-react-v6/wITpHRGFWGJvJnmU/images/eca46e37-deleted_bubble_customized-5676220503c8daedf981aa8e4b18732c.png?fit=max&auto=format&n=wITpHRGFWGJvJnmU&q=85&s=15069d69e4247140f184b7a34fb76d43" 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-in-group-react-v6/aRTT1Z3XQ9tvRy7f/images/123b88a7-collaborative_whiteboard_customized-91c3ec20aef900a3d1523e850b756ddb.png?fit=max&auto=format&n=aRTT1Z3XQ9tvRy7f&q=85&s=f26eee4fc600f6e1d9b9502448a71e15" 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              |