ComposerAttachmentPreview

ComposerAttachmentPreview is the default selected-file list for Composer. It displays the attachments in the pending draft and exposes the removal actions supplied by Composer.

Usage

Replace the preview through attachmentPreviewComponent. Composer passes the current attachment collection to the replacement.

import {
  Composer,
  ComposerAttachmentPreview,
  type ComposerAttachmentPreviewProps,
} from '@hyperflow/chakra-ui'

function ProjectAttachmentPreview(props: ComposerAttachmentPreviewProps) {
  return <ComposerAttachmentPreview {...props} />
}

export function ProjectComposer() {
  return <Composer attachmentPreviewComponent={ProjectAttachmentPreview} />
}

Examples

Render attachment names

Every attachment includes its display name and a remove callback. Use the callback rather than managing a separate file list.

function ProjectAttachmentPreview({
  attachments,
}: ComposerAttachmentPreviewProps) {
  return (
    <ul>
      {attachments.map((attachment) => (
        <li key={attachment.id}>
          {attachment.name}
          <button type="button" onClick={attachment.remove}>Remove</button>
        </li>
      ))}
    </ul>
  )
}

Guide

Render the Composer attachment list

attachments is the source of truth for files that will be sent with the pending message. Render it directly rather than copying it into local state.

Remove through the provided callback

Call attachment.remove to update the parent Composer draft. This keeps the preview, picker, and submission payload in sync.

Handle images as an enhancement

An attachment exposes its original File, so you can add a local image preview. Revoke any object URLs you create when the item unmounts.

Props

Related components

• Composer
• ComposerAttachmentMenu
• ComposerSendButton