{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "comment-thread",
  "type": "registry:ui",
  "title": "Comment thread",
  "description": "Threaded React comment list with initials avatars, author name, timestamp and body in bordered bubbles. Pairs with the comment composer.",
  "dependencies": [],
  "registryDependencies": [
    "https://ui.minidev.pro/r/avatar.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/comment-thread.tsx",
      "type": "registry:ui",
      "target": "components/ui/comment-thread.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback } from \"@/components/ui/avatar\"\n\n/** A vertical thread of comments, each with an avatar, author, time and body. */\ntype Comment = { id: string; author: string; body: string; time?: string }\n\nconst SAMPLE_COMMENTS: Comment[] = [\n  { id: \"c1\", author: \"Maya Chen\", body: \"Northwind's INV-2041 is still open at $12,400. Can we send a reminder before the end of the month?\", time: \"3h ago\" },\n  { id: \"c2\", author: \"Theo Okafor\", body: \"Sent a reminder from Lumen this morning. Their AP contact said it's in the Friday payment run.\", time: \"2h ago\" },\n  { id: \"c3\", author: \"Priya Raman\", body: \"Let's mark it as promised and move it out of the overdue list so it stops paging the finance channel.\", time: \"1h ago\" },\n  { id: \"c4\", author: \"Sam Lowe\", body: \"Done. I'll close the thread once the payment lands.\", time: \"20m ago\" },\n]\n\ntype CommentThreadProps = {\n  /** Comments in display order. Defaults to a short Lumen thread. */\n  comments?: Comment[]\n  className?: string\n}\n\nfunction CommentThread({\n  comments = SAMPLE_COMMENTS,\n  className,\n}: CommentThreadProps) {\n  return (\n    <ul data-slot=\"comment-thread\" className={cn(\"space-y-4\", className)}>\n      {comments.map((c) => (\n        <li key={c.id} className=\"flex gap-3\">\n          <Avatar className=\"size-8\">\n            <AvatarFallback>{c.author.slice(0, 2).toUpperCase()}</AvatarFallback>\n          </Avatar>\n          <div className=\"min-w-0 flex-1 rounded-xl border border-border bg-surface px-3 py-2\">\n            <div className=\"mb-1 flex items-center gap-2\">\n              <span className=\"text-sm font-medium text-fg\">{c.author}</span>\n              {c.time ? <span className=\"text-xs text-fg-muted\">{c.time}</span> : null}\n            </div>\n            <p className=\"text-sm text-fg-muted\">{c.body}</p>\n          </div>\n        </li>\n      ))}\n    </ul>\n  )\n}\nexport { CommentThread }\nexport type { CommentThreadProps, Comment as CommentThreadComment }\n"
    }
  ]
}