User Media Message – Code

Implementation
UserMediaMessage Props
MediaAttachment

Common Examples

Pass one MediaAttachment through media and the required send timestamp. Copy defaults to media.fileName.

<UserMediaMessage
  media={{
    kind: "document",
    fileName: "Estimate.pdf",
    fileTypeLabel: "PDF",
    href: estimateUrl,
  }}
  timestamp={sentAt}
/>

When showPreview is true, documents use a linked metadata row, images and videos expand above their metadata, and audio provides inline playback. Set it to false for the compact document-row treatment across all kinds.Pass error with onRetry to show a failed-send line and retry action. revealToolbarOnHover matches the user-message toolbar behavior.

Internationalization

Media playback uses the ai-kit.mediaAttachment.* messages. The action toolbar uses ai-kit.messageToolbar.*. Localize fileName, fileTypeLabel, and error before passing them.

React Accessibility

Image previews use alt, falling back to fileName.
Video and audio expose localized media controls.
Hover-hidden toolbars remain reachable from the keyboard and visible on touch.

`UserMediaMessage` Props

The UserMediaMessage accepts the following props and forwards remaining <div> attributes except children, HTML content, and style.

MediaAttachment

required

Image, video, audio, or document attachment.

Date | string | number

required

Send time used by the action toolbar.

string

Class merged onto the root element.

string

Text copied by the copy action. Defaults to media.fileName.

string

Failure copy below the bubble. Omit or pass empty to hide it.

() => void | Promise<void>

Retry handler. The action appears only when error is set.

Hides the toolbar until hover or focus. Touch always shows it.

boolean

default:"true"

Shows rich image, video, and audio treatments.

`MediaAttachment`

All variants require kind, fileName, and localized fileTypeLabel. href is optional. Image, video, and audio variants also require src. Images accept alt; videos accept poster and aspectRatio.

AI Kit

Agent Experience

User Media Message – Code

Common Examples

Internationalization

React Accessibility

`UserMediaMessage` Props

`MediaAttachment`

​Common Examples

​Internationalization

​React Accessibility

​UserMediaMessage Props

​MediaAttachment

Common Examples

Internationalization

React Accessibility

`UserMediaMessage` Props

`MediaAttachment`