CometChat’s single line composer, is a compact, message input component for the CometChat React UI Kit v6. It supports rich text formatting, attachments, mentions, and voice recording, and is designed to drop into existing chat layouts without disruption.
This is a compact variant of the message composer for CometChat’s chat and messaging product. It shares a similar props API but provides a streamlined, single-line interface. Wire it alongside the CometChat message header and message list to build a standard chat view.
What are we launching?
We are launching a new component in the CometChat React UI Kit v6 that provides a compact, single-line message input with optional rich text formatting capabilities.
It supports:
Rich text formatting: bold, italic, underline, strikethrough, code, links, lists, and blockquotes.
Attachments
Message editing
Mentions
Link previews
Voice recording
The component is available via the React UI Kit and the JavaScript SDK.
Getting started is a single import from the React UI Kit.
Why does this matter to me as a developer?
The standard messaging composer is full-featured and multi-line. That works well for many layouts, but not all of them.
Some interfaces need a message input that:
Stays compact and single-line
Fits into tighter layouts without taking over the screen.
Still supports the full range of messaging features when needed.
CometChat’s single line composer fills that gap. You get the same feature set as the full composer, including rich text, attachments, mentions, and voice recording, in a component that stays out of the way until the user needs it.
Key features and capabilities
Rich text formatting
The formatting toolbar supports:
Bold, italic, underline, strikethrough.
Inline code and code blocks
Links
Bullet lists and ordered lists
Blockquotes
Every tool has a keyboard shortcut. The toolbar itself has three display modes:
Floating on selection:
a toolbar appears when the user selects text. Desktop only.
Always visible:
the toolbar sits above the input by default.
Hidden:
Rich text is enabled but no toolbar is shown. Keyboard shortcuts still work.
On mobile, only the fixed toolbar is supported. The floating selection toolbar is automatically disabled for better touch experience.
Attachment options
The component includes attachment support out of the box. Individual attachment types can be hidden via props
Mentions
Mentions are enabled by default. You can:
Disable mentions entirely
Disable group-wide mentions like @all
Set a custom label for group mentions, for example @channel or @everyone
Control how the mentions list is fetched
Callback props
Three callback props let you hook into composer behavior:
onSendButtonClick fires when the send button is clicked, overriding the default send behavior
onTextChange fires as the user types
onError fires on internal errors such as network failures, auth issues, or SDK exceptions
Global UI events
The component emits three global events via CometChat messaging events:
ccMessageSent fires when a message is sent
ccMessageEdited fires when a message is edited
ccReplyToMessage fires when a user replies to a message
Each event carries a status of inProgress, success, or error. Use these to sync external UI with message state, for example updating a notification badge or triggering analytics.
What is interesting about the tech behind this?
Custom view slots
Four slots let you replace specific sections of the default UI:
Header view; replaces the area above the composer input
Auxiliary button view; replaces sticker and AI button area
Send button view; replaces send button
Attachment options; replaces default attachment options list
Each slot accepts a JSX element, so you can inject any component into that position without touching the rest of the layout.
Text formatters
The textFormatters prop accepts a list of CometChatTextFormatter instances. This lets you build custom formatting behavior, for example a shortcut expander that replaces !greeting with a full message string, and attach it to the composer without modifying the component itself.
Minimal footprint in existing layouts
The component patches into existing chat layouts by design. Passing a user or group prop is enough to wire it up. It does not require changes to your routing, auth, or app logic.
Reference links
Documentation: https://www.cometchat.com/docs/ui-kit/react/compact-message-composer
Full Message Composer: https://www.cometchat.com/docs/ui-kit/react/message-composer
Message List: https://www.cometchat.com/docs/ui-kit/react/message-list
Mentions Formatter: https://www.cometchat.com/docs/ui-kit/react/mentions-formatter-guide
Nivedita Bharathy
Product Marketing Specialist , CometChat