Report output
A long answer laid out as a report: sections with a contents list, figures and numbered sources, with a short version that opens into the full one.
Loading preview…
Install
- 1
Run this command in your Tailwind CSS project. It adds
components/ai/report-output-document.tsxand installs its dependencies.$ npx shadcn@latest add https://gradientdeck.com/ai-components/r/report-output-document.json
Usage & API
Example
import { ResearchReport } from "@/components/ai/report-output-document"
<ResearchReport
report={report}
shareUrl="…"
onExport={() => {}}
/>Props ResearchReport
| Prop | Type & description | Required |
|---|---|---|
report | Report | Required |
shareUrl | stringLink shown in the share popover. | Required |
onExport | (format: ExportFormat) => Promise<void>Resolve when the file is ready. The toolbar shows progress while it's pending. | Required |
onBack | () => void | Optional |
backLabel | stringText for the back button, e.g. the chat title. | Optional |
Dependencies
- React
- Tailwind CSS
- motion
- lucide-react
Implementation notes
The full report is a window with a back button, the label Research report, and the question in the toolbar. Copy as Markdown flips to Copied. Export opens a menu for PDF, Word document and Markdown, then shows Preparing and a downloaded filename while the promise you passed is pending. Share opens a link field, a Copy button, and a switch for anyone at the workspace versus only you. A contents list on the left, and a sticky contents menu on a narrow screen, jumps to Summary, each numbered section and Sources. A bar under the toolbar and a minutes-left line follow the scroll. The preview is a Frankfurt-region report with a summary box, six sections, a chart, a table and eight sources.
Example
import { ReportBrief } from "@/components/ai/report-output-brief"
<ReportBrief
report={report}
expanded={true}
onExpandedChange={() => {}}
/>Props ReportBrief
| Prop | Type & description | Required |
|---|---|---|
report | ReportBriefData | Required |
expanded | boolean | Required |
onExpandedChange | (expanded: boolean) => void | Required |
scrollRef | RefObject<HTMLElement | null>The scroll container the brief sits in. Used to keep jumps inside it. | Optional |
Dependencies
- React
- Tailwind CSS
- motion
- lucide-react
Implementation notes
The brief sits in a chat reply after a line that says how long the research took and how many sources were read. A header names it Research report, with the date and a minutes-to-read figure. The headline is one sentence. Three numbered points each carry a High, Medium or Low chip and a short basis. Open full report expands section chips, the sections, a latency chart, a cost table and the source list. The sources button jumps there and opens the report if it was closed. Under the card are Copy, a good-response and a bad-response toggle, and follow-up chips that fill the composer. The surrounding preview is a chat with a searchable sidebar.
Choosing a layout
Use the document when the answer is something a person will read for several minutes, scroll, export or hand to someone who should not see the chat. Use the brief when the same material has to stay inside a thread, with a short version first and the sections one click away. Both assume you already have sections and numbered sources.
A single quoted passage beside the answer is the source viewer. A queue of agent runs is the agent inbox. If the model only returned a paragraph, neither variant earns its chrome. The contents list, the confidence marks and the export menu are for a report that already has a shape.
What does Export actually download?
The menu offers PDF, a Word document and Markdown, and the toolbar shows progress until the onExport promise resolves. The component does not build the file. Copy as Markdown does write text, from the report already on the page, and puts it on the clipboard.
Do the confidence chips mean the model scored the point?
They show the confidence and the basis you put on each point of the brief. The document variant has no confidence chips. It has a summary, sections and numbered citations instead.