Artifact
artifactPresents generated content with a title, version chip, action slot, and controlled or uncontrolled expansion.
Usage
Basic usage
With title/icon/version chip/operation area, long content is folded by default (height limit + fade + expand button).
To Yunqi Technology · Apply for President's Personal Secretary
Five years of experience in administration and cross-department coordination. He has independently supported the CEO office in 200+ meetings and travel arrangements throughout the year. Good at maintaining order and priority in an environment with extremely high information density.
Established an automatic detection process for executive schedule conflicts during the previous company, reducing the schedule rework rate by 60%; Lead the arrangement and confidential circulation of annual board of directors materials, delivering them without errors for three years.
I know that your company is in a period of parallel expansion of multiple product lines. The president's office needs more than just execution. It's more about predicting and knowing the truth. I would like to use a two-week trial to prove the above judgment.
<Artifact
title="Draft resume · Lin Wanqing"
icon={<File className="size-4" />}
version="v2"
actions={<Button size="sm" variant="ghost">Export</Button>}
>
{body}
</Artifact>Expand by default
defaultExpanded Let the full text be spread out at the beginning of the output.
To Yunqi Technology · Apply for President's Personal Secretary
Five years of experience in administration and cross-department coordination. He has independently supported the CEO office in 200+ meetings and travel arrangements throughout the year. Good at maintaining order and priority in an environment with extremely high information density.
Established an automatic detection process for executive schedule conflicts during the previous company, reducing the schedule rework rate by 60%; Lead the arrangement and confidential circulation of annual board of directors materials, delivering them without errors for three years.
I know that your company is in a period of parallel expansion of multiple product lines. The president's office needs more than just execution. It's more about predicting and knowing the truth. I would like to use a two-week trial to prove the above judgment.
<Artifact title="Draft resume" version="v1" defaultExpanded>
{body}
</Artifact>Not foldable
collapsedHeight={0} Close folding, suitable for short output.
A brief piece of content that does not require folding.
<Artifact title="Short output" collapsedHeight={0}>
<p className="text-sm">A short piece of content that does not require folding. </p>
</Artifact>When to Use
Use it for a finished agent deliverable that needs a title, version, export actions, and collapsible long content. Dossier is better for a multi-field case file, while StreamingText handles progressively arriving plain text. Artifact is the container for the final result and its metadata.
Import
import { Artifact } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| collapsedHeight | number | 240 | Maximum collapsed content height in pixels; <=0 disables collapsing |
| defaultExpanded | boolean | false | Uncontrolled initial expansion state |
| expanded | boolean | — | Controlled expanded state; pair with onExpandedChange |
| className | string | — | Additional container class name |
Events
| Event | Type | Description |
|---|---|---|
| onExpandedChange | (expanded: boolean) => void | Called when the requested expanded state changes |
Slots
| Slot | Type | Description |
|---|---|---|
| title* | ReactNode | Header title |
| icon | ReactNode | Icon before title |
| version | ReactNode | Version label rendered as a small chip, such as "v2" |
| actions | ReactNode | Header actions, such as an export button |
| expandLabel | ReactNode | Collapsed-state button label; defaults to "\u5c55\u5f00\u5168\u6587" (Expand full text) |
| collapseLabel | ReactNode | Expanded-state button label; defaults to "\u6536\u8d77" (Collapse) |
| children | ReactNode | Artifact content |
Usage Guidelines
- Choose controlled or uncontrolled state. When passing
expanded, update it fromonExpandedChange; otherwise the button cannot change the visible state. UsedefaultExpandedonly for an initial uncontrolled value. collapsedHeight<=0disables the height limit, fade, and expansion button. Avoid that setting for very long content.- The similarly named pitfall [[release-pipeline-stale-artifact-picked-by-readdir-find]] concerns CI selecting a stale build artifact; it does not apply to this UI card.
Related
ThinkingBlock · ToolCall · AgentPlan · Dossier · ConfirmCard · ThreadList