Threaded Messages Header

Header component for threaded conversations showing the parent message, reply count, and thread navigation.

CometChatThreadedHeader displays the parent message of a thread along with reply count and provides the container for threaded message list and composer. It enables organized threaded conversations within a chat.

---

Where It Fits

CometChatThreadedHeader is used when a user taps “Reply in Thread” on a message. It wraps the parent message display with a CometChatMessageList (filtered by parentMessageId) and CometChatMessageComposer for thread replies.

Dart

CometChatThreadedHeader(
  parentMessage: parentMessage,
  loggedInUser: loggedInUser,
)

---

Quick Start

Dart

import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
import 'package:flutter/material.dart';

class ThreadScreen extends StatelessWidget {
  final BaseMessage parentMessage;
  final User loggedInUser;

  const ThreadScreen({
    super.key,
    required this.parentMessage,
    required this.loggedInUser,
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: CometChatThreadedHeader(
          parentMessage: parentMessage,
          loggedInUser: loggedInUser,
        ),
      ),
    );
  }
}

Typically launched from the message list when a user selects “Reply in Thread”:

Dart

CometChatMessageList(
  user: user,
  onThreadRepliesClick: (message, context, {bubbleView}) {
    Navigator.push(context, MaterialPageRoute(
      builder: (context) => ThreadScreen(
        parentMessage: message,
        loggedInUser: CometChatUIKit.loggedInUser!,
      ),
    ));
  },
)

Prerequisites: CometChat SDK initialized, a user logged in, and a valid BaseMessage object as the parent message.

---

Actions and Events

Callback Methods

onBack

Fires when the user presses the back button.

Dart

CometChatThreadedHeader(
  parentMessage: parentMessage,
  loggedInUser: loggedInUser,
  onBack: () {
    Navigator.pop(context);
  },
)

onError

Fires on internal errors.

Dart

CometChatThreadedHeader(
  parentMessage: parentMessage,
  loggedInUser: loggedInUser,
  onError: (e) {
    debugPrint("Error: ${e.message}");
  },
)

SDK Events (Real-Time, Automatic)

SDK Listener	Internal behavior
New thread reply received	Increments reply count
Parent message edited	Updates parent message display
Parent message deleted	Updates parent message display

---

Functionality

Property	Type	Default	Description
parentMessage	BaseMessage	required	The parent message of the thread
loggedInUser	User	required	The currently logged-in user
showBackButton	bool?	true	Toggle back button visibility
title	String?	null	Custom title text
hideMessageComposer	bool?	false	Hide the message composer

---

Custom View Slots

Bubble View

Replace the parent message bubble display.

Dart

CometChatThreadedHeader(
  parentMessage: parentMessage,
  loggedInUser: loggedInUser,
  bubbleView: (message) {
    if (message is TextMessage) {
      return Container(
        padding: EdgeInsets.all(12),
        decoration: BoxDecoration(
          color: Color(0xFFF5F5F5),
          borderRadius: BorderRadius.circular(8),
        ),
        child: Text(message.text),
      );
    }
    return null;
  },
)

---

Advanced

BLoC Access

The threaded header uses ThreadedHeaderBloc internally:

Component	Description
ThreadedHeaderBloc	Manages threaded header state
ThreadedHeaderEvent	Events: InitializeThreadedHeader, IncrementReplyCount, UpdateParentMessage
ThreadedHeaderState	Threaded header state with parent message and reply count

---

Style

Dart

CometChatThreadedHeader(
  parentMessage: parentMessage,
  loggedInUser: loggedInUser,
  style: CometChatThreadedHeaderStyle(
    backgroundColor: Colors.white,
    replyCountTextColor: Color(0xFF727272),
  ),
)

---

Next Steps

Message List

Display messages in a conversation

Message Composer

Compose and send messages

Threaded Messages Guide

Complete threaded messages implementation

Component Styling

Detailed styling reference