> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-rn-guide-message-privately.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
```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?", "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](/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
```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),
],
),
);
}
}
```
## Minimal Render
The simplest way to render `CometChatCompactMessageComposer`:
```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,
)
```
## 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 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
},
)
```
## 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?` | `null` | Specifies which format types to hide from the rich text toolbar |
| `richTextToolbarStyle` | `CometChatRichTextToolbarStyle?` | - | Custom styling for the rich text toolbar |
```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,
)
```
## 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 theme={null}
// 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 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),
),
],
);
},
)
```
### Example: Custom Header View
```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),
),
],
),
);
},
)
```
### Example: Custom Footer View
```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")),
);
},
)
```
### Example: Custom Attachment Options
```dart theme={null}
CometChatCompactMessageComposer(
user: user,
attachmentOptions: (context, user, group, id) {
return [
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 theme={null}
CometChatCompactMessageComposer(
user: user,
compactMessageComposerStyle: CometChatCompactMessageComposerStyle(
sendButtonBackgroundColor: Color(0xFFF76808),
attachmentButtonIconColor: Color(0xFFF76808),
auxiliaryButtonIconColor: Color(0xFFF76808),
),
)
```
### Example: Custom Compose Box Styling
```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),
),
)
```
### Example: Custom Rich Text Toolbar Style
```dart theme={null}
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 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),
),
),
)
```
## 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).
```dart theme={null}
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 theme={null}
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 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)),
)
```
## 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?` | `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?` | - | 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 |
The standard message composer component
Display user or group details in the header
Display messages in a conversation
Configure mentions look and feel