Dossier
dossierTracks agent collection domains with empty, active, archived, optional, and summary states.
Usage
Basic usage
Three-state field (archived/partial/empty) + the current collection field is highlighted, and the head automatically calculates the progress.
Dossier
Archived 2/5- Basic informationLin Wanqing · 138-0000-0000
- Job intentionYunqi Technology · President's Personal Secretary
- Educational backgroundAlready recorded school, professional reasons to be supplemented
- Work experience
- Employer Awareness
- Optional supplementOptional
<Dossier
sections={[
{ key: "basic", label: "Basic information", status: "done", summary: "Lin Wanqing · 138-0000-0000" },
{ key: "intent", label: "Job Intention", status: "done", summary: "Yunqi Technology·President's Personal Secretary" },
{ key: "education", label: "Education Background", status: "partial", active: true, summary: "School has been recorded, professional reasons to be filled" },
{ key: "experience", label: "Work experience", status: "empty" },
{ key: "extras", label: "Optional supplement", status: "empty", optional: true },
]}
title="Dossier"
archivedLabel="Archived"
optionalLabel="Optional"
/>Archive All
When all domains are done, the progress is full and customized title.
Case file · Complete arguments
Archived 5/5- Basic informationLin Wanqing · 138-0000-0000
- Job intentionYunqi Technology · President's Personal Secretary
- Educational backgroundAlready recorded school, professional reasons to be supplemented
- Work experienceArchived
- Employer AwarenessArchived
- Optional supplementArchived
<Dossier
title="Case file · Complete arguments"
archivedLabel="Archived"
optionalLabel="Optional"
sections={sections.map((s) => ({ ...s, status: "done", active: false }))}
/>Embedded (bare)
bare Remove the container border background and embed other panels.
Dossier
Archived 2/4- Basic informationLin Wanqing · 138-0000-0000
- Job intentionYunqi Technology · President's Personal Secretary
- Educational backgroundAlready recorded school, professional reasons to be supplemented
- Work experience
<Dossier
sections={sections.slice(0, 4)}
title="Dossier"
archivedLabel="Archived"
optionalLabel="Optional"
bare
/>When to Use
Use it to visualize an agent collecting information by domain or slot. Each section can be empty, partial, or complete; the current section is highlighted and archived progress is calculated automatically. Use AgentPlan for linear tasks. Dossier is for domain-based collection such as an interview that fills a case file field by field.
Import
import { Dossier } from "@hulianui/ui"Props
DossierProps:
| Name | Type | Default | Description |
|---|---|---|---|
| sections * | DossierSection[] | — | Domain list (data driven) |
| bare | boolean | false | Remove the container border background and use it inline |
| className | string | — | Container class name |
Slots
| Slot | Type | Description |
|---|---|---|
| title | ReactNode | Header title (default "\u6848\u5377" ("Case File")) |
| progress | ReactNode | Header progress; defaults to \u5df2\u5f52\u6863 ${done}/${required.length} ("Archived n/m"), excluding optional sections from the denominator |
DossierSection:
| Name | Type | Default | Description |
|---|---|---|---|
| key * | string | — | Domain unique identifier |
| label * | ReactNode | — | Domain name |
| status | "empty" | "partial" | "done" | "empty" | Empty (hollow ring) / Half filled / Complete (tick) |
| optional | boolean | false | Optional section: excluded from the progress denominator and, when empty, dimmed and marked "\u53ef\u9009" ("Optional") |
| summary | ReactNode | — | Summary of archived content (one or two lines) |
| active | boolean | false | The domain currently being collected, highlighted |
Usage Guidelines
- Optional sections are excluded from the automatic progress denominator. An empty optional section displays
"\u53ef\u9009"("Optional"); leaveoptionalfalse or unset when a section must count. sectionsis data-driven. Advance progress by updating the array in the consumer and re-rendering. Usebarewhen embedding Dossier inside another card.
Related
ThinkingBlock · ToolCall · AgentPlan · Artifact · ConfirmCard · ThreadList