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

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


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