Renders the two primary UI primitives for chat file attachments: a horizontal chip strip displayed above the textarea and a borderless `+` button rendered inline in the bottom-controls row.
## Key Components
| Export | Description |
|---|---|
| `ChatAttachmentAddButton` | Icon-only `+` button for triggering file selection; reserves layout space when disabled to prevent CLS |
| `ChatAttachmentChipStrip` | Horizontal strip of staged-file chips rendered above the input; returns `null` when empty |
| `AttachmentChip` | Internal chip component showing thumbnail/initials, upload progress, file name, size, and a remove button |
| `StagedAttachment` | Interface describing a staged file (id, file, status, progress, storagePath, viewToken, errorMessage) |
| `ChatAttachmentSize` | `'default' \| 'compact'` density union for narrow surfaces like the ticket-drawer composer |
| `CHAT_ATTACHMENT_MIME_TYPES` | Allow-listed MIME types (images + video); excludes `image/svg+xml` for XSS safety |
| `CHAT_ATTACHMENT_CONCURRENT_UPLOADS_PER_USER` | Client-side cap of 5 concurrent uploads |
## Usage Example
```typescript
import {
ChatAttachmentAddButton,
ChatAttachmentChipStrip,
type StagedAttachment,
} from './chat-attachment-bar'
function ComposerToolbar({ attachments, onAdd, onRemove, isStreaming }) {
return (
{/* Chip strip floats above the textarea — hidden when empty */}
{/* + button lives in the bottom-controls row */}
)
}
```
## Notes
- **No `capture="environment"`** on the hidden file input — prevents iOS Safari from forcing camera-only mode.
- **Layout stability**: when `attachmentsEnabled` is `false` (async load or anon user), an invisible `` with the same `h-7 w-7` footprint replaces the button, eliminating row-width jumps on identity resolution.
- Image chips render a local `createObjectURL` blob preview immediately, independent of upload progress.
- All colors use ODS design tokens; no hex values are used directly.
**Source:** [`chat-attachment-bar.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/chat-attachment-bar.tsx)