Thread View

Inline thread reply indicator that displays the reply count, unread indicator, and a clickable button to open a threaded conversation.

AI Integration Quick Reference

{
  "component": "CometChatThreadView",
  "package": "@cometchat/chat-uikit-react",
  "import": "import { CometChatThreadView } from \"@cometchat/chat-uikit-react\";",
  "cssImport": "import \"@cometchat/chat-uikit-react/css-variables.css\";",
  "description": "Inline thread reply indicator that displays the reply count, unread indicator, and a clickable button to open a threaded conversation.",
  "cssRootClass": ".cometchat-thread-view",
  "subComponents": ["Root", "Icon", "ReplyCount", "UnreadIndicator"],
  "primaryOutput": {
    "prop": "onClick",
    "type": "() => void"
  },
  "props": {
    "Root": {
      "replyCount": { "type": "number", "note": "Required. Component renders nothing when 0. Caps display at 999+." },
      "unreadReplyCount": { "type": "number", "default": "0", "note": "Shows unread indicator dot and bold text when > 0." },
      "onClick": { "type": "() => void", "default": "undefined" },
      "alignment": { "type": "'left' | 'right'", "default": "'right'" },
      "className": { "type": "string", "default": "undefined" },
      "children": { "type": "ReactNode", "default": "undefined" }
    },
    "ReplyCount": {
      "text": { "type": "string", "default": "auto-formatted from replyCount (e.g., '3 Replies', '999+ Replies')" },
      "className": { "type": "string", "default": "undefined" }
    },
    "Icon": {
      "iconURL": { "type": "string", "default": "built-in reply-in-thread SVG" },
      "className": { "type": "string", "default": "undefined" }
    },
    "UnreadIndicator": {
      "className": { "type": "string", "default": "undefined" }
    }
  },
  "types": {
    "CometChatThreadViewContextValue": {
      "replyCount": "number",
      "unreadReplyCount": "number",
      "onClick": "(() => void) | undefined",
      "alignment": "'left' | 'right'"
    }
  }
}

Where It Fits

CometChatThreadView is a base component that renders the inline thread reply indicator beneath a message bubble. It shows a thread icon, the reply count (capped at 999+), and an optional unread indicator dot. When clicked, it opens the threaded conversation. It is consumed by CometChatMessageBubble (or any custom message layout) to indicate that a message has threaded replies. This is a pure presentational component with no SDK dependency.

import { CometChatThreadView } from "@cometchat/chat-uikit-react";
import "@cometchat/chat-uikit-react/css-variables.css";

function MessageBubbleFooter({ message, onOpenThread }) {
  if (message.getReplyCount() === 0) return null;

  return (
    <CometChatThreadView.Root
      replyCount={message.getReplyCount()}
      unreadReplyCount={message.getUnreadReplyCount?.() ?? 0}
      onClick={() => onOpenThread(message)}
      alignment="right"
    >
      <CometChatThreadView.Icon />
      <CometChatThreadView.ReplyCount />
      <CometChatThreadView.UnreadIndicator />
    </CometChatThreadView.Root>
  );
}

Minimal Render

import { CometChatThreadView } from "@cometchat/chat-uikit-react";
import "@cometchat/chat-uikit-react/css-variables.css";

function Demo() {
  return (
    <CometChatThreadView.Root replyCount={3} onClick={() => console.log("Open thread")} />
  );
}

Root CSS class: .cometchat-thread-view

Actions and Events

Callback Props

onClick

Called when the user clicks the thread view button (or activates it via Enter/Space). Use this to open the threaded conversation panel.

<CometChatThreadView.Root
  replyCount={5}
  onClick={() => openThreadPanel(message)}
>
  <CometChatThreadView.Icon />
  <CometChatThreadView.ReplyCount />
</CometChatThreadView.Root>

Common Patterns

Default Layout (No Children)

When no children are provided, Root renders Icon, ReplyCount, and UnreadIndicator (if applicable) automatically.

<CometChatThreadView.Root replyCount={3} onClick={openThread} />

With Unread Replies

Shows bold reply count text and an unread indicator dot.

<CometChatThreadView.Root replyCount={8} unreadReplyCount={3} onClick={openThread}>
  <CometChatThreadView.Icon />
  <CometChatThreadView.ReplyCount />
  <CometChatThreadView.UnreadIndicator />
</CometChatThreadView.Root>

Custom Text Override

<CometChatThreadView.Root replyCount={12} onClick={openThread}>
  <CometChatThreadView.Icon />
  <CometChatThreadView.ReplyCount text="View thread" />
</CometChatThreadView.Root>

Custom Icon

<CometChatThreadView.Root replyCount={7} onClick={openThread}>
  <CometChatThreadView.Icon iconURL="/custom-thread-icon.svg" />
  <CometChatThreadView.ReplyCount />
</CometChatThreadView.Root>

Left Alignment (Incoming Messages)

<CometChatThreadView.Root replyCount={5} alignment="left" onClick={openThread}>
  <CometChatThreadView.Icon />
  <CometChatThreadView.ReplyCount />
</CometChatThreadView.Root>

Minimal — Just the Count

<CometChatThreadView.Root replyCount={3} onClick={openThread}>
  <CometChatThreadView.ReplyCount />
</CometChatThreadView.Root>

CSS Architecture

The component uses CSS custom properties (design tokens) defined in @cometchat/chat-uikit-react/css-variables.css. The cascade:

1. Global tokens set on the .cometchat root wrapper.
2. Component CSS (.cometchat-thread-view) consumes these tokens via var().
3. Overrides target .cometchat-thread-view descendant selectors.

Key Selectors

Target	Selector
Root button	.cometchat-thread-view
Thread icon	.cometchat-thread-view__icon
Reply count text	.cometchat-thread-view__count
Unread indicator dot	.cometchat-thread-view__unread-indicator
Right alignment	.cometchat-thread-view--right
Left alignment	.cometchat-thread-view--left
Unread state	.cometchat-thread-view--unread

Example: Brand-themed thread view

App.css

.cometchat-thread-view__count {
  color: #6851ff;
}

.cometchat-thread-view__icon {
  background-color: #6851ff;
}

.cometchat-thread-view__unread-indicator {
  background: #6851ff;
}

.cometchat-thread-view:focus-visible {
  outline-color: #6851ff;
}

Customization Matrix

What to change	Where	Property/API	Example
Handle thread open	Root props	onClick callback	onClick={() => openThread()}
Alignment	Root props	alignment	alignment="left"
Unread state	Root props	unreadReplyCount	unreadReplyCount={3}
Reply text	ReplyCount props	text	text="View thread"
Thread icon	Icon props	iconURL	iconURL="/icon.svg"
Change visual styling	Global CSS	.cometchat-thread-view selectors	See CSS Selectors

Props

All props are optional unless noted otherwise.

---

replyCount (Root)

Number of replies in the thread. The component renders nothing when this is 0. Counts over 999 display as “999+”. Required.

Type	number
Default	—

---

unreadReplyCount (Root)

Number of unread replies. When greater than 0, the reply count text uses bold font and the UnreadIndicator dot is shown (in default layout).

Type	number
Default	0

---

onClick (Root)

Callback when the thread view button is clicked or activated via keyboard.

Type	() => void
Default	undefined

---

alignment (Root)

Controls whether the thread view is right-justified (outgoing messages) or left-justified (incoming messages).

Type	'left' | 'right'
Default	'right'

---

className (Root, ReplyCount, Icon, UnreadIndicator)

Optional custom CSS class name appended to the component’s root element.

Type	string
Default	undefined

---

children (Root)

Custom content that replaces the default Icon + ReplyCount + UnreadIndicator rendering.

Type	ReactNode
Default	undefined

---

text (ReplyCount)

Override the default formatted text. When not provided, auto-formats as “1 Reply”, “N Replies”, or “999+ Replies”.

Type	string
Default	Auto-formatted from replyCount

---

iconURL (Icon)

Custom icon URL (SVG or image). Falls back to the built-in reply-in-thread icon.

Type	string
Default	Built-in reply-in-thread SVG

---

CSS Selectors

Target	Selector
Root button	.cometchat-thread-view
Root focused	.cometchat-thread-view:focus-visible
Right alignment	.cometchat-thread-view--right
Left alignment	.cometchat-thread-view--left
Unread state (root)	.cometchat-thread-view--unread
Thread icon	.cometchat-thread-view__icon
Custom icon modifier	.cometchat-thread-view__icon--custom
Reply count text	.cometchat-thread-view__count
Unread count bold text	.cometchat-thread-view--unread .cometchat-thread-view__count
Unread indicator dot	.cometchat-thread-view__unread-indicator