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.

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

File reference:
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.

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

Provides a focused UI for thread interactions.

Send a Threaded Message

Send replies in the context of a thread.

CometChatMessageComposer(
  parentMessageId: parentMessage.id,
  // …other composer props
);

File reference:
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.

MessagesRequest request = MessagesRequestBuilder()
  .setParentMessageId(parentMessageId)
  .build();

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

File reference:
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

Flutter Sample App

Fully functional sample applications to accelerate your development.

View on GitHub

UI Kit Source Code

Access the complete UI Kit source code on GitHub.

View on GitHub