> ## 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 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-rn-guide-message-privately/ubfBSdV1t6rmjxeA/images/8becc772-message_composer-0cc03defaf535f332f7f8bb1ebd65392.png?fit=max&auto=format&n=ubfBSdV1t6rmjxeA&q=85&s=63ac0e879493e89c1e9c1f3cf64762da" 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-rn-guide-message-privately/3EDM5JvI4mnAULac/images/760f4e78-message_composer_auxiliary_button_view-45b18989e80744e3575835a0ea1c94bc.png?fit=max&auto=format&n=3EDM5JvI4mnAULac&q=85&s=3a429e92a3a863f4d80cc4eab1133eab" 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-rn-guide-message-privately/FGBCGWXGo5d9bVxR/images/bfeef4fd-message_composer_secondary_button_view-2475998888cdeda382dcca63bd6e6fea.png?fit=max&auto=format&n=FGBCGWXGo5d9bVxR&q=85&s=df907b0870c25c22864bc02bf3055e40" 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-rn-guide-message-privately/JSRiWiPGBHsJZFCg/images/a1443834-message_composer_send_button_view-e026ff73573367da69b1fdb6b762e659.png?fit=max&auto=format&n=JSRiWiPGBHsJZFCg&q=85&s=5525f1c13933840a512dc0eb9e863985" 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-rn-guide-message-privately/jpEUuHUk-hvu4tQT/images/aa511517-message_composer_header_view-51a25284f115f5033944db611a6ffb5c.png?fit=max&auto=format&n=jpEUuHUk-hvu4tQT&q=85&s=226ff8214a801026c7f8f77425c997e4" 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-rn-guide-message-privately/7a4hqm7gLVRmX34O/images/046c76af-message_composer_footer_view_cometchat_screens-5812a879cc6949aa04be485821255e0a.png?fit=max&auto=format&n=7a4hqm7gLVRmX34O&q=85&s=f9eac380af4f310b02909f98a30b7aa2" 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-rn-guide-message-privately/ugckbRl5Q-H7t8X2/images/e57c8a15-message_composer_footer_view_cometchat_screens-49ac543fd44c8879b857da46340db0fe.png?fit=max&auto=format&n=ugckbRl5Q-H7t8X2&q=85&s=13c6453b14a0e84bd252e8e0dc11b0cd" 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-rn-guide-message-privately/2SVOPiSpm0QEqRoz/images/eea29772-message_composer_attachment_options-ab5eae6da0f195703f49ba9ec8530478.png?fit=max&auto=format&n=2SVOPiSpm0QEqRoz&q=85&s=dded90329bbb5650455574c4b0c2165a" 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-rn-guide-message-privately/7a4hqm7gLVRmX34O/images/043969b6-message_composer_styling-7a7256fcf47f1835a442e450f03503fe.png?fit=max&auto=format&n=7a4hqm7gLVRmX34O&q=85&s=6a7c1a7845fb2eca3370e1a8ff4e697f" 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-rn-guide-message-privately/_MYSdWhXnUkTkjEH/images/49938d8d-media_recorder_styling-fa79c9f0c778829f84dc3f69ed3a96a7.png?fit=max&auto=format&n=_MYSdWhXnUkTkjEH&q=85&s=fec37c3ba8db5ecbc7c741ffc1c695be" 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-rn-guide-message-privately/3EDM5JvI4mnAULac/images/74b20b0e-mentions_styling-8e36e26282f4facd7920dc23ca98b832.png?fit=max&auto=format&n=3EDM5JvI4mnAULac&q=85&s=6a69c1f7c114bdba127dc912e0936aca" 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>