Conversations With Messages
This component is responsible for displaying the recent conversation between participants in a 1:1 or group chat. It also allows users to send text, images, videos, or other media as messages to communicate with one another in real-time.
This component typically includes the following component:
Conversations : This component lists the most recent or latest conversations or contacts with whom you have exchanged messages.
Messages: This component displays the conversation between participants in a 1:1 or group chat.
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 |
isMobileView
This refers to the display or presentation of the component specifically optimized for viewing on mobile devices such as smartphones or tablets.
| Name | Type | Description |
|---|---|---|
| isMobileView | boolean | When set to true, the component adapts the layout, design, and functionality to provide an optimal user experience on smaller screens and touch-based interfaces. |
messageText
Temporary text displayed to provide a suggestion to the user to select a particular user / group to chat with.
| Name | Type | Description |
|---|---|---|
| messageText | string | It represents the textual content which will be replaced with the messages component when user clicks on a particular user / group chat. |
Assets URL
Custom asset URL used for graphical representation
| Name | Type | Description |
|---|---|---|
| startNewConversationIconURL | string | Asset URL for the button which opens up a new conversation |
Function Callback
Functions that can be invoked by the user in response to a specific event or condition.
| Name | Type | Description |
|---|---|---|
| onError | (error: CometChat.CometChatException) => void | null | Override the method that is invoked when an error is encountered within the component |
Style
Styling properties of all the component
| Name | Type | Description |
|---|---|---|
| conversationsWithMessagesStyle | WithMessagesStyle | Styling properties and values of the Conversations with Messages component |
Configurations
Properties of the child components like conversations and messages that are available for customisation.
| Name | Type | Description |
|---|---|---|
| conversationsConfiguration | Conversations configuration | Properties of the conversations component that are available for customisation via this component. |
| messagesConfiguration | MessagesConfiguration | Properties of the messages component that are available for customisation via this component. |
Usage
- Vue
//creating conversations configuration
const conversationsConfiguration:ConversationsConfiguration = new ConversationsConfiguration({
disablePresence:true
});
//passing conversations configuration
<CometChatConversationsWithMessages :conversationsConfiguration="conversationsConfiguration"
></CometChatConversationsWithMessages>