Threaded Messages

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

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
Related	All Guides

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

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

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

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

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

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
Thread screen	CometChatThread	cometchat_thread.dart
Thread header	CometChatThreadedHeader	cometchat_thread.dart
Display thread msgs	CometChatMessageList	cometchat_thread.dart
Compose reply	CometChatMessageComposer	cometchat_thread.dart
Thread controller	CometChatThreadController	cometchat_thread_controller.dart

---

Next Steps

Message List

Render real-time message threads.

Thread Header

Customize the thread header component.

All Guides

Browse all feature and formatter guides.

Sample App

Full working sample application on GitHub.