Message Composer - CometChat Docs

AI Agent Component Spec

{
  "component": "CometChatMessageComposer",
  "package": "cometchat_chat_uikit",
  "import": "import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';",
  "description": "A widget that enables users to write and send a variety of messages, including text, image, video, and custom messages. Features such as Live Reaction, Attachments, and Message Editing are also supported.",
  "primaryOutput": {
    "prop": "onSendButtonTap",
    "type": "Function(BuildContext, BaseMessage, PreviewMessageMode?)?"
  },
  "props": {
    "data": {
      "user": {
        "type": "User?",
        "default": "null",
        "note": "User object for the message composer (one of user or group is required)"
      },
      "group": {
        "type": "Group?",
        "default": "null",
        "note": "Group object for the message composer (one of user or group is required)"
      },
      "text": {
        "type": "String?",
        "default": "null",
        "note": "Initial text for the input field"
      },
      "parentMessageId": {
        "type": "int",
        "default": "0",
        "note": "ID of the parent message for threaded replies"
      }
    },
    "callbacks": {
      "onChange": "Function(String)?",
      "onSendButtonTap": "Function(BuildContext, BaseMessage, PreviewMessageMode?)?",
      "onError": "OnError?"
    },
    "visibility": {
      "hideVoiceRecordingButton": { "type": "bool?", "default": null },
      "hideSendButton": { "type": "bool?", "default": null },
      "hideAttachmentButton": { "type": "bool?", "default": null },
      "hideStickersButton": { "type": "bool?", "default": null },
      "disableMentions": { "type": "bool?", "default": null },
      "disableTypingEvents": { "type": "bool", "default": false }
    },
    "sound": {
      "disableSoundForMessages": { "type": "bool", "default": false },
      "customSoundForMessage": { "type": "String?", "default": null }
    },
    "viewSlots": {
      "auxiliaryButtonView": "ComposerWidgetBuilder?",
      "secondaryButtonView": "ComposerWidgetBuilder?",
      "sendButtonView": "Widget?",
      "headerView": "ComposerWidgetBuilder?",
      "footerView": "ComposerWidgetBuilder?"
    },
    "formatting": {
      "placeholderText": { "type": "String?", "default": null },
      "maxLine": { "type": "int?", "default": null },
      "padding": { "type": "EdgeInsetsGeometry?", "default": null }
    }
  },
  "events": [],
  "sdkListeners": [],
  "compositionExample": {
    "description": "CometChatMessageComposer is typically used at the bottom of a messaging screen, paired with CometChatMessageHeader and CometChatMessageList",
    "components": ["CometChatMessageHeader", "CometChatMessageList", "CometChatMessages"],
    "flow": "User types message → Composer sends message → MessageList updates"
  },
  "types": {
    "CometChatMessageComposerStyle": {
      "backgroundColor": "Color?",
      "border": "BoxBorder?",
      "borderRadius": "BorderRadiusGeometry?",
      "sendButtonIconColor": "Color?",
      "sendButtonIconBackgroundColor": "Color?",
      "textStyle": "TextStyle?",
      "placeHolderTextStyle": "TextStyle?"
    }
  }
}

Where It Fits

CometChatMessageComposer is a Widget that enables users to write and send a variety of messages, including text, image, video, and custom messages. Features such as Live Reaction, Attachments, and Message Editing are also supported by it.

CometChatMessageComposer is comprised of the following Base Widgets:

Base Widgets	Description
MessageInput	This provides a basic layout for the contents of this component, such as the TextField and buttons
ActionSheet	The ActionSheet widget presents a list of options in either a list or grid mode

Dart

import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';

// CometChatMessageComposer is typically used at the bottom of a messaging screen
class MessagingScreen extends StatelessWidget {
  final User user;
  
  const MessagingScreen({required this.user});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          CometChatMessageHeader(user: user),
          Expanded(child: CometChatMessageList(user: user)),
          CometChatMessageComposer(user: user),
        ],
      ),
    );
  }
}

Minimal Render

The simplest way to render CometChatMessageComposer:

Dart

import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';

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

// For a group conversation
CometChatMessageComposer(
  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
`stateCallBack`	`Function(CometChatMessageComposerController)?`	Controller state callback for accessing controller functions

Dart

CometChatMessageComposer(
  user: user,
  onSendButtonTap: (BuildContext context, BaseMessage baseMessage, PreviewMessageMode? previewMessageMode) {
    // Handle send button tap
  },
  onChange: (String? text) {
    // Handle text change
  },
  onError: (e) {
    // Handle error
  },
)

Custom View Slots

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

Slot	Signature	Replaces
`auxiliaryButtonView`	`ComposerWidgetBuilder?`	Auxiliary button area (AI, stickers)
`secondaryButtonView`	`ComposerWidgetBuilder?`	Secondary button area (attachment, voice)
`sendButtonView`	`Widget?`	Send button
`headerView`	`ComposerWidgetBuilder?`	Header section above input
`footerView`	`ComposerWidgetBuilder?`	Footer section below input
`attachmentOptions`	`ComposerActionsBuilder?`	Attachment options list

Example: Custom Auxiliary Button View

Dart

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

Example: Custom Secondary Button View

Dart

CometChatMessageComposer(
  user: user,
  secondaryButtonView: (context, user, group, id) {
    return Icon(
      Icons.attach_file,
      color: Color(0xFF6852D6),
    );
  },
)

Example: Custom Send Button View

Dart

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

Example: Custom Header View

Dart

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

Dart

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

Android
iOS

Example: Custom Attachment Options

Dart

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

Styling

Customize the appearance of CometChatMessageComposer using CometChatMessageComposerStyle.

Style Properties

Property	Type	Description
`backgroundColor`	`Color?`	Background color of the message composer
`border`	`BoxBorder?`	Border of the message composer
`borderRadius`	`BorderRadiusGeometry?`	Border radius of the message composer
`closeIconTint`	`Color?`	Color for the close icon
`dividerColor`	`Color?`	Color of the divider
`dividerHeight`	`double?`	Height of the divider
`sendButtonIconColor`	`Color?`	Color of the send button icon
`sendButtonIconBackgroundColor`	`Color?`	Background color of the send button
`sendButtonBorderRadius`	`BorderRadiusGeometry?`	Border radius of the send button
`secondaryButtonIconColor`	`Color?`	Color of the secondary button icon
`secondaryButtonIconBackgroundColor`	`Color?`	Background color of the secondary button
`secondaryButtonBorderRadius`	`BorderRadiusGeometry?`	Border radius of the secondary button
`auxiliaryButtonIconColor`	`Color?`	Color of the auxiliary button icon
`auxiliaryButtonIconBackgroundColor`	`Color?`	Background color of the auxiliary button
`auxiliaryButtonBorderRadius`	`BorderRadiusGeometry?`	Border radius of the auxiliary button
`textStyle`	`TextStyle?`	Style of the text
`textColor`	`Color?`	Color of the text
`placeHolderTextStyle`	`TextStyle?`	Style of the placeholder text
`placeHolderTextColor`	`Color?`	Color of the placeholder text
`filledColor`	`Color?`	Background color of the text input
`mentionsStyle`	`CometChatMentionsStyle?`	Style for mentions
`mediaRecorderStyle`	`CometChatMediaRecorderStyle?`	Style for media recorder
`aiOptionStyle`	`AIOptionsStyle?`	Style for AI options
`aiOptionSheetStyle`	`CometChatAiOptionSheetStyle?`	Style for AI option sheet
`attachmentOptionSheetStyle`	`CometChatAttachmentOptionSheetStyle?`	Style for attachment option sheet
`suggestionListStyle`	`CometChatSuggestionListStyle?`	Style for suggestion list
`messagePreviewStyle`	`CometChatMessagePreviewStyle?`	Style for message preview

Example: Custom Styling

Dart

CometChatMessageComposer(
  user: user,
  messageComposerStyle: CometChatMessageComposerStyle(
    sendButtonIconBackgroundColor: Color(0xFFF76808),
    secondaryButtonIconColor: Color(0xFFF76808),
    auxiliaryButtonIconColor: Color(0xFFF76808),
  ),
)

Example: Custom Media Recorder Style

Dart

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

Example: Custom AI Options Style

Dart

CometChatMessageComposer(
  user: user,
  messageComposerStyle: CometChatMessageComposerStyle(
    aiOptionStyle: AIOptionsStyle(
      backgroundColor: Color(0xFFE4EBF5),
      border: Border.all(width: 3, color: Colors.red),
    ),
  ),
)

Advanced

Text Formatters

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

Dart

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

Props Reference

Prop	Type	Default	Description
`user`	`User?`	`null`	User object for the message composer
`group`	`Group?`	`null`	Group object for the message composer
`messageComposerStyle`	`CometChatMessageComposerStyle?`	-	Sets style for the message composer
`placeholderText`	`String?`	-	Hint text for the input field
`text`	`String?`	-	Initial text for the input field
`onChange`	`Function(String)?`	-	Callback triggered when text changes
`textEditingController`	`TextEditingController?`	-	Controls the state of the text field
`maxLine`	`int?`	-	Maximum number of lines allowed
`disableMentions`	`bool?`	`null`	Disables mentions in the composer
`disableTypingEvents`	`bool`	`false`	Disables typing events
`disableSoundForMessages`	`bool`	`false`	Disables sound for sent messages
`customSoundForMessage`	`String?`	-	URL for custom sound
`customSoundForMessagePackage`	`String?`	-	Package name for custom sound asset
`parentMessageId`	`int`	`0`	ID of the parent message
`padding`	`EdgeInsetsGeometry?`	-	Sets padding for the message composer
`messageInputPadding`	`EdgeInsetsGeometry?`	-	Sets padding for the message input field
`sendButtonView`	`Widget?`	-	Custom send button widget
`attachmentIcon`	`Widget?`	-	Custom attachment icon
`attachmentIconURL`	`String?`	-	Path of the icon to show in the attachments button
`voiceRecordingIcon`	`Widget?`	-	Custom voice recording icon
`aiIcon`	`Widget?`	-	Custom AI button icon
`aiIconURL`	`String?`	-	Path of the icon to show in the AI button
`aiIconPackageName`	`String?`	-	Package name for AI icon asset
`auxiliaryButtonView`	`ComposerWidgetBuilder?`	-	UI component for auxiliary button
`secondaryButtonView`	`ComposerWidgetBuilder?`	-	UI component for secondary button
`auxiliaryButtonsAlignment`	`AuxiliaryButtonsAlignment?`	-	Controls position of auxiliary button view
`hideVoiceRecordingButton`	`bool?`	`null`	Hide/display voice recording button
`attachmentOptions`	`ComposerActionsBuilder?`	-	Provides options for file attachments
`hideAttachmentButton`	`bool?`	`null`	Hide/display attachment button
`hideImageAttachmentOption`	`bool?`	`null`	Hide/display image attachment option
`hideVideoAttachmentOption`	`bool?`	`null`	Hide/display video attachment option
`hideAudioAttachmentOption`	`bool?`	`null`	Hide/display audio attachment option
`hideFileAttachmentOption`	`bool?`	`null`	Hide/display file attachment option
`hidePollsOption`	`bool?`	`null`	Hide/display polls option
`hideCollaborativeDocumentOption`	`bool?`	`null`	Hide/display collaborative document option
`hideCollaborativeWhiteboardOption`	`bool?`	`null`	Hide/display collaborative whiteboard option
`hideTakePhotoOption`	`bool?`	`null`	Hide/display take photo option
`onSendButtonTap`	`Function(...)?`	-	Callback when send button is tapped
`onError`	`OnError?`	-	Callback to handle errors
`hideSendButton`	`bool?`	`null`	Hide/display the send button
`hideStickersButton`	`bool?`	`null`	Hide/display the sticker button
`sendButtonIcon`	`Widget?`	-	Custom send button icon
`recorderStartButtonIcon`	`Widget?`	-	Custom icon for media recorder start button
`recorderPauseButtonIcon`	`Widget?`	-	Custom icon for media recorder pause button
`recorderDeleteButtonIcon`	`Widget?`	-	Custom icon for media recorder delete button
`recorderStopButtonIcon`	`Widget?`	-	Custom icon for media recorder stop button
`recorderSendButtonIcon`	`Widget?`	-	Custom icon for media recorder send button
`disableMentionAll`	`bool`	`false`	Disables @all mentions in groups
`mentionAllLabel`	`String?`	-	Custom label for group mentions
`mentionAllLabelId`	`String?`	-	Custom label ID for group mentions
`headerView`	`ComposerWidgetBuilder?`	-	Custom header view
`footerView`	`ComposerWidgetBuilder?`	-	Custom footer view
`textFormatters`	`List<CometChatTextFormatter>?`	-	List of text formatters
`stateCallBack`	`Function(CometChatMessageComposerController)?`	-	Callback to access controller functions

Message Header

Display user or group details in the header

Message List

Display messages in a conversation

Mentions Formatter

Configure mentions look and feel

Theming

Learn how to customize the look and feel

​Where It Fits

​Minimal Render

​Actions and Events

​Callback Props

​Custom View Slots

​Example: Custom Auxiliary Button View

​Example: Custom Secondary Button View

​Example: Custom Send Button View

​Example: Custom Header View

​Example: Custom Footer View

​Example: Custom Attachment Options

​Styling

​Style Properties

​Example: Custom Styling

​Example: Custom Media Recorder Style

​Example: Custom AI Options Style

​Advanced

​Text Formatters

​Props Reference