Media

Rich content in messages -- images, files, voice messages, code blocks, and link previews. Each media type is an optional prop on ChatMessageData and renders automatically when present. Below are visual previews of each type.

Image Message

Attach a single image to a message using the images array. The image displays inline inside the message bubble with rounded corners and the text below.

Check out this view!

2:34 PM

Image Gallery

When multiple images are attached, they render in a grid layout. If there are more images than fit in the grid, the last cell shows a "+N" overlay indicating how many additional photos are available.

Photos from the trip

3:12 PM

File Attachments

The files prop renders downloadable file cards showing the file name, formatted size, and a download button. Multiple files stack vertically.

quarterly-report.pdf

2.4 MB

budget-summary.xlsx

890 KB

Voice Message

The voice prop renders an audio player with a waveform visualization, a play button, and the duration. Provide a waveform array of normalized amplitudes (0 to 1) for the bar visualization.

0:42

Code Block

The code prop renders a syntax-highlighted code block with a language label and copy button. The block uses a dark background with monospace font and appears inside the message bubble.

Here's the fix:

typescript

export function debounce<T extends (...args: any[]) => void>(
  fn: T,
  delay: number
): T {
  let timer: ReturnType<typeof setTimeout>
  return ((...args) => {
    clearTimeout(timer)
    timer = setTimeout(() => fn(...args), delay)
  }) as T
}

Link Preview

The linkPreview prop renders an Open Graph-style card below the message text, showing the OG image, domain, title, and description.

Have you seen this?

example.com

Building Modern Chat UIs

A comprehensive guide to real-time messaging interfaces, covering WebSocket patterns, optimistic updates, and accessible design.

4:05 PM

← Conversations Presence →