Threaded Messages - CometChat Docs

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:

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.
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.
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.
Collaboration: Threaded messaging fosters more focused and efficient collaboration, as participants can engage in parallel discussions without disrupting the main conversation.
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.

Name	Type	Description
parentMessage	CometChat message	CometChat message which serves as the starting point for all the subsequent replies.

Title

Heading text for the component

Name	Type	Description
title	string	Heading text for the component

Asset URLs

Custom asset URL used for graphical representation.

Name	Type	Description
closeIconURL	string	Asset URL for the close icon.

Custom view

UI component created and customised by the developer to meet your design or functional requirements.

Name	Type	Description
bubbleView	view	User-defined component to customise the parent message’s bubble.
messageActionView	view	User-defined component to customise the message actions available for the parent message.
messageListView	(user?:CometChat.User,group?:CometChat.Group,parentMessage?:CometChat.BaseMessage) => view	User-defined Vue component to customise the message list.
messageComposerView	(user?:CometChat.User,group?:CometChat.Group,parentMessage?:CometChat.BaseMessage) => view	User-defined Vue component to customise the message composer.

Toggle

Switch to hide or show the message composer within the threaded messages.

Name	Type	Description
hideMessageComposer	boolean	When 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.

Name	Type	Description
onClose	Function as PropType<() => void>	Override the method that is invoked when the user clicks on the close icon.
onError	Function 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.

Name	Type	Description
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.

Style

Styling properties and values of all the involved components

Name	Type	Description
threadedMessagesStyle	ThreadedMessagesStyle	Styling 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>

​Properties

​Parent message

​Title

​Asset URLs

​Custom view

​Toggle

​Function callback

​Configurations

​Style

​Usage