CommentThread

A threaded discussion with nested replies, reactions, @mentions, inline edit and delete, and a resolve action that folds the thread into a chip.

When to use

• Review comments anchored to an object: a story draft, a design frame, a document section.
• When discussions need replies, mentions and a clear "resolved" end state.
• Use ChatThread for real-time messaging, and Timeline for a read-only log of activity.

Usage

import { CommentThread } from "@/components/iris/comment-thread/comment-thread";

const me = { id: "myrto", name: "Myrto Lekka" };
h(CommentThread, {
  title: "Greek bond yields story",
  currentUser: me,
  people: [me, nefeli, stelios],
  defaultComments: [
    {
      id: "c1",
      author: nefeli,
      createdAt: "2h",
      body: "Draft is on the desk with 2 conflicts on the yield figure.",
      replies: [{ id: "c2", author: stelios, createdAt: "1h", body: "@Myrto Lekka which figure do we run?" }],
    },
  ],
  onCommentsChange: (next, event) => api.sync(event),
});

Props

Prop	Type	Default	Description
currentUser	{ id; name; avatar? }	— (required)	The person writing; only their comments can be edited and deleted.
comments / defaultComments	ThreadComment[]	— / []	{ id; author; body; createdAt: display label; edited?; deleted?; reactions?: { emoji; users: id[] }[]; replies? }.
onCommentsChange	(comments, event) => void	—	Full next tree plus what changed: reply, edit, delete or react.
resolved / defaultResolved / onResolvedChange	boolean / boolean / (r) => void	— / false	Resolving folds the thread into a chip that reopens it.
title	ReactNode	—	What the thread is about, shown in the header.
people	CommentAuthor[]	everyone in the thread	Who can be @mentioned.
reactions	string[]	six common emoji	Emoji offered by the picker.
placeholder	string	"Reply, or @mention someone"	Composer placeholder.
maxDepth	number	2	Deeper replies attach to the deepest allowed parent.
nowLabel	string	"Just now"	createdAt label for new comments.
labels	CommentThreadLabels	English	Every visible or announced word, for localisation.

Notes

• body is plain text; "@Full Name" mentions of known people are highlighted. The composer's mention list is a combobox/listbox with arrow keys, Enter to pick and Escape to close.
• A deleted comment that still has replies stays as a quiet placeholder. Replies collapse behind "Hide replies".
• Reaction counts roll and the thread morphs into its resolved chip; reduced motion swaps instantly.
• Forwards a ref to the root element.