MessageAttachment
Message-row attachment cards, media galleries, and pending/failed states composed as attachment children.
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.
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.
API#WIP
| Prop | Type | Default | Description |
|---|---|---|---|
...props | MessageAttachmentGroupProps | — | Horizontal group of attachment cards inside MessageItemAttachments. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | MessageAttachmentCardProps | — | Attachment card root. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | MessageAttachmentTitleProps | — | Filename slot at the start of MessageAttachmentCard. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | MessageAttachmentSummaryProps | — | Shared summary row. Owns layout, icon sizing, placement, and typography; compose a semantic summary through render. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | MessageAttachmentCommentSummaryProps | — | Comment-summary semantics composed onto MessageAttachmentSummary. Owns only its compact gap and muted color. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | MessageAttachmentDiffSummaryProps | — | Diff-summary semantics composed onto MessageAttachmentSummary. Owns only its internal gap. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | MessageAttachmentDiffAdditionProps | — | Semantic positive-diff value inside MessageAttachmentDiffSummary. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | MessageAttachmentDiffDeletionProps | — | Semantic negative-diff value inside MessageAttachmentDiffSummary. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | MessageAttachmentMetaProps | — | Two-sided metadata row inside MessageAttachmentCard. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | MessageAttachmentMetaStartProps | — | Start-side metadata region, typically file size. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | MessageAttachmentMetaEndProps | — | End-side metadata region for actions or a pending spinner. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | MessageAttachmentActionProps | — | Caller-owned preview or download action inside MessageAttachmentMetaEnd. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | MessageImageGalleryProps | — | Image-gallery root. Consumers compose each attachment row as a native grid child. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | MessageImageGalleryItemProps | — | Image cell with consumer-owned geometry and layout classes. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | MessageImageGalleryMediaProps | — | Media container. Render the source element as children and let it choose cover or contain. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | MessageImageGalleryPreviewProps | — | Preview hit area; Lightbox behavior remains caller-owned. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | MessageImageGalleryActionProps | — | Secondary image action, such as caller-owned download. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | MessageImageGalleryOverlayProps | — | Overlay region for consumer-owned pending content such as Spinner. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | MessageVideoPreviewProps | — | Inline video attachment root. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | MessageVideoPreviewMediaProps | — | Native video media element for a resolved URL. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | MessageVideoPreviewFallbackProps | — | Fallback region for consumer-owned URL loading or unavailable-media content. Render instead of MessageVideoPreviewMedia. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | MessageVideoPreviewActionProps | — | Top-right caller-owned preview action inside MessageVideoPreview. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | MessageVideoPreviewFailureContentProps | — | Structured unavailable-codec fallback content. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | MessageVideoPreviewFailureIconProps | — | Warning-icon slot inside failure content. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | MessageVideoPreviewFailureTitleProps | — | Failure copy slot inside failure content. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | MessageVideoPreviewFailureActionProps | — | Download button inside failure content; callers provide its icon, copy, and workflow. |