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

# Threaded Messages

> Add threaded messages in CometChat Flutter UI Kit with parent message context, reply lists, and composers for focused conversations.

Enhance your Flutter chat app with threaded messaging using CometChat V6's `CometChatMessageList` and `CometChatThreadedHeader` components.

## Overview

* Reply to specific messages to start focused sub-conversations
* View all replies grouped under the parent message
* Seamlessly switch back to the main conversation

## Prerequisites

* A Flutter project with CometChat UIKit Flutter V6 installed
* Initialized CometChat credentials

## Components

| Component                  | Role                                                         |
| :------------------------- | :----------------------------------------------------------- |
| `CometChatMessageList`     | Displays main chat; provides `onThreadRepliesClick` callback |
| `CometChatThreadedHeader`  | Shows the parent message and thread context                  |
| `CometChatMessageComposer` | Sends new messages; pass `parentMessageId` for replies       |

## Integration Steps

### Show the "Reply in Thread" Option

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatMessageList(
      user: user,
      onThreadRepliesClick: (BaseMessage message) {
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (_) => ThreadScreen(parentMessage: message, user: user),
          ),
        );
      },
    )
    ```
  </Tab>
</Tabs>

### Navigate to the Thread Screen

In V6, compose the thread screen using individual widgets:

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    class ThreadScreen extends StatelessWidget {
      final BaseMessage parentMessage;
      final User? user;
      final Group? group;

      const ThreadScreen({required this.parentMessage, this.user, this.group, super.key});

      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(title: Text("Thread")),
          body: Column(
            children: [
              CometChatThreadedHeader(message: parentMessage),
              Expanded(
                child: CometChatMessageList(
                  user: user,
                  group: group,
                  parentMessageId: parentMessage.id,
                ),
              ),
              CometChatMessageComposer(
                user: user,
                group: group,
                parentMessageId: parentMessage.id,
              ),
            ],
          ),
        );
      }
    }
    ```
  </Tab>
</Tabs>

### Send a Threaded Message

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatMessageComposer(
      user: user,
      parentMessageId: parentMessage.id,
    )
    ```
  </Tab>
</Tabs>

## Customization Options

* Header Styling: Customize `CometChatThreadedHeader` appearance
* Composer Placeholder: Change placeholder text based on thread context
* Empty State: Display "No replies yet" when thread is empty

## Summary

| Feature                   | Component / Method                               |
| :------------------------ | :----------------------------------------------- |
| Show thread option        | `CometChatMessageList.onThreadRepliesClick`      |
| Thread view screen        | Custom `ThreadScreen` widget                     |
| Display threaded messages | `CometChatMessageList(parentMessageId: ...)`     |
| Send threaded message     | `CometChatMessageComposer(parentMessageId: ...)` |
| Thread header             | `CometChatThreadedHeader(message: ...)`          |