Message List

1. 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.
2. 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.
3. Pagination or Infinite Scroll: This component employs an infinite scroll to manage the display of messages dynamically loading additional messages as the user scrolls.
4. 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.
5. Interaction: The message list includes message actions like reacting to messages, editing or deleting messages.
6. 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

​

RequestBuilder

​

Templates

​

Alignment

​

Loading state

​

Empty state

​

Error state

​

Asset URLs

​

Custom view

​

Date Pattern

​

Formatters

​

Toggle

​

Sound

​

Function Callback

​

Misc

​

Configurations

​

Style

​

Usage

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