MessageAttachment
Message-row attachment cards, media galleries, and pending/failed states composed as attachment children.
AP
gpt-4.1
Here is the source parity pass for #222. Mention chip, channel link, task link, and markdown are rendered by the caller.
This video may use a codec this browser cannot preview.
The card owns the shared title, summary, and two-sided metadata structure. Comment and diff content are alternative children of the same summary slot.
import {
MessageAttachmentAction,
MessageAttachmentCard,
MessageAttachmentCommentSummary,
MessageAttachmentDiffAddition,
MessageAttachmentDiffDeletion,
MessageAttachmentDiffSummary,
MessageAttachmentGroup,
MessageAttachmentMeta,
MessageAttachmentMetaEnd,
MessageAttachmentMetaStart,
MessageAttachmentSummary,
MessageAttachmentTitle,
MessageItemAttachments,
} from "raft-ui";
<MessageItemAttachments>
<MessageAttachmentGroup>
<MessageAttachmentCard>
<MessageAttachmentTitle />
<MessageAttachmentSummary render={<MessageAttachmentCommentSummary />} />
<MessageAttachmentMeta>
<MessageAttachmentMetaStart />
<MessageAttachmentMetaEnd>
<MessageAttachmentAction />
</MessageAttachmentMetaEnd>
</MessageAttachmentMeta>
</MessageAttachmentCard>
</MessageAttachmentGroup>
</MessageItemAttachments>
<MessageAttachmentSummary render={<MessageAttachmentDiffSummary />}>
<MessageAttachmentDiffAddition />
<MessageAttachmentDiffDeletion />
</MessageAttachmentSummary>Consumers own native grid rows and image fit. Gallery parts provide cell chrome, preview actions, and an optional pending overlay.
import {
MessageImageGallery,
MessageImageGalleryAction,
MessageImageGalleryItem,
MessageImageGalleryMedia,
MessageImageGalleryOverlay,
MessageImageGalleryPreview,
} from "raft-ui";
<MessageImageGallery>
<div className="grid grid-cols-2 gap-2">
<MessageImageGalleryItem>
<MessageImageGalleryMedia>
<img src="/image.jpg" className="h-full w-full object-cover" alt="" />
</MessageImageGalleryMedia>
<MessageImageGalleryPreview />
<MessageImageGalleryAction />
</MessageImageGalleryItem>
</div>
</MessageImageGallery>
<MessageImageGallery>
<div className="grid grid-cols-1 gap-2">
<MessageImageGalleryItem aria-busy>
<MessageImageGalleryMedia>
<img src="/image.jpg" className="h-full w-full object-contain" alt="" />
</MessageImageGalleryMedia>
<MessageImageGalleryOverlay />
</MessageImageGalleryItem>
</div>
</MessageImageGallery>Resolved media, loading fallback, and failure fallback are separate compositions.
import {
MessageVideoPreview,
MessageVideoPreviewAction,
MessageVideoPreviewFailureAction,
MessageVideoPreviewFailureContent,
MessageVideoPreviewFailureIcon,
MessageVideoPreviewFailureTitle,
MessageVideoPreviewFallback,
MessageVideoPreviewMedia,
Spinner,
} from "raft-ui";
<MessageVideoPreview>
<MessageVideoPreviewMedia />
<MessageVideoPreviewAction />
</MessageVideoPreview>
<MessageVideoPreview aria-busy>
<MessageVideoPreviewFallback>
<Spinner />
</MessageVideoPreviewFallback>
</MessageVideoPreview>
<MessageVideoPreview>
<MessageVideoPreviewFallback>
<MessageVideoPreviewFailureContent>
<MessageVideoPreviewFailureIcon />
<MessageVideoPreviewFailureTitle />
<MessageVideoPreviewFailureAction />
</MessageVideoPreviewFailureContent>
</MessageVideoPreviewFallback>
</MessageVideoPreview>Put attachment-specific diff content inside the shared summary slot. Keep file size and the caller-owned download action on opposite sides of the metadata row.
Keep preview state in the consumer; replace the Eye with the shared Spinner inside MessageAttachmentMetaEnd while the preview opens.
Use the summary only when a document has compact status information, such as CSV row and column counts. Metadata stays reserved for the file size.
Render an SVG directly beside the filename inside the title slot; the attachment UI does not need a file-type prop or an icon slot.File-type icons are available from Icônes.
Put comment content inside MessageAttachmentSummary. For pending state, place the shared Spinner in MessageAttachmentMetaEnd instead of introducing a card-level variant.
Render real media, URL loading, and unavailable-codec fallback as separate video states. Preview and download workflows remain caller-owned.
This video may use a codec this browser cannot preview.
Compose native grid rows in the consumer. MessageImageGalleryItem owns cell chrome; MessageImageGalleryMedia only provides the media container.
Consumer layout classes set cell geometry, while the media child chooses object-cover or object-contain.
buildMessageImageGalleryRows turns each attachment's width/height into rows: wide images take a row of their own, the others fill rows of three (a lone four splits two-and-two), and every cell carries whether it crops or stays fully visible. The row and cell components turn that data into styles, so consumer code carries no layout classes.
...propsMessageAttachmentGroupProps
Horizontal group of attachment cards inside MessageItemAttachments.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | MessageAttachmentGroupProps | — | Horizontal group of attachment cards inside MessageItemAttachments. |
...propsMessageAttachmentCardProps
Attachment card root.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | MessageAttachmentCardProps | — | Attachment card root. |
...propsMessageAttachmentTitleProps
Filename slot at the start of MessageAttachmentCard.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | MessageAttachmentTitleProps | — | Filename slot at the start of MessageAttachmentCard. |
...propsMessageAttachmentSummaryProps
Shared summary row. Owns layout, icon sizing, placement, and typography; compose a semantic summary through render.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | MessageAttachmentSummaryProps | — | Shared summary row. Owns layout, icon sizing, placement, and typography; compose a semantic summary through render. |
...propsMessageAttachmentCommentSummaryProps
Comment-summary semantics composed onto MessageAttachmentSummary. Owns only its compact gap and muted color.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | MessageAttachmentCommentSummaryProps | — | Comment-summary semantics composed onto MessageAttachmentSummary. Owns only its compact gap and muted color. |
...propsMessageAttachmentDiffSummaryProps
Diff-summary semantics composed onto MessageAttachmentSummary. Owns only its internal gap.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | MessageAttachmentDiffSummaryProps | — | Diff-summary semantics composed onto MessageAttachmentSummary. Owns only its internal gap. |
...propsMessageAttachmentDiffAdditionProps
Semantic positive-diff value inside MessageAttachmentDiffSummary.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | MessageAttachmentDiffAdditionProps | — | Semantic positive-diff value inside MessageAttachmentDiffSummary. |
...propsMessageAttachmentDiffDeletionProps
Semantic negative-diff value inside MessageAttachmentDiffSummary.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | MessageAttachmentDiffDeletionProps | — | Semantic negative-diff value inside MessageAttachmentDiffSummary. |
...propsMessageAttachmentMetaProps
Two-sided metadata row inside MessageAttachmentCard.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | MessageAttachmentMetaProps | — | Two-sided metadata row inside MessageAttachmentCard. |
...propsMessageAttachmentMetaStartProps
Start-side metadata region, typically file size.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | MessageAttachmentMetaStartProps | — | Start-side metadata region, typically file size. |
...propsMessageAttachmentMetaEndProps
End-side metadata region for actions or a pending spinner.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | MessageAttachmentMetaEndProps | — | End-side metadata region for actions or a pending spinner. |
...propsMessageAttachmentActionProps
Caller-owned preview or download action inside MessageAttachmentMetaEnd.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | MessageAttachmentActionProps | — | Caller-owned preview or download action inside MessageAttachmentMetaEnd. |
...propsMessageImageGalleryProps
Image-gallery root. Consumers compose each attachment row as a native grid child.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | MessageImageGalleryProps | — | Image-gallery root. Consumers compose each attachment row as a native grid child. |
...propsMessageImageGalleryItemProps
Image cell with consumer-owned geometry and layout classes.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | MessageImageGalleryItemProps | — | Image cell with consumer-owned geometry and layout classes. |
...propsMessageImageGalleryMediaProps
Media container. Render the source element as children and let it choose cover or contain.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | MessageImageGalleryMediaProps | — | Media container. Render the source element as children and let it choose cover or contain. |
...propsMessageImageGalleryPreviewProps
Preview hit area; Lightbox behavior remains caller-owned.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | MessageImageGalleryPreviewProps | — | Preview hit area; Lightbox behavior remains caller-owned. |
...propsMessageImageGalleryActionProps
Secondary image action, such as caller-owned download.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | MessageImageGalleryActionProps | — | Secondary image action, such as caller-owned download. |
...propsMessageImageGalleryOverlayProps
Overlay region for consumer-owned pending content such as Spinner.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | MessageImageGalleryOverlayProps | — | Overlay region for consumer-owned pending content such as Spinner. |
...propsMessageVideoPreviewProps
Inline video attachment root.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | MessageVideoPreviewProps | — | Inline video attachment root. |
...propsMessageVideoPreviewMediaProps
Native video media element for a resolved URL.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | MessageVideoPreviewMediaProps | — | Native video media element for a resolved URL. |
...propsMessageVideoPreviewFallbackProps
Fallback region for consumer-owned URL loading or unavailable-media content. Render instead of MessageVideoPreviewMedia.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | MessageVideoPreviewFallbackProps | — | Fallback region for consumer-owned URL loading or unavailable-media content. Render instead of MessageVideoPreviewMedia. |
...propsMessageVideoPreviewActionProps
Top-right caller-owned preview action inside MessageVideoPreview.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | MessageVideoPreviewActionProps | — | Top-right caller-owned preview action inside MessageVideoPreview. |
...propsMessageVideoPreviewFailureContentProps
Structured unavailable-codec fallback content.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | MessageVideoPreviewFailureContentProps | — | Structured unavailable-codec fallback content. |
...propsMessageVideoPreviewFailureIconProps
Warning-icon slot inside failure content.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | MessageVideoPreviewFailureIconProps | — | Warning-icon slot inside failure content. |
...propsMessageVideoPreviewFailureTitleProps
Failure copy slot inside failure content.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | MessageVideoPreviewFailureTitleProps | — | Failure copy slot inside failure content. |
...propsMessageVideoPreviewFailureActionProps
Download button inside failure content; callers provide its icon, copy, and workflow.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | MessageVideoPreviewFailureActionProps | — | Download button inside failure content; callers provide its icon, copy, and workflow. |