Comment Thread

When to use

Reach for CommentThread when you need a recursive comment panel under any content surface — posts, news articles, events, product reviews, document annotations. It composes expandable-text for long bodies and engagement-bar variant="compact" for the per-row like action.

Footgun: the `comments` prop is mount-only

Component takes comments as initial state on mount only. Subsequent prop reference changes are ignored. To push external updates, use the imperative handle's reset(next) or dispatch(action):

const ref = useRef<CommentThreadHandle>(null);
useEffect(() => {
  ref.current?.reset(externalComments);
}, [externalComments]);

<CommentThread ref={ref} comments={externalComments} />

Basic example

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

export function Example() {
  return (
    <CommentThread
      comments={post.comments}
      currentUser={{ id: viewer.id, name: viewer.name, avatar: viewer.avatarUrl }}
      onAddComment={async (content, parentId) => {
        const created = await api.addComment(post.id, { content, parentId });
        return created; // component swaps temp comment for real one
      }}
      onLikeComment={(id, nextLiked) => api.likeComment(id, nextLiked)}
      onDeleteComment={(id) => api.deleteComment(id)}
      onReportComment={(id) => openReportDialog(id)}
    />
  );
}

Realtime via subscribe

const subscribe = useCallback<Subscribe<CommentDelta>>(
  (handler) => channel.on("comment", handler),
  [channel],
);

<CommentThread
  comments={post.initialComments}
  currentUser={viewer}
  subscribe={subscribe}
  onSubscribeDelta={(d) => analytics.track("comment-delta", d)}
/>

Hosts must memoize subscribe via useCallback — identity changes trigger a clean teardown + re-call. Same contract as engagement-bar.

Custom kebab actions

<CommentThread
  comments={comments}
  currentUser={viewer}
  commentActions={(comment, { isOwn }) => [
    isOwn && { label: "Pin", onClick: () => api.pinComment(comment.id) },
    isOwn && { label: "Delete", destructive: true, onClick: () => api.deleteComment(comment.id) },
    !isOwn && { label: "Block author", onClick: () => api.block(comment.author.id) },
    // v0.2.0 — explicit section divider above this item
    { label: "Mark spam", separatorBefore: true, onClick: () => api.flagSpam(comment.id) },
    { label: "Report", onClick: () => openReportDialog(comment.id) },
  ].filter(Boolean) as CommentMenuItem[]}
/>

v0.2.0 — edited badge

Set comment.edited = true on first paint when your backend reports the comment was edited; the row renders an (edited) suffix after the timestamp. The realtime { kind: "edited" } delta also flips edited:true, so first-paint and post-realtime UI behave identically. Override the suffix copy via labels.editedSuffix:

<CommentThread
  comments={comments.map((c) => ({ ...c, edited: c.serverEditedAt != null }))}
  labels={{ editedSuffix: "(düzenlendi)" }} // i18n override
/>

Standalone composer

CommentComposer ships standalone for hosts that want the composer without the thread (article-page hero CTAs):

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

<CommentComposer
  currentUser={viewer}
  placeholder="Share your thoughts…"
  onSubmit={async (content) => api.addArticleComment(article.id, content)}
/>

Notes

• maxDepthdefaults to 2; past it, "view N replies" inline-expands. Override the link via renderViewReplies for navigate-to-detail mode.
• currentUser absent → bottom composer hidden. Render a sign-in CTA via composerEmptyState.
• Default kebab's "Delete" only shows on the viewer's own comments. Wire commentActions for moderator semantics.
• v0.2.0 — comment.edited renders an (edited) suffix; the realtime { kind: "edited" } delta now also flips this flag. The thread still does not surface an Edit affordance — wire it via commentActions.
• v0.2.0 — CommentMenuItem.separatorBeforedraws a divider above the item in the kebab. Useful for host-grouped sections (e.g. post-card's moderator block).
• renderNode, renderViewReplies, and renderComposer are full-takeover slots.