Doc cardPro

A document the assistant found or made: a first page drawn from its own outline, who owns it and who can see it, the passage that answers the question, and the outline as jump links.

Markdown

On this page

ProThe wholesale terms that answer a pricing question, with the passage quoted and the outline as jump links.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/doc-card

Usage

tsx

import { DocCard } from "@/components/ui/chatcn/pro/doc-card"

<DocCard
  title="Wholesale terms 2027"
  kind="doc"
  pages={7}
  owner={{ name: "Marisol Quintero" }}
  sections={sections}
  quote={{ text: passage, page: 3 }}
  onOpen={(sectionId) => openAt(sectionId)}
  onCopyLink={() => navigator.clipboard.writeText(url)}
/>

Without a thumbnail the first page is drawn from sections: the title, then each heading over quiet lines whose lengths come from the heading text, so every document gets its own page. Sheets draw a grid, slides a wide page. Pages behind show as offset edges, up to two.

quote puts the passage that answers the question under the title with its page as a link. With access="none" the card explains who to ask and onRequestAccess sends the request in place.

Examples

Sheets, slides, no access, long outlines, loading and error

ProA spreadsheet, slides, no access with a request, a long outline, a view only PDF, loading, an error and disabled.

Props

Prop	Type	Notes
`title`	`string`	Wraps to two lines
`kind`	`"doc" \| "pdf" \| "sheet" \| "slides"`	Default `doc`
`pages`, `owner`, `updated`, `location`		The meta lines
`sharedWith`	`number`	`0` reads Only you
`access`	`"edit" \| "comment" \| "view" \| "none"`	Default `edit`
`sections`	`{ id, title, page?, level? }[]`	Outline and thumbnail
`visibleSections`	`number`	Before the fold. Default 4
`quote`	`{ text, page? }`	The answering passage
`thumbnail`	`string`	A real first page image
`onOpen`	`(sectionId?) => void`	Open, or open at a section
`onCopyLink`, `onRequestAccess`	`() => unknown \| Promise`	Show progress and failure
`status`, `onRetry`	`"ready" \| "loading" \| "error"`
`disabled`, `labels`		Every string is a label

Accessibility

The outline is a navigation landmark named for the document kind; each entry is a button named Open at its title.
Copy link says Copied in a polite region. Request access reports the result as a status.
The drawn page is decorative and hidden from screen readers.

Motion

Hover fills and the page number swapping to an open icon take 150 ms. Nothing else moves.