Message Composer

AI Integration Quick Reference

Field	Value
Component	`CometChatMessageComposer`
Package	`cometchat_chat_uikit`
Import	`import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';`
Purpose	Configure CometChat Flutter UI Kit Message Composer for text, media, custom messages, live reactions, editing, rich text, and audio.
Data props	`user` · `group` · `parentMessageId`
Actions	`onChange` · `onError` · `onSendButtonTap` · `onRichTextFormatApplied` · `onKeyboardDiagnostics` · `onAttachmentTrayAdd` · `onAttachmentTraySend` · `onAttachmentErrorTap`
View slots	`auxiliaryButtonView` · `headerView` · `footerView` · `secondaryButtonView` · `richTextToolbarView` · `attachmentErrorSnackBarBuilder`
Styling	`messageComposerStyle` — the app `ThemeData` does not reach inside a kit widget, so scope colours here.
Sending outside the composer	A message sent with `CometChat.send*Message` instead of through this widget must emit `CometChatMessageEvents.ccMessageSent(...)` in `onSuccess`, or an already-mounted `CometChatMessageList` never shows it.
Stitching	Pair with `CometChatMessageHeader` and `CometChatMessageList`, passing the same `user` or `group` to all three.
Prerequisites	`CometChatUIKit` initialised and a user logged in.
Full props	76 props

Overview

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, Message Editing, Rich Text Formatting, Code Blocks, and Inline Audio Recording are supported. CometChatMessageComposer is comprised of the following Base Widgets:

Base Widgets	Description
MessageInput	Provides a basic layout for the contents, such as the TextField and buttons
ActionSheet	Presents a list of options in either a list or grid mode

In V6, the composer is powered by MessageComposerBloc and decomposed into focused sub-widgets.

Usage

Integration

1. Using Navigator to Launch `CometChatMessageComposer`

Dart

Navigator.push(context, MaterialPageRoute(builder: (context) => CometChatMessageComposer(user: user)));

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

Dart

import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
import 'package:flutter/material.dart';

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

  @override
  State<MessageComposerScreen> createState() => _MessageComposerScreenState();
}

class _MessageComposerScreenState extends State<MessageComposerScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Expanded(child: CometChatMessageList(user: user)),
          CometChatMessageComposer(user: user),
        ],
      ),
    );
  }
}

Actions

1. OnSendButtonClick

The OnSendButtonClick event gets activated when the send message button is clicked.

Dart

CometChatMessageComposer(
  user: user,
  onSendButtonTap: (BuildContext context, BaseMessage baseMessage, PreviewMessageMode? previewMessageMode) {
    // Handle send
  },
)

2. onChange

Handles changes in the value of text in the input field.

Dart

CometChatMessageComposer(
  user: user,
  onChange: (String? text) {
    // Handle text change
  },
)

3. onError

Listens for any errors that occur.

Dart

CometChatMessageComposer(
  user: user,
  onError: (e) {
    // Handle error
  },
)

Filters

CometChatMessageComposer widget does not have any available filters.

Events

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

Customization

Style

1. CometChatMessageComposerStyle

Dart

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

2. MediaRecorder Style

Dart

CometChatMessageComposer(
  user: user,
  messageComposerStyle: CometChatMessageComposerStyle(
    mediaRecorderStyle: CometChatMediaRecorderStyle(
      recordIndicatorBackgroundColor: Color(0xFFF44649),
      recordIndicatorBorderRadius: BorderRadius.circular(20),
    ),
  ),
)

Functionality

Dart

CometChatMessageComposer(
  user: user,
  placeholderText: "Type a message...",
  disableMentions: true,
)

Message Composer Properties

Property	Type	Default	Description
`user`	`User?`	`null`	Sets user for the message composer.
`group`	`Group?`	`null`	Sets group for the message composer.
`messageComposerStyle`	`CometChatMessageComposerStyle?`	`null`	Sets style for the message composer.
`placeholderText`	`String?`	`null`	Hint text for the input field.
`disableTypingEvents`	`bool`	`false`	Disables typing events.
`disableSoundForMessages`	`bool`	`false`	Disables sound for sent messages.
`parentMessageId`	`int`	`0`	ID of the parent message (default is 0).
`customSoundForMessage`	`String?`	`null`	`customSoundForMessage` provides custom sound for message sent
`customSoundForMessagePackage`	`String?`	`null`	`customSoundForMessagePackage` package name to show icon from
`auxiliaryButtonView`	`ComposerWidgetBuilder?`	`null`	UI component as auxiliary button.
`headerView`	`ComposerWidgetBuilder?`	`null`	`headerView` ui component to be forwarded to message input component
`footerView`	`ComposerWidgetBuilder?`	`null`	`footerView` ui component to be forwarded to message input component
`secondaryButtonView`	`ComposerWidgetBuilder?`	`null`	UI component as secondary button.
`sendButtonView`	`Widget?`	`null`	Custom send button widget.
`attachmentOptions`	`ComposerActionsBuilder?`	`null`	Provides options for file attachments.
`text`	`String?`	`null`	Initial text for the input field.
`onChange`	`Function(String text)?`	`null`	Callback triggered when text changes.
`maxLine`	`int?`	`null`	Maximum number of lines allowed.
`auxiliaryButtonsAlignment`	`AuxiliaryButtonsAlignment?`	`null`	`auxiliaryButtonsAlignment` controls position auxiliary button view
`attachmentIconURL`	`String?`	`null`	`attachmentIconURL` path of the icon to show in the attachments button
`stateCallBack`	`void Function(MessageComposerBloc bloc)?`	`null`	`stateCallBack` callback to handle state of the message composer Now returns MessageComposerBloc instead of the old controller
`attachmentIcon`	`Widget?`	`null`	Custom attachment icon.
`onError`	`OnError?`	`null`	Callback to handle errors.
`onSendButtonTap`	`Function( BuildContext context, BaseMessage message, PreviewMessageMode? previewMessageMode, )?`	`null`	Callback when send button is tapped.
`hideVoiceRecordingButton`	`bool?`	`null`	Hide the voice recording button.
`useInlineAudioRecorder`	`bool`	`true`	`useInlineAudioRecorder` when true, shows inline audio recorder in the composer instead of opening a bottom sheet.
`voiceRecordingIcon`	`Widget?`	`null`	Custom voice recording icon.
`aiIcon`	`Widget?`	`null`	`attachmentIcon` custom ai icon
`aiIconURL`	`String?`	`null`	`aiIconURL` path of the icon to show in the ai button
`aiIconPackageName`	`String?`	`null`	`aiIconPackageName` package name to show icon from
`textFormatters`	`List<CometChatTextFormatter>?`	`null`	`textFormatters` provides list of text formatters
`disableMentions`	`bool?`	`null`	Disables mentions in the composer.
`textEditingController`	`TextEditingController?`	`null`	Controls the state of the text field.
`padding`	`EdgeInsetsGeometry?`	`null`	`padding` provides padding to the message composer
`messageInputPadding`	`EdgeInsetsGeometry?`	`null`	`messageInputPadding` sets the padding to the message input field
`recorderStartButtonIcon`	`Widget?`	`null`	`recorderStartButtonIcon` defines the icon of the start button.
`recorderPauseButtonIcon`	`Widget?`	`null`	`recorderPauseButtonIcon` defines the icon of the pause button.
`recorderDeleteButtonIcon`	`Widget?`	`null`	`recorderDeleteButtonIcon` defines the icon of the delete button.
`recorderStopButtonIcon`	`Widget?`	`null`	`recorderStopButtonIcon` defines the icon of the stop button.
`recorderSendButtonIcon`	`Widget?`	`null`	`recorderSendButtonIcon` defines the icon of the send button.
`hideSendButton`	`bool?`	`null`	Hide/display the send button.
`hideAttachmentButton`	`bool?`	`null`	Hide/display attachment button.
`hideStickersButton`	`bool?`	`null`	Hide/display the sticker button.
`stickerIcon`	`Widget?`	`null`	Replaces the sticker button’s icon while the sticker keyboard is closed. Shown as given, so tint it yourself; the default icon is tinted with `CometChatMessageComposerStyle.stickerIconColor`. Available since v6.2.0.
`stickerActiveIcon`	`Widget?`	`null`	Replaces the sticker button’s icon while the sticker keyboard is open. Shown as given; the default icon is tinted with `CometChatMessageComposerStyle.stickerActiveIconColor`. Available since v6.2.0.
`hideAudioAttachmentOption`	`bool?`	`null`	Hide/display audio attachment option.
`hideFileAttachmentOption`	`bool?`	`null`	Hide/display file attachment option.
`hideImageAttachmentOption`	`bool?`	`null`	Hide/display image attachment option.
`hideVideoAttachmentOption`	`bool?`	`null`	Hide/display video attachment option.
`hidePollsOption`	`bool?`	`null`	Hide/display polls option.
`hideCollaborativeDocumentOption`	`bool?`	`null`	`hideCollaborativeDocumentOption` is a `bool` that can be used to hide/display collaborative document option
`hideCollaborativeWhiteboardOption`	`bool?`	`null`	`hideCollaborativeWhiteboardOption` is a `bool` that can be used to hide/display collaborative whiteboard option
`hideTakePhotoOption`	`bool?`	`null`	`hideTakePhotoOption` is a `bool` that can be used to hide/display take photo option
`sendButtonIcon`	`Widget?`	`null`	Custom send button icon.
`disableMentionAll`	`bool`	`false`	`disableMentionAll` is a boolean which is used to disable @all mentions in groups
`mentionAllLabel`	`String?`	`null`	`mentionAllLabel` is a String which is used to set a custom label for @all mentions
`mentionAllLabelId`	`String?`	`null`	`mentionAllLabelId` is a String which is used to set a custom label ID for @all mentions
`enableRichTextFormatting`	`bool`	`true`	Master switch for rich text (markdown detection, toolbar, WYSIWYG rendering). Default `true`.
`showRichTextFormattingOptions`	`bool`	`true`	Whether the rich text toolbar UI is visible. Default `true`.
`hideRichTextFormattingOptions`	`Set<FormatType>`	`const {}`	Set of format buttons to hide from the toolbar. Default `{}`.
`richTextToolbarView`	`Widget Function(BuildContext context, TextEditingController controller)?`	`null`	Custom rich text toolbar widget.
`richTextToolbarActions`	`ComposerActionsBuilder?`	`null`	Extra buttons appended at the trailing end of the built-in rich text toolbar. See Trailing toolbar actions. Available since v6.1.1.
`onRichTextFormatApplied`	`void Function(FormatType formatType)?`	`null`	Callback fired when a toolbar format is applied.
`hideBottomSafeArea`	`bool`	`false`	Hide bottom safe area padding (default: `false`).
`resizeToAvoidBottomInset`	`bool`	`true`	Indicates the parent `Scaffold` uses its default `resizeToAvoidBottomInset: true` and will handle keyboard insets itself. Default `true`. Flip to `false` only if you opt into the composer’s internal keyboard-aware spacing and set `resizeToAvoidBottomInset: false` on your Scaffold.
`layout`	`CometChatComposerLayout`	`CometChatComposerLayout.singleLine`	Composer skeleton: `singleLine` (default) or `doubleLine`. See Layout below.
`onKeyboardDiagnostics`	`CometChatKeyboardDiagnosticsCallback?`	`null`	Debug hook fired on every internal keyboard-state change. Leave `null` in production.
`enableMultipleAttachments`	`bool`	`true`	`enableMultipleAttachments` when true (the default) the composer owns a multi-attachment staging tray: picked files upload immediately, stage as tray tiles, and send as one message per…
`attachmentTrayController`	`AttachmentTrayController?`	`null`	Optional external staging tray controller.
`onAttachmentTrayAdd`	`VoidCallback?`	`null`	Invoked by the tray’s Add affordance when `attachmentTrayController` is set.
`onAttachmentTraySend`	`VoidCallback?`	`null`	Invoked by the tray’s Send affordance (shown only when the tray can send).
`disableImagePaste`	`bool`	`false`	`disableImagePaste` disables staging an image pasted from the clipboard (context-menu Paste, Cmd/Ctrl+V, and the web paste event).
`disableDragAndDrop`	`bool`	`false`	`disableDragAndDrop` disables staging files dragged onto the chat and the “drop files here” overlay (web only).
`attachmentErrorAlertStyle`	`CometChatAttachmentErrorAlertStyle?`	`null`	`attachmentErrorAlertStyle` styles every attachment error alert: the toast shown when a selection is over the count/size limit, and the alert stating why a staged attachment was rejected…
`attachmentErrorSnackBarBuilder`	`SnackBar Function(BuildContext context, AttachmentTile tile)?`	`null`	`attachmentErrorSnackBarBuilder` fully replaces the default error snackbar.
`onAttachmentErrorTap`	`void Function(BuildContext context, AttachmentTile tile)?`	`null`	`onAttachmentErrorTap` fully overrides the tap/hover action on an errored tile (skips showing the default/custom snackbar entirely).

Advanced

TextFormatters

Dart

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

AttachmentOptions

Dart

CometChatMessageComposer(
  user: user,
  attachmentOptions: (context, user, group, id) {
    return <CometChatMessageComposerAction>[
      CometChatMessageComposerAction(
        id: "Custom Option",
        title: "Custom Option",
        icon: Icon(Icons.add_box, color: Colors.black),
      ),
    ];
  },
)

You can customize the auxiliary button area (mic, sticker, etc.) using the auxiliaryButtonView parameter:

Dart

CometChatMessageComposer(
  user: user,
  auxiliaryButtonView: (context, user, group, id) {
    return Row(
      children: [
        IconButton(
          icon: Icon(Icons.location_pin, color: Color(0xFF6852D6)),
          onPressed: () {
            // Handle location sharing
          },
        ),
      ],
    );
  },
)

Layout

The composer skeleton supports two layouts via the layout prop:

Value	Description
`CometChatComposerLayout.singleLine`	Default. Text field and all buttons share a single row.
`CometChatComposerLayout.doubleLine`	Classic v5 look — text field on its own row, buttons on a second row below a divider.

All existing props (hide flags, view slots, style, mentions, rich text, voice recording, reply/edit preview, AI options) work identically in both layouts.

Dart

CometChatMessageComposer(
  user: user,
  layout: CometChatComposerLayout.doubleLine,
)

Rich Text Formatting

The composer ships with a WYSIWYG rich-text toolbar that parses Markdown as the user types and renders formatted spans in place. Configuration is done with three flat props.

Enable with defaults

Rich text is on by default — no props required.

Dart

CometChatMessageComposer(user: user)

showRichTextFormattingOptions controls toolbar visibility. When false, markdown is still parsed in typed text but no toolbar is rendered.

Layout	Toolbar placement
`singleLine`	Persistent row directly below the text input
`doubleLine`	Behind an `Aa` toggle in the button row — tapping swaps in the toolbar

Dart

CometChatMessageComposer(
  user: user,
  showRichTextFormattingOptions: false, // parses markdown, no toolbar
)

Hide specific format buttons

Pass a Set<FormatType> listing the buttons to remove from the toolbar.

Dart

CometChatMessageComposer(
  user: user,
  hideRichTextFormattingOptions: const {
    FormatType.strikethrough,
    FormatType.codeBlock,
    FormatType.blockquote,
  },
)

Disable rich text entirely

Set enableRichTextFormatting: false to behave as a plain text field — no markdown parsing, no toolbar, regardless of the other two props.

Dart

CometChatMessageComposer(
  user: user,
  enableRichTextFormatting: false,
)

FormatType values

Value	Markdown
`FormatType.bold`	`text`
`FormatType.italic`	`_text_` or `text`
`FormatType.underline`	`<u>text</u>`
`FormatType.strikethrough`	`~~text~~`
`FormatType.inlineCode`	`code`
`FormatType.codeBlock`	```code```
`FormatType.link`	`[text](url)`
`FormatType.bulletList`	`- item`
`FormatType.orderedList`	`1. item`
`FormatType.blockquote`	`> quote`

richTextToolbarView receives the active controller. Because the controller is a RichTextEditingController under the hood, apply formats directly via applyFormat.

Dart

CometChatMessageComposer(
  user: user,
  richTextToolbarView: (context, controller) {
    return Row(
      children: [
        IconButton(
          icon: const Icon(Icons.format_bold),
          onPressed: () {
            (controller as RichTextEditingController).applyFormat(FormatType.bold);
          },
        ),
        IconButton(
          icon: const Icon(Icons.format_italic),
          onPressed: () {
            (controller as RichTextEditingController).applyFormat(FormatType.italic);
          },
        ),
      ],
    );
  },
  onRichTextFormatApplied: (formatType) {
    debugPrint('Applied ${formatType.name}');
  },
)

Available since v6.1.1 richTextToolbarActions appends your own buttons at the trailing end of the built-in toolbar — after the format buttons, separated by a divider — without replacing the toolbar the way richTextToolbarView does. It takes the same ComposerActionsBuilder shape as attachmentOptions and returns a list of CometChatMessageComposerAction items. Each action renders as an icon button, with its title as the tooltip. For toolbar actions, set the action’s onToolbarTap callback. It receives the BuildContext and the composer’s active TextEditingController, so the action can read the current text and selection and mutate the draft — the composer stays the owner of the field. The toolbar calls only onToolbarTap; an action’s onItemClick and style are not used here.

Dart

CometChatMessageComposer(
  user: user,
  richTextToolbarActions: (context, user, group, id) => [
    CometChatMessageComposerAction(
      id: 'insert_greeting',
      title: 'Greeting',
      icon: const Icon(Icons.waving_hand_outlined),
      onToolbarTap: (context, controller) {
        final selection = controller.selection;
        final offset = selection.isValid ? selection.start : controller.text.length;
        controller.text = controller.text.replaceRange(offset, offset, 'Hello! ');
      },
    ),
  ],
)

The trailing buttons render only on the built-in toolbar: not when richTextToolbarView replaces it, and not while a code segment has focus.

On web, tapping a toolbar button can blur the text field and collapse the selection before your handler runs. Fall back to the controller’s lastNonCollapsedSelection — the most recent selection that spanned at least one character — and bounds-check it against the current text.

To restyle a range without touching the text, use the controller’s applyInlineStyle(start, end, style, id: ...) and removeInlineStyle(start, end, id: ...). Styles applied under the same id replace each other, different IDs compose with the built-in formats, and the styling is local to the composer — it is not sent with the message.

Leaving mentions alone

A toolbar action that restyles a range will happily run over a mention, which should keep the styling the mentions formatter gives it. RichTextEditingController.getMentionRanges() returns the mention ranges currently tracked in the text, sorted by start offset, so an action can skip them. The ranges come from the attached CometChatMentionsFormatter — the same source the field styles mentions from — so they stay in step with the text as it is edited. The list is empty when no mentions formatter is attached. Toolbar actions only ever receive a RichTextEditingController, so the type check below is a safeguard for code you share with other TextEditingControllers.

Dart

onToolbarTap: (context, controller) {
  final mentions = controller is RichTextEditingController
      ? controller.getMentionRanges()
      : const <TextRange>[];

  bool overlapsMention(int start, int end) =>
      mentions.any((r) => start < r.end && end > r.start);

  // ...apply your styling only where overlapsMention() is false
},

Multiple Attachments

The composer can stage several media/file attachments and send them as one message.

Pick — the image/video option opens a multi-select picker, capped to the slots left on the message. Audio and documents are multi-select too.
Stage — each pick lands in the attachment tray as a tile with a live progress ring, and starts uploading immediately.
Send — the send button stays disabled until every tile finishes. Text typed alongside rides along as the caption, with rich-text formatting preserved as Markdown.

Files can also arrive by clipboard paste (images, video, audio, documents) and, on web, by drag-and-drop onto the composer. A selection spanning several kinds is split by kind and sent as one message per kind, in the order image → video → audio → file. Every message therefore carries a single kind and renders with that kind’s bubble — pick three photos and a PDF and the photos still arrive as an image grid, the PDF as a file card. They share a batchId, so the Message List groups them as one block.

Voice notes are never staged — a recording is always its own message and sends immediately. While the tray holds any tile, the mic button is hidden.

Limits and Validation

Limits come from your app’s settings in the CometChat dashboard and are read at runtime — the UI Kit does not hardcode them.

Limit	Setting	Behaviour
Files per message	`file.count.max` (default 10)	The picker is capped to the remaining slots. A selection larger than that is rejected whole, with a toast — nothing is staged.
Per-file size	`file.size.max` (default 100 MB)	An over-sized file becomes a non-retryable error tile stating the limit.
File type	Server-side	Rejected uploads become error tiles.

Error tiles come in two flavours and behave differently:

Failed (network dropped) — tap the tile to retry it in place.
Rejected (too large, wrong type, over the count) — not retryable; tapping explains why, and you remove the tile.

Sending is blocked while any tile is uploading or in error, so a caption can never go out while its attachments are still in flight.

Disabling Multiple Attachments

Multiple attachments are on by default. Turn them off to restore the classic one-file-per-message behaviour.

Dart

CometChatMessageComposer(
  user: user,
  enableMultipleAttachments: false,
)

This is composer-side only. Incoming messages carrying several attachments still render as grouped bubbles — that is controlled by enableMultipleAttachments on CometChatMessageList.

Styling the Attachment Tray

The staging tray’s tiles are styled through the composer’s own style object.

Dart

CometChatMessageComposer(
  user: user,
  messageComposerStyle: CometChatMessageComposerStyle(
    attachmentTrayStyle: CometChatAttachmentTrayStyle(),
  ),
)

Style the error alerts

Dart

CometChatMessageComposer(
  user: user,
  // Styles the alert shown when a selection is over the count limit.
  attachmentErrorAlertStyle: CometChatAttachmentErrorAlertStyle(),
  // Replace the default error snackbar entirely.
  attachmentErrorSnackBarBuilder: (context, tile) => MySnackBar(tile),
  // Called when the user taps an error tile (skips the snackbar).
  onAttachmentErrorTap: (context, tile) {},
)

Multiple Attachments Properties

Property	Data Type	Description
`enableMultipleAttachments`	`bool`	Master switch for staging. Defaults to `true`.
`attachmentTrayController`	`AttachmentTrayController?`	Drive the tray yourself. When omitted the composer owns one.
`onAttachmentTrayAdd`	`VoidCallback?`	Fires when the user taps + on the tray.
`onAttachmentTraySend`	`VoidCallback?`	Overrides the batch send — you send the messages yourself.
`disableImagePaste`	`bool`	Turns off clipboard paste. Defaults to `false`.
`disableDragAndDrop`	`bool`	Turns off drag-and-drop on web. Defaults to `false`.
`errorAlertStyle`	`CometChatErrorAlertStyle?`	Styles the over-limit toast.
`attachmentErrorSnackBarStyle`	`CometChatAttachmentErrorSnackBarStyle?`	Styles the error-tile snackbar.
`attachmentErrorSnackBarBuilder`	`Widget Function(BuildContext, AttachmentTile)?`	Replaces the error snackbar.
`onAttachmentErrorTap`	`Function(AttachmentTile)?`	Called when an error tile is tapped.

For the upload API underneath the tray, see Upload Files & Send Attachments.

V6 Architecture

Widget	Purpose
`AttachmentOptionsOverlay`	Attachment picker overlay
`MessageComposerAuxiliaryButtons`	Auxiliary button area
`MessageComposerSecondaryButtons`	Secondary button area
`MessageComposerSendButton`	Send button
`MessageComposerSuggestionList`	Suggestion/mention list
`ComposerAttachmentUtils`	Attachment utilities

BLoC Architecture

Component	Description
`MessageComposerBloc`	Manages composer state
`MessageComposerEvent`	Events: `SendTextMessage`, `SendMediaMessage`, `EditTextMessage`, `StartTyping`, `EndTyping`, etc.
`MessageComposerState`	Composer state

Use Cases

Use Case	Description
`SendTextMessageUseCase`	Sends text messages
`SendMediaMessageUseCase`	Sends media messages
`SendCustomMessageUseCase`	Sends custom messages
`EditMessageUseCase`	Edits messages
`TypingUseCases`	Start/end typing indicators
`GetLoggedInUserUseCase`	Gets the logged-in user

Overview

Usage

Integration

1. Using Navigator to Launch `CometChatMessageComposer`

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

Actions

1. OnSendButtonClick

2. onChange

3. onError

Filters

Events

Customization

Style

1. CometChatMessageComposerStyle

2. MediaRecorder Style

Functionality

Message Composer Properties

Advanced

TextFormatters

AttachmentOptions

AuxiliaryButton Widget

Layout

Rich Text Formatting

Enable with defaults

Hide specific format buttons

Disable rich text entirely

FormatType values

Leaving mentions alone

Multiple Attachments

Limits and Validation

Disabling Multiple Attachments

Styling the Attachment Tray

Style the error alerts

Multiple Attachments Properties

V6 Architecture

Sub-Widget Decomposition

BLoC Architecture

Use Cases

​Overview

​Usage

​Integration

1. Using Navigator to Launch CometChatMessageComposer

2. Embedding CometChatMessageComposer as a Widget in the build Method

​Actions

1. OnSendButtonClick

2. onChange

3. onError

​Filters

​Events

​Customization

​Style

1. CometChatMessageComposerStyle

2. MediaRecorder Style

​Functionality

​Message Composer Properties

​Advanced

​TextFormatters

​AttachmentOptions

​AuxiliaryButton Widget

​Layout

​Rich Text Formatting

​Enable with defaults

​Show or hide the toolbar UI

​Hide specific format buttons

​Disable rich text entirely

​FormatType values

​Custom toolbar view

​Trailing toolbar actions

​Leaving mentions alone

​Multiple Attachments

​Limits and Validation

​Disabling Multiple Attachments

​Styling the Attachment Tray

​Style the error alerts

​Multiple Attachments Properties

​V6 Architecture

​Sub-Widget Decomposition

​BLoC Architecture

​Use Cases

Overview

Usage

Integration

1. Using Navigator to Launch `CometChatMessageComposer`

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

Actions

Filters

Events

Customization

Style

Functionality

Message Composer Properties

Advanced

TextFormatters

AttachmentOptions

AuxiliaryButton Widget

Layout

Rich Text Formatting

Enable with defaults

Show or hide the toolbar UI

Hide specific format buttons

Disable rich text entirely

FormatType values

Custom toolbar view

Trailing toolbar actions

Leaving mentions alone

Multiple Attachments

Limits and Validation

Disabling Multiple Attachments

Styling the Attachment Tray

Style the error alerts

Multiple Attachments Properties

V6 Architecture

Sub-Widget Decomposition

BLoC Architecture

Use Cases