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:
  1. MessageHeader: It displays user or group information, typing indicators and options such as buttons for viewing additional information.
  2. 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.
  3. 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.
NameTypeDescription
userUser ClassView details of this particular CometChat user
groupGroup ClassView details of this particular CometChat group

​
Custom view

UI component created and customised by the developer to meet your design or functional requirements.
NameTypeDescription
messageHeaderViewviewUser-defined Vue component to customise the message header.
messageListViewviewUser-defined Vue component to customise the message list.
messageComposerViewviewUser-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.
NameTypeDescription
disableTypingbooleanWhen set to true, typing events are disabled and the typing indicators are not displayed.
hideMessageHeaderbooleanWhen set to true, message header will not be displayed.
hideMessageComposerbooleanWhen set to true, message composer will not be displayed.
hideDetailsbooleanWhen 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.
NameTypeDescription
disableSoundForMessagesbooleanWhen set to true, the component will not produce sound for all incoming / outgoing messages.
customSoundForIncomingMessagesstringmp3 file asset of your choice to play for all incoming messages.
customSoundForOutgoingMessagesstringmp3 file asset of your choice to play for all outgoing messages.

​
auxiliaryMenu

NameTypeDescription
auxiliaryMenuviewUser-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
NameTypeDescription
messagesStyleMessagesStyleStyling 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.
NameTypeDescription
messageHeaderConfigurationMessageHeaderConfigurationProperties of the message header component that are available for customisation via the messages component.
messageListConfigurationMessageListConfigurationProperties of the message list component that are available for customisation via the messages component.
messageComposerConfigurationMessageComposerConfigurationProperties of the message composer component that are available for customisation via the messages component.
threadedMessagesConfigurationThreadedMessagesConfigurationProperties of the threaded messages component that are available for customisation via the messages component.
detailsConfigurationDetailsConfigurationProperties of the details component that are available for customisation via the messages component.

​
Style

NameTypeDescription
messagesStyleMessagesStyleStyling 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>