Compact Message Composer

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

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

Example: Custom Footer View

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

Example: Custom Rich Text Toolbar Style

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