All components (204)

Artifact card

AI · ArtifactCard · .amset-artifact

What it is and when to use it

A file an assistant has generated, with its preview one click away: the thumbnail or icon by type, the name, the size and the open and download actions.

When to use it

Below an assistant's response, for the files it has created: reports, pages, spreadsheets, images.
With a preview of your own inside (ArtifactFrame for HTML or PDF, rendered markdown, a video).

When not to

For a file someone is going to attach to a message: that is an Attachment.
For a list of files with dates and bulk download: that is a FileList.

Keyboard: if there is a preview, the header is a disclosure button (Enter or Space); open and download are separate buttons, siblings of the header -a button inside another button is not valid HTML-. An image with onView does not unfold: it opens the viewer.

Accessibility: the button carries aria-expanded and the body is a named region. Loading is announced and a failure is an alert with its text. The actions carry the file name in their label ("Download report.pdf"). With onVisible the content is requested only for what enters the screen, and the body is only mounted while open: an iframe does not load until someone asks for it.

Security: ArtifactFrame isolates what it shows with sandbox="allow-scripts" and never allow-same-origin, so what is inside runs but cannot touch the page, its cookies or its storage. It is what makes it safe to show what a model generated.

Fine-tuning: CSS variables --amset-artifact-thumb (side of the thumbnail) and --amset-artifact-body-max (maximum height of the preview before scrolling).

What it looks like

Expand the card to see the page.

<ArtifactCard
  name="weekly-orders.html"
  mimeType="text/html"
  size={18_400}
  detail="2 min ago"
  onDownload={descargar}
>
  <ArtifactFrame title="weekly-orders.html" html={pagina} height="12rem" />
</ArtifactCard>

Props

Import it with import { ArtifactCard } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`name`required	`string`	—
`children`	`ReactNode`	The preview. With this the header is a button that unfolds; the body is only mounted while open, so an `iframe` or a video does not load until someone asks for it.
`className`	`string`	Merged with the library classes; it does not replace them.
`defaultExpanded`	`boolean`	—
`detail`	`ReactNode`	More data next to the size: the date, who generated it.
`error`	`string \| boolean`	Why it could not be loaded. Without its own text, "The file could not be loaded".
`expanded`	`boolean`	—
`loading`	`boolean`	The content is being requested.
`mimeType`	`string`	—
`onDownload`	`() => void`	With this "Download" appears.
`onExpandedChange`	`(expanded: boolean) => void`	—
`onOpen`	`() => void`	With this "Open" appears.
`onRetry`	`() => void`	With this, if loading failed (`error`), a "Retry" button appears next to the other actions.
`onView`	`() => void`	Pressed to see an image larger.
`onVisible`	`() => void`	Called ONCE when the card enters the screen: to request the thumbnail only for what is seen.
`size`	`number`	In bytes. It is written in the language: "1.5 MB".
`thumbnailUrl`	`string`	Thumbnail of an image. With it, pressing the card calls `onView` instead of unfolding.

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

CSS variables

These CSS variables are how you adapt it. Declare them on the component's selector, not on :root: the stylesheet redeclares them in the rule itself, and a declaration on the same element always wins.

Variable	Default
`--amset-artifact-thumb`	`2.5rem`
`--amset-artifact-body-max`	`30rem`

How to change it

.amset-artifact {
  --amset-artifact-thumb: ...;
  --amset-artifact-body-max: ...;
}

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: