Chat Attachment

Usage

Use ChatAttachment for compact file previews in messages or prompt composers. Image and video attachments render as a square thumbnail (with the file name revealed on hover), while other file types render as a horizontal card with a format-specific icon, file name, and size.

Composer

Pair ChatAttachmentInput with PromptInput to support file picker and drag-and-drop uploads.

When generating local image or video previews with URL.createObjectURL, revoke each blob: URL when the attachment is removed, when the composer is cleared, and when the component unmounts.

Grouped

Use ChatAttachmentGroup to arrange multiple attachments.

Anatomy

import {ChatAttachment, ChatAttachmentGroup, ChatAttachmentInput, PromptInput} from "@heroui-pro/react";

<ChatAttachmentGroup>
  <ChatAttachment mimeType="application/pdf" name="brief.pdf" size={824120} />
  <ChatAttachment mediaType="image" name="screenshot.png" size={248320} src="/screenshot.png" />
</ChatAttachmentGroup>

<ChatAttachmentInput onFilesSelected={setFiles}>
  <ChatAttachmentInput.Dropzone
    render={(props) => <PromptInput.Shell {...props}>{/* composer content */}</PromptInput.Shell>}
  />
</ChatAttachmentInput>

CSS Classes

The root exposes a data-variant attribute ("media" for image/video thumbnails, "file" for the horizontal file card) that styles the two layouts.

• .chat-attachment - Attachment root (thumbnail tile or file card)
• .chat-attachment__preview - Preview media wrapper (thumbnail or icon tile)
• .chat-attachment__preview-image - Image preview
• .chat-attachment__preview-video - Video preview
• .chat-attachment__icon - Format-specific file-type icon
• .chat-attachment__info - File name and size wrapper (hover overlay for media)
• .chat-attachment__name - File name
• .chat-attachment__size - Formatted file size
• .chat-attachment__remove - Remove button
• .chat-attachment-group - Attachment group wrapper

API Reference

ChatAttachment

ChatAttachment.Preview

Renders the image, video, or format-specific icon preview. Accepts children to replace the preview content.

ChatAttachment.Icon

Renders the format-specific file-type icon inferred from mimeType/name (PDF, archive, spreadsheet, document, code, audio, video, image, or generic). Accepts children to override the icon.

ChatAttachment.Info

Wrapper for the file name and size. Defaults to ChatAttachment.Name and ChatAttachment.Size when no children are provided. In the media variant it renders as a hover overlay.

ChatAttachment.Name

Renders the file name. Defaults to the name prop.

ChatAttachment.Size

Renders the formatted file size from the size prop (bytes). Renders nothing when no size is available.

ChatAttachment.Remove

Extends HeroUI CloseButton props. Use it to remove an attachment from composer state.

Helpers

• inferChatAttachmentFileKind(mimeType?, name?) - Resolves the file kind used to pick the icon.
• formatChatAttachmentSize(bytes?) - Formats a byte count as B/KB/MB/GB.

ChatAttachmentInput

Provides file-picker and drag-and-drop behavior.

ChatAttachmentInput.Trigger

Opens the hidden file input. Use render to wire it to another button.

ChatAttachmentInput.Dropzone

Adds drag-and-drop file handling. Use render to attach drop behavior to PromptInput.Shell.