Skip to main content

Overview

CometChatMessageComposer is a rich text input component for sending messages. It supports attachments, emoji, voice recording, mentions, rich text formatting, and reply/edit previews. Wire it alongside CometChatMessageList and CometChatMessageHeader to build a complete messaging experience.
Live Preview — interact with the default message composer.Open in Storybook ↗
The component handles:
  • Text input with placeholder and auto-resize
  • Rich text formatting (bold, italic, links, code, lists)
  • File attachments with preview thumbnails
  • Emoji keyboard
  • Voice recording
  • @mentions with user/group member search
  • Edit and reply mode with preview banners
  • Typing indicator events
  • Live reactions

Usage

Flat API

Compound Composition

Full Layout Example


Actions and Events

Callback Props

Events Emitted

UI events this component publishes:

Events Received

UI events this component subscribes to (published by other components):

SDK Listeners (Automatic)

The composer does not subscribe to SDK listeners directly. It relies on typing indicator events emitted via the SDK when disableTypingEvents is false.

Customization

View Props

Use view props to replace sections of the default UI while keeping the component’s behavior intact:

attachmentOptions

Override the default attachment options.

auxiliaryButtonView

Replace the auxiliary button area.

sendButtonView

Replace the send button.

Compound Composition

For full layout control, use sub-components. Omit any sub-component to hide it:
Available sub-components:

CSS Styling

Override design tokens on the component selector:

Props

All props are optional unless noted.
View slot props (headerView, sendButtonView, auxiliaryButtonView, attachmentButtonIconView, voiceRecordingButtonIconView, emojiButtonIconView) are convenience props available only on the flat API. In compound composition mode, use the corresponding sub-components directly or pass children to them.

Entity


user

User for 1:1 conversations.

group

Group for group conversations.

parentMessageId

Parent message ID for threaded replies.

Layout


layout

Layout mode for the composer. compact keeps everything on one line; multiline expands the input area.

Text Input


initialText

Initial text to pre-fill the input (uncontrolled).

text

Controlled text value. When provided, the consumer owns the text state and must update it via onTextChange.

placeholder

Placeholder text shown when the input is empty.

enterKeyBehavior

What happens when the user presses Enter.

maxInputHeight

Maximum height for the input area in pixels before it scrolls.

Rich Text


enableRichTextEditor

Enable rich text formatting (toolbar, keyboard shortcuts, markdown auto-conversion).

hideRichTextFormattingOptions

Hide the rich text formatting toolbar (shortcuts still work).

showBubbleMenuOnSelection

Show a floating bubble menu near selected text with formatting options (desktop only).

Edit / Reply


messageToEdit

Message to edit (triggers edit mode).

messageToReply

Message to reply to (triggers reply mode with preview).

Attachments


attachmentOptions

Custom attachment options (overrides plugin-provided ones).

hideAttachmentOptions

Hide specific attachment options in the default layout.

showAttachmentPreview

Whether to show attachment preview thumbnails before sending.

maxAttachments

Maximum number of attachments allowed.

allowedFileTypes

Allowed file MIME types for attachments.

maxFileSize

Maximum file size in bytes.

Hide Buttons


hideAttachmentButton

Hide the attachment (”+”) button entirely.

hideEmojiKeyboardButton

Hide the emoji keyboard button.

hideVoiceRecordingButton

Hide the voice recording button.

hideStickersButton

Hide the stickers button.

hideAIButton

Hide the AI button.

hideLiveReaction

Hide the live reaction button.

hideSendButton

Hide the send button.

hideError

Hide the error state UI.

Mentions


textFormatters

Text formatters pipeline for custom text processing.

disableMentions

Disable @mentions entirely.

disableMentionAll

Disable the @all mention option in groups.

mentionAllLabel

Label for the @all mention option.

mentionsUsersRequestBuilder

Custom request builder for mention user search.

mentionsGroupMembersRequestBuilder

Custom request builder for mention group member search.

Sound


disableTypingEvents

Disable typing indicator events.

disableSoundForMessage

Disable sound on message send.

customSoundForMessage

Custom sound URL for message send.

Misc


disableAutoFocusOnMobile

Disable auto-focus on mobile devices to prevent the keyboard from automatically opening on load.

liveReactionIcon

Custom icon URL for the live reaction button.

showScrollbar

Show the native scrollbar on the input area.

Custom Views


attachmentButtonIconView

Custom ReactNode to replace the content inside the attachment button (keeps action wired).

voiceRecordingButtonIconView

Custom ReactNode to replace the content inside the voice recording button (keeps action wired).

emojiButtonIconView

Custom ReactNode to replace the content inside the emoji button (keeps action wired).

sendButtonView

Custom ReactNode to replace the content inside the send button (keeps send/edit action wired).

auxiliaryButtonView

Custom ReactNode for additional buttons rendered in the actions area before the send button.

headerView

Custom ReactNode for the header area above the input (replaces edit/reply preview + validation).

Callbacks


onTextChange

Called when text changes.

onSendButtonClick

Called when a message is sent or edited.

sendTextMessageOverride

Override the internal SDK sendTextMessage call for optimistic updates. When provided, called instead of CometChat.sendMessage().

onError

Called when an error occurs.

onClosePreview

Called when reply/edit preview is closed.

onAttachmentAdded

Called when a file attachment is added.

onAttachmentRemoved

Called when a file attachment is removed.

onMentionSelected

Called when a mention is selected from the suggestions list.

CSS Selectors


Next Steps

Message List

Display messages for the selected conversation

Thread Header

Show threaded replies for a parent message

Theming

Customize colors, fonts, and spacing