This component allows users to compose and send messages. It provides a text input area or field where users can enter their messages or responses before sending them to other participants in the conversation. Key features and functionalities of the message composer includes:
  1. Text Input: The message composer provides a multi-line text input area where users can type their messages.
  2. Voice Recording Button: This button is often represented by a microphone symbol. Users can tap or click to start recording their voice message.
  3. Send Button: The message composer includes a “Send” button that allows users to send their composed message to the recipient.
  4. Attachment Options: The message composer also includes options to attach files, images, emojis, and other media to the message.
  5. Live reactions: The message composer allows users to express their immediate responses or emotions to content in real time. Instead of simply liking or commenting on a message, users can use live reactions to provide instant feedback and engage with the content more dynamically.
CometChat’s React UI Kit supports the following extensions in the message composer
  1. Stickers
  2. Polls
  3. Collaborative whiteboard
  4. Collaborative document
Stickers form the auxiliary buttonPolls, collaborative whiteboard and collaborative document are part of the composer action and appears in the action sheet.

​
Properties

​
Chat Information

Details associated with a chat conversation or chat participants.
NameTypeDescription
userUser ClassView details of this particular CometChat user
groupGroup ClassView details of this particular CometChat group

​
Message input

Customise text and controls
NameTypeDescription
textstringText shown in the message input populated by default.
placeholderTextstringSample text that appears in the message input as a prompt or suggestion
auxiliaryButtonsAlignmentAuxiliaryButtonAlignmentThis refers to the visual arrangement or positioning of the auxiliary buttons within the composer list. Defaults to right alignment.
attachmentOptionsMessageComposerActionThis refer to the functionalities that allow users to attach various types of files, media, or content to their messages such as polls, collaborative document etc

​
Asset URLs

Custom asset URL used for graphical representation.
NameTypeDescription
attachmentIconURLstringAsset URL for the attach icon.
LiveReactionIconURLstringAsset URL for the live reaction.
voiceRecordingIconURLstringAsset URL for the video recording icon.
voiceRecordingStartIconURLstringAsset URL for the start icon in video recording.
voiceRecordingStopIconURLstringAsset URL for the stop icon in video recording.
voiceRecordingSubmitIconURLstringAsset URL for the submit icon in video recording.
voiceRecordingCloseIconURLstringAsset URL for the close icon in video recording.

​
Custom view

UI component created and customised by the developer to meet your design or functional requirements.
NameTypeDescription
sendButtonViewviewUser-defined component to customise the send button.
secondaryButtonViewviewUser-defined component to customise the secondary button. By default, it shows the attach button.
auxiliaryButtonViewviewUser-defined component to customise the auxiliary button. By default, it shows the stickers button.
headerViewviewUser-defined Vue component to customise the top of the message header component. You can customise it to display additional information or options related to the composition of messages such a giphy keyboard.

​
Configurations

Properties of the UserMemberWrapper component that are available for customisation.
NameTypeDescription
userMemberWrapperConfigurationUserMemberWrapperConfigurationProperties of the userMemberWrapper component that are available for customisation via this component.

​
Formatters

Array of formatters
NameDescription
textFormattersTextFormatters is an array of formatters that manipulate message input based on the provided regex patterns and trigger keys.

​
Toggle

Switch to hide or show the live reaction, enable / disable typing events.
NameTypeDescription
disableTypingbooleanWhen set to true, typing events are disabled and the typing indicators are not displayed.
hideLiveReactionbooleanWhen set to true, the button to send out the live reaction is not displayed.
hideVoiceRecordingbooleanWhen set to true, video recording button are not visible
disableMentionsbooleanWhen set to true, the mentions feature will be disabled. Default value is set to false

​
Sound

This refers to the action of activating or allowing the audio or sound capabilities of the message list component.
NameTypeDescription
disableSoundForMessagesbooleanWhen set to true, the component will not produce sound for all outgoing messages.
customSoundForMessagestringmp3 file asset of your choice.

​
Function callback

Functions that can be invoked by the user in response to a specific event or condition.
NameTypeDescription
onSendButtonClick(message: CometChat.BaseMessage) => voidOverride the method that is invoked when the user clicks on the send button
onError(error: CometChat.CometChatException) => voidOverride the method that is invoked when an error is encountered within the details component

​
Misc

NameTypeDescription
parentMessageIdnumberRefers to the unique identifier assigned to a parent message within a threaded conversation. When set, the component displays the composer for a threaded conversation.

​
Style

Styling properties and values of all the child components
NameTypeDescription
backdropStyleBackdropStyleStyling properties of the Backdrop component
actionSheetStyleActionSheetStyleStyling properties of the Action Sheet component
mediaRecorderStylemediaRecorderStyleStyling properties of the Media Recorder component
messageComposerStyleMessageComposerStyleStyling properties of the MessageComposer component

​
Usage

//User with uid=kevin
const user = new CometChat.User("kevin");
user.setName("Kevin");

<CometChatMessageComposer :user="user"></CometChatMessageComposer>