Skip to content
Fabrials UI
Components / AI chat

Attachments

Files attached to a message, inline, as a grid or as a list.

@fabrials/ai-ui
Loading state
  • moonlight.pngPNG · 242 KB
  • quarterly-report-with-a-very-long-filename-final-v3.pdfPDF · 3.2 MB
  • notes.mdUploading…
  • interview.movLarger than 50 MB
  • moonlight.pngPNG · 242 KB
  • quarterly-report-with-a-very-long-filename-final-v3.pdfPDF · 3.2 MB
  • notes.mdUploading…
  • interview.movLarger than 50 MB
quarterly-report-with-a-very-long-filename-final-v3.pdfPDF · 3.2 MB

Installation

  1. Import the control from @fabrials/ai-ui, after setting the app up.

    TypeScript
    import { Attachments, AttachmentChip } from "@fabrials/ai-ui";import "@fabrials/ai-ui/styles.css";

API reference

Prop / exportTypeDescription
itemsAttachmentItem[]id, name, mediaType, url, size, status and error.
variantinline | grid | listLayout.
onRemove(id) => voidShows a remove button on each file.
emptyReactNodeShown when there are no files.

Behavior

Presentational. The host uploads the files and reports uploading and error states.

Accessibility

Keyboard and contrast
Keep visible labels, keyboard focus and status announcements when customizing. These components inherit your theme; maintain sufficient contrast in both color modes. The preview is keyboard operable.