Message List
This is a fundamental component of the chat interface that displays a list of chat messages exchanged between participants in a conversation. It serves as a chronological log of the conversation, presenting messages in the order they were sent.
The message list consists of the following components:
- Message Display: The message list displays chat messages in a structured format, with the newest messages appearing at the bottom of the list. Each message includes the sender's name or avatar, the message content, and a timestamp along with the read receipt indicating when the message was sent.
- Conversation History: This component provides a history of the chat conversation, allowing participants to scroll through and review past messages. It enables users to see the progression of the conversation, read previous messages, and refer back to earlier discussions.
- Pagination or Infinite Scroll: This component employs an infinite scroll to manage the display of messages dynamically loading additional messages as the user scrolls.
- Message Formatting: Chat messages within the message list can include various formatting options, such as different font styles, colors, emojis, attachments (e.g., images, files), and links.
- Interaction: The message list includes message actions like reacting to messages, editing or deleting messages.
- Scroll and Navigation: Users can scroll through the message list to view older or more recent messages. This component also provides navigation features, such as a scroll-to-bottom button and automatic scrolling to the latest messages when new messages arrive.
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 |
RequestBuilder
This provides set of methods that allow developers to easily create and configure messages before fetching them for the intended recipients.
| Name | Type | Description |
|---|---|---|
| messagesRequestBuilder | CometChat.MessagesRequestBuilder | Class that allows you to set various parameters to the MessagesRequest class based on which the messages are fetched |
Templates
This defines the structure and content of a message, including the text, media attachments (e.g., images, videos) and custom messages. It provides a consistent format that ensures uniformity in the presentation of messages across the chat application.
| Name | Type | Description |
|---|---|---|
| templates | CometChatMessageTemplate[] | It defaults to templates for 5 message type i.e. text, audio, video, image, files. |
Alignment
This refers to the positioning or arrangement of message bubbles and timestamp in the message list component.
| Name | Type | Description |
|---|---|---|
| alignment | MessageListAlignment | This refers to the visual arrangement or positioning of the message bubble within the message list. Defaults to standard alignment i.e. Sent messages aligned to right and received messages aligned to left. |
| timestampAlignment | TimestampAlignment | This refers to the visual arrangement or positioning of the message timestamp within the message list. Defaults to top alignment. |
Loading state
This refers to the state of the message list component when it is actively retrieving or fetching data.
| Name | Type | Description |
|---|---|---|
| loadingIconURL | string | Asset URL for the loading indicator icon |
| loadingStateView | view | User-defined component to customise the loading indicator |
Empty state
This refers to the state of the message list component when it has no content or data to display
| Name | Type | Description |
|---|---|---|
| emptyStateText | string | The textual content displayed in the empty state of the component. |
| emptyStateView | view | User-defined component to customise the empty state of the component. |
Error state
This refers to the state of the message list component when an error occurs during the retrieval of the data.
| Name | Type | Description |
|---|---|---|
| errorStateText | string | The textual content displayed in the error state of the component. |
| errorStateView | view | User-defined component to customise the error state of the component. |
Asset URLs
Custom asset URL used for graphical representation
| Name | Type | Description |
|---|---|---|
| waitIcon | string | Asset URL for the wait state indicating that a sent message is in transit. |
| sentIcon | string | Asset URL for the sent state indicating that a message is sent successfully. |
| deliveredIcon | string | Asset URL for the delivered state indicating that a sent message is delivered successfully. |
| readIcon | string | Asset URL for the read state indicating that a sent message is read by the receiver. |
| errorIcon | string | Asset URL for the error state indicating that an error has occurred when the message was in transit. |
Custom view
UI component created and customised by the developer to meet your design or functional requirements.
| Name | Type | Description |
|---|---|---|
| headerView | view | User-defined component to customise the top of the message list component. You can customise it to contain important information, branding elements, or navigation controls. It defaults to an empty view. |
| footerView | view | User-defined component to customise the bottom of the message list component. You can customise it to contain supplementary information, navigation links, or actions. By default, it shows quick reply options to a user when the Smart Replies extension is enabled. |
Date Pattern
This refers to a specific format to represent dates in a human-readable form
| Name | Type | Description |
|---|---|---|
| datePattern | (message:CometChat.BaseMessage=>string) | User defined date format for the timestamp displayed for each message bubble. |
| dateSeparatorPattern | (message:CometChat.BaseMessage=>string) | User defined date format of the delimiters used to separate the message bubbles. |
Formatters
Array of formatters
| Name | Description |
|---|---|
| textFormatters | TextFormatters is an array of formatters that Applies and adjusts styling for text bubbles according to specified regex patterns defined in various formatters. |
Toggle
Switch to hide or show the error state, read receipt and scroll to bottom.
| Name | Type | Description |
|---|---|---|
| showAvatar | boolean | When set to true, it will display avatar for both the sender and recipient of the message. |
| hideError | boolean | When set to true, hides the error message when an error is encountered in the component |
| hideReceipt | boolean | Used to control the visibility of read receipts without affecting the functionality of marking messages as read and delivered. |
| disableReactions | boolean | When set to true, it suppresses the ability for users to react to a message. In addition, it also hides the section beneath the message that typically displays user reactions. In essence, it removes all functionalities and visual representations associated with message reactions. |
| scrollToBottomOnNewMessages | boolean | When set to true, the message list scrolls to the bottom automatically upon receiving a message instead of showing a sroll-to-bottom button. |
| 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 incoming messages. |
| customSoundForMessages | 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 |
|---|---|---|
| onThreadRepliesClick | Function | Override the method that is invoked when a threaded conversation is clicked in the message list. |
| 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 messages in a threaded format. |
| newMessageIndicatorText | string | Override the text used to indicate the presence of new or unread messages that appear as a badge in the chat window. |
Configurations
Properties of the child components like conversations and messages that are available for customisation.
| Name | Type | Description |
|---|---|---|
| messageInformationConfiguration | MessageInformation configuration | Properties of the MessageInformation component that are available for customisation via this component. |
| reactionsConfiguration | Reactions configuration | Properties of the Reactions component that are available for customisation via this component. |
Style
Styling properties and values of all the child components
| Name | Type | Description |
|---|---|---|
| avatarStyle | AvatarStyle | Styling properties and values of the Avatar component |
| statusIndicatorStyle | StatusIndicatorStyle | Styling properties and values of the Status Indicator component |
| listItemStyle | ListItemStyle | Styling properties and values of the List item component |
| backdropStyle | BackdropStyle | Styling properties and values of the Backdrop component |
| messageListStyle | MessageListStyle | Styling properties and values of the Message List component |
Usage
- main.ts
- App.vue
import { UIKitSettingsBuilder } from "@cometchat/chat-uikit-vue";
const COMETCHAT_CONSTANTS = {
APP_ID: "APP_ID", // Replace with your App ID
REGION: "REGION", // Replace with your App Region ("eu" or "us")
AUTH_KEY: "AUTH_KEY", // Replace with your Auth Key
};
//create the builder
const UIKitSettings = new UIKitSettingsBuilder()
.setAppId(COMETCHAT_CONSTANTS.APP_ID)
.setRegion(COMETCHAT_CONSTANTS.REGION)
.setAuthKey(COMETCHAT_CONSTANTS.AUTH_KEY)
.setExtensions() //pass an array of extensions to enable. By default all the extensions will be enabled
.build();
//Initialize CometChat
CometChatUIKit.init(UIKitSettings)?.then(() => {
//login your user
});
//Creating a template for text message
const textTemplate:CometChatMessageTemplate = ChatConfigurator.getDataSource().getTextMessageTemplate();
//Creating a template for image message
const imageTemplate:CometChatMessageTemplate = ChatConfigurator.getDataSource().getImageMessageTemplate();
//Creating a template for an audio template
const audioTemplate:CometChatMessageTemplate = ChatConfigurator.getDataSource().getAudioMessageTemplate();
//Creating a template for an video template
const videoTemplate:CometChatMessageTemplate = ChatConfigurator.getDataSource().getVideoMessageTemplate();
//Creating a custom message template
const customMessageTemplate:CometChatMessageTemplate =
new CometChatMessageTemplate({
type: 'custom_template',
category: 'custom',
bubbleView: ReactComponent,
});
//Populating list of templates excluding collaborative whiteboard and document
const templates:CometChatMessageTemplate[] = [textTemplate, imageTemplate, audioTemplate,videoTemplate, customMessageTemplate];
let messagesRequest = new CometChat.MessagesRequestBuilder()
.setCategories(["message", "custom"])
.setTypes(["text", "image", "audio", "video", "custom_template"]).build();
//passing template list to cometchatMessages
<CometChatMessageList :templates="templates" :messagesRequestBuilder="messagesRequest"></CometChatMessageList>