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

> A widget that enables users to write and send messages with attachments and reactions

<Accordion title="AI Agent Component Spec">
  ```json theme={null}
  {
    "component": "CometChatMessageComposer",
    "package": "cometchat_chat_uikit",
    "import": "import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';",
    "description": "A widget that enables users to write and send a variety of messages, including text, image, video, and custom messages. Features such as Live Reaction, Attachments, and Message Editing are also supported.",
    "primaryOutput": {
      "prop": "onSendButtonTap",
      "type": "Function(BuildContext, BaseMessage, PreviewMessageMode?)?"
    },
    "props": {
      "data": {
        "user": {
          "type": "User?",
          "default": "null",
          "note": "User object for the message composer (one of user or group is required)"
        },
        "group": {
          "type": "Group?",
          "default": "null",
          "note": "Group object for the message composer (one of user or group is required)"
        },
        "text": {
          "type": "String?",
          "default": "null",
          "note": "Initial text for the input field"
        },
        "parentMessageId": {
          "type": "int",
          "default": "0",
          "note": "ID of the parent message for threaded replies"
        }
      },
      "callbacks": {
        "onChange": "Function(String)?",
        "onSendButtonTap": "Function(BuildContext, BaseMessage, PreviewMessageMode?)?",
        "onError": "OnError?"
      },
      "visibility": {
        "hideVoiceRecordingButton": { "type": "bool?", "default": null },
        "hideSendButton": { "type": "bool?", "default": null },
        "hideAttachmentButton": { "type": "bool?", "default": null },
        "hideStickersButton": { "type": "bool?", "default": null },
        "disableMentions": { "type": "bool?", "default": null },
        "disableTypingEvents": { "type": "bool", "default": false }
      },
      "sound": {
        "disableSoundForMessages": { "type": "bool", "default": false },
        "customSoundForMessage": { "type": "String?", "default": null }
      },
      "viewSlots": {
        "auxiliaryButtonView": "ComposerWidgetBuilder?",
        "secondaryButtonView": "ComposerWidgetBuilder?",
        "sendButtonView": "Widget?",
        "headerView": "ComposerWidgetBuilder?",
        "footerView": "ComposerWidgetBuilder?"
      },
      "formatting": {
        "placeholderText": { "type": "String?", "default": null },
        "maxLine": { "type": "int?", "default": null },
        "padding": { "type": "EdgeInsetsGeometry?", "default": null }
      }
    },
    "events": [],
    "sdkListeners": [],
    "compositionExample": {
      "description": "CometChatMessageComposer is typically used at the bottom of a messaging screen, paired with CometChatMessageHeader and CometChatMessageList",
      "components": ["CometChatMessageHeader", "CometChatMessageList", "CometChatMessages"],
      "flow": "User types message → Composer sends message → MessageList updates"
    },
    "types": {
      "CometChatMessageComposerStyle": {
        "backgroundColor": "Color?",
        "border": "BoxBorder?",
        "borderRadius": "BorderRadiusGeometry?",
        "sendButtonIconColor": "Color?",
        "sendButtonIconBackgroundColor": "Color?",
        "textStyle": "TextStyle?",
        "placeHolderTextStyle": "TextStyle?"
      }
    }
  }
  ```
</Accordion>

## Where It Fits

`CometChatMessageComposer` is a [Widget](/ui-kit/flutter/v5/components-overview#components) that enables users to write and send a variety of messages, including text, image, video, and custom messages.

Features such as **Live Reaction**, **Attachments**, and **Message Editing** are also supported by it.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-llms-scoped-indexes/-nSFFcS2LLIkMyn9/images/8becc772-message_composer-0cc03defaf535f332f7f8bb1ebd65392.png?fit=max&auto=format&n=-nSFFcS2LLIkMyn9&q=85&s=80e420c944eb0b5a5601137d95771d2d" width="2560" height="464" data-path="images/8becc772-message_composer-0cc03defaf535f332f7f8bb1ebd65392.png" />
</Frame>

`CometChatMessageComposer` is comprised of the following [Base Widgets](/ui-kit/flutter/v5/components-overview#base-components):

| Base Widgets | Description |
| - | - |
| [MessageInput](/ui-kit/flutter/v5/message-composer) | This provides a basic layout for the contents of this component, such as the TextField and buttons |
| [ActionSheet](/ui-kit/flutter/v5/components-overview) | The ActionSheet widget presents a list of options in either a list or grid mode |

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';

    // CometChatMessageComposer is typically used at the bottom of a messaging screen
    class MessagingScreen extends StatelessWidget {
      final User user;
      
      const MessagingScreen({required this.user});

      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: Column(
            children: [
              CometChatMessageHeader(user: user),
              Expanded(child: CometChatMessageList(user: user)),
              CometChatMessageComposer(user: user),
            ],
          ),
        );
      }
    }
    ```
  </Tab>
</Tabs>

## Minimal Render

The simplest way to render `CometChatMessageComposer`:

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';

    // For a user conversation
    CometChatMessageComposer(
      user: user,
    )

    // For a group conversation
    CometChatMessageComposer(
      group: group,
    )
    ```
  </Tab>
</Tabs>

## Actions and Events

### Callback Props

Component-level callbacks that fire on specific user interactions:

| Callback | Signature | Fires When |
| - | - | - |
| `onSendButtonTap` | `Function(BuildContext, BaseMessage, PreviewMessageMode?)?` | User taps the send button |
| `onChange` | `Function(String)?` | Text in the input field changes |
| `onError` | `OnError?` | An error occurs |
| `stateCallBack` | `Function(CometChatMessageComposerController)?` | Controller state callback for accessing controller functions |

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatMessageComposer(
      user: user,
      onSendButtonTap: (BuildContext context, BaseMessage baseMessage, PreviewMessageMode? previewMessageMode) {
        // Handle send button tap
      },
      onChange: (String? text) {
        // Handle text change
      },
      onError: (e) {
        // Handle error
      },
    )
    ```
  </Tab>
</Tabs>

## Custom View Slots

Customize the appearance of `CometChatMessageComposer` by replacing default views with your own widgets.

| Slot | Signature | Replaces |
| - | - | - |
| `auxiliaryButtonView` | `ComposerWidgetBuilder?` | Auxiliary button area (AI, stickers) |
| `secondaryButtonView` | `ComposerWidgetBuilder?` | Secondary button area (attachment, voice) |
| `sendButtonView` | `Widget?` | Send button |
| `headerView` | `ComposerWidgetBuilder?` | Header section above input |
| `footerView` | `ComposerWidgetBuilder?` | Footer section below input |
| `attachmentOptions` | `ComposerActionsBuilder?` | Attachment options list |

### Example: Custom Auxiliary Button View

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatMessageComposer(
      user: user,
      auxiliaryButtonView: (context, user, group, id) {
        final existingAuxiliaryOptions = CometChatUIKit.getDataSource()
            .getAuxiliaryOptions(user, group, context, id, Color(0xFFA1A1A1));
        return Row(
          children: [
            existingAuxiliaryOptions,
            Icon(
              Icons.location_pin,
              color: Color(0xFF6852D6),
            ),
          ],
        );
      },
    )
    ```
  </Tab>
</Tabs>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-llms-scoped-indexes/yGOD4hG5x8gw_zqp/images/760f4e78-message_composer_auxiliary_button_view-45b18989e80744e3575835a0ea1c94bc.png?fit=max&auto=format&n=yGOD4hG5x8gw_zqp&q=85&s=dfa54ee8728f3e83487575b931ba4d1a" width="2560" height="480" data-path="images/760f4e78-message_composer_auxiliary_button_view-45b18989e80744e3575835a0ea1c94bc.png" />
</Frame>

### Example: Custom Secondary Button View

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatMessageComposer(
      user: user,
      secondaryButtonView: (context, user, group, id) {
        return Icon(
          Icons.attach_file,
          color: Color(0xFF6852D6),
        );
      },
    )
    ```
  </Tab>
</Tabs>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-llms-scoped-indexes/egNZF-iXldTS9vDi/images/bfeef4fd-message_composer_secondary_button_view-2475998888cdeda382dcca63bd6e6fea.png?fit=max&auto=format&n=egNZF-iXldTS9vDi&q=85&s=55aa24cea7eaa6ee7b4c601bcfc3f0de" width="2560" height="480" data-path="images/bfeef4fd-message_composer_secondary_button_view-2475998888cdeda382dcca63bd6e6fea.png" />
</Frame>

### Example: Custom Send Button View

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatMessageComposer(
      user: user,
      sendButtonView: IconButton(
        onPressed: () {},
        padding: EdgeInsets.all(4),
        style: IconButton.styleFrom(
          alignment: Alignment.center,
          backgroundColor: Color(0xFFEDEAFA),
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(4),
          ),
        ),
        icon: Transform.rotate(
          angle: 150,
          child: Icon(
            Icons.send,
            size: 20,
            color: Color(0xFF6852D6),
          ),
        ),
      ),
    )
    ```
  </Tab>
</Tabs>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-llms-scoped-indexes/ZaDaKVdnqtokXiZK/images/a1443834-message_composer_send_button_view-e026ff73573367da69b1fdb6b762e659.png?fit=max&auto=format&n=ZaDaKVdnqtokXiZK&q=85&s=f2508b369c1aadc08104be0fab104bbb" width="2560" height="480" data-path="images/a1443834-message_composer_send_button_view-e026ff73573367da69b1fdb6b762e659.png" />
</Frame>

### Example: Custom Header View

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatMessageComposer(
      user: user,
      headerView: (context, user, group, id) {
        return Container(
          margin: EdgeInsets.only(bottom: 2, left: 8, right: 8),
          padding: EdgeInsets.all(8),
          decoration: BoxDecoration(
            color: Color(0xFFEDEAFA),
            borderRadius: BorderRadius.circular(8),
          ),
          child: Row(
            children: [
              Icon(Icons.volume_off, size: 20, color: Color(0xFF6852D6)),
              Text(
                "User has paused their notifications",
                style: TextStyle(fontSize: 14, fontWeight: FontWeight.w400),
              ),
            ],
          ),
        );
      },
    )
    ```
  </Tab>
</Tabs>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-llms-scoped-indexes/ZaDaKVdnqtokXiZK/images/aa511517-message_composer_header_view-51a25284f115f5033944db611a6ffb5c.png?fit=max&auto=format&n=ZaDaKVdnqtokXiZK&q=85&s=4492d98c4ca9b85ce31e141c2045aeb9" width="2560" height="480" data-path="images/aa511517-message_composer_header_view-51a25284f115f5033944db611a6ffb5c.png" />
</Frame>

### Example: Custom Footer View

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatMessageComposer(
      user: user,
      footerView: (context, user, group, id) {
        return Container(
          width: MediaQuery.of(context).size.width / 1.08,
          color: Colors.yellow,
          padding: const EdgeInsets.all(8),
          child: const Center(child: Text("Your Footer Widget")),
        );
      },
    )
    ```
  </Tab>
</Tabs>

<Tabs>
  <Tab title="Android">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-llms-scoped-indexes/qatN8AZO7PJYofUv/images/046c76af-message_composer_footer_view_cometchat_screens-5812a879cc6949aa04be485821255e0a.png?fit=max&auto=format&n=qatN8AZO7PJYofUv&q=85&s=3af5cd9611c4759e5cc79c9a3f0180dd" alt="Image" width="4498" height="3121" data-path="images/046c76af-message_composer_footer_view_cometchat_screens-5812a879cc6949aa04be485821255e0a.png" />
  </Tab>

  <Tab title="iOS">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-llms-scoped-indexes/KBUX2d7UNeNDowv9/images/e57c8a15-message_composer_footer_view_cometchat_screens-49ac543fd44c8879b857da46340db0fe.png?fit=max&auto=format&n=KBUX2d7UNeNDowv9&q=85&s=417207b7ed1d5e6c81f04d8c107ce582" alt="Image" width="4498" height="3121" data-path="images/e57c8a15-message_composer_footer_view_cometchat_screens-49ac543fd44c8879b857da46340db0fe.png" />
  </Tab>
</Tabs>

### Example: Custom Attachment Options

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatMessageComposer(
      user: user,
      attachmentOptions: (context, user, group, id) {
        return <CometChatMessageComposerAction>[
          CometChatMessageComposerAction(
            id: "Custom Option 1",
            title: "Custom Option 1",
            icon: Icon(Icons.play_circle, color: Colors.black),
          ),
          CometChatMessageComposerAction(
            id: "Custom Option 2",
            title: "Custom Option 2",
            icon: Icon(Icons.add_box, color: Colors.black),
          ),
        ];
      },
    )
    ```
  </Tab>
</Tabs>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-llms-scoped-indexes/KBUX2d7UNeNDowv9/images/eea29772-message_composer_attachment_options-ab5eae6da0f195703f49ba9ec8530478.png?fit=max&auto=format&n=KBUX2d7UNeNDowv9&q=85&s=122ba49a63d160c1e7d17fa457b6da5c" width="2560" height="1870" data-path="images/eea29772-message_composer_attachment_options-ab5eae6da0f195703f49ba9ec8530478.png" />
</Frame>

## Styling

Customize the appearance of `CometChatMessageComposer` using `CometChatMessageComposerStyle`.

### Style Properties

| Property | Type | Description |
| - | - | - |
| `backgroundColor` | `Color?` | Background color of the message composer |
| `border` | `BoxBorder?` | Border of the message composer |
| `borderRadius` | `BorderRadiusGeometry?` | Border radius of the message composer |
| `closeIconTint` | `Color?` | Color for the close icon |
| `dividerColor` | `Color?` | Color of the divider |
| `dividerHeight` | `double?` | Height of the divider |
| `sendButtonIconColor` | `Color?` | Color of the send button icon |
| `sendButtonIconBackgroundColor` | `Color?` | Background color of the send button |
| `sendButtonBorderRadius` | `BorderRadiusGeometry?` | Border radius of the send button |
| `secondaryButtonIconColor` | `Color?` | Color of the secondary button icon |
| `secondaryButtonIconBackgroundColor` | `Color?` | Background color of the secondary button |
| `secondaryButtonBorderRadius` | `BorderRadiusGeometry?` | Border radius of the secondary button |
| `auxiliaryButtonIconColor` | `Color?` | Color of the auxiliary button icon |
| `auxiliaryButtonIconBackgroundColor` | `Color?` | Background color of the auxiliary button |
| `auxiliaryButtonBorderRadius` | `BorderRadiusGeometry?` | Border radius of the auxiliary button |
| `textStyle` | `TextStyle?` | Style of the text |
| `textColor` | `Color?` | Color of the text |
| `placeHolderTextStyle` | `TextStyle?` | Style of the placeholder text |
| `placeHolderTextColor` | `Color?` | Color of the placeholder text |
| `filledColor` | `Color?` | Background color of the text input |
| `mentionsStyle` | `CometChatMentionsStyle?` | Style for mentions |
| `mediaRecorderStyle` | `CometChatMediaRecorderStyle?` | Style for media recorder |
| `aiOptionStyle` | `AIOptionsStyle?` | Style for AI options |
| `aiOptionSheetStyle` | `CometChatAiOptionSheetStyle?` | Style for AI option sheet |
| `attachmentOptionSheetStyle` | `CometChatAttachmentOptionSheetStyle?` | Style for attachment option sheet |
| `suggestionListStyle` | `CometChatSuggestionListStyle?` | Style for suggestion list |
| `messagePreviewStyle` | `CometChatMessagePreviewStyle?` | Style for message preview |

### Example: Custom Styling

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatMessageComposer(
      user: user,
      messageComposerStyle: CometChatMessageComposerStyle(
        sendButtonIconBackgroundColor: Color(0xFFF76808),
        secondaryButtonIconColor: Color(0xFFF76808),
        auxiliaryButtonIconColor: Color(0xFFF76808),
      ),
    )
    ```
  </Tab>
</Tabs>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-llms-scoped-indexes/qatN8AZO7PJYofUv/images/043969b6-message_composer_styling-7a7256fcf47f1835a442e450f03503fe.png?fit=max&auto=format&n=qatN8AZO7PJYofUv&q=85&s=96c57630632dd489e4b722f8a4be489f" width="2560" height="464" data-path="images/043969b6-message_composer_styling-7a7256fcf47f1835a442e450f03503fe.png" />
</Frame>

### Example: Custom Media Recorder Style

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatMessageComposer(
      user: user,
      messageComposerStyle: CometChatMessageComposerStyle(
        mediaRecorderStyle: CometChatMediaRecorderStyle(
          recordIndicatorBackgroundColor: Color(0xFFF44649),
          recordIndicatorBorderRadius: BorderRadius.circular(20),
          pauseButtonBorderRadius: BorderRadius.circular(8),
          deleteButtonBorderRadius: BorderRadius.circular(8),
          stopButtonBorderRadius: BorderRadius.circular(8),
        ),
      ),
    )
    ```
  </Tab>
</Tabs>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-llms-scoped-indexes/LJKChk9TClDdlDNo/images/49938d8d-media_recorder_styling-fa79c9f0c778829f84dc3f69ed3a96a7.png?fit=max&auto=format&n=LJKChk9TClDdlDNo&q=85&s=20f654ebfe3777cca924b914ced2e046" width="2560" height="1680" data-path="images/49938d8d-media_recorder_styling-fa79c9f0c778829f84dc3f69ed3a96a7.png" />
</Frame>

### Example: Custom AI Options Style

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatMessageComposer(
      user: user,
      messageComposerStyle: CometChatMessageComposerStyle(
        aiOptionStyle: AIOptionsStyle(
          backgroundColor: Color(0xFFE4EBF5),
          border: Border.all(width: 3, color: Colors.red),
        ),
      ),
    )
    ```
  </Tab>
</Tabs>

## Advanced

### Text Formatters

Assigns the list of text formatters. To configure the existing Mentions look and feel check out [CometChatMentionsFormatter](/ui-kit/flutter/v5/mentions-formatter-guide).

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatMessageComposer(
      user: user,
      textFormatters: [
        CometChatMentionsFormatter(
          style: CometChatMentionsStyle(
            mentionSelfTextBackgroundColor: Color(0xFFF76808),
            mentionTextBackgroundColor: Colors.white,
            mentionTextColor: Colors.black,
            mentionSelfTextColor: Colors.white,
          ),
        ),
      ],
    )
    ```
  </Tab>
</Tabs>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-llms-scoped-indexes/yGOD4hG5x8gw_zqp/images/74b20b0e-mentions_styling-8e36e26282f4facd7920dc23ca98b832.png?fit=max&auto=format&n=yGOD4hG5x8gw_zqp&q=85&s=2ee797073cfecf7bd95b838345a3d6fc" width="2560" height="1680" data-path="images/74b20b0e-mentions_styling-8e36e26282f4facd7920dc23ca98b832.png" />
</Frame>

## Props Reference

| Prop | Type | Default | Description |
| - | - | - | - |
| `user` | `User?` | `null` | User object for the message composer |
| `group` | `Group?` | `null` | Group object for the message composer |
| `messageComposerStyle` | `CometChatMessageComposerStyle?` | - | Sets style for the message composer |
| `placeholderText` | `String?` | - | Hint text for the input field |
| `text` | `String?` | - | Initial text for the input field |
| `onChange` | `Function(String)?` | - | Callback triggered when text changes |
| `textEditingController` | `TextEditingController?` | - | Controls the state of the text field |
| `maxLine` | `int?` | - | Maximum number of lines allowed |
| `disableMentions` | `bool?` | `null` | Disables mentions in the composer |
| `disableTypingEvents` | `bool` | `false` | Disables typing events |
| `disableSoundForMessages` | `bool` | `false` | Disables sound for sent messages |
| `customSoundForMessage` | `String?` | - | URL for custom sound |
| `customSoundForMessagePackage` | `String?` | - | Package name for custom sound asset |
| `parentMessageId` | `int` | `0` | ID of the parent message |
| `padding` | `EdgeInsetsGeometry?` | - | Sets padding for the message composer |
| `messageInputPadding` | `EdgeInsetsGeometry?` | - | Sets padding for the message input field |
| `sendButtonView` | `Widget?` | - | Custom send button widget |
| `attachmentIcon` | `Widget?` | - | Custom attachment icon |
| `attachmentIconURL` | `String?` | - | Path of the icon to show in the attachments button |
| `voiceRecordingIcon` | `Widget?` | - | Custom voice recording icon |
| `aiIcon` | `Widget?` | - | Custom AI button icon |
| `aiIconURL` | `String?` | - | Path of the icon to show in the AI button |
| `aiIconPackageName` | `String?` | - | Package name for AI icon asset |
| `auxiliaryButtonView` | `ComposerWidgetBuilder?` | - | UI component for auxiliary button |
| `secondaryButtonView` | `ComposerWidgetBuilder?` | - | UI component for secondary button |
| `auxiliaryButtonsAlignment` | `AuxiliaryButtonsAlignment?` | - | Controls position of auxiliary button view |
| `hideVoiceRecordingButton` | `bool?` | `null` | Hide/display voice recording button |
| `attachmentOptions` | `ComposerActionsBuilder?` | - | Provides options for file attachments |
| `hideAttachmentButton` | `bool?` | `null` | Hide/display attachment button |
| `hideImageAttachmentOption` | `bool?` | `null` | Hide/display image attachment option |
| `hideVideoAttachmentOption` | `bool?` | `null` | Hide/display video attachment option |
| `hideAudioAttachmentOption` | `bool?` | `null` | Hide/display audio attachment option |
| `hideFileAttachmentOption` | `bool?` | `null` | Hide/display file attachment option |
| `hidePollsOption` | `bool?` | `null` | Hide/display polls option |
| `hideCollaborativeDocumentOption` | `bool?` | `null` | Hide/display collaborative document option |
| `hideCollaborativeWhiteboardOption` | `bool?` | `null` | Hide/display collaborative whiteboard option |
| `hideTakePhotoOption` | `bool?` | `null` | Hide/display take photo option |
| `onSendButtonTap` | `Function(...)?` | - | Callback when send button is tapped |
| `onError` | `OnError?` | - | Callback to handle errors |
| `hideSendButton` | `bool?` | `null` | Hide/display the send button |
| `hideStickersButton` | `bool?` | `null` | Hide/display the sticker button |
| `sendButtonIcon` | `Widget?` | - | Custom send button icon |
| `recorderStartButtonIcon` | `Widget?` | - | Custom icon for media recorder start button |
| `recorderPauseButtonIcon` | `Widget?` | - | Custom icon for media recorder pause button |
| `recorderDeleteButtonIcon` | `Widget?` | - | Custom icon for media recorder delete button |
| `recorderStopButtonIcon` | `Widget?` | - | Custom icon for media recorder stop button |
| `recorderSendButtonIcon` | `Widget?` | - | Custom icon for media recorder send button |
| `disableMentionAll` | `bool` | `false` | Disables @all mentions in groups |
| `mentionAllLabel` | `String?` | - | Custom label for group mentions |
| `mentionAllLabelId` | `String?` | - | Custom label ID for group mentions |
| `headerView` | `ComposerWidgetBuilder?` | - | Custom header view |
| `footerView` | `ComposerWidgetBuilder?` | - | Custom footer view |
| `textFormatters` | `List<CometChatTextFormatter>?` | - | List of text formatters |
| `stateCallBack` | `Function(CometChatMessageComposerController)?` | - | Callback to access controller functions |

<CardGroup cols={2}>
  <Card title="Message Header" icon="user" href="/ui-kit/flutter/v5/message-header">
    Display user or group details in the header
  </Card>

  <Card title="Message List" icon="list" href="/ui-kit/flutter/v5/message-list">
    Display messages in a conversation
  </Card>

  <Card title="Mentions Formatter" icon="at" href="/ui-kit/flutter/v5/mentions-formatter-guide">
    Configure mentions look and feel
  </Card>

  <Card title="Theming" icon="palette" href="/ui-kit/flutter/v5/theme-introduction">
    Learn how to customize the look and feel
  </Card>
</CardGroup>


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