Message Composer - CometChat Docs

AI Integration Quick Reference

{
  "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 }
  }
}

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.

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;
}

Minimal Render

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.

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.

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.

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`

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.

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.

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.

TypeScript
CSS

import {
  CometChatMessageComposer,
  CometChatButton,
} from "@cometchat/chat-uikit-react";

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

.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;
}

headerView

Custom view above the composer input.

TypeScript
CSS

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>
      }
    />
  );
}

.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);
}

Common Patterns

Thread composer

import { CometChatMessageComposer } from "@cometchat/chat-uikit-react";

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

Minimal composer — text only

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

import { CometChatMessageComposer, EnterKeyBehavior } from "@cometchat/chat-uikit-react";

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

Pre-filled text

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:

Global tokens set on the .cometchat root wrapper.
Component CSS (.cometchat-message-composer) consumes these tokens via var().
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`

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.

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`

​Where It Fits

​Minimal Render

​Actions and Events

​Callback Props

​onSendButtonClick

​onTextChange

​onError

​Global UI Events

​SDK Events (Real-Time, Automatic)

​Custom View Slots

​attachmentOptions

​auxiliaryButtonView

​sendButtonView

​headerView

​Common Patterns

​Thread composer

​Minimal composer — text only

​Enter key adds new line

​Pre-filled text

​CSS Architecture

​Key Selectors

​Customization Matrix

​Props

​attachmentOptions

​auxiliaryButtonView

​customSoundForMessage

​disableMentionAll

​disableMentions

​disableSoundForMessage

​disableTypingEvents

​enterKeyBehavior

​group

​headerView

​hideAttachmentButton

​hideAudioAttachmentOption

​hideCollaborativeDocumentOption

​hideCollaborativeWhiteboardOption

​hideEmojiKeyboardButton

​hideFileAttachmentOption

​hideImageAttachmentOption

​hidePollsOption

​hideSendButton

​hideStickersButton

​hideVideoAttachmentOption

​hideVoiceRecordingButton

​initialComposerText

​mentionAllLabel

​mentionsGroupMembersRequestBuilder

​mentionsUsersRequestBuilder

​onError

​onSendButtonClick

​onTextChange

​parentMessageId

​placeholderText

​sendButtonView

​showScrollbar

​textFormatters

​user

​Events

​CSS Selectors

Where It Fits

Minimal Render

Actions and Events

Callback Props

onSendButtonClick

onTextChange

onError

Global UI Events

SDK Events (Real-Time, Automatic)

Custom View Slots

attachmentOptions

auxiliaryButtonView

sendButtonView

headerView

Common Patterns

Thread composer

Minimal composer — text only

Enter key adds new line

Pre-filled text

CSS Architecture

Key Selectors

Customization Matrix

Props

attachmentOptions

auxiliaryButtonView

customSoundForMessage

disableMentionAll

disableMentions

disableSoundForMessage

disableTypingEvents

enterKeyBehavior

group

headerView

hideAttachmentButton

hideAudioAttachmentOption

hideCollaborativeDocumentOption

hideCollaborativeWhiteboardOption

hideEmojiKeyboardButton

hideFileAttachmentOption

hideImageAttachmentOption

hidePollsOption

hideSendButton

hideStickersButton

hideVideoAttachmentOption

hideVoiceRecordingButton

initialComposerText

mentionAllLabel

mentionsGroupMembersRequestBuilder

mentionsUsersRequestBuilder

onError

onSendButtonClick

onTextChange

parentMessageId

placeholderText

sendButtonView

showScrollbar

textFormatters

user

Events

CSS Selectors