Messages - CometChat Docs

This component is responsible for displaying the conversation between participants in a 1:1 or group chat. The messages component typically includes the following component:

MessageHeader: It displays user or group information, typing indicators and options such as buttons for viewing additional information.
MessageList list: It displays a list of messages in chronological order, showing the sender’s name or profile picture, the message content, and the timestamp of each message. The message list also includes additional information such as message status (read, unread), message reactions, or attachments.
MessageComposer: It provides an input field or area where users can compose and send new messages. The message input allows users to enter text, attach files or media, and send the composed message to the conversation.

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

Custom view

UI component created and customised by the developer to meet your design or functional requirements.

Name	Type	Description
messageHeaderView	view	User-defined Vue component to customise the message header.
messageListView	view	User-defined Vue component to customise the message list.
messageComposerView	view	User-defined Vue component to customise the message composer.

Toggle

Switch to hide or show the child components such as the header, composer, details and enable / disable typing events.

Name	Type	Description
disableTyping	boolean	When set to true, typing events are disabled and the typing indicators are not displayed.
hideMessageHeader	boolean	When set to true, message header will not be displayed.
hideMessageComposer	boolean	When set to true, message composer will not be displayed.
hideDetails	boolean	When set to true, details will not be displayed.

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 incoming / outgoing messages.
customSoundForIncomingMessages	string	mp3 file asset of your choice to play for all incoming messages.
customSoundForOutgoingMessages	string	mp3 file asset of your choice to play for all outgoing messages.

auxiliaryMenu

Name	Type	Description
auxiliaryMenu	view	User-defined component to customise secondary or supplementary menu in the message header in addition the button to view the additional information.

Style

Styling properties and values

Name	Type	Description
messagesStyle	MessagesStyle	Styling properties and values of the Messages component

Configurations

Properties of the child components like message header, message list, message composer, details and threaded messaged that are available for customisation.

Name	Type	Description
messageHeaderConfiguration	MessageHeaderConfiguration	Properties of the message header component that are available for customisation via the messages component.
messageListConfiguration	MessageListConfiguration	Properties of the message list component that are available for customisation via the messages component.
messageComposerConfiguration	MessageComposerConfiguration	Properties of the message composer component that are available for customisation via the messages component.
threadedMessagesConfiguration	ThreadedMessagesConfiguration	Properties of the threaded messages component that are available for customisation via the messages component.
detailsConfiguration	DetailsConfiguration	Properties of the details component that are available for customisation via the messages component.

Style

Name	Type	Description
messagesStyle	MessagesStyle	Styling properties of this component

Usage

//configuring message list component
const messageListConfiguration:MessageListConfiguration = new MessageListConfiguration({
  disableSoundForMessages:true,
  deliveredIcon:"",
  hideReceipt:true
})

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

/*user object is required for messages component to load the messages*/
<CometChatMessages :user="user" :messageListConfiguration="messageListConfiguration"></CometChatMessages>

​Properties

​Chat Information

​Custom view

​Toggle

​Sound

​auxiliaryMenu

​Style

​Configurations

​Style

​Usage

Properties

Chat Information

Custom view

Toggle

Sound

auxiliaryMenu

Style

Configurations

Style

Usage