{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "thread",
  "type": "registry:component",
  "title": "Thread",
  "description": "Thread display component for conversations",
  "registryDependencies": [],
  "files": [
    {
      "path": "components/chatcn/ai/thread.tsx",
      "content": "\"use client\";\nimport { useState, createContext, useContext } from \"react\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\nimport { MoreHorizontalIcon, Message01Icon } from \"@hugeicons/core-free-icons\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport { cn } from \"@/lib/utils\";\n\nconst ThreadContext = createContext<{\n  open: boolean;\n  setOpen: (v: boolean) => void;\n}>({\n  open: false,\n  setOpen: () => {},\n});\nconst useThreadContext = () => useContext(ThreadContext);\n\ntype ThreadProps = {\n  children: React.ReactNode;\n  className?: string;\n};\n\nexport function Thread({ children, className }: ThreadProps) {\n  const [open, setOpen] = useState(false);\n\n  return (\n    <ThreadContext.Provider value={{ open, setOpen }}>\n      <div\n        className={cn(\n          \"group flex items-center gap-2.5 px-2.5 py-2 rounded-lg\",\n          \"cursor-pointer select-none\",\n          \"transition-colors duration-150\",\n          \"hover:bg-accent\",\n          open && \"bg-accent\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </ThreadContext.Provider>\n  );\n}\n\nexport function ThreadContent({\n  children,\n  className,\n}: {\n  children: React.ReactNode;\n  className?: string;\n}) {\n  return (\n    <div className=\"flex items-center gap-2.5 flex-1 min-w-0\">\n      <HugeiconsIcon\n        icon={Message01Icon}\n        className=\"shrink-0 size-4 text-muted-foreground\"\n      />\n      <span className={cn(\"truncate text-sm text-foreground\", className)}>\n        {children}\n      </span>\n    </div>\n  );\n}\n\nexport function ThreadAction({\n  children,\n  className,\n}: {\n  children: React.ReactNode;\n  className?: string;\n}) {\n  return (\n    <DropdownMenuItem className={cn(\"p-2\", className)}>\n      {children}\n    </DropdownMenuItem>\n  );\n}\n\nexport function ThreadActions({\n  children,\n  className,\n}: {\n  children: React.ReactNode;\n  className?: string;\n}) {\n  const { open, setOpen } = useThreadContext();\n\n  return (\n    <div\n      className={cn(\n        \"transition-opacity\",\n        open ? \"opacity-100\" : \"opacity-0 group-hover:opacity-100\"\n      )}\n    >\n      <DropdownMenu onOpenChange={setOpen}>\n        <DropdownMenuTrigger asChild>\n          <button\n            className={cn(\"p-1 rounded-md\", open && \"text-accent-foreground\")}\n          >\n            <HugeiconsIcon icon={MoreHorizontalIcon} className=\"size-5\" />\n          </button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          side=\"bottom\"\n          className={cn(\n            \"w-56 p-2 border shadow-sm bg-background/95 backdrop-blur-sm\",\n            className\n          )}\n        >\n          {children}\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ]
}