{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "elements-document-reference",
  "type": "registry:component",
  "title": "Document reference",
  "description": "A document the answer leans on, with the quoted passage and the page to jump to.",
  "registryDependencies": [
    "https://r.assistant-ui.com/elements-surfaces.json"
  ],
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "type": "registry:component",
      "path": "components/assistant-ui/elements/document-reference.tsx",
      "content": "\"use client\";\n\nimport type { ComponentProps } from \"react\";\nimport { FileTextIcon } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport { field, mono, paper } from \"./surfaces\";\n\nexport interface DocumentAnchor {\n  page: number;\n  quote: string;\n}\n\nexport function DocumentReference({\n  title,\n  pages,\n  anchors,\n  activePage,\n  onJump,\n  className,\n  ...props\n}: Omit<\n  ComponentProps<\"div\">,\n  \"children\" | \"title\" | \"pages\" | \"anchors\" | \"activePage\" | \"onJump\"\n> & {\n  title: string;\n  pages: number;\n  anchors: readonly DocumentAnchor[];\n  activePage: number;\n  onJump?: (page: number) => void;\n}) {\n  // several anchors can cite one page, and only one of them is the current item\n  const currentIndex = anchors.findIndex(\n    (anchor) => anchor.page === activePage,\n  );\n\n  return (\n    <div\n      data-slot=\"document-reference\"\n      className={cn(\n        paper,\n        \"flex w-full max-w-sm flex-col gap-3 rounded-2xl p-3.5\",\n        className,\n      )}\n\n      {...props}\n    >\n      <div className=\"flex items-center gap-2.5\">\n        <span className=\"bg-foreground/[0.05] text-foreground/45 flex size-8 shrink-0 items-center justify-center rounded-lg\">\n          <FileTextIcon className=\"size-3.5\" />\n        </span>\n        <div className=\"flex min-w-0 flex-1 flex-col\">\n          <span className=\"truncate text-[13.5px] font-medium\">{title}</span>\n          <span className={cn(mono, \"text-foreground/30\")}>\n            {pages} pages · {anchors.length} cited\n          </span>\n        </div>\n      </div>\n\n      <div className=\"flex flex-col gap-1.5\">\n        {anchors.map((anchor, i) => (\n          <button\n            key={`${anchor.page}-${i}`}\n            type=\"button\"\n            aria-current={i === currentIndex || undefined}\n            onClick={() => onJump?.(anchor.page)}\n            className={cn(\n              \"flex flex-col gap-1 rounded-xl px-2.5 py-2 text-start transition-colors\",\n              anchor.page === activePage\n                ? field\n                : \"hover:bg-foreground/[0.035]\",\n            )}\n          >\n            <span className={cn(mono, \"text-foreground/30\")}>\n              p. {anchor.page}\n            </span>\n            <span className=\"text-foreground/65 border-foreground/15 border-s-2 ps-2 text-xs leading-relaxed break-words\">\n              {anchor.quote}\n            </span>\n          </button>\n        ))}\n      </div>\n    </div>\n  );\n}\n"
    }
  ]
}