Attachments
A record’s attachments in a context panel: the files, images and links shared in its conversation, each as a row with a thumbnail, its name, and its size and type, or a link’s domain. A search field above the rows filters them.
Installation
import { Attachments } from "@o/pipeline/experimental/blocks/attachments";Usage
Pass the attachments as items, in order. Each has a kind: a file is a document, an image is media, and a link is a page. A file or image shows its size, when it’s known, and its type; a link shows its domain.
The thumbnail shows image, cropped to fill it, such as an image’s preview or a link’s logo. Pass only a URL the app has cleared to load: the block loads whatever it’s given. Without one, or when it fails to load, the thumbnail shows icon, or a file, image or link glyph by default.
Give each attachment a link and the whole row opens it, such as a link that opens it in a new tab. renderRow wraps the row, such as in a context-menu trigger, so a right-click opens a menu.
Lightbox
Give an image a preview instead of a link, and the row opens it in the Lightbox: its thumbnail grows into the full image, and shrinks back when it closes. Clicking the row or the thumbnail opens it. preview.src is the full image and preview.url the address Copy link copies; without a url, as for an inline image, the lightbox has no Copy link. Click the first row above to try it.
The transition is the Lightbox’s own, so it runs in Chromium-based browsers only and is instant with reduced motion; other browsers open the image without it.
Search and filter
Typing matches each attachment’s name, domain and type. Docs shows files, Links shows links, Media shows images, and All shows every kind. When nothing matches, one line says so in place of the rows, and the block keeps its search field.
The block has no count and doesn’t collapse, as drawn. It shows every row it’s given.
Without search
With searchable={false}, there’s no search field or filter and the block is a plain list of every attachment, as in a chat.
Sources
A chat’s sources, the pages the agent read, use the block without search under their own title and icon: “Sources used” with a globe. Figma doesn’t draw this use yet, so it needs design review.
Empty
With no attachments, the block is one row: its title and empty, “No attachments yet.” by default, with or without search. On a record’s card the app shows no block at all until the record has attachments.
Loading
A loading block is the block itself inside a loading SkeletonGroup, with placeholder rows whose name and type are Skeletons. Rows keep their full height, the search field shows as its shape, and nothing in it can be focused or clicked. When the attachments arrive they replace the placeholders in place.
Without search:
Static
An attachment without a link is a static row: it doesn’t respond to hover or press. Without an image, the thumbnail shows the kind’s glyph.
Long names
Names and details truncate at the row’s end.
Attachment row
AttachmentRow is one attachment’s row on its own.
import { AttachmentRow } from "@o/pipeline/experimental/blocks/attachments";