> ## Documentation Index
> Fetch the complete documentation index at: https://www.cometchat.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Compact Message Composer

> A compact, single-line message input component with rich text formatting, attachments, mentions, and voice recording support.

<Accordion title="AI Integration Quick Reference">
  ```json theme={null}
  {
    "component": "CometChatCompactMessageComposer",
    "package": "@cometchat/chat-uikit-react",
    "import": "import { CometChatCompactMessageComposer } from \"@cometchat/chat-uikit-react\";",
    "description": "Compact single-line message input with optional rich text formatting (bold, italic, underline, strikethrough, code, links, lists, blockquotes), attachments, mentions, voice recording, and message editing support.",
    "primaryOutput": {
      "prop": "onSendButtonClick",
      "type": "(message: CometChat.BaseMessage) => void"
    },
    "props": {
      "data": {
        "user": { "type": "CometChat.User", "default": "undefined" },
        "group": { "type": "CometChat.Group", "default": "undefined" },
        "parentMessageId": { "type": "number", "default": "undefined" },
        "initialComposerText": { "type": "string", "default": "\"\"" },
        "placeholderText": { "type": "string", "default": "\"Type a message...\"" }
      },
      "callbacks": {
        "onSendButtonClick": "(message: CometChat.BaseMessage) => void",
        "onTextChange": "(text: string) => void",
        "onError": "(error: CometChat.CometChatException) => void"
      },
      "visibility": {
        "hideImageAttachmentOption": { "type": "boolean", "default": false },
        "hideVideoAttachmentOption": { "type": "boolean", "default": false },
        "hideAudioAttachmentOption": { "type": "boolean", "default": false },
        "hideFileAttachmentOption": { "type": "boolean", "default": false },
        "hidePollsOption": { "type": "boolean", "default": false },
        "hideCollaborativeDocumentOption": { "type": "boolean", "default": false },
        "hideCollaborativeWhiteboardOption": { "type": "boolean", "default": false },
        "hideAttachmentButton": { "type": "boolean", "default": false },
        "hideVoiceRecordingButton": { "type": "boolean", "default": false },
        "hideEmojiKeyboardButton": { "type": "boolean", "default": false },
        "hideStickersButton": { "type": "boolean", "default": false },
        "hideSendButton": { "type": "boolean", "default": false }
      },
      "richText": {
        "enableRichTextEditor": { "type": "boolean", "default": false },
        "hideRichTextFormattingOptions": { "type": "boolean", "default": false },
        "showToolbarOnSelection": { "type": "boolean", "default": false },
        "enterKeyBehavior": { "type": "EnterKeyBehavior", "default": "EnterKeyBehavior.SendMessage" }
      },
      "behavior": {
        "disableTypingEvents": { "type": "boolean", "default": false },
        "disableMentions": { "type": "boolean", "default": false },
        "disableMentionAll": { "type": "boolean", "default": false },
        "mentionAllLabel": { "type": "string", "default": "\"all\"" },
        "disableSoundForMessage": { "type": "boolean", "default": false },
        "showScrollbar": { "type": "boolean", "default": false }
      },
      "viewSlots": {
        "headerView": "JSX.Element",
        "auxiliaryButtonView": "JSX.Element",
        "sendButtonView": "JSX.Element"
      },
      "formatting": {
        "textFormatters": {
          "type": "CometChatTextFormatter[]",
          "default": "default formatters from data source"
        },
        "attachmentOptions": {
          "type": "CometChatMessageComposerAction[]",
          "note": "Custom attachment options list (replaces defaults)"
        }
      }
    },
    "events": [
      {
        "name": "ccMessageSent",
        "payload": "{ message: CometChat.BaseMessage, status: string }",
        "description": "Triggers when a message is sent with status: inProgress, success, or error"
      },
      {
        "name": "ccMessageEdited",
        "payload": "{ message: CometChat.BaseMessage, status: string }",
        "description": "Triggers when a message is edited with status: inProgress, success, or error"
      },
      {
        "name": "ccReplyToMessage",
        "payload": "{ message: CometChat.BaseMessage, status: string }",
        "description": "Triggers when a user replies to a message with status: inProgress, success, or error"
      }
    ],
    "compositionExample": {
      "description": "Compact message composer wired with message header and list for complete chat view",
      "components": [
        "CometChatMessageHeader",
        "CometChatMessageList",
        "CometChatCompactMessageComposer"
      ],
      "flow": "Pass user or group prop to composer -> onSendButtonClick fires with CometChat.BaseMessage -> message appears in MessageList"
    }
  }
  ```
</Accordion>

## Overview

`CometChatCompactMessageComposer` is a [Component](/ui-kit/react/components-overview#components) that provides a compact, single-line message input with optional rich text formatting capabilities. It supports bold, italic, underline, strikethrough, code, links, lists, and blockquotes.

This is a compact variant of [CometChatMessageComposer](/ui-kit/react/message-composer). It shares a similar props API but provides a streamlined, single-line interface with rich text formatting controls.

Wire it alongside `CometChatMessageHeader` and `CometChatMessageList` to build a standard chat view.

Features such as **Rich Text Formatting**, **Attachments**, **Message Editing**, **Mentions**, **Link Previews**, and **Voice Recording** are supported.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/8cgqMAd3zN9nJFvD/images/compact-message-composer.png?fit=max&auto=format&n=8cgqMAd3zN9nJFvD&q=85&s=1e79d224862b0297f1628d08566800d0" width="1162" height="204" data-path="images/compact-message-composer.png" />
</Frame>

<Note>
  **Before using this component:** Ensure `CometChatUIKit.init(UIKitSettings)` has completed and the user is logged in via `CometChatUIKit.login("UID")`. See [React.js Integration](/ui-kit/react/react-js-integration).
</Note>

<Note>
  **Available via:** [UI Kits](/ui-kit/react/overview) | [SDK](/sdk/javascript/overview)
</Note>

***

## Minimal Render

```tsx theme={null}
import { CometChatCompactMessageComposer } from "@cometchat/chat-uikit-react";

function CompactComposerDemo() {
  return <CometChatCompactMessageComposer user={chatUser} />;
}

export default CompactComposerDemo;
```

***

## Usage

### Integration

The following code snippet illustrates how you can directly incorporate the CompactMessageComposer component into your app.

<Tabs>
  <Tab title="TypeScript">
    ```tsx theme={null}
    import React from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { CometChatCompactMessageComposer } from "@cometchat/chat-uikit-react";

    export function CompactComposerDemo() {
      const [chatUser, setChatUser] = React.useState<CometChat.User>();
      React.useEffect(() => {
        CometChat.getUser("uid").then((user) => {
          setChatUser(user);
        });
      }, []);

      return chatUser ? (
        <div>
          <CometChatCompactMessageComposer user={chatUser} />
        </div>
      ) : null;
    }
    ```
  </Tab>

  <Tab title="JavaScript">
    ```jsx theme={null}
    import React from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { CometChatCompactMessageComposer } from "@cometchat/chat-uikit-react";

    export function CompactComposerDemo() {
      const [chatUser, setChatUser] = React.useState(null);
      React.useEffect(() => {
        CometChat.getUser("uid").then((user) => {
          setChatUser(user);
        });
      }, []);

      return chatUser ? (
        <div>
          <CometChatCompactMessageComposer user={chatUser} />
        </div>
      ) : null;
    }
    ```
  </Tab>
</Tabs>

**Expected result:**

* The `CometChatCompactMessageComposer` component renders a compact, single-line message input
* The input supports typing, sending messages, attachments, emoji, stickers, and voice recording
* Clicking the send button dispatches the message to the specified `user`

***

## Actions and Events

### Callback Props

[Actions](/ui-kit/react/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs.

#### onSendButtonClick

Fires when the send message button is clicked. Overrides the default send behavior.

```tsx theme={null}
onSendButtonClick?: (message: CometChat.BaseMessage) => void
```

<Tabs>
  <Tab title="TypeScript">
    ```tsx theme={null}
    import React from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { CometChatCompactMessageComposer } from "@cometchat/chat-uikit-react";

    export function CompactComposerDemo() {
      const [chatUser, setChatUser] = React.useState<CometChat.User>();

      React.useEffect(() => {
        CometChat.getUser("uid").then((user) => {
          setChatUser(user);
        });
      }, []);

      function handleSendButtonClick(message: CometChat.BaseMessage): void {
        console.log("your custom on send button click action");
      }

      return chatUser ? (
        <div>
          <CometChatCompactMessageComposer
            user={chatUser}
            onSendButtonClick={handleSendButtonClick}
          />
        </div>
      ) : null;
    }
    ```
  </Tab>

  <Tab title="JavaScript">
    ```jsx theme={null}
    import React from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { CometChatCompactMessageComposer } from "@cometchat/chat-uikit-react";

    export function CompactComposerDemo() {
      const [chatUser, setChatUser] = React.useState(null);

      React.useEffect(() => {
        CometChat.getUser("uid").then((user) => {
          setChatUser(user);
        });
      }, []);

      function handleSendButtonClick(message) {
        console.log("your custom on send button click action");
      }

      return chatUser ? (
        <div>
          <CometChatCompactMessageComposer
            user={chatUser}
            onSendButtonClick={handleSendButtonClick}
          />
        </div>
      ) : null;
    }
    ```
  </Tab>
</Tabs>

#### onError

Fires on internal errors (network failure, auth issue, SDK exception). This action doesn't change the behavior of the component but rather listens for any errors that occur in the CompactMessageComposer component.

```tsx theme={null}
onError?: (error: CometChat.CometChatException) => void
```

<Tabs>
  <Tab title="TypeScript">
    ```tsx theme={null}
    import React from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { CometChatCompactMessageComposer } from "@cometchat/chat-uikit-react";

    export function CompactComposerDemo() {
      const [chatUser, setChatUser] = React.useState<CometChat.User>();

      React.useEffect(() => {
        CometChat.getUser("uid").then((user) => {
          setChatUser(user);
        });
      }, []);

      function handleError(error: CometChat.CometChatException) {
        throw new Error("your custom error action");
      }

      return chatUser ? (
        <div>
          <CometChatCompactMessageComposer user={chatUser} onError={handleError} />
        </div>
      ) : null;
    }
    ```
  </Tab>

  <Tab title="JavaScript">
    ```jsx theme={null}
    import React from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { CometChatCompactMessageComposer } from "@cometchat/chat-uikit-react";

    export function CompactComposerDemo() {
      const [chatUser, setChatUser] = React.useState(null);

      React.useEffect(() => {
        CometChat.getUser("uid").then((user) => {
          setChatUser(user);
        });
      }, []);

      function handleError(error) {
        throw new Error("your custom error action");
      }

      return chatUser ? (
        <div>
          <CometChatCompactMessageComposer user={chatUser} onError={handleError} />
        </div>
      ) : null;
    }
    ```
  </Tab>
</Tabs>

#### onTextChange

Fires as the user types in the composer input.

```tsx theme={null}
onTextChange?: (text: string) => void
```

<Tabs>
  <Tab title="TypeScript">
    ```tsx theme={null}
    import React from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { CometChatCompactMessageComposer } from "@cometchat/chat-uikit-react";

    export function CompactComposerDemo() {
      const [chatUser, setChatUser] = React.useState<CometChat.User>();

      React.useEffect(() => {
        CometChat.getUser("uid").then((user) => {
          setChatUser(user);
        });
      }, []);

      function handleTextChange(text: string) {
        console.log("onTextChange", text);
      }

      return chatUser ? (
        <div>
          <CometChatCompactMessageComposer
            user={chatUser}
            onTextChange={handleTextChange}
          />
        </div>
      ) : null;
    }
    ```
  </Tab>

  <Tab title="JavaScript">
    ```jsx theme={null}
    import React from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { CometChatCompactMessageComposer } from "@cometchat/chat-uikit-react";

    export function CompactComposerDemo() {
      const [chatUser, setChatUser] = React.useState(null);

      React.useEffect(() => {
        CometChat.getUser("uid").then((user) => {
          setChatUser(user);
        });
      }, []);

      function handleTextChange(text) {
        console.log("onTextChange", text);
      }

      return chatUser ? (
        <div>
          <CometChatCompactMessageComposer
            user={chatUser}
            onTextChange={handleTextChange}
          />
        </div>
      ) : null;
    }
    ```
  </Tab>
</Tabs>

#### Custom Mentions Request Builders

You can customize how mentioned users and group members are fetched by providing custom request builders.

<Tabs>
  <Tab title="TypeScript">
    ```tsx theme={null}
    import React from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { CometChatCompactMessageComposer } from "@cometchat/chat-uikit-react";

    export function CompactComposerDemo() {
      const [chatUser, setChatUser] = React.useState<CometChat.User>();
      const [chatGroup, setChatGroup] = React.useState<CometChat.Group>();

      React.useEffect(() => {
        CometChat.getUser("uid").then((user) => {
          setChatUser(user);
        });
        CometChat.getGroup("guid").then((group) => {
          setChatGroup(group);
        });
      }, []);

      // Custom Users Request Builder for mentions
      const mentionsUsersRequestBuilder = new CometChat.UsersRequestBuilder()
        .setLimit(10)
        .setSearchKeyword("")
        .setRoles(["default", "moderator"]);

      // Custom Group Members Request Builder for group mentions
      const mentionsGroupMembersRequestBuilder = new CometChat.GroupMembersRequestBuilder("guid")
        .setLimit(15)
        .setSearchKeyword("")
        .setScopes(["admin", "moderator", "participant"]);

      return chatUser ? (
        <div>
          {/* For user chat with custom users mentions */}
          <CometChatCompactMessageComposer
            user={chatUser}
            mentionsUsersRequestBuilder={mentionsUsersRequestBuilder}
          />

          {/* For group chat with custom group members mentions */}
          {chatGroup && (
            <CometChatCompactMessageComposer
              group={chatGroup}
              mentionsGroupMembersRequestBuilder={mentionsGroupMembersRequestBuilder}
            />
          )}
        </div>
      ) : null;
    }
    ```
  </Tab>

  <Tab title="JavaScript">
    ```jsx theme={null}
    import React from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { CometChatCompactMessageComposer } from "@cometchat/chat-uikit-react";

    export function CompactComposerDemo() {
      const [chatUser, setChatUser] = React.useState(null);
      const [chatGroup, setChatGroup] = React.useState(null);

      React.useEffect(() => {
        CometChat.getUser("uid").then((user) => {
          setChatUser(user);
        });
        CometChat.getGroup("guid").then((group) => {
          setChatGroup(group);
        });
      }, []);

      // Custom Users Request Builder for mentions
      const mentionsUsersRequestBuilder = new CometChat.UsersRequestBuilder()
        .setLimit(10)
        .setSearchKeyword("")
        .setRoles(["default", "moderator"]);

      // Custom Group Members Request Builder for group mentions
      const mentionsGroupMembersRequestBuilder = new CometChat.GroupMembersRequestBuilder("guid")
        .setLimit(15)
        .setSearchKeyword("")
        .setScopes(["admin", "moderator", "participant"]);

      return chatUser ? (
        <div>
          {/* For user chat with custom users mentions */}
          <CometChatCompactMessageComposer
            user={chatUser}
            mentionsUsersRequestBuilder={mentionsUsersRequestBuilder}
          />

          {/* For group chat with custom group members mentions */}
          {chatGroup && (
            <CometChatCompactMessageComposer
              group={chatGroup}
              mentionsGroupMembersRequestBuilder={mentionsGroupMembersRequestBuilder}
            />
          )}
        </div>
      ) : null;
    }
    ```
  </Tab>
</Tabs>

***

### Filters

CompactMessageComposer component does not have any available filters.

***

### Global UI Events

[Events](/ui-kit/react/components-overview#events) are emitted by a `Component`. By using events you can extend existing functionality. Being global events, they can be applied in multiple locations and are capable of being added or removed.

`CometChatMessageEvents` emits events subscribable from anywhere in the application. Add listeners and remove them on cleanup.

| Event                | Fires when                  | Payload                                              |
| -------------------- | --------------------------- | ---------------------------------------------------- |
| **ccMessageSent**    | A message is sent           | `{ message: CometChat.BaseMessage, status: string }` |
| **ccMessageEdited**  | A message is edited         | `{ message: CometChat.BaseMessage, status: string }` |
| **ccReplyToMessage** | A user replies to a message | `{ message: CometChat.BaseMessage, status: string }` |

Each event has three states: `inProgress`, `success`, and `error`.

When to use: sync external UI with message state changes. For example, update a notification badge when messages are sent, or trigger analytics when a message is edited.

<Tabs>
  <Tab title="TypeScript">
    ```tsx theme={null}
    import React, { useEffect } from "react";
    import { CometChatMessageEvents } from "@cometchat/chat-uikit-react";

    function useCompactComposerEvents() {
      useEffect(() => {
        const ccMessageEdited = CometChatMessageEvents.ccMessageEdited.subscribe(
          (item) => {
            console.log("Message edited:", item);
          }
        );

        const ccReplyToMessage = CometChatMessageEvents.ccReplyToMessage.subscribe(
          (item) => {
            console.log("Reply to message:", item);
          }
        );

        const ccMessageSent = CometChatMessageEvents.ccMessageSent.subscribe(
          (item) => {
            console.log("Message sent:", item);
          }
        );

        // Cleanup on unmount
        return () => {
          ccMessageEdited?.unsubscribe();
          ccReplyToMessage?.unsubscribe();
          ccMessageSent?.unsubscribe();
        };
      }, []);
    }
    ```
  </Tab>

  <Tab title="JavaScript">
    ```jsx theme={null}
    import React, { useEffect } from "react";
    import { CometChatMessageEvents } from "@cometchat/chat-uikit-react";

    function useCompactComposerEvents() {
      useEffect(() => {
        const ccMessageEdited = CometChatMessageEvents.ccMessageEdited.subscribe(
          (item) => {
            console.log("Message edited:", item);
          }
        );

        const ccReplyToMessage = CometChatMessageEvents.ccReplyToMessage.subscribe(
          (item) => {
            console.log("Reply to message:", item);
          }
        );

        const ccMessageSent = CometChatMessageEvents.ccMessageSent.subscribe(
          (item) => {
            console.log("Message sent:", item);
          }
        );

        // Cleanup on unmount
        return () => {
          ccMessageEdited?.unsubscribe();
          ccReplyToMessage?.unsubscribe();
          ccMessageSent?.unsubscribe();
        };
      }, []);
    }
    ```
  </Tab>
</Tabs>

<Note>
  In React 18 StrictMode, `useEffect` runs twice on mount in development. The component handles listener cleanup internally, but any additional listeners added alongside the component need cleanup in the `useEffect` return function to avoid duplicate event handling.
</Note>

***

## Customization

To fit your app's design requirements, you can customize the appearance of the CompactMessageComposer component. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs.

***

### Functionality

These are a set of small functional customizations that allow you to fine-tune the overall experience of the component. With these, you can change text, set custom icons, and toggle the visibility of UI elements.

<Tabs>
  <Tab title="TypeScript">
    ```tsx theme={null}
    import React from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { CometChatCompactMessageComposer } from "@cometchat/chat-uikit-react";

    <CometChatCompactMessageComposer user={chatUser} disableTypingEvents={true} />;
    ```
  </Tab>
</Tabs>

Below is a list of customizations along with corresponding code snippets

| Property                               | Type                                   | Default                        | Description                                                                                          | Code                                                              |
| -------------------------------------- | -------------------------------------- | ------------------------------ | ---------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------- |
| **user**                               | `CometChat.User`                       | `undefined`                    | Specifies the recipient of the message (user object).                                                | `user={chatUser}`                                                 |
| **group**                              | `CometChat.Group`                      | `undefined`                    | Specifies the group to send messages to. Used if the `user` prop is not provided.                    | `group={chatGroup}`                                               |
| **parentMessageId**                    | `number`                               | `undefined`                    | Specifies the ID of the parent message for threading or replying to a specific message.              | `parentMessageId={12345}`                                         |
| **initialComposerText**                | `string`                               | `""`                           | The initial text pre-filled in the message input when the component mounts.                          | `initialComposerText="Hello"`                                     |
| **placeholderText**                    | `string`                               | `"Type a message..."`          | The placeholder text displayed in the message input when it is empty.                                | `placeholderText="Type a message..."`                             |
| **disableTypingEvents**                | `boolean`                              | `false`                        | Disables the typing indicator for the current message composer.                                      | `disableTypingEvents={true}`                                      |
| **disableMentions**                    | `boolean`                              | `false`                        | Disables the mentions functionality in the message composer.                                         | `disableMentions={true}`                                          |
| **disableMentionAll**                  | `boolean`                              | `false`                        | Controls whether group mentions like @all appear in suggestions.                                     | `disableMentionAll={true}`                                        |
| **mentionAllLabel**                    | `string`                               | `"all"`                        | Allows setting a custom alias label for group mentions (@channel, @everyone, etc.).                  | `mentionAllLabel="all"`                                           |
| **mentionsUsersRequestBuilder**        | `CometChat.UsersRequestBuilder`        | `undefined`                    | Provides a custom UsersRequestBuilder to control how the mentioned users list is fetched.            | `mentionsUsersRequestBuilder={usersRequestBuilder}`               |
| **mentionsGroupMembersRequestBuilder** | `CometChat.GroupMembersRequestBuilder` | `undefined`                    | Provides a custom GroupMembersRequestBuilder to customize how mentioned group members are retrieved. | `mentionsGroupMembersRequestBuilder={groupMembersRequestBuilder}` |
| **enableRichTextEditor**               | `boolean`                              | `false`                        | Master switch to enable rich text formatting. When false, the composer works as plain text only.     | `enableRichTextEditor={true}`                                     |
| **showToolbarOnSelection**             | `boolean`                              | `false`                        | Shows a floating toolbar when text is selected. Ignored on mobile devices.                           | `showToolbarOnSelection={true}`                                   |
| **hideRichTextFormattingOptions**      | `boolean`                              | `false`                        | Hides the rich text formatting toolbar. Keyboard shortcuts still work.                               | `hideRichTextFormattingOptions={true}`                            |
| **hideImageAttachmentOption**          | `boolean`                              | `false`                        | Hides the image attachment option in the message composer.                                           | `hideImageAttachmentOption={true}`                                |
| **hideVideoAttachmentOption**          | `boolean`                              | `false`                        | Hides the video attachment option in the message composer.                                           | `hideVideoAttachmentOption={true}`                                |
| **hideAudioAttachmentOption**          | `boolean`                              | `false`                        | Hides the audio attachment option in the message composer.                                           | `hideAudioAttachmentOption={true}`                                |
| **hideFileAttachmentOption**           | `boolean`                              | `false`                        | Hides the file attachment option in the message composer.                                            | `hideFileAttachmentOption={true}`                                 |
| **hidePollsOption**                    | `boolean`                              | `false`                        | Hides the polls option in the message composer.                                                      | `hidePollsOption={true}`                                          |
| **hideCollaborativeDocumentOption**    | `boolean`                              | `false`                        | Hides the collaborative document option in the message composer.                                     | `hideCollaborativeDocumentOption={true}`                          |
| **hideCollaborativeWhiteboardOption**  | `boolean`                              | `false`                        | Hides the collaborative whiteboard option in the message composer.                                   | `hideCollaborativeWhiteboardOption={true}`                        |
| **hideAttachmentButton**               | `boolean`                              | `false`                        | Hides the attachment button in the message composer.                                                 | `hideAttachmentButton={true}`                                     |
| **hideVoiceRecordingButton**           | `boolean`                              | `false`                        | Hides the voice recording button in the message composer.                                            | `hideVoiceRecordingButton={true}`                                 |
| **hideEmojiKeyboardButton**            | `boolean`                              | `false`                        | Hides the emoji keyboard button in the message composer.                                             | `hideEmojiKeyboardButton={true}`                                  |
| **hideStickersButton**                 | `boolean`                              | `false`                        | Hides the stickers button in the message composer.                                                   | `hideStickersButton={true}`                                       |
| **hideSendButton**                     | `boolean`                              | `false`                        | Hides the send button in the message composer.                                                       | `hideSendButton={true}`                                           |
| **showScrollbar**                      | `boolean`                              | `false`                        | Controls the visibility of the scrollbar in the composer.                                            | `showScrollbar={true}`                                            |
| **enterKeyBehavior**                   | `EnterKeyBehavior`                     | `EnterKeyBehavior.SendMessage` | Determines the behavior of the Enter key (e.g., send message or add a new line).                     | `enterKeyBehavior={EnterKeyBehavior.SendMessage}`                 |
| **disableSoundForMessage**             | `boolean`                              | `false`                        | Disables sound for incoming messages.                                                                | `disableSoundForMessage={true}`                                   |
| **customSoundForMessage**              | `string`                               | `undefined`                    | Specifies a custom audio sound for incoming messages.                                                | `customSoundForMessage="sound.mp3"`                               |

***

## Rich Text Formatting

The CompactMessageComposer includes a built-in rich text editor. Rich text must be explicitly enabled via `enableRichTextEditor={true}` (defaults to `false`).

### Formatting Toolbar

The toolbar provides the following formatting tools in a fixed order:

| Tool          | Icon   | Shortcut         | Description           |
| ------------- | ------ | ---------------- | --------------------- |
| Bold          | B      | Cmd/Ctrl+B       | Bold text             |
| Italic        | I      | Cmd/Ctrl+I       | Italic text           |
| Underline     | U      | Cmd/Ctrl+U       | Underline text        |
| Strikethrough | S      | Cmd/Ctrl+Shift+S | Strikethrough text    |
| Inline Code   | `</>`  | Cmd/Ctrl+E       | Inline code           |
| Code Block    | \`\`\` | Cmd/Ctrl+Shift+C | Multi-line code block |
| Link          | 🔗     | Cmd/Ctrl+K       | Add/edit hyperlink    |
| Bullet List   | •      | Cmd/Ctrl+Shift+8 | Unordered list        |
| Ordered List  | 1.     | Cmd/Ctrl+Shift+7 | Numbered list         |
| Blockquote    | ❝      | Cmd/Ctrl+Shift+9 | Quote block           |

### Toolbar Visibility Modes

The toolbar supports multiple display modes controlled via props. When multiple props are set, they follow this priority order:

1. `enableRichTextEditor={false}` — Highest priority, disables all rich text features (plain text only)
2. `hideRichTextFormattingOptions={true}` — Toolbar visible by default above input
3. `showToolbarOnSelection={true}` — Floating toolbar appears on text selection (desktop only)

If none of the toolbar props are enabled, the toolbar is hidden but keyboard shortcuts still work.

### Behavior Matrix

| `enableRichTextEditor` | `hideRichTextFormattingOptions` | `showToolbarOnSelection` | Result                                               |
| ---------------------- | ------------------------------- | ------------------------ | ---------------------------------------------------- |
| `false`                | -                               | -                        | Plain text, no formatting UI                         |
| `true`                 | `false`                         | `true`                   | Floating toolbar appears on text selection (desktop) |
| `true`                 | `true`                          | `false`                  | Toolbar visible by default above input               |
| `true`                 | `false`                         | `false`                  | No toolbar UI, only keyboard shortcuts work          |

### Mobile Behavior

On mobile devices, only the fixed toolbar is supported. The floating selection toolbar is disabled for better touch UX.

| Props                                  | Mobile Behavior                                     |
| -------------------------------------- | --------------------------------------------------- |
| `showToolbarOnSelection={true}`        | **Ignored on mobile** — Falls back to fixed toolbar |
| `hideRichTextFormattingOptions={true}` | Fixed toolbar visible by default above input        |

### Toolbar Configuration Examples

<Tabs>
  <Tab title="Selection Toolbar">
    ```tsx theme={null}
    // Floating toolbar appears on text selection (desktop only)
    <CometChatCompactMessageComposer
      user={chatUser}
      enableRichTextEditor={true}
      showToolbarOnSelection={true}
    />
    ```
  </Tab>

  <Tab title="Toolbar Always Visible">
    ```tsx theme={null}
    // Toolbar visible by default above input
    <CometChatCompactMessageComposer
      user={chatUser}
      enableRichTextEditor={true}
      hideRichTextFormattingOptions={true}
    />
    ```
  </Tab>

  <Tab title="Keyboard Shortcuts Only">
    ```tsx theme={null}
    // Rich text enabled but no toolbar (keyboard shortcuts only)
    <CometChatCompactMessageComposer
      user={chatUser}
      enableRichTextEditor={true}
    />
    ```
  </Tab>

  <Tab title="Combined Modes">
    ```tsx theme={null}
    // Selection toolbar + always-visible toolbar
    <CometChatCompactMessageComposer
      user={chatUser}
      enableRichTextEditor={true}
      showToolbarOnSelection={true}
      hideRichTextFormattingOptions={true}
    />
    ```
  </Tab>
</Tabs>

***

## Custom View Slots

Each slot replaces a section of the default UI. Slots that accept parameters receive the relevant data for customization.

| Slot                  | Type                               | Replaces                                            |
| --------------------- | ---------------------------------- | --------------------------------------------------- |
| `headerView`          | `JSX.Element`                      | Area above the composer input                       |
| `auxiliaryButtonView` | `JSX.Element`                      | Sticker and AI button area                          |
| `sendButtonView`      | `JSX.Element`                      | Send button                                         |
| `attachmentOptions`   | `CometChatMessageComposerAction[]` | Default attachment options list (replaces defaults) |
| `textFormatters`      | `CometChatTextFormatter[]`         | Text formatting in composer                         |

### Advanced

For advanced-level customization, you can set custom views to the component. This lets you tailor each aspect of the component to fit your exact needs and application aesthetics. You can create and define your views, layouts, and UI elements and then incorporate those into the component.

***

#### AttachmentOptions

By using `attachmentOptions`, you can set a list of custom `MessageComposerActions` for the CompactMessageComposer Component. This will override the existing list of `MessageComposerActions`.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/ZdLdd_aUW2EhhINo/images/attachment-compact-composer.png?fit=max&auto=format&n=ZdLdd_aUW2EhhINo&q=85&s=939a02f471d711f3580beeae3ae98188" width="1146" height="820" data-path="images/attachment-compact-composer.png" />
</Frame>

Use the following code to achieve the customization shown above.

<Tabs>
  <Tab title="TypeScript">
    ```tsx theme={null}
    import React from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import {
      CometChatCompactMessageComposer,
      CometChatMessageComposerAction,
    } from "@cometchat/chat-uikit-react";

    function getAttachments() {
      return [
        new CometChatMessageComposerAction({
          id: "custom1",
          title: "Custom Option 1",
          iconURL: "Icon URL",
        }),
        new CometChatMessageComposerAction({
          id: "custom2",
          title: "Custom Option 2",
          iconURL: "Icon URL",
        }),
        new CometChatMessageComposerAction({
          id: "custom3",
          title: "Custom Option 3",
          iconURL: "Icon URL",
        }),
        new CometChatMessageComposerAction({
          id: "custom4",
          title: "Custom Option 4",
          iconURL: "Icon URL",
        }),
      ];
    }

    <CometChatCompactMessageComposer
      attachmentOptions={getAttachments()}
      user={userObj}
    />;
    ```
  </Tab>

  <Tab title="css">
    ```css theme={null}
    .cometchat-compact-message-composer__secondary-button-view-attachment-button
      .cometchat-action-sheet {
      border: none;
      border-radius: inherit;
      background: transparent;
      box-shadow: none;
      width: 100%;
    }

    .cometchat-compact-message-composer__secondary-button-view-attachment-button
      .cometchat-popover__content
      > .cometchat {
      border-radius: inherit;
    }

    .cometchat-compact-message-composer__secondary-button-view-attachment-button
      .cometchat-popover__content {
      height: 240px;
    }

    .cometchat-compact-message-composer__secondary-button-view-attachment-button
      .cometchat-action-sheet__item-icon {
      background: #141414;
    }
    ```
  </Tab>
</Tabs>

**Expected result:** The default attachment options (image, video, audio, file, polls, etc.) are replaced with four custom options. The action sheet styling is customized with transparent background and custom icon colors.

***

#### AuxiliaryButtonView

You can insert a custom view into the CompactMessageComposer component to add additional functionality using the following method.

<Note>
  The CompactMessageComposer Component utilizes the AuxiliaryButton to provide sticker and AI functionality. Overriding the AuxiliaryButton will subsequently replace the sticker functionality.
</Note>

<Tabs>
  <Tab title="TypeScript">
    ```tsx theme={null}
    import React from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import {
      CometChatCompactMessageComposer,
      CometChatButton,
    } from "@cometchat/chat-uikit-react";

    const auxiliaryButtonView = (
      <CometChatButton
        iconURL="Icon URL"
        onClick={() => {
          // logic here
        }}
      />
    );

    <CometChatCompactMessageComposer
      auxiliaryButtonView={auxiliaryButtonView}
      user={userObj}
    />;
    ```
  </Tab>
</Tabs>

***

#### SendButtonView

You can set a custom view in place of the already existing send button view.

<Tabs>
  <Tab title="TypeScript">
    ```tsx theme={null}
    import React from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import {
      CometChatCompactMessageComposer,
      CometChatButton,
    } from "@cometchat/chat-uikit-react";

    const sendButtonView = (
      <CometChatButton
        iconURL="Icon URL"
        onClick={() => {
          // logic here
        }}
      />
    );

    <CometChatCompactMessageComposer sendButtonView={sendButtonView} user={userObj} />;
    ```
  </Tab>

  <Tab title="css">
    ```css theme={null}
    .cometchat-compact-message-composer
      div:not([class])
      .cometchat-compact-message-composer__send-button
      .cometchat-button {
      background: #edeafa;
    }

    .cometchat-compact-message-composer
      div:not([class])
      .cometchat-compact-message-composer__send-button
      .cometchat-button__icon {
      background: #6852d6;
    }
    ```
  </Tab>
</Tabs>

**Expected result:** The default send button is replaced with a custom button. The CSS overrides give the button a light purple background (#edeafa) with a purple icon (#6852d6).

***

#### HeaderView

You can set custom headerView to the CompactMessageComposer component using the following method.

<Tabs>
  <Tab title="TypeScript">
    ```tsx theme={null}
    import React from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { CometChatCompactMessageComposer } from "@cometchat/chat-uikit-react";

    const getHeaderView = () => {
      return (
        <div className="compact-composer__header-view">
          <div className="compact-composer__header-view-icon"></div>
          <div className="compact-composer__header-view-text">
            User has paused their notifications
          </div>
        </div>
      );
    };

    <CometChatCompactMessageComposer user={chatUser} headerView={getHeaderView()} />;
    ```
  </Tab>

  <Tab title="css">
    ```css theme={null}
    .cometchat-compact-message-composer .compact-composer__header-view {
      display: flex;
      align-items: center;
      align-content: center;
      gap: 8px var(--cometchat-padding-2, 8px);
      align-self: stretch;
      flex-wrap: wrap;
      width: 100%;
    }

    .cometchat-compact-message-composer__header {
      background: #dcd7f6;
      border-radius: var(--cometchat-radius-max, 1000px);
      padding: var(--cometchat-padding-2, 8px) var(--cometchat-padding-5, 20px);
    }

    .cometchat-compact-message-composer
      .compact-composer__header-view
      .compact-composer__header-view-text {
      overflow: hidden;
      color: var(--cometchat-text-color-primary, #141414);
      text-overflow: ellipsis;
      font: var(--cometchat-font-body-regular);
    }

    .cometchat-compact-message-composer
      .compact-composer__header-view
      .compact-composer__header-view-icon {
      display: flex;
      width: 24px;
      height: 24px;
      justify-content: center;
      align-items: center;
      background: var(--cometchat-primary-color);
      -webkit-mask: url("icon url") center center no-repeat;
      -webkit-mask-size: contain;
      mask: url("icon url") center center no-repeat;
      mask-size: contain;
    }
    ```
  </Tab>
</Tabs>

**Expected result:** A custom header bar appears above the composer input with an icon and notification text ("User has paused their notifications"), styled with a light purple background and rounded corners.

***

#### TextFormatters

Assigns the list of text formatters. If the provided list is not null, it sets the list. Otherwise, it assigns the default text formatters retrieved from the data source. To configure the existing Mentions look and feel check out [CometChatMentionsFormatter](/ui-kit/react/mentions-formatter-guide)

<Tabs>
  <Tab title="ShortCutFormatter.ts">
    ```ts theme={null}
    import { CometChatTextFormatter } from "@cometchat/chat-uikit-react";
    import DialogHelper from "./Dialog";
    import { CometChat } from "@cometchat/chat-sdk-javascript";

    class ShortcutFormatter extends CometChatTextFormatter {
      private shortcuts: { [key: string]: string } = {};
      private dialogIsOpen: boolean = false;
      private dialogHelper = new DialogHelper();
      private currentShortcut: string | null = null;

      constructor() {
        super();
        this.setTrackingCharacter("!");
        CometChat.callExtension("message-shortcuts", "GET", "v1/fetch", undefined)
          .then((data: any) => {
            if (data && data.shortcuts) {
              this.shortcuts = data.shortcuts;
            }
          })
          .catch((error) => console.log("error fetching shortcuts", error));
      }

      onKeyDown(event: KeyboardEvent) {
        const caretPosition =
          this.currentCaretPosition instanceof Selection
            ? this.currentCaretPosition.anchorOffset
            : 0;
        const textBeforeCaret = this.getTextBeforeCaret(caretPosition);

        const match = textBeforeCaret.match(/!([a-zA-Z]+)$/);
        if (match) {
          const shortcut = match[0];
          const replacement = this.shortcuts[shortcut];
          if (replacement) {
            if (this.dialogIsOpen && this.currentShortcut !== shortcut) {
              this.closeDialog();
            }
            this.openDialog(replacement, shortcut);
          }
        }
      }

      getCaretPosition() {
        if (!this.currentCaretPosition?.rangeCount) return { x: 0, y: 0 };
        const range = this.currentCaretPosition?.getRangeAt(0);
        const rect = range.getBoundingClientRect();
        return {
          x: rect.left,
          y: rect.top,
        };
      }

      openDialog(buttonText: string, shortcut: string) {
        this.dialogHelper.createDialog(
          () => this.handleButtonClick(buttonText),
          buttonText
        );
        this.dialogIsOpen = true;
        this.currentShortcut = shortcut;
      }

      closeDialog() {
        this.dialogHelper.closeDialog();
        this.dialogIsOpen = false;
        this.currentShortcut = null;
      }

      handleButtonClick = (buttonText: string) => {
        if (this.currentCaretPosition && this.currentRange) {
          const shortcut = Object.keys(this.shortcuts).find(
            (key) => this.shortcuts[key] === buttonText
          );
          if (shortcut) {
            const replacement = this.shortcuts[shortcut];
            this.addAtCaretPosition(
              replacement,
              this.currentCaretPosition,
              this.currentRange
            );
          }
        }
        if (this.dialogIsOpen) {
          this.closeDialog();
        }
      };

      getFormattedText(text: string): string {
        return text;
      }

      private getTextBeforeCaret(caretPosition: number): string {
        if (
          this.currentRange &&
          this.currentRange.startContainer &&
          typeof this.currentRange.startContainer.textContent === "string"
        ) {
          const textContent = this.currentRange.startContainer.textContent;
          if (textContent.length >= caretPosition) {
            return textContent.substring(0, caretPosition);
          }
        }
        return "";
      }
    }

    export default ShortcutFormatter;
    ```
  </Tab>

  <Tab title="TypeScript">
    ```tsx theme={null}
    import React from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { CometChatCompactMessageComposer } from "@cometchat/chat-uikit-react";
    import ShortcutFormatter from "./ShortCutFormatter";

    export function CompactComposerDemo() {
      const [chatUser, setChatUser] = React.useState<CometChat.User>();
      React.useEffect(() => {
        CometChat.getUser("uid").then((user) => {
          setChatUser(user);
        });
      }, []);

      return chatUser ? (
        <div>
          <CometChatCompactMessageComposer
            user={chatUser}
            textFormatters={[new ShortcutFormatter()]}
          />
        </div>
      ) : null;
    }
    ```
  </Tab>
</Tabs>

***

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Message Composer" icon="pen-to-square" href="/ui-kit/react/message-composer">
    Full-featured multi-line message composer component.
  </Card>

  <Card title="Message List" icon="messages" href="/ui-kit/react/message-list">
    Display messages with real-time updates.
  </Card>

  <Card title="Mentions Formatter" icon="at" href="/ui-kit/react/mentions-formatter-guide">
    Implement @mentions in your chat application.
  </Card>

  <Card title="Theme Customization" icon="palette" href="/ui-kit/react/theme">
    Customize colors, fonts, and styling.
  </Card>
</CardGroup>