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

# Compact Message Composer

> A streamlined, pill-shaped message composer with inline rich text formatting, voice recording, and attachment support

<Accordion title="AI Agent Component Spec">
  ```json theme={null}
  {
    "component": "CometChatCompactMessageComposer",
    "package": "cometchat_chat_uikit",
    "import": "import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';",
    "description": "A compact, pill-shaped message composer that provides a streamlined messaging experience with inline rich text formatting toolbar, voice recording, attachments, mentions, and auxiliary actions. Designed for a modern, minimal aesthetic while maintaining full messaging functionality.",
    "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?",
        "onToolbarVisibilityChange": "void Function(bool isVisible)?",
        "onMentionLimitReached": "void Function(int limit)?",
        "onEditCancel": "void Function()?"
      },
      "visibility": {
        "hideVoiceRecordingButton": { "type": "bool", "default": false },
        "hideSendButton": { "type": "bool", "default": false },
        "hideAttachmentButton": { "type": "bool", "default": false },
        "hideStickersButton": { "type": "bool", "default": false },
        "disableMentions": { "type": "bool", "default": false },
        "disableTypingEvents": { "type": "bool", "default": false }
      },
      "richText": {
        "enableRichTextFormatting": { "type": "bool", "default": true },
        "showRichTextFormattingOptions": { "type": "bool", "default": true },
        "showTextSelectionMenuItems": { "type": "bool", "default": true },
        "hideRichTextFormattingOptions": { "type": "Set<FormatType>?", "default": null }
      },
      "sound": {
        "disableSoundForMessages": { "type": "bool", "default": false },
        "customSoundForMessage": { "type": "String?", "default": null }
      },
      "viewSlots": {
        "auxiliaryButtonView": "ComposerWidgetBuilder?",
        "headerView": "ComposerWidgetBuilder?",
        "footerView": "ComposerWidgetBuilder?"
      },
      "formatting": {
        "placeholderText": { "type": "String?", "default": null },
        "maxLine": { "type": "int", "default": 4 },
        "enterKeyBehavior": { "type": "EnterKeyBehavior", "default": "EnterKeyBehavior.newLine" }
      }
    },
    "events": [],
    "sdkListeners": [],
    "compositionExample": {
      "description": "CometChatCompactMessageComposer 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": {
      "CometChatCompactMessageComposerStyle": {
        "backgroundColor": "Color?",
        "border": "BoxBorder?",
        "borderRadius": "BorderRadiusGeometry?",
        "composeBoxBackgroundColor": "Color?",
        "composeBoxBorderRadius": "BorderRadiusGeometry?",
        "composeBoxBorder": "BoxBorder?",
        "sendButtonIconColor": "Color?",
        "sendButtonBackgroundColor": "Color?",
        "textStyle": "TextStyle?",
        "placeholderTextStyle": "TextStyle?"
      }
    }
  }
  ```
</Accordion>

## Where It Fits

`CometChatCompactMessageComposer` is a [Widget](/ui-kit/flutter/v5/components-overview#components) that provides a streamlined, modern messaging input experience. It features a pill-shaped compose box with an inline rich text formatting toolbar, voice recording, attachments, mentions, and auxiliary actions like stickers.

Compared to `CometChatMessageComposer`, the compact variant offers:

* A rounded, pill-shaped input field
* An inline rich text formatting toolbar displayed below the input
* Configurable Enter key behavior (send message or new line)
* Text selection context menu with formatting options
* Inline audio recorder that replaces the compose box during recording

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-llms-scoped-indexes/zZz-wQk_4Cpgg3y_/images/android-compact-composer.png?fit=max&auto=format&n=zZz-wQk_4Cpgg3y_&q=85&s=715f88a32ee1d975b1fadb6de4fb4c16" width="840" height="152" data-path="images/android-compact-composer.png" />
</Frame>

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

    // CometChatCompactMessageComposer 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)),
              CometChatCompactMessageComposer(user: user),
            ],
          ),
        );
      }
    }
    ```
  </Tab>
</Tabs>

## Minimal Render

The simplest way to render `CometChatCompactMessageComposer`:

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

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

    // For a group conversation
    CometChatCompactMessageComposer(
      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 |
| `onToolbarVisibilityChange` | `void Function(bool isVisible)?` | Rich text toolbar visibility changes |
| `onMentionLimitReached` | `void Function(int limit)?` | Mention limit is exceeded |
| `onEditCancel` | `void Function()?` | Edit mode is cancelled |
| `stateCallBack` | `Function(CometChatCompactMessageComposerController)?` | Controller state callback for accessing controller functions |

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatCompactMessageComposer(
      user: user,
      onSendButtonTap: (BuildContext context, BaseMessage baseMessage, PreviewMessageMode? previewMessageMode) {
        // Handle send button tap
      },
      onChange: (String text) {
        // Handle text change
      },
      onError: (e) {
        // Handle error
      },
      onToolbarVisibilityChange: (bool isVisible) {
        // Handle toolbar visibility change
      },
      onMentionLimitReached: (int limit) {
        // Handle mention limit reached
      },
      onEditCancel: () {
        // Handle edit cancel
      },
    )
    ```
  </Tab>
</Tabs>

## Rich Text Formatting

`CometChatCompactMessageComposer` includes built-in rich text formatting support with an inline toolbar displayed below the input field.

### Configuration

| Prop | Type | Default | Description |
| - | - | - | - |
| `enableRichTextFormatting` | `bool` | `true` | Master switch for rich text formatting. When false, toolbar and text selection menu items are disabled |
| `showRichTextFormattingOptions` | `bool` | `true` | Controls whether the rich text toolbar is visible above the composer. Only works when `enableRichTextFormatting` is true |
| `showTextSelectionMenuItems` | `bool` | `true` | Controls whether formatting options appear in the text selection context menu. Only works when `enableRichTextFormatting` is true |
| `hideRichTextFormattingOptions` | `Set<FormatType>?` | `null` | Specifies which format types to hide from the rich text toolbar |
| `richTextToolbarStyle` | `CometChatRichTextToolbarStyle?` | - | Custom styling for the rich text toolbar |

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    // Enable rich text with all options
    CometChatCompactMessageComposer(
      user: user,
      enableRichTextFormatting: true,
      showRichTextFormattingOptions: true,
      showTextSelectionMenuItems: true,
    )

    // Hide specific formatting options from the toolbar
    CometChatCompactMessageComposer(
      user: user,
      hideRichTextFormattingOptions: {
        FormatType.strikethrough,
        FormatType.codeBlock,
      },
    )

    // Disable rich text formatting entirely
    CometChatCompactMessageComposer(
      user: user,
      enableRichTextFormatting: false,
    )
    ```
  </Tab>
</Tabs>

## Enter Key Behavior

Configure what happens when the Enter key is pressed using the `enterKeyBehavior` prop.

| Value | Behavior |
| - | - |
| `EnterKeyBehavior.newLine` | Inserts a new line (default) |
| `EnterKeyBehavior.sendMessage` | Sends the message immediately |

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    // Send message on Enter
    CometChatCompactMessageComposer(
      user: user,
      enterKeyBehavior: EnterKeyBehavior.sendMessage,
    )

    // New line on Enter (default)
    CometChatCompactMessageComposer(
      user: user,
      enterKeyBehavior: EnterKeyBehavior.newLine,
    )
    ```
  </Tab>
</Tabs>

## Custom View Slots

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

| Slot | Signature | Replaces |
| - | - | - |
| `auxiliaryButtonView` | `ComposerWidgetBuilder?` | Auxiliary button area (stickers, emoji) |
| `headerView` | `ComposerWidgetBuilder?` | Header section above the composer |
| `footerView` | `ComposerWidgetBuilder?` | Footer section below the composer |
| `attachmentOptions` | `ComposerActionsBuilder?` | Attachment options list |

### Example: Custom Auxiliary Button View

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatCompactMessageComposer(
      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>

### Example: Custom Header View

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatCompactMessageComposer(
      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>

### Example: Custom Footer View

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatCompactMessageComposer(
      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>

### Example: Custom Attachment Options

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatCompactMessageComposer(
      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>

## Styling

Customize the appearance of `CometChatCompactMessageComposer` using `CometChatCompactMessageComposerStyle`.

### Style Properties

| Property | Type | Description |
| - | - | - |
| `backgroundColor` | `Color?` | Background color of the outer composer container |
| `border` | `BoxBorder?` | Border of the outer composer container |
| `borderRadius` | `BorderRadiusGeometry?` | Border radius of the outer composer container |
| `composeBoxBackgroundColor` | `Color?` | Background color of the pill-shaped compose box |
| `composeBoxBorderRadius` | `BorderRadiusGeometry?` | Border radius of the compose box |
| `composeBoxBorder` | `BoxBorder?` | Border of the compose box |
| `textStyle` | `TextStyle?` | Style of the input text |
| `textColor` | `Color?` | Color of the input text |
| `placeholderTextStyle` | `TextStyle?` | Style of the placeholder text |
| `placeholderTextColor` | `Color?` | Color of the placeholder text |
| `sendButtonIconColor` | `Color?` | Color of the send button icon when enabled |
| `sendButtonBackgroundColor` | `Color?` | Background color of the send button when enabled |
| `sendButtonDisabledIconColor` | `Color?` | Color of the send button icon when disabled |
| `sendButtonDisabledBackgroundColor` | `Color?` | Background color of the send button when disabled |
| `sendButtonBorderRadius` | `BorderRadiusGeometry?` | Border radius of the send button |
| `attachmentButtonIconColor` | `Color?` | Color of the attachment button icon |
| `attachmentButtonBackgroundColor` | `Color?` | Background color of the attachment button |
| `attachmentButtonBorderRadius` | `BorderRadiusGeometry?` | Border radius of the attachment button |
| `voiceRecordingButtonIconColor` | `Color?` | Color of the voice recording button icon |
| `voiceRecordingButtonBackgroundColor` | `Color?` | Background color of the voice recording button |
| `voiceRecordingButtonBorderRadius` | `BorderRadiusGeometry?` | Border radius of the voice recording button |
| `richTextToggleIconColor` | `Color?` | Color of the rich text toggle icon when inactive |
| `richTextToggleActiveIconColor` | `Color?` | Color of the rich text toggle icon when active |
| `richTextToggleBackgroundColor` | `Color?` | Background color of the rich text toggle when inactive |
| `richTextToggleActiveBackgroundColor` | `Color?` | Background color of the rich text toggle when active |
| `richTextToggleBorderRadius` | `BorderRadiusGeometry?` | Border radius of the rich text toggle button |
| `auxiliaryButtonIconColor` | `Color?` | Color of auxiliary button icons |
| `auxiliaryButtonBackgroundColor` | `Color?` | Background color of auxiliary buttons |
| `auxiliaryButtonBorderRadius` | `BorderRadiusGeometry?` | Border radius of auxiliary buttons |
| `dividerColor` | `Color?` | Color of dividers |
| `dividerHeight` | `double?` | Height of dividers |
| `closeIconTint` | `Color?` | Color of the close icon in the preview banner |

### Nested Styles

| Property | Type | Description |
| - | - | - |
| `richTextToolbarStyle` | `CometChatRichTextToolbarStyle?` | Style for the rich text formatting toolbar |
| `richTextFormatterStyle` | `CometChatRichTextFormatterStyle?` | Style for rich text formatting in the input field |
| `messagePreviewStyle` | `CometChatMessagePreviewStyle?` | Style for the message preview (edit/reply banner) |
| `mentionsStyle` | `CometChatMentionsStyle?` | Style for mentions |
| `suggestionListStyle` | `CometChatSuggestionListStyle?` | Style for the suggestion list |
| `mediaRecorderStyle` | `CometChatMediaRecorderStyle?` | Style for the media recorder |
| `attachmentOptionSheetStyle` | `CometChatAttachmentOptionSheetStyle?` | Style for the attachment option sheet |

### Example: Custom Styling

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatCompactMessageComposer(
      user: user,
      compactMessageComposerStyle: CometChatCompactMessageComposerStyle(
        sendButtonBackgroundColor: Color(0xFFF76808),
        attachmentButtonIconColor: Color(0xFFF76808),
        auxiliaryButtonIconColor: Color(0xFFF76808),
      ),
    )
    ```
  </Tab>
</Tabs>

### Example: Custom Compose Box Styling

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatCompactMessageComposer(
      user: user,
      compactMessageComposerStyle: CometChatCompactMessageComposerStyle(
        composeBoxBackgroundColor: Color(0xFFF5F5F5),
        composeBoxBorderRadius: BorderRadius.circular(24),
        composeBoxBorder: Border.all(color: Color(0xFF6852D6), width: 1.5),
        textColor: Color(0xFF333333),
        placeholderTextColor: Color(0xFF999999),
      ),
    )
    ```
  </Tab>
</Tabs>

### Example: Custom Rich Text Toolbar Style

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatCompactMessageComposer(
      user: user,
      compactMessageComposerStyle: CometChatCompactMessageComposerStyle(
        richTextToolbarStyle: CometChatRichTextToolbarStyle(
          backgroundColor: Color(0xFFE4EBF5),
          iconColor: Color(0xFF6852D6),
          activeIconColor: Colors.white,
          activeIconBackgroundColor: Color(0xFF6852D6),
        ),
      ),
    )
    ```
  </Tab>
</Tabs>

### Example: Custom Media Recorder Style

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatCompactMessageComposer(
      user: user,
      compactMessageComposerStyle: CometChatCompactMessageComposerStyle(
        mediaRecorderStyle: CometChatMediaRecorderStyle(
          recordIndicatorBackgroundColor: Color(0xFFF44649),
          recordIndicatorBorderRadius: BorderRadius.circular(20),
          pauseButtonBorderRadius: BorderRadius.circular(8),
          deleteButtonBorderRadius: BorderRadius.circular(8),
          stopButtonBorderRadius: BorderRadius.circular(8),
        ),
      ),
    )
    ```
  </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}
    CometChatCompactMessageComposer(
      user: user,
      textFormatters: [
        CometChatMentionsFormatter(
          style: CometChatMentionsStyle(
            mentionSelfTextBackgroundColor: Color(0xFFF76808),
            mentionTextBackgroundColor: Colors.white,
            mentionTextColor: Colors.black,
            mentionSelfTextColor: Colors.white,
          ),
        ),
      ],
    )
    ```
  </Tab>
</Tabs>

### Mention Configuration

| Prop | Type | Default | Description |
| - | - | - | - |
| `disableMentions` | `bool` | `false` | Disables the mention suggestion list |
| `disableMentionAll` | `bool` | `false` | Disables the @all option in mention suggestions |
| `mentionAllLabel` | `String?` | - | Custom label for @all mention |
| `mentionAllLabelId` | `String?` | - | Custom label ID for @all mention |

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatCompactMessageComposer(
      user: user,
      disableMentions: false,
      disableMentionAll: true,
      mentionAllLabel: "Everyone",
    )
    ```
  </Tab>
</Tabs>

### Custom Icons

| Prop | Type | Description |
| - | - | - |
| `attachmentIcon` | `Widget?` | Custom icon for the attachment button |
| `voiceRecordingIcon` | `Widget?` | Custom icon for the voice recording button |
| `sendButtonIcon` | `Widget?` | Custom icon for the send button |
| `recorderStartButtonIcon` | `Widget?` | Custom icon for the recorder start/play button |
| `recorderPauseButtonIcon` | `Widget?` | Custom icon for the recorder pause button |
| `recorderDeleteButtonIcon` | `Widget?` | Custom icon for the recorder delete button |
| `recorderStopButtonIcon` | `Widget?` | Custom icon for the recorder stop button |
| `recorderSendButtonIcon` | `Widget?` | Custom icon for the recorder send button |

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatCompactMessageComposer(
      user: user,
      attachmentIcon: Icon(Icons.add_circle, color: Color(0xFF6852D6)),
      sendButtonIcon: Icon(Icons.send, color: Colors.white, size: 20),
      voiceRecordingIcon: Icon(Icons.mic, color: Color(0xFF6852D6)),
    )
    ```
  </Tab>
</Tabs>

## Props Reference

| Prop | Type | Default | Description |
| - | - | - | - |
| `user` | `User?` | `null` | User object for the message composer |
| `group` | `Group?` | `null` | Group object for the message composer |
| `compactMessageComposerStyle` | `CometChatCompactMessageComposerStyle?` | - | Sets style for the compact message composer |
| `enableRichTextFormatting` | `bool` | `true` | Master switch for rich text formatting |
| `showRichTextFormattingOptions` | `bool` | `true` | Controls rich text toolbar visibility |
| `showTextSelectionMenuItems` | `bool` | `true` | Controls formatting options in text selection menu |
| `hideRichTextFormattingOptions` | `Set<FormatType>?` | `null` | Format types to hide from the toolbar |
| `richTextToolbarStyle` | `CometChatRichTextToolbarStyle?` | - | Custom styling for the rich text toolbar |
| `placeholderText` | `String?` | - | Hint text for the input field |
| `maxLine` | `int` | `4` | Maximum number of lines the input can expand to |
| `text` | `String?` | - | Initial text for the input field |
| `textEditingController` | `TextEditingController?` | - | Controls the state of the text field |
| `enterKeyBehavior` | `EnterKeyBehavior` | `EnterKeyBehavior.newLine` | Defines Enter key behavior (send or new line) |
| `hideAttachmentButton` | `bool` | `false` | Hides the attachment button |
| `hideVoiceRecordingButton` | `bool` | `false` | Hides the voice recording button |
| `hideSendButton` | `bool` | `false` | Hides the send button |
| `hideImageAttachmentOption` | `bool` | `false` | Hides the image attachment option |
| `hideVideoAttachmentOption` | `bool` | `false` | Hides the video attachment option |
| `hideAudioAttachmentOption` | `bool` | `false` | Hides the audio attachment option |
| `hideFileAttachmentOption` | `bool` | `false` | Hides the file attachment option |
| `hidePollsOption` | `bool` | `false` | Hides the polls option |
| `hideCollaborativeDocumentOption` | `bool` | `false` | Hides the collaborative document option |
| `hideCollaborativeWhiteboardOption` | `bool` | `false` | Hides the collaborative whiteboard option |
| `hideTakePhotoOption` | `bool` | `false` | Hides the take photo option |
| `hideStickersButton` | `bool` | `false` | Hides the stickers button |
| `disableMentions` | `bool` | `false` | Disables mentions in the composer |
| `disableMentionAll` | `bool` | `false` | Disables @all mentions in groups |
| `mentionAllLabel` | `String?` | - | Custom label for group mentions |
| `mentionAllLabelId` | `String?` | - | Custom label ID for group mentions |
| `disableTypingEvents` | `bool` | `false` | Disables typing indicator 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 for threads |
| `onChange` | `Function(String)?` | - | Callback triggered when text changes |
| `onSendButtonTap` | `Function(...)?` | - | Callback when send button is tapped |
| `onError` | `OnError?` | - | Callback to handle errors |
| `onToolbarVisibilityChange` | `void Function(bool)?` | - | Callback when toolbar visibility changes |
| `onMentionLimitReached` | `void Function(int)?` | - | Callback when mention limit is exceeded |
| `onEditCancel` | `void Function()?` | - | Callback when edit mode is cancelled |
| `stateCallBack` | `Function(CometChatCompactMessageComposerController)?` | - | Callback to access controller functions |
| `auxiliaryButtonView` | `ComposerWidgetBuilder?` | - | Custom auxiliary button widget |
| `headerView` | `ComposerWidgetBuilder?` | - | Custom header view |
| `footerView` | `ComposerWidgetBuilder?` | - | Custom footer view |
| `attachmentOptions` | `ComposerActionsBuilder?` | - | Custom attachment options |
| `textFormatters` | `List<CometChatTextFormatter>?` | - | List of text formatters |
| `attachmentIcon` | `Widget?` | - | Custom attachment icon |
| `voiceRecordingIcon` | `Widget?` | - | Custom voice recording icon |
| `sendButtonIcon` | `Widget?` | - | Custom send button icon |
| `recorderStartButtonIcon` | `Widget?` | - | Custom recorder start button icon |
| `recorderPauseButtonIcon` | `Widget?` | - | Custom recorder pause button icon |
| `recorderDeleteButtonIcon` | `Widget?` | - | Custom recorder delete button icon |
| `recorderStopButtonIcon` | `Widget?` | - | Custom recorder stop button icon |
| `recorderSendButtonIcon` | `Widget?` | - | Custom recorder send button icon |

<CardGroup cols={2}>
  <Card title="Message Composer" icon="pen" href="/ui-kit/flutter/v5/message-composer">
    The standard message composer component
  </Card>

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


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