> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-llms-scoped-indexes.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Threaded Messages

> Threaded Messages — CometChat documentation.

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.

| 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](/web-shared/message-list-configuration) | Properties of the message list component that are available for customisation via the messages component. |
| messageComposerConfiguration | [MessageComposerConfiguration](/web-shared/message-composer-configuration) | 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](/web-shared/threadedmessagesstyle) | Styling properties of this component |

## Usage

<Tabs>
  <Tab title="Vue">
    ```js theme={null}
    //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>
    ```
  </Tab>
</Tabs>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.