Message Composer

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 button

Polls, 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.

Name	Type	Description
user	User Class	View details of this particular CometChat user
group	Group Class	View details of this particular CometChat group

Message input

Customise text and controls

Name	Type	Description
text	string	Text shown in the message input populated by default.
placeholderText	string	Sample text that appears in the message input as a prompt or suggestion
auxiliaryButtonsAlignment	AuxiliaryButtonAlignment	This refers to the visual arrangement or positioning of the auxiliary buttons within the composer list. Defaults to right alignment.
attachmentOptions	MessageComposerAction	This 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.

Name	Type	Description
attachmentIconURL	string	Asset URL for the attach icon.
LiveReactionIconURL	string	Asset URL for the live reaction.
voiceRecordingIconURL	string	Asset URL for the video recording icon.
voiceRecordingStartIconURL	string	Asset URL for the start icon in video recording.
voiceRecordingStopIconURL	string	Asset URL for the stop icon in video recording.
voiceRecordingSubmitIconURL	string	Asset URL for the submit icon in video recording.
voiceRecordingCloseIconURL	string	Asset 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.

Name	Type	Description
sendButtonView	view	User-defined component to customise the send button.
secondaryButtonView	view	User-defined component to customise the secondary button. By default, it shows the attach button.
auxiliaryButtonView	view	User-defined component to customise the auxiliary button. By default, it shows the stickers button.
headerView	view	User-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.

Name	Type	Description
userMemberWrapperConfiguration	UserMemberWrapperConfiguration	Properties of the userMemberWrapper component that are available for customisation via this component.

Formatters

Array of formatters

Name	Description
textFormatters	TextFormatters 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.

Name	Type	Description
disableTyping	boolean	When set to true, typing events are disabled and the typing indicators are not displayed.
hideLiveReaction	boolean	When set to true, the button to send out the live reaction is not displayed.
hideVoiceRecording	boolean	When set to true, video recording button are not visible
disableMentions	boolean	When 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.

Name	Type	Description
disableSoundForMessages	boolean	When set to true, the component will not produce sound for all outgoing messages.
customSoundForMessage	string	mp3 file asset of your choice.

Function callback

Functions that can be invoked by the user in response to a specific event or condition.

Name	Type	Description
onSendButtonClick	(message: CometChat.BaseMessage) => void	Override the method that is invoked when the user clicks on the send button
onError	(error: CometChat.CometChatException) => void	Override the method that is invoked when an error is encountered within the details component

Misc

Name	Type	Description
parentMessageId	number	Refers 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

Name	Type	Description
backdropStyle	BackdropStyle	Styling properties of the Backdrop component
actionSheetStyle	ActionSheetStyle	Styling properties of the Action Sheet component
mediaRecorderStyle	mediaRecorderStyle	Styling properties of the Media Recorder component
messageComposerStyle	MessageComposerStyle	Styling properties of the MessageComposer component

Usage

Vue

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

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