Attachment

Usage

Attachments is a row of file chips for the conversation body, and Attachment is one chip in the shape of an AI SDK file part (filename, mediaType, url): a 40px media tile, the file name over a supporting line, and an optional remove control. An image with a URL shows as a thumbnail; every other type shows a glyph on a tile tinted by its kind.

When to use

Files a message carries, in the attachments slot of a Message, beside its text.
A removable chip for a file the person is about to send, when the surface is a conversation body and not a composer.

When not to use

An uploaded file list with progress and errors: use a file upload surface.
A picture an assistant generated: use GeneratedImage.
Inside a prompt composer, where dismissible chips are Token.

Composition

Attachments is FlexBox rendered as a ul, which Box gives an explicit role="list" because WebKit drops the list semantics of a list without markers. It wraps, with an 8px gap. Attachment is its li, so place it inside Attachments.
The chip is a bordered surface with the control radius. The media tile is 40px square.
The thumbnail is Image with objectFit Cover, decorative because the file name is beside it, and allowRemoteSource for hosted URLs. It shows only for an image/* type with a url.
Other types show Icon on a tile tinted by their kind: file, image, video, audio, PDF, or code. The glyph also differs, so the kind is not color alone.
The file name is Text, body medium emphasis, truncated with the full name in title. The supporting line is Text, caption, subtle, truncated.
The remove control is an icon-only Ghost Small Button named by removeLabel, which is also its tooltip. It is type="button", so it never submits a form.

Supporting line

description is copy or data. With none, the short uppercase subtype of mediaType shows (PDF, PNG), which is data derived from the type, not copy. With neither, no line shows. getAttachmentMediaMeta(mediaType) returns the glyph, kind and subtype for a caller that builds its own line.

Media types

normalizeMediaType lowercases a MIME type and drops its parameters, so Image/PNG;charset=utf-8 is image/png. JavaScript, TypeScript, JSON, XML, CSS, HTML and +json style suffixes are code; Office Open XML is not.

Artifact / Accessibility

Attachment / API and Development

On this page

Attachment

Usage

When to use

Files a message carries, in the attachments slot of a Message, beside its text.
A removable chip for a file the person is about to send, when the surface is a conversation body and not a composer.

When not to use

An uploaded file list with progress and errors: use a file upload surface.
A picture an assistant generated: use GeneratedImage.
Inside a prompt composer, where dismissible chips are Token.

Composition

Attachments is FlexBox rendered as a ul, which Box gives an explicit role="list" because WebKit drops the list semantics of a list without markers. It wraps, with an 8px gap. Attachment is its li, so place it inside Attachments.
The chip is a bordered surface with the control radius. The media tile is 40px square.
The thumbnail is Image with objectFit Cover, decorative because the file name is beside it, and allowRemoteSource for hosted URLs. It shows only for an image/* type with a url.
Other types show Icon on a tile tinted by their kind: file, image, video, audio, PDF, or code. The glyph also differs, so the kind is not color alone.
The file name is Text, body medium emphasis, truncated with the full name in title. The supporting line is Text, caption, subtle, truncated.
The remove control is an icon-only Ghost Small Button named by removeLabel, which is also its tooltip. It is type="button", so it never submits a form.

Supporting line

Media types

Artifact / Accessibility

Attachment / API and Development

On this page