# Compact Message Composer: a single-line message input

CometChat's single line composer is a compact message input component for the React UI Kit v6, supporting rich text formatting, attachments, mentions, and voice recording, designed to drop into any existing chat layout without disruption.

Nivedita Bharathy • Apr 1, 2026

## 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](https://www.cometchat.com/docs/ui-kit/react/compact-message-composer)

Full Message Composer: [https://www.cometchat.com/docs/ui-kit/react/message-composer](https://www.cometchat.com/docs/ui-kit/react/message-composer)

Message List: [https://www.cometchat.com/docs/ui-kit/react/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](https://www.cometchat.com/docs/ui-kit/react/mentions-formatter-guide)

Nivedita Bharathy

Product Marketing Specialist , CometChat

Nivedita Bharathy is a Product Marketing Specialist at CometChat with experience spanning AI startups, incubators, and enterprise SaaS. A Boston University graduate and avid reader, she specializes in transforming complex technology into compelling narratives that resonate with both technical and business audiences.