> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-agentbuddy-4.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>