Messages
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
- Vue
//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>