> ## 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.

# Message Composer

> Rich text input for composing and sending text, media, attachments, mentions, voice notes, and custom messages.

<Accordion title="AI Integration Quick Reference">
  ```json theme={null}
  {
    "component": "CometChatMessageComposer",
    "package": "@cometchat/chat-uikit-react",
    "import": "import { CometChatMessageComposer } from \"@cometchat/chat-uikit-react\";",
    "cssImport": "import \"@cometchat/chat-uikit-react/css-variables.css\";",
    "description": "Rich text input for composing and sending text, media, attachments, mentions, voice notes, and custom messages.",
    "cssRootClass": ".cometchat-message-composer",
    "primaryOutput": {
      "prop": "onSendButtonClick",
      "type": "(message: CometChat.BaseMessage, previewMessageMode?: PreviewMessageMode) => 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": "\"\"" }
      },
      "callbacks": {
        "onSendButtonClick": "(message: CometChat.BaseMessage, previewMessageMode?: PreviewMessageMode) => void",
        "onTextChange": "(text: string) => void",
        "onError": "((error: CometChat.CometChatException) => void) | null"
      },
      "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 },
        "showScrollbar": { "type": "boolean", "default": false }
      },
      "behavior": {
        "disableTypingEvents": { "type": "boolean", "default": false },
        "disableMentions": { "type": "boolean", "default": false },
        "disableMentionAll": { "type": "boolean", "default": false },
        "mentionAllLabel": { "type": "string", "default": "\"all\"" },
        "enterKeyBehavior": { "type": "EnterKeyBehavior", "default": "EnterKeyBehavior.SendMessage" },
        "disableSoundForMessage": { "type": "boolean", "default": false },
        "customSoundForMessage": { "type": "string", "default": "undefined" }
      },
      "mentions": {
        "mentionsUsersRequestBuilder": "CometChat.UsersRequestBuilder",
        "mentionsGroupMembersRequestBuilder": "CometChat.GroupMembersRequestBuilder"
      },
      "viewSlots": {
        "attachmentOptions": "CometChatMessageComposerAction[]",
        "auxiliaryButtonView": "JSX.Element",
        "sendButtonView": "JSX.Element",
        "headerView": "JSX.Element"
      },
      "formatting": {
        "textFormatters": { "type": "CometChatTextFormatter[]", "default": "default formatters" }
      }
    },
    "events": [
      { "name": "CometChatMessageEvents.ccMessageSent", "payload": "IMessages" },
      { "name": "CometChatMessageEvents.ccMessageEdited", "payload": "IMessages" },
      { "name": "CometChatMessageEvents.ccReplyToMessage", "payload": "IMessages" }
    ],
    "sdkListeners": [],
    "types": {
      "EnterKeyBehavior": { "SendMessage": "sendMessage", "NewLine": "newLine", "None": "none" },
      "PreviewMessageMode": { "edit": 0, "none": 1 }
    }
  }
  ```
</Accordion>

## Where It Fits

`CometChatMessageComposer` provides a rich text input with attachment, emoji, voice recording, sticker, and send controls. Wire it alongside `CometChatMessageHeader` and `CometChatMessageList` to build a standard chat view.

```tsx lines theme={null}
import { useState, useEffect } from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import {
  CometChatMessageHeader,
  CometChatMessageList,
  CometChatMessageComposer,
} from "@cometchat/chat-uikit-react";
import "@cometchat/chat-uikit-react/css-variables.css";

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

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

  return chatUser ? (
    <div style={{ height: "100vh", display: "flex", flexDirection: "column" }}>
      <CometChatMessageHeader user={chatUser} />
      <CometChatMessageList user={chatUser} />
      <CometChatMessageComposer user={chatUser} />
    </div>
  ) : null;
}
```

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/vk8kXY4T6hhH4l00/images/6c67574d-wGdWG0FDGDEYQAAAABJRU5ErkJggg.png?fit=max&auto=format&n=vk8kXY4T6hhH4l00&q=85&s=95567be813ceb1f5f2fa7fee73c6b4ca" width="1004" height="90" data-path="images/6c67574d-wGdWG0FDGDEYQAAAABJRU5ErkJggg.png" />
</Frame>

***

## Minimal Render

```tsx lines theme={null}
import { useState, useEffect } from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageComposer } from "@cometchat/chat-uikit-react";
import "@cometchat/chat-uikit-react/css-variables.css";

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

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

  return chatUser ? <CometChatMessageComposer user={chatUser} /> : null;
}

export default MessageComposerDemo;
```

Root CSS class: `.cometchat-message-composer`

***

## Actions and Events

### Callback Props

#### onSendButtonClick

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

```tsx lines theme={null}
import { CometChatMessageComposer } from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";

function ComposerWithCustomSend() {
  return (
    <CometChatMessageComposer
      user={chatUser}
      onSendButtonClick={(message: CometChat.BaseMessage) => {
        console.log("Custom send:", message);
      }}
    />
  );
}
```

#### onTextChange

Fires as the user types in the composer input.

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

function ComposerWithTextTracking() {
  return (
    <CometChatMessageComposer
      user={chatUser}
      onTextChange={(text: string) => {
        console.log("Text changed:", text);
      }}
    />
  );
}
```

#### onError

Fires on internal errors.

```tsx lines theme={null}
import { CometChatMessageComposer } from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";

function ComposerWithError() {
  return (
    <CometChatMessageComposer
      user={chatUser}
      onError={(error: CometChat.CometChatException) => {
        console.error("Composer error:", error);
      }}
    />
  );
}
```

### Global UI Events

| Event                                     | Fires when                | Payload     |
| ----------------------------------------- | ------------------------- | ----------- |
| `CometChatMessageEvents.ccMessageSent`    | A message is sent         | `IMessages` |
| `CometChatMessageEvents.ccMessageEdited`  | A message is edited       | `IMessages` |
| `CometChatMessageEvents.ccReplyToMessage` | User replies to a message | `IMessages` |

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

function useComposerEvents() {
  useEffect(() => {
    const sentSub = CometChatMessageEvents.ccMessageSent.subscribe(
      (data) => console.log("Sent:", data)
    );
    const editedSub = CometChatMessageEvents.ccMessageEdited.subscribe(
      (data) => console.log("Edited:", data)
    );

    return () => {
      sentSub?.unsubscribe();
      editedSub?.unsubscribe();
    };
  }, []);
}
```

### SDK Events (Real-Time, Automatic)

The component internally handles typing indicators and message sending. No manual SDK listener attachment needed.

***

## Custom View Slots

| Slot                  | Type                               | Replaces                        |
| --------------------- | ---------------------------------- | ------------------------------- |
| `attachmentOptions`   | `CometChatMessageComposerAction[]` | Default attachment options list |
| `auxiliaryButtonView` | `JSX.Element`                      | Sticker and AI button area      |
| `sendButtonView`      | `JSX.Element`                      | Send button                     |
| `headerView`          | `JSX.Element`                      | Area above the composer input   |

### attachmentOptions

Override the default attachment options.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/THlknidvlbNx5AzI/images/abb9806d-message_composer_custom_attachment_options_web_screens-104035717491a170e498d72a5a5591a2.png?fit=max&auto=format&n=THlknidvlbNx5AzI&q=85&s=2b72cb442e9c945cbe7aab5abbf1e199" width="1016" height="216" data-path="images/abb9806d-message_composer_custom_attachment_options_web_screens-104035717491a170e498d72a5a5591a2.png" />
</Frame>

```tsx lines theme={null}
import {
  CometChatMessageComposer,
  CometChatMessageComposerAction,
} from "@cometchat/chat-uikit-react";

function ComposerCustomAttachments() {
  return (
    <CometChatMessageComposer
      user={chatUser}
      attachmentOptions={[
        new CometChatMessageComposerAction({
          id: "custom1",
          title: "Custom Option 1",
          iconURL: "icon-url",
        }),
        new CometChatMessageComposerAction({
          id: "custom2",
          title: "Custom Option 2",
          iconURL: "icon-url",
        }),
      ]}
    />
  );
}
```

### auxiliaryButtonView

Replace the sticker and AI button area.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/0Cdnhz6eU6kdn5Ms/images/b504b88f-AAAAAElFTkSuQmCC.png?fit=max&auto=format&n=0Cdnhz6eU6kdn5Ms&q=85&s=e18685d9875d7f5ec14cd6d93864f424" width="1020" height="98" data-path="images/b504b88f-AAAAAElFTkSuQmCC.png" />
</Frame>

```tsx lines theme={null}
import {
  CometChatMessageComposer,
  CometChatButton,
} from "@cometchat/chat-uikit-react";

function ComposerCustomAuxiliary() {
  return (
    <CometChatMessageComposer
      user={chatUser}
      auxiliaryButtonView={
        <CometChatButton iconURL="icon-url" onClick={() => {}} />
      }
    />
  );
}
```

### sendButtonView

Replace the send button.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/L67V-UjCgqzL1qxp/images/741cf254-B4D17HCxfO1pwAAAABJRU5ErkJggg.png?fit=max&auto=format&n=L67V-UjCgqzL1qxp&q=85&s=5fe96381323b77293fbc17b6c4f05463" width="1004" height="90" data-path="images/741cf254-B4D17HCxfO1pwAAAABJRU5ErkJggg.png" />
</Frame>

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

    function ComposerCustomSend() {
      return (
        <CometChatMessageComposer
          user={chatUser}
          sendButtonView={
            <CometChatButton iconURL="icon-url" onClick={() => {}} />
          }
        />
      );
    }
    ```
  </Tab>

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

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

### headerView

Custom view above the composer input.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/CrArf1QwUPg5EvCC/images/2ac34d51-rm5qa5qXT6fkOAAAAAAAk5bAmg9f8chqyHi74f4n1Ek4tGvn6AAAAAElFTkSuQmCC.png?fit=max&auto=format&n=CrArf1QwUPg5EvCC&q=85&s=8f4a3aa00d55d47ebbfdd02b91d5d871" width="1004" height="131" data-path="images/2ac34d51-rm5qa5qXT6fkOAAAAAAAk5bAmg9f8chqyHi74f4n1Ek4tGvn6AAAAAElFTkSuQmCC.png" />
</Frame>

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

    function ComposerWithHeader() {
      return (
        <CometChatMessageComposer
          user={chatUser}
          headerView={
            <div className="message-composer__header-view">
              <div className="message-composer__header-view-icon" />
              <div className="message-composer__header-view-text">
                User has paused their notifications
              </div>
            </div>
          }
        />
      );
    }
    ```
  </Tab>

  <Tab title="CSS">
    ```css lines theme={null}
    .cometchat-message-composer .message-composer__header-view {
      display: flex;
      align-items: center;
      gap: 8px;
      width: 100%;
    }

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

    .message-composer__header-view-text {
      color: var(--cometchat-text-color-primary);
      font: var(--cometchat-font-body-regular);
    }
    ```
  </Tab>
</Tabs>

***

## Common Patterns

### Thread composer

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

function ThreadComposer() {
  return (
    <CometChatMessageComposer
      user={chatUser}
      parentMessageId={parentMessage.getId()}
    />
  );
}
```

### Minimal composer — text only

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

function MinimalComposer() {
  return (
    <CometChatMessageComposer
      user={chatUser}
      hideAttachmentButton={true}
      hideVoiceRecordingButton={true}
      hideEmojiKeyboardButton={true}
      hideStickersButton={true}
    />
  );
}
```

### Enter key adds new line

```tsx lines theme={null}
import { CometChatMessageComposer, EnterKeyBehavior } from "@cometchat/chat-uikit-react";

function NewLineComposer() {
  return (
    <CometChatMessageComposer
      user={chatUser}
      enterKeyBehavior={EnterKeyBehavior.NewLine}
    />
  );
}
```

### Pre-filled text

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

function PrefilledComposer() {
  return (
    <CometChatMessageComposer
      user={chatUser}
      initialComposerText="Hello! "
      placeholderText="Type a message..."
    />
  );
}
```

***

## CSS Architecture

The component uses CSS custom properties (design tokens) defined in `@cometchat/chat-uikit-react/css-variables.css`. The cascade:

1. Global tokens set on the `.cometchat` root wrapper.
2. Component CSS (`.cometchat-message-composer`) consumes these tokens via `var()`.
3. Overrides target `.cometchat-message-composer` descendant selectors.

### Key Selectors

| Target                  | Selector                                                                                           |
| ----------------------- | -------------------------------------------------------------------------------------------------- |
| Root                    | `.cometchat-message-composer`                                                                      |
| Send button             | `.cometchat-message-composer__send-button`                                                         |
| Send button active      | `.cometchat-message-composer__send-button-active`                                                  |
| Sticker button popover  | `.cometchat-message-composer__auxilary-button-view-sticker-button .cometchat-popover__content`     |
| Emoji keyboard popover  | `.cometchat-message-composer__emoji-keyboard-button .cometchat-popover__content`                   |
| Attachment popover      | `.cometchat-message-composer__secondary-button-view-attachment-button .cometchat-popover__content` |
| Voice recording popover | `.cometchat-message-composer__voice-recording-button .cometchat-popover__content`                  |
| Header area             | `.cometchat-message-composer__header`                                                              |

### Customization Matrix

| What to change                | Where           | Property/API                               | Example                                                          |
| ----------------------------- | --------------- | ------------------------------------------ | ---------------------------------------------------------------- |
| Override send behavior        | Component props | `onSendButtonClick`                        | `onSendButtonClick={(msg) => customSend(msg)}`                   |
| Track text input              | Component props | `onTextChange`                             | `onTextChange={(text) => track(text)}`                           |
| Toggle visibility             | Component props | `hide<Feature>` boolean props              | `hideAttachmentButton={true}`                                    |
| Custom attachments            | Component props | `attachmentOptions`                        | `attachmentOptions={[new CometChatMessageComposerAction(...)]}`  |
| Replace UI sections           | Component props | View slot props                            | `sendButtonView={<div>...</div>}`                                |
| Change Enter key behavior     | Component props | `enterKeyBehavior`                         | `enterKeyBehavior={EnterKeyBehavior.NewLine}`                    |
| Change colors, fonts, spacing | Global CSS      | Target `.cometchat-message-composer` class | `.cometchat-message-composer__send-button { background: blue; }` |

***

## Props

All props are optional. Sorted alphabetically.

### attachmentOptions

Custom attachment options list.

|         |                                    |
| ------- | ---------------------------------- |
| Type    | `CometChatMessageComposerAction[]` |
| Default | `undefined`                        |

***

### auxiliaryButtonView

Custom JSX replacing the sticker and AI button area.

|         |                             |
| ------- | --------------------------- |
| Type    | `JSX.Element`               |
| Default | Built-in sticker/AI buttons |

***

### customSoundForMessage

URL to a custom audio file for outgoing message notifications.

|         |             |
| ------- | ----------- |
| Type    | `string`    |
| Default | `undefined` |

***

### disableMentionAll

Controls whether group mentions like @all appear in suggestions.

|         |           |
| ------- | --------- |
| Type    | `boolean` |
| Default | `false`   |

***

### disableMentions

Disables the mentions functionality.

|         |           |
| ------- | --------- |
| Type    | `boolean` |
| Default | `false`   |

***

### disableSoundForMessage

Disables sound for outgoing messages.

|         |           |
| ------- | --------- |
| Type    | `boolean` |
| Default | `false`   |

***

### disableTypingEvents

Disables the typing indicator for this composer.

|         |           |
| ------- | --------- |
| Type    | `boolean` |
| Default | `false`   |

***

### enterKeyBehavior

Determines Enter key behavior.

|         |                                |
| ------- | ------------------------------ |
| Type    | `EnterKeyBehavior`             |
| Default | `EnterKeyBehavior.SendMessage` |

```ts lines theme={null}
enum EnterKeyBehavior {
  SendMessage = "sendMessage",
  NewLine = "newLine",
  None = "none",
}
```

***

### group

The recipient group for the composer.

|         |                   |
| ------- | ----------------- |
| Type    | `CometChat.Group` |
| Default | `undefined`       |

***

### headerView

Custom component displayed above the composer input.

|         |               |
| ------- | ------------- |
| Type    | `JSX.Element` |
| Default | `undefined`   |

***

### hideAttachmentButton

Hides the entire attachment button.

|         |           |
| ------- | --------- |
| Type    | `boolean` |
| Default | `false`   |

***

### hideAudioAttachmentOption

Hides the audio attachment option.

|         |           |
| ------- | --------- |
| Type    | `boolean` |
| Default | `false`   |

***

### hideCollaborativeDocumentOption

Hides the collaborative document option.

|         |           |
| ------- | --------- |
| Type    | `boolean` |
| Default | `false`   |

***

### hideCollaborativeWhiteboardOption

Hides the collaborative whiteboard option.

|         |           |
| ------- | --------- |
| Type    | `boolean` |
| Default | `false`   |

***

### hideEmojiKeyboardButton

Hides the emoji keyboard button.

|         |           |
| ------- | --------- |
| Type    | `boolean` |
| Default | `false`   |

***

### hideFileAttachmentOption

Hides the file attachment option.

|         |           |
| ------- | --------- |
| Type    | `boolean` |
| Default | `false`   |

***

### hideImageAttachmentOption

Hides the image attachment option.

|         |           |
| ------- | --------- |
| Type    | `boolean` |
| Default | `false`   |

***

### hidePollsOption

Hides the polls option.

|         |           |
| ------- | --------- |
| Type    | `boolean` |
| Default | `false`   |

***

### hideSendButton

Hides the send button.

|         |           |
| ------- | --------- |
| Type    | `boolean` |
| Default | `false`   |

***

### hideStickersButton

Hides the stickers button.

|         |           |
| ------- | --------- |
| Type    | `boolean` |
| Default | `false`   |

***

### hideVideoAttachmentOption

Hides the video attachment option.

|         |           |
| ------- | --------- |
| Type    | `boolean` |
| Default | `false`   |

***

### hideVoiceRecordingButton

Hides the voice recording button.

|         |           |
| ------- | --------- |
| Type    | `boolean` |
| Default | `false`   |

***

### initialComposerText

Pre-fills the text input when the component mounts.

|         |          |
| ------- | -------- |
| Type    | `string` |
| Default | `""`     |

***

### mentionAllLabel

Custom alias label for group mentions.

|         |          |
| ------- | -------- |
| Type    | `string` |
| Default | `"all"`  |

***

### mentionsGroupMembersRequestBuilder

Custom builder to control how mentioned group members are fetched.

|         |                                        |
| ------- | -------------------------------------- |
| Type    | `CometChat.GroupMembersRequestBuilder` |
| Default | `undefined`                            |

***

### mentionsUsersRequestBuilder

Custom builder to control how mentioned users are fetched.

|         |                                 |
| ------- | ------------------------------- |
| Type    | `CometChat.UsersRequestBuilder` |
| Default | `undefined`                     |

***

### onError

Callback fired when the component encounters an error.

|         |                                                           |
| ------- | --------------------------------------------------------- |
| Type    | `((error: CometChat.CometChatException) => void) \| null` |
| Default | `undefined`                                               |

***

### onSendButtonClick

Callback fired when the send button is clicked. Overrides default send behavior.

|         |                                                                                     |
| ------- | ----------------------------------------------------------------------------------- |
| Type    | `(message: CometChat.BaseMessage, previewMessageMode?: PreviewMessageMode) => void` |
| Default | `undefined`                                                                         |

***

### onTextChange

Callback fired as the user types.

|         |                          |
| ------- | ------------------------ |
| Type    | `(text: string) => void` |
| Default | `undefined`              |

***

### parentMessageId

Targets a thread; messages sent as replies to this parent.

|         |             |
| ------- | ----------- |
| Type    | `number`    |
| Default | `undefined` |

***

### placeholderText

Placeholder text displayed in the message input field when empty.

|         |          |
| ------- | -------- |
| Type    | `string` |
| Default | `""`     |

***

### sendButtonView

Custom JSX replacing the send button.

|         |                      |
| ------- | -------------------- |
| Type    | `JSX.Element`        |
| Default | Built-in send button |

***

### showScrollbar

Shows the scrollbar in the composer input.

|         |           |
| ------- | --------- |
| Type    | `boolean` |
| Default | `false`   |

***

### textFormatters

Custom text formatters for the composer input.

|         |                                     |
| ------- | ----------------------------------- |
| Type    | `CometChatTextFormatter[]`          |
| Default | Default formatters from data source |

See [CometChatMentionsFormatter](/ui-kit/react/mentions-formatter-guide).

***

### user

The recipient user for the composer.

|         |                  |
| ------- | ---------------- |
| Type    | `CometChat.User` |
| Default | `undefined`      |

***

## Events

| Event                                     | Payload     | Fires when              |
| ----------------------------------------- | ----------- | ----------------------- |
| `CometChatMessageEvents.ccMessageSent`    | `IMessages` | Message sent            |
| `CometChatMessageEvents.ccMessageEdited`  | `IMessages` | Message edited          |
| `CometChatMessageEvents.ccReplyToMessage` | `IMessages` | User replies to message |

***

## CSS Selectors

| Target                  | Selector                                                                                           |
| ----------------------- | -------------------------------------------------------------------------------------------------- |
| Root                    | `.cometchat-message-composer`                                                                      |
| Send button             | `.cometchat-message-composer__send-button`                                                         |
| Send button active      | `.cometchat-message-composer__send-button-active`                                                  |
| Sticker popover         | `.cometchat-message-composer__auxilary-button-view-sticker-button .cometchat-popover__content`     |
| Emoji keyboard popover  | `.cometchat-message-composer__emoji-keyboard-button .cometchat-popover__content`                   |
| Attachment popover      | `.cometchat-message-composer__secondary-button-view-attachment-button .cometchat-popover__content` |
| Voice recording popover | `.cometchat-message-composer__voice-recording-button .cometchat-popover__content`                  |
| Header area             | `.cometchat-message-composer__header`                                                              |