Compact Message Composer - CometChat Docs

AI Agent Component Spec

{
  "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?"
    }
  }
}

Where It Fits

CometChatCompactMessageComposer is a Widget 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

Dart

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),
        ],
      ),
    );
  }
}

Minimal Render

The simplest way to render CometChatCompactMessageComposer:

Dart

import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';

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

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

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

Dart

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
  },
)

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

Dart

// 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,
)

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

Dart

// Send message on Enter
CometChatCompactMessageComposer(
  user: user,
  enterKeyBehavior: EnterKeyBehavior.sendMessage,
)

// New line on Enter (default)
CometChatCompactMessageComposer(
  user: user,
  enterKeyBehavior: EnterKeyBehavior.newLine,
)

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

Dart

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),
        ),
      ],
    );
  },
)

Example: Custom Header View

Dart

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),
          ),
        ],
      ),
    );
  },
)

Dart

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")),
    );
  },
)

Example: Custom Attachment Options

Dart

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),
      ),
    ];
  },
)

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

Dart

CometChatCompactMessageComposer(
  user: user,
  compactMessageComposerStyle: CometChatCompactMessageComposerStyle(
    sendButtonBackgroundColor: Color(0xFFF76808),
    attachmentButtonIconColor: Color(0xFFF76808),
    auxiliaryButtonIconColor: Color(0xFFF76808),
  ),
)

Example: Custom Compose Box Styling

Dart

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

Dart

CometChatCompactMessageComposer(
  user: user,
  compactMessageComposerStyle: CometChatCompactMessageComposerStyle(
    richTextToolbarStyle: CometChatRichTextToolbarStyle(
      backgroundColor: Color(0xFFE4EBF5),
      iconColor: Color(0xFF6852D6),
      activeIconColor: Colors.white,
      activeIconBackgroundColor: Color(0xFF6852D6),
    ),
  ),
)

Example: Custom Media Recorder Style

Dart

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

Advanced

Text Formatters

Assigns the list of text formatters. To configure the existing Mentions look and feel check out CometChatMentionsFormatter.

Dart

CometChatCompactMessageComposer(
  user: user,
  textFormatters: [
    CometChatMentionsFormatter(
      style: CometChatMentionsStyle(
        mentionSelfTextBackgroundColor: Color(0xFFF76808),
        mentionTextBackgroundColor: Colors.white,
        mentionTextColor: Colors.black,
        mentionSelfTextColor: Colors.white,
      ),
    ),
  ],
)

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

Dart

CometChatCompactMessageComposer(
  user: user,
  disableMentions: false,
  disableMentionAll: true,
  mentionAllLabel: "Everyone",
)

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

Dart

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

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

Message Composer

The standard message composer component

Message Header

Display user or group details in the header

Message List

Display messages in a conversation

Mentions Formatter

Configure mentions look and feel

​Where It Fits

​Minimal Render

​Actions and Events

​Callback Props

​Rich Text Formatting

​Configuration

​Enter Key Behavior

​Custom View Slots

​Example: Custom Auxiliary Button View

​Example: Custom Header View

​Example: Custom Footer View

​Example: Custom Attachment Options

​Styling

​Style Properties

​Nested Styles

​Example: Custom Styling

​Example: Custom Compose Box Styling

​Example: Custom Rich Text Toolbar Style

​Example: Custom Media Recorder Style

​Advanced

​Text Formatters

​Mention Configuration

​Custom Icons

​Props Reference