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

> Data structure for customizing CometChat Flutter UI Kit message bubbles, including content, header, footer, reply, and status views.

## Overview

A `CometChatMessageTemplate` provides the capability to define and customize both the structure and behavior of message bubbles. It acts as a blueprint for creating message bubble widgets, allowing you to manage appearance and interactions consistently.

### Structure

The MessageBubble structure can be broken down into:

1. Leading widget — Sender's avatar
2. Header widget — Sender's name (useful in group chats)
3. Content widget — Message content (text, images, videos, etc.)
4. Bottom widget — Additional elements like link previews or "load more" buttons
5. Footer widget — Timestamp and delivery/read status

### Properties

| Property      | Description                                   |
| ------------- | --------------------------------------------- |
| `type`        | Maps the template to a CometChat message type |
| `category`    | Sets the message category                     |
| `headerView`  | Custom header widget for the bubble           |
| `contentView` | Custom content widget for the bubble          |
| `footerView`  | Custom footer widget (timestamp, receipts)    |
| `bottomView`  | Custom bottom widget (link previews, etc.)    |
| `bubbleView`  | Complete custom bubble widget                 |
| `options`     | List of actions on long press                 |

## Customization

### Header Widget

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatMessageList(
      group: group,
      templates: [
        CometChatMessageTemplate(
          type: MessageTypeConstants.text,
          category: MessageCategoryConstants.message,
          headerView: (BaseMessage baseMessage, BuildContext buildContext, BubbleAlignment alignment) {
            return Text(
              "${baseMessage.sender?.name} • 🗓️ In meeting",
              style: TextStyle(
                color: Color(0xFF6852D6),
                fontSize: 14.4,
                fontWeight: FontWeight.w500,
              ),
            );
          },
        ),
      ],
    )
    ```
  </Tab>
</Tabs>

***

### Content Widget

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatMessageList(
      group: group,
      templates: [
        CometChatMessageTemplate(
          type: "image",
          category: "message",
          contentView: (message, context, alignment, {AdditionalConfigurations? additionalConfigurations}) {
            if (message is! MediaMessage) return const SizedBox();
            return Wrap(
              direction: Axis.vertical,
              crossAxisAlignment: WrapCrossAlignment.center,
              children: [
                CometChatImageBubble(
                  imageUrl: message.attachment?.fileUrl,
                  metadata: message.metadata,
                  key: UniqueKey(),
                ),
                TextButton(
                  onPressed: () {
                    // Navigate to purchase screen
                  },
                  child: Text("Buy Now"),
                ),
              ],
            );
          },
        ),
      ],
    )
    ```
  </Tab>
</Tabs>

***

### Bottom Widget

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatMessageList(
      group: group,
      templates: [
        CometChatMessageTemplate(
          type: MessageTypeConstants.text,
          category: MessageCategoryConstants.message,
          bottomView: (BaseMessage baseMessage, BuildContext buildContext, BubbleAlignment alignment) {
            return Container(
              decoration: BoxDecoration(
                color: Color(0xFFF44649).withOpacity(.2),
                borderRadius: BorderRadius.circular(12),
              ),
              child: Row(
                children: [
                  Icon(Icons.warning, color: Color(0xFFF44649), size: 12),
                  Text(
                    "According to guidelines you cannot share contact",
                    style: TextStyle(color: Color(0xFFF44649), fontSize: 12),
                  ),
                ],
              ),
            );
          },
        ),
      ],
    )
    ```
  </Tab>
</Tabs>

***

### Footer Widget

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatMessageList(
      group: group,
      templates: [
        CometChatMessageTemplate(
          type: MessageTypeConstants.text,
          category: MessageCategoryConstants.message,
          statusInfoView: (baseMessage, context, alignment) {
            return const SizedBox(height: 11);
          },
          footerView: (baseMessage, context, alignment, {additionalConfigurations}) {
            // Custom footer with time and receipt
            return Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                CometChatDate(date: baseMessage.sentAt!, pattern: DateTimePattern.timeFormat),
              ],
            );
          },
        ),
      ],
    )
    ```
  </Tab>
</Tabs>

***

### Options List

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatMessageList(
      group: group,
      templates: [
        CometChatMessageTemplate(
          type: MessageTypeConstants.text,
          category: MessageCategoryConstants.message,
          options: (loggedInUser, messageObject, context, group, additionalConfigurations) {
            final existingOptions = CometChatUIKit.getDataSource()
                .getTextMessageOptions(loggedInUser, messageObject, context, group, additionalConfigurations);
            return [
              CometChatMessageOption(
                id: "refresh",
                title: "Refresh",
                icon: Icon(Icons.refresh, color: Color(0xFF6852D6), size: 24),
              ),
              ...existingOptions,
            ];
          },
        ),
      ],
    )
    ```
  </Tab>
</Tabs>

***

## New Templates

Create entirely new templates for custom message types:

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatMessageList(
      user: user,
      messagesRequestBuilder: MessagesRequestBuilder()
        ..limit = 30
        ..types = [...CometChatUIKit.getDataSource().getAllMessageTypes(), "contact"]
        ..categories = CometChatUIKit.getDataSource().getAllMessageCategories(),
      templates: [
        CometChatMessageTemplate(
          type: "contact",
          category: MessageCategoryConstants.custom,
          contentView: (baseMessage, context, alignment, {additionalConfigurations}) {
            return Padding(
              padding: const EdgeInsets.fromLTRB(8, 8, 8, 0),
              child: Row(
                children: [
                  CircleAvatar(
                    backgroundColor: Color(0xFFEDEAFA),
                    child: Icon(Icons.person, color: Colors.white),
                  ),
                  SizedBox(width: 8),
                  Text("Contact Name",
                    style: TextStyle(
                      color: alignment == BubbleAlignment.right ? Colors.white : Colors.black,
                      fontSize: 14,
                    ),
                  ),
                ],
              ),
            );
          },
        ),
      ],
    )
    ```
  </Tab>
</Tabs>

<Note>
  In V6, `CometChatUIKit.getDataSource()` is replaced by `MessageTemplateUtils` for accessing data source methods. Use the appropriate service locator to get message options and templates.
</Note>