This component allows users to organise and group related messages into separate conversations within a larger conversation. It provides a way to maintain context, focus, and clarity when multiple discussions or topics are happening simultaneously within a chat. In threaded messaging, a user can create a new thread or reply to an existing thread by selecting a specific message as the parent or starting point. This creates a separate conversation or sub-conversation within the main chat, typically displayed as a collapsible or expandable section. The advantages of threaded messages include:
  1. Organisation: Threads help organise conversations by keeping related messages together. It allows participants to follow specific discussions without getting confused or overwhelmed by other messages.
  2. Context Preservation: Threaded messages retain the context of the original message, making it easier to understand the flow of conversations and refer back to specific points of discussion.
  3. Focus: Threads enable participants to focus on specific topics or sub-topics within a larger conversation. They can dive into a particular thread of interest while minimising distractions from unrelated messages.
  4. Collaboration: Threaded messaging fosters more focused and efficient collaboration, as participants can engage in parallel discussions without disrupting the main conversation.
  5. Reduced Noise: By collapsing threads, the main chat interface can present a cleaner and less cluttered view, reducing visual noise and improving readability.

​
Properties

​
Parent message

This refers to the original or initiating message from which a thread or sub-conversation originates. It serves as the starting point or anchor for subsequent replies and discussions within that thread.
NameTypeDescription
parentMessageCometChat messageCometChat message which serves as the starting point for all the subsequent replies.

​
Title

Heading text for the component
NameTypeDescription
titlestringHeading text for the component

​
Asset URLs

Custom asset URL used for graphical representation.
NameTypeDescription
closeIconURLstringAsset URL for the close icon.

​
Custom view

UI component created and customised by the developer to meet your design or functional requirements.
NameTypeDescription
bubbleViewviewUser-defined component to customise the parent message’s bubble.
messageActionViewviewUser-defined component to customise the message actions available for the parent message.
messageListView(user?:CometChat.User,group?:CometChat.Group,parentMessage?:CometChat.BaseMessage) => viewUser-defined Vue component to customise the message list.
messageComposerView(user?:CometChat.User,group?:CometChat.Group,parentMessage?:CometChat.BaseMessage) => viewUser-defined Vue component to customise the message composer.

​
Toggle

Switch to hide or show the message composer within the threaded messages.
NameTypeDescription
hideMessageComposerbooleanWhen set to true, message composer will not be displayed.

​
Function callback

Functions that can be invoked by the user in response to a specific event or condition.
NameTypeDescription
onCloseFunction as PropType<() => void>Override the method that is invoked when the user clicks on the close icon.
onErrorFunction as PropType<(error: CometChat.CometChatException) => void>Override the method that is invoked when an error is encountered within the details component

​
Configurations

Properties of the child components like message list, and message composer available for customisation.
NameTypeDescription
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.

​
Style

Styling properties and values of all the involved components
NameTypeDescription
threadedMessagesStyleThreadedMessagesStyleStyling properties of this component

​
Usage

//Styling threaded messages
const threadedMessagesStyle:ThreadedMessagesStyle = new ThreadedMessagesStyle({
titleColor:"yellow",
titleFont:"",
closeIconTint:"green"
});
const messageListView = (user?:CometChat.User,group?:CometChat.Group,parentMessage?:CometChat.BaseMessage) => {
  return  {html:"<div></div>"};
};

//User with uid=kevin
const user = new CometChat.User("kevin");
user.setName("Kevin");

<CometChatThreadedMessages :messageListView="messageListView" :user="user" :threadedMessagesStyle="threadedMessagesStyle"></CometChatThreadedMessages>