{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "elements-thread-list",
  "type": "registry:component",
  "title": "Thread list",
  "description": "Conversation history with unread marks and actions that wait for hover.",
  "registryDependencies": [
    "https://r.assistant-ui.com/elements-surfaces.json"
  ],
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "type": "registry:component",
      "path": "components/assistant-ui/elements/thread-list.tsx",
      "sourcePath": "packages/ui/src/components/react/assistant-ui/elements/thread-list.tsx",
      "content": "\"use client\";\n\nimport type { ComponentProps } from \"react\";\nimport { PencilIcon, Trash2Icon } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport { field, mono } from \"./surfaces\";\n\nexport interface ThreadItem {\n  title: string;\n  time: string;\n  unread?: boolean;\n}\n\nexport function ThreadList({\n  threads,\n  activeIndex,\n  onActiveIndexChange,\n  className,\n  ...props\n}: Omit<\n  ComponentProps<\"div\">,\n  \"children\" | \"threads\" | \"activeIndex\" | \"onActiveIndexChange\"\n> & {\n  threads: readonly ThreadItem[];\n  activeIndex: number;\n  onActiveIndexChange?: (index: number) => void;\n}) {\n  return (\n    <div\n      data-slot=\"thread-list\"\n      className={cn(\"flex w-full max-w-[240px] flex-col gap-0.5\", className)}\n\n      {...props}\n    >\n      <div className={cn(mono, \"text-foreground/35 px-3 pb-1.5\")}>Today</div>\n      {threads.map((thread, i) => {\n        const active = i === activeIndex;\n        return (\n          <button\n            key={thread.title}\n            type=\"button\"\n            aria-current={active || undefined}\n            onClick={() => onActiveIndexChange?.(i)}\n            className={cn(\n              \"group flex w-full items-center justify-between gap-2 rounded-xl px-3 py-2 text-start text-[13.5px] transition-colors\",\n              active ? field : \"hover:bg-foreground/[0.03]\",\n            )}\n          >\n            <span className=\"flex-1 truncate\">{thread.title}</span>\n            <span\n              className={cn(\n                mono,\n                \"text-foreground/35 flex items-center gap-1.5 tabular-nums group-hover:hidden\",\n              )}\n            >\n              {thread.unread && !active && (\n                <>\n                  <span\n                    aria-hidden\n                    className=\"size-1.5 rounded-full bg-blue-500 dark:bg-blue-400\"\n                  />\n                  <span className=\"sr-only\">unread</span>\n                </>\n              )}\n              {thread.time}\n            </span>\n            <span className=\"hidden items-center gap-0.5 group-hover:flex\">\n              <span className=\"text-foreground/45 hover:bg-foreground/[0.06] hover:text-foreground/90 rounded-full p-1\">\n                <PencilIcon className=\"size-3\" />\n              </span>\n              <span className=\"text-foreground/45 hover:bg-foreground/[0.06] hover:text-foreground/90 rounded-full p-1\">\n                <Trash2Icon className=\"size-3\" />\n              </span>\n            </span>\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"
    }
  ]
}