Attachment Previews in Message Input

In this section we will focus on how to customize attachment previews display in MessageInput component. The attachment previews are rendered by AttachmentPreviewList component.

Customize the rendering of default attachment previews

The default attachment types recognized by AttachmentPreviewList are:

• audio
• video
• image
• voiceRecording
• file

If the attachment object has property og_scrape_url or title_link, then it is rendered by LinkPreviewList component and not AttachmentPreviewList.

To customize attachment previews we need to override AttachmentsPreviewList component.

import { VideoAttachmentPreview } from "./AttachmentPreviews";

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

And pass it to Channel component.

<Channel AttachmentPreviewList={CustomAttachmentPreviewList} />

We can customize the following preview components:

• AudioAttachmentPreview
• FileAttachmentPreview
• 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.

The custom attachments are not recognized by AttachmentPreviewList component and therefore rendered via UnsupportedAttachmentPreview component within AttachmentPreviewList. The component UnsupportedAttachmentPreview can be customized and handle all the custom attachment objects added to the message attachments.

import { GeolocationPreview } from "./GeolocationAttachmentPreview";
import type { UnsupportedAttachmentPreviewProps } from "stream-chat-react";

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

The custom component is then passed to custom AttachmentsPreviewList component which purpose is just to specify the custom UnsupportedAttachmentPreview component.

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

<Channel AttachmentPreviewList={CustomAttachmentPreviewList} />