> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Message Composer

## Overview

`CometChatMessageComposer` is a [Widget](/ui-kit/flutter/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-feature-react-native-sdk-quotedmessage-a/1gtOmNl1ryouxO5Y/images/8becc772-message_composer-0cc03defaf535f332f7f8bb1ebd65392.png?fit=max&auto=format&n=1gtOmNl1ryouxO5Y&q=85&s=ee9e715ad3108aa8dbf6aa2f69dcd59f" width="2560" height="464" data-path="images/8becc772-message_composer-0cc03defaf535f332f7f8bb1ebd65392.png" />
</Frame>

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

| Base Widgets                                  | Description                                                                                                         |
| --------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- |
| [MessageInput](/ui-kit/flutter/message-input) | This provides a basic layout for the contents of this component, such as the TextField and buttons                  |
| [ActionSheet](/ui-kit/flutter/action-sheet)   | The ActionSheet widget presents a list of options in either a list or grid mode, depending on the user's preference |

## Usage

### Integration

You can launch `CometChatMessageComposer` directly using `Navigator.push`, or you can define it as a widget within the `build` method of your `State` class.

##### 1. Using Navigator to Launch `CometChatMessageComposer`

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    Navigator.push(context, MaterialPageRoute(builder: (context) => CometChatMessageComposer())); // A user or group object is required to launch this widget.
    ```
  </Tab>
</Tabs>

##### 2. Embedding `CometChatMessageComposer` as a Widget in the build Method

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

    class MessageComposer extends StatefulWidget {
      const MessageComposer({super.key});

      @override
      State<MessageComposer> createState() => _MessageComposerState();
    }

    class _MessageComposerState extends State<MessageComposer> {

      @override
      Widget build(BuildContext context) {
        return Scaffold(
            body: SafeArea(
                child: Column(
                  children: [
                    const Spacer(),
                    CometChatMessageComposer()
                  ],
                ) // A user or group object is required to launch this widget.
            )
        );
      }
    }
    ```
  </Tab>
</Tabs>

***

### Actions

[Actions](/ui-kit/flutter/components-overview#actions) dictate how a widget functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the widget to fit your specific needs.

##### 1. OnSendButtonClick

The `OnSendButtonClick` event gets activated when the send message button is clicked. It has a predefined function of sending messages entered in the composer `EditText`. However, you can overide this action with the following code snippet.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatMessageComposer(
      user: user,
      onSendButtonTap: (BuildContext context, BaseMessage baseMessage, PreviewMessageMode? previewMessageMode) {
        // TODO("Not yet implemented")
      },
    )
    ```
  </Tab>
</Tabs>

***

##### 2. onChange

This action handles changes in the value of text in the input field of the CometChatMessageComposer widget.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatMessageComposer(
      user: user,
      onChange: (String? text) {
        // TODO("Not yet implemented")
      },
    )
    ```
  </Tab>
</Tabs>

***

##### 3. onError

This action doesn't change the behavior of the widget but rather listens for any errors that occur in the MessageList widget.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatMessageComposer(
      user: user,
      onError: (e) {
        // TODO("Not yet implemented")
      },
    )
    ```
  </Tab>
</Tabs>

***

### Filters

`CometChatMessageComposer` widget does not have any available filters.

***

### Events

[Events](/ui-kit/flutter/components-overview#events) are emitted by a `Widget`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed.

The `CometChatMessageComposer` Widget does not emit any events of its own.

***

## Customization

To fit your app's design requirements, you can customize the appearance of the `CometChatMessageComposer` widget. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs.

### Style

Using Style you can customize the look and feel of the widget in your app, These parameters typically control elements such as the color, size, shape, and fonts used within the widget.

##### 1. CometChatMessageComposerStyle

To modify the styling, you can apply the `CometChatMessageComposerStyle` to the `CometChatMessageComposer` Widget using the `messageComposerStyle` property.

<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-feature-react-native-sdk-quotedmessage-a/rr55t_hLoswcBCG0/images/043969b6-message_composer_styling-7a7256fcf47f1835a442e450f03503fe.png?fit=max&auto=format&n=rr55t_hLoswcBCG0&q=85&s=ea4392fea30239ac26b9b78f95f5b578" width="2560" height="464" data-path="images/043969b6-message_composer_styling-7a7256fcf47f1835a442e450f03503fe.png" />
</Frame>

##### 2. MediaRecorder Style

To customize the styles of the MediaRecorder widget within the `CometChatMessageComposer` Widget, use the `mediaRecorderStyle` property. For more details, please refer to [MediaRecorder](/ui-kit/flutter/component-styling#media-recorder) styles.

<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-feature-react-native-sdk-quotedmessage-a/rwhg7oJFLB4eAI7-/images/49938d8d-media_recorder_styling-fa79c9f0c778829f84dc3f69ed3a96a7.png?fit=max&auto=format&n=rwhg7oJFLB4eAI7-&q=85&s=8e5fdd0296a8b888fb511c82be5d5ebb" width="2560" height="1680" data-path="images/49938d8d-media_recorder_styling-fa79c9f0c778829f84dc3f69ed3a96a7.png" />
</Frame>

***

##### 3. AI Options Style

To customize the styles of the AI Options widget within the `CometChatMessageComposer` Widget, use the `aiOptionStyle`.

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

***

### Functionality

These are a set of small functional customizations that allow you to fine-tune the overall experience of the widget. With these, you can change text, set custom icons, and toggle the visibility of UI elements.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/1gtOmNl1ryouxO5Y/images/8becc772-message_composer-0cc03defaf535f332f7f8bb1ebd65392.png?fit=max&auto=format&n=1gtOmNl1ryouxO5Y&q=85&s=ee9e715ad3108aa8dbf6aa2f69dcd59f" width="2560" height="464" data-path="images/8becc772-message_composer-0cc03defaf535f332f7f8bb1ebd65392.png" />
</Frame>

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatMessageComposer(
      user: user,
      placeholderText: "Type a message...",
      disableMentions: true,
    )
    ```
  </Tab>
</Tabs>

Below is a list of customizations along with corresponding code snippets

## Message Composer Properties

| Property                            | Data Type                                                   | Description                                                  |
| ----------------------------------- | ----------------------------------------------------------- | ------------------------------------------------------------ |
| `user`                              | `User?`                                                     | Sets user for the message composer.                          |
| `group`                             | `Group?`                                                    | Sets group 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 text)?`                                    | Callback triggered when text changes.                        |
| `textEditingController`             | `TextEditingController?`                                    | Controls the state of the text field.                        |
| `maxLine`                           | `int?`                                                      | Maximum number of lines allowed in the input field.          |
| `disableMentions`                   | `bool?`                                                     | Disables mentions in the composer.                           |
| `disableTypingEvents`               | `bool`                                                      | Disables typing events.                                      |
| `disableSoundForMessages`           | `bool`                                                      | Disables sound for sent messages.                            |
| `customSoundForMessage`             | `String?`                                                   | URL for custom sound when a message is sent.                 |
| `customSoundForMessagePackage`      | `String?`                                                   | Package name for the custom sound.                           |
| `parentMessageId`                   | `int`                                                       | ID of the parent message (default is 0).                     |
| `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?`                                                   | URL of the attachment icon.                                  |
| `voiceRecordingIcon`                | `Widget?`                                                   | Custom voice recording icon.                                 |
| `aiIcon`                            | `Widget?`                                                   | Custom AI button icon.                                       |
| `aiIconURL`                         | `String?`                                                   | URL for the AI button icon.                                  |
| `aiIconPackageName`                 | `String?`                                                   | Package name for the AI icon.                                |
| `auxiliaryButtonView`               | `ComposerWidgetBuilder?`                                    | UI component forwarded to message input as auxiliary button. |
| `secondaryButtonView`               | `ComposerWidgetBuilder?`                                    | UI component forwarded to message input as secondary button. |
| `auxiliaryButtonsAlignment`         | `AuxiliaryButtonsAlignment?`                                | Controls position of auxiliary button view.                  |
| `hideVoiceRecordingButton`          | `bool?`                                                     | Option to hide the voice recording button.                   |
| `recorderStartButtonIcon`           | `Widget?`                                                   | Custom start button icon for the recorder.                   |
| `recorderPauseButtonIcon`           | `Widget?`                                                   | Custom pause button icon for the recorder.                   |
| `recorderDeleteButtonIcon`          | `Widget?`                                                   | Custom delete button icon for the recorder.                  |
| `recorderStopButtonIcon`            | `Widget?`                                                   | Custom stop button icon for the recorder.                    |
| `recorderSendButtonIcon`            | `Widget?`                                                   | Custom send button icon for the recorder.                    |
| `attachmentOptions`                 | `ComposerActionsBuilder?`                                   | Provides options for file attachments.                       |
| `hideAttachmentButton`              | `bool?`                                                     | Hide/display attachment button.                              |
| `hideImageAttachmentOption`         | `bool?`                                                     | Hide/display image attachment option.                        |
| `hideVideoAttachmentOption`         | `bool?`                                                     | Hide/display video attachment option.                        |
| `hideAudioAttachmentOption`         | `bool?`                                                     | Hide/display audio attachment option.                        |
| `hideFileAttachmentOption`          | `bool?`                                                     | Hide/display file attachment option.                         |
| `hidePollsOption`                   | `bool?`                                                     | Hide/display polls option.                                   |
| `hideCollaborativeDocumentOption`   | `bool?`                                                     | Hide/display collaborative document option.                  |
| `hideCollaborativeWhiteboardOption` | `bool?`                                                     | Hide/display collaborative whiteboard option.                |
| `hideTakePhotoOption`               | `bool?`                                                     | Hide/display take photo option.                              |
| `onSendButtonTap`                   | `Function(BuildContext, BaseMessage, PreviewMessageMode?)?` | Callback triggered when the send button is tapped.           |
| `onError`                           | `OnError?`                                                  | Callback to handle errors.                                   |
| `stateCallBack`                     | `Function(CometChatMessageComposerController controller)?`  | Callback to manage state of the message composer.            |
| `hideSendButton`                    | `bool?`                                                     | Hide/display the send button.                                |
| `hideStickersButton`                | `bool?`                                                     | Hide/display the sticker button.                             |
| `sendButtonIcon`                    | `Widget?`                                                   | Custom send button icon.                                     |

***

### Advanced

For advanced-level customization, you can set custom widgets to the widget. This lets you tailor each aspect of the widget to fit your exact needs and application aesthetics. You can create and define your widgets and then incorporate those into the widget.

***

#### TextFormatters

Assigns the list of text formatters. If the provided list is not null, it sets the list. Otherwise, it assigns the default text formatters retrieved from the data source. To configure the existing Mentions look and feel check out [CometChatMentionsFormatter](/ui-kit/flutter/mentions-formatter-guide)

**Example**

Here is the complete example for reference:

<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-feature-react-native-sdk-quotedmessage-a/IROXeajQRcMWx2uk/images/74b20b0e-mentions_styling-8e36e26282f4facd7920dc23ca98b832.png?fit=max&auto=format&n=IROXeajQRcMWx2uk&q=85&s=d9f354603fa1ec3856796d4bca05112b" width="2560" height="1680" data-path="images/74b20b0e-mentions_styling-8e36e26282f4facd7920dc23ca98b832.png" />
</Frame>

***

#### AttachmentOptions

By using `attachmentOptions`, you can set a list of custom `MessageComposerActions` for the `CometChatMessageComposer` Widget. This will override the existing list of `MessageComposerActions`.

**Example**

Here is the complete example for reference:

<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,
                      ),
                  ),
                CometChatMessageComposerAction(
                      id: "Custom Option 3",
                      title: "Custom Option 3",
                      icon: Icon(
                        Icons.change_circle,
                        color: Colors.black,
                      ),
                  ),
                CometChatMessageComposerAction(
                      id: "Custom Option 4",
                      title: "Custom Option 4",
                      icon: Icon(
                        Icons.sunny,
                        color: Colors.black,
                      ),
                 )
              ];
          },
    )
    ```
  </Tab>
</Tabs>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/8EmfxiO8VFkbp4xi/images/eea29772-message_composer_attachment_options-ab5eae6da0f195703f49ba9ec8530478.png?fit=max&auto=format&n=8EmfxiO8VFkbp4xi&q=85&s=8dc9f5cdee9087664f534ae15e04fad9" width="2560" height="1870" data-path="images/eea29772-message_composer_attachment_options-ab5eae6da0f195703f49ba9ec8530478.png" />
</Frame>

***

#### AuxiliaryButton Widget

You can insert a custom widget into the `CometChatMessageComposer` widget to add additional functionality using the `auxiliaryButtonView` property.

**Example**

Here is the complete example for reference:

<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-feature-react-native-sdk-quotedmessage-a/why4qwLRU92tDIid/images/760f4e78-message_composer_auxiliary_button_view-45b18989e80744e3575835a0ea1c94bc.png?fit=max&auto=format&n=why4qwLRU92tDIid&q=85&s=df89345ad29ef47f8ef33627ccb8f056" width="2560" height="480" data-path="images/760f4e78-message_composer_auxiliary_button_view-45b18989e80744e3575835a0ea1c94bc.png" />
</Frame>

***

#### SecondaryButton Widget

You can add a custom widget into the SecondaryButton widget for additional functionality using the `secondaryButtonView` property.

**Example**

Here is the complete example for reference:

<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-feature-react-native-sdk-quotedmessage-a/c-F07JuWM49qOkUs/images/bfeef4fd-message_composer_secondary_button_view-2475998888cdeda382dcca63bd6e6fea.png?fit=max&auto=format&n=c-F07JuWM49qOkUs&q=85&s=e6839bd2841e60db447277e59d6de59b" width="2560" height="480" data-path="images/bfeef4fd-message_composer_secondary_button_view-2475998888cdeda382dcca63bd6e6fea.png" />
</Frame>

***

#### SendButton Widget

You can set a custom widget in place of the already existing send button widget. Using the `sendButtonView` property.

**Example**

Here is the complete example for reference:

<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-feature-react-native-sdk-quotedmessage-a/6TXEIAn9Prx7161h/images/a1443834-message_composer_send_button_view-e026ff73573367da69b1fdb6b762e659.png?fit=max&auto=format&n=6TXEIAn9Prx7161h&q=85&s=588a0e220d31a7448c8d949389d146fc" width="2560" height="480" data-path="images/a1443834-message_composer_send_button_view-e026ff73573367da69b1fdb6b762e659.png" />
</Frame>

***

#### Header Widget

You can set custom headerView to the `CometChatMessageComposer` widget using the `headerView` property

**Example**

Here is the complete example for reference:

<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-feature-react-native-sdk-quotedmessage-a/yj8hatI1RYHMwVPT/images/aa511517-message_composer_header_view-51a25284f115f5033944db611a6ffb5c.png?fit=max&auto=format&n=yj8hatI1RYHMwVPT&q=85&s=6d290f08a9ede830183d4ae4e421ada2" width="2560" height="480" data-path="images/aa511517-message_composer_header_view-51a25284f115f5033944db611a6ffb5c.png" />
</Frame>

***

#### Footer Widget

You can set a custom footer widget to the `CometChatMessageComposer` widget using the `footerView` property:

**Example**

Here is the complete example for reference:

<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-feature-react-native-sdk-quotedmessage-a/rr55t_hLoswcBCG0/images/046c76af-message_composer_footer_view_cometchat_screens-5812a879cc6949aa04be485821255e0a.png?fit=max&auto=format&n=rr55t_hLoswcBCG0&q=85&s=41db0d147efc35ac49f8ec891251a833" 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-feature-react-native-sdk-quotedmessage-a/yDKVamMkf61gj3YR/images/e57c8a15-message_composer_footer_view_cometchat_screens-49ac543fd44c8879b857da46340db0fe.png?fit=max&auto=format&n=yDKVamMkf61gj3YR&q=85&s=761656ea27c33a3a25c77be68c404324" alt="Image" width="4498" height="3121" data-path="images/e57c8a15-message_composer_footer_view_cometchat_screens-49ac543fd44c8879b857da46340db0fe.png" />
  </Tab>
</Tabs>

***