> ## Documentation Index
> Fetch the complete documentation index at: https://anvil.servicetitan.com/llms.txt
> Use this file to discover all available pages before exploring further.

# User Media Message - Web

> The UserMediaMessage presents a user-authored media attachment in a chat bubble.

> [!NOTE]
>
> For development, import `UserMediaMessage` from
> `@servicetitan/anvil2-ai-kit`. For design, find it in the
> [AI Kit Web Component Library file](https://www.figma.com/design/QEIsArLktLeJAaFvcpw3PO/AI-Kit-Web-Component-Library).

**Implementation**

ai-kit-user-media-message

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/ai-kit-user-media-message?file=src/App.tsx)

```tsx lines expandable theme={null}
import { UserMediaMessage } from "@servicetitan/anvil2-ai-kit";

function App() {
  return (
    <UserMediaMessage
      media={{
        kind: "document",
        fileName: "Estimate.pdf",
        fileTypeLabel: "PDF",
        href: "https://example.com/estimate.pdf",
      }}
      timestamp={new Date(2026, 3, 1, 16, 40)}
    />
  );
}

export default App;
```

## Common Examples

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

```tsx theme={null}
<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**

## `UserMediaMessage` Props

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

**media** `MediaAttachment` *required*

Image, video, audio, or document attachment.

**timestamp** `Date | string | number` *required*

Send time used by the action toolbar.

**className** `string`

Class merged onto the root element.

**copyText** `string`

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

**error** `string`

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

**onRetry** `() =\> void | Promise\<void\>`

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

**revealToolbarOnHover** `boolean` (default: false)

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

**showPreview** `boolean` (default: true)

Shows rich image, video, and audio treatments.

**MediaAttachment**

## `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`.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.