# AttachmentTray

The files in a composer, one row each, with measured progress, retry and remove.

- **Use it for**: Several files in the composer, each with its own progress, retry and remove.
- **Not for**: One file with a large preview. Try [Attachment](https://unseenui.com/components/attachment/), [PromptInput](https://unseenui.com/components/prompt-input/).

## Installation

```bash
npm install @stackunseen/ui
```

## Usage

```tsx
import { AttachmentTray } from '@stackunseen/ui';
import '@stackunseen/ui/styles.css';

<AttachmentTray items={files} onRemove={remove} onRetry={retry} />
```

## All props

| Prop | Type | Description |
| --- | --- | --- |
| `items` (required) | `readonly AttachmentTrayItem[]` |  |
| `label` | `string` | Names the list. |
| `onOpen` | `((id: string) => void)` | Asks the host to open the original. |
| `onRemove` | `((id: string) => void)` | Asks the host to remove this file. |
| `onRetry` | `((id: string) => void)` | Asks the host to retry a failed upload. |

## Keyboard

Tab reaches Retry, Remove and Open on each row. The list itself is not a tab stop.

## Works with

[Chat](https://unseenui.com/components/chat/), [PromptInput](https://unseenui.com/components/prompt-input/), [Message](https://unseenui.com/components/message/), [StreamingResponse](https://unseenui.com/components/streaming-response/), [MessageActions](https://unseenui.com/components/message-actions/), [Suggestions](https://unseenui.com/components/suggestions/), [Attachment](https://unseenui.com/components/attachment/), [FileDropzone](https://unseenui.com/components/file-dropzone/), [ModelSelector](https://unseenui.com/components/model-selector/), [FeedbackCapture](https://unseenui.com/components/feedback-capture/), [Reasoning](https://unseenui.com/components/reasoning/), [SuggestTextarea](https://unseenui.com/components/suggest-textarea/)

Page: https://unseenui.com/components/attachment-tray/