> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Threaded Messages

Enhance your Flutter chat app with threaded messaging by integrating CometChat’s `CometChatThreadedMessageList` and `CometChatMessageList` components to reply to messages in threads and view focused sub-conversations seamlessly.

## Overview

The sample app demonstrates how to enable threaded messaging in Flutter using CometChat’s UI Kit:

* 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 v5** installed.
* Initialized CometChat credentials (`appID`, `region`, `authKey`).

## Components

| Component                      | Role                                                          |
| :----------------------------- | :------------------------------------------------------------ |
| `CometChatMessageList`         | Displays main chat; provides `onThreadRepliesClick` callback. |
| `CometChatThreadedMessageList` | Fetches and displays replies for a parent message.            |
| `CometChatMessageComposer`     | Sends new messages; pass `parentMessageId` to send replies.   |
| `CometChatThreadedHeader`      | Shows the parent message and thread context at the top.       |

## Integration Steps

### Show the “Reply in Thread” Option

Trigger thread view when tapping the thread icon.

```dart theme={null}
CometChatMessageList(
  onThreadRepliesClick: (BaseMessage message) {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (_) => CometChatThread(parentMessage: message),
      ),
    );
  },
  // …other props
);
```

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

Captures the user's intent to view or add to a thread.

### Navigate to the Thread Screen

Display a dedicated thread view.

```dart theme={null}
class CometChatThread extends StatelessWidget {
  final BaseMessage parentMessage;

  CometChatThread({required this.parentMessage});

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

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

Provides a focused UI for thread interactions.

### Send a Threaded Message

Send replies in the context of a thread.

```dart theme={null}
CometChatMessageComposer(
  parentMessageId: parentMessage.id,
  // …other composer props
);
```

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

Automatically associates new messages with the parent thread.

### Fetch & Display Thread Replies

Retrieve and show all replies under a parent message.

```dart theme={null}
MessagesRequest request = MessagesRequestBuilder()
  .setParentMessageId(parentMessageId)
  .build();

request.fetchPrevious().then((replies) {
  // Render these replies in the list
});
```

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

Ensures only relevant threaded messages are shown.

## Customization Options

* **Header Styling:** Customize `CometChatThreadedHeader` appearance (colors, fonts).
* **List Pagination:** Adjust `limit` in `MessagesRequestBuilder`.
* **Composer Placeholder:** Change placeholder text based on thread context.

## Filtering / Edge Cases

* **Parent Deleted:** Show a fallback message or disable composer if parent is deleted.
* **No Replies:** Display an empty state (e.g., “No replies yet”).
* **Offline Mode:** Queue thread operations or show connectivity indicators.

## Error Handling & Edge Cases

* **Fetch Failures:** Show error UI with retry option on `fetchPrevious` errors.
* **Send Failures:** Display SnackBar on composer send errors; allow retry.
* **Loading States:** Show loading indicators during fetch/send operations.

## Optional Context-Specific Notes

* **Group vs. Direct Threads:** Threads work the same for groups and 1:1 chats.
* **Blocked Users:** Threading respects block state; blocked users cannot send replies.

## Summary / Feature Matrix

| Feature                   | Component / Method                              |
| :------------------------ | :---------------------------------------------- |
| Show thread option        | `CometChatMessageList.onThreadRepliesClick`     |
| Thread view screen        | `CometChatThread` widget                        |
| Display threaded messages | `CometChatThreadedMessageList(parentMessageId)` |
| Send threaded message     | `CometChatMessageComposer(parentMessageId)`     |
| Fetch thread replies      | `MessagesRequestBuilder.setParentMessageId`     |

## Next Steps & Further Reading

<CardGroup>
  <Card title="Flutter Sample App">
    Fully functional sample applications to accelerate your development.

    [View on GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app)
  </Card>

  <Card title="UI Kit Source Code">
    Access the complete UI Kit source code on GitHub.

    [View on GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/chat_uikit)
  </Card>
</CardGroup>