Attachment Previews in Message Input

This section shows how to customize attachment previews in MessageInput. Previews are rendered by AttachmentPreviewList.

Best Practices

• Override only the preview components you need for custom types.
• Use UnsupportedAttachmentPreview for custom attachment objects.
• Keep previews compact to avoid bloating the composer UI.
• Preserve default previews for standard types to reduce maintenance.
• Test link previews separately since they render outside AttachmentPreviewList.

Customize the rendering of default attachment previews

The default attachment types recognized by AttachmentPreviewList are:

• audio
• video
• image
• voiceRecording
• file

If an attachment has og_scrape_url or title_link, it’s rendered by LinkPreviewList instead of AttachmentPreviewList.

AttachmentPreviewList also renders a preview of message.shared_location using GeolocationPreview.

To customize previews, override AttachmentPreviewList.

import { VideoAttachmentPreview } from "./AttachmentPreviews";

const CustomAttachmentPreviewList = () => (
  <AttachmentPreviewList VideoAttachmentPreview={VideoAttachmentPreview} />
);

Then pass it to Channel.

<Channel AttachmentPreviewList={CustomAttachmentPreviewList} />

We can customize the following preview components:

• AudioAttachmentPreview
• FileAttachmentPreview
• GeolocationPreview
• ImageAttachmentPreview
• UnsupportedAttachmentPreview
• VideoAttachmentPreview
• VoiceRecordingPreview

Customize the rendering of custom attachment previews

It is possible to add custom attachments (objects) to composed messages via upsertAttachments function provided by MessageInputContext.

Custom attachments aren’t recognized by AttachmentPreviewList, so they render via UnsupportedAttachmentPreview. Customize that component to handle your custom attachment types.

import { EventPreview } from "./EventAttachmentPreview";
import type { UnsupportedAttachmentPreviewProps } from "stream-chat-react";

const CustomAttachmentsPreview = (props: UnsupportedAttachmentPreviewProps) => {
  const { attachment } = props;
  if (attachment.type === "event") {
    return <EventPreview {...props} />;
  }
  // more conditions follow...
};

Then pass the custom component via AttachmentPreviewList to specify UnsupportedAttachmentPreview.

import { CustomAttachmentsPreview } from "./AttachmentPreviewList";
const CustomAttachmentPreviewList = () => (
  <AttachmentPreviewList
    UnsupportedAttachmentPreview={CustomAttachmentsPreview}
  />
);

<Channel AttachmentPreviewList={CustomAttachmentPreviewList} />