> ## 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

> Implement threaded message replies with parent context, reply list, and focused thread composer in CometChat Flutter UI Kit.

<Accordion title="AI Agent Component Spec">
  | Field          | Value                                                                                            |
  | -------------- | ------------------------------------------------------------------------------------------------ |
  | Package        | `cometchat_chat_uikit`                                                                           |
  | Key components | `CometChatThread`, `CometChatThreadedHeader`, `CometChatMessageList`, `CometChatMessageComposer` |
  | Init           | `CometChatUIKit.init(uiKitSettings)` then `CometChatUIKit.login(uid)`                            |
  | Entry point    | `CometChatMessageList.onThreadRepliesClick` opens thread view from messages                      |
  | Sample app     | [GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app)                |
  | Related        | [All Guides](/ui-kit/flutter/v5/guide-overview)                                                  |
</Accordion>

Threaded messages let users create sub-conversations by replying to specific messages. This reduces clutter and keeps discussions focused.

Before starting, complete the [Getting Started](/ui-kit/flutter/v5/getting-started) guide.

***

## Components

| Component / Class          | Role                                         |
| :------------------------- | :------------------------------------------- |
| `CometChatThread`          | Main container widget for threaded messages  |
| `CometChatThreadedHeader`  | Displays parent message and thread context   |
| `CometChatMessageList`     | Shows messages filtered by `parentMessageId` |
| `CometChatMessageComposer` | Input for composing threaded replies         |
| `MessagesRequestBuilder`   | Builds request to fetch thread replies       |

***

## Integration Steps

### 1. Thread Trigger in Messages

Wire the `onThreadRepliesClick` callback on `CometChatMessageList`. When a user clicks the thread reply icon on any message, this fires with the parent message object.

*File: [messages.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/messages/messages.dart)*

```dart theme={null}
CometChatMessageList(
  onThreadRepliesClick: (BaseMessage message) {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (_) => CometChatThread(
          message: message,
          user: user,
          group: group,
        ),
      ),
    );
  },
);
```

***

### 2. Thread Screen Widget

Create the thread screen with header, message list, and composer. The `CometChatThread` widget handles the complete thread UI.

*File: [cometchat\_thread.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/thread_screen/cometchat_thread.dart)*

```dart theme={null}
class CometChatThread extends StatefulWidget {
  const CometChatThread({
    this.user,
    this.group,
    required this.message,
    super.key,
  });

  final User? user;
  final Group? group;
  final BaseMessage message;

  @override
  State<CometChatThread> createState() => _CometChatThreadState();
}
```

***

### 3. Thread Header and Message List

Display the parent message context and threaded replies using `CometChatThreadedHeader` and `CometChatMessageList` with `parentMessageId`.

*File: [cometchat\_thread.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/thread_screen/cometchat_thread.dart)*

```dart theme={null}
Column(
  children: [
    CometChatThreadedHeader(
      parentMessage: widget.message,
      loggedInUser: CometChatUIKit.loggedInUser!,
    ),
    Expanded(
      child: CometChatMessageList(
        user: widget.user,
        group: widget.group,
        messagesRequestBuilder: MessagesRequestBuilder()
          ..parentMessageId = widget.message.id,
      ),
    ),
  ],
)
```

***

### 4. Thread Composer

Add the message composer with `parentMessageId` to send replies in the thread context.

*File: [cometchat\_thread.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/thread_screen/cometchat_thread.dart)*

```dart theme={null}
CometChatMessageComposer(
  user: widget.user,
  group: widget.group,
  parentMessageId: widget.message.id,
)
```

***

### 5. Blocked User Handling

When a user is blocked, replace the composer with an unblock prompt.

*File: [cometchat\_thread.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/thread_screen/cometchat_thread.dart)*

```dart theme={null}
Widget getComposer(CometChatThreadController controller) {
  if (controller.user?.blockedByMe == true) {
    return Container(
      padding: EdgeInsets.symmetric(vertical: 8, horizontal: 20),
      child: Column(
        children: [
          Text(Translations.of(context).cantSendMessageBlockedUser),
          ElevatedButton(
            onPressed: () => controller.unBlockUser(),
            child: Text(Translations.of(context).unBlock),
          ),
        ],
      ),
    );
  }
  return CometChatMessageComposer(
    user: widget.user,
    group: widget.group,
    parentMessageId: widget.message.id,
  );
}
```

***

## Feature Matrix

| Feature             | Component / Method          | File                                                                                                                                                             |
| :------------------ | :-------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Show thread option  | `onThreadRepliesClick`      | [messages.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/messages/messages.dart)                                              |
| Thread screen       | `CometChatThread`           | [cometchat\_thread.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/thread_screen/cometchat_thread.dart)                        |
| Thread header       | `CometChatThreadedHeader`   | [cometchat\_thread.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/thread_screen/cometchat_thread.dart)                        |
| Display thread msgs | `CometChatMessageList`      | [cometchat\_thread.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/thread_screen/cometchat_thread.dart)                        |
| Compose reply       | `CometChatMessageComposer`  | [cometchat\_thread.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/thread_screen/cometchat_thread.dart)                        |
| Thread controller   | `CometChatThreadController` | [cometchat\_thread\_controller.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/thread_screen/cometchat_thread_controller.dart) |

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Message List" href="/ui-kit/flutter/v5/message-list">
    Render real-time message threads.
  </Card>

  <Card title="Thread Header" href="/ui-kit/flutter/v5/threaded-messages-header">
    Customize the thread header component.
  </Card>

  <Card title="All Guides" href="/ui-kit/flutter/v5/guide-overview">
    Browse all feature and formatter guides.
  </Card>

  <Card title="Sample App" href="https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app">
    Full working sample application on GitHub.
  </Card>
</CardGroup>