Chat Attachment

import { Canvas, Controls, Meta, Title } from '@storybook/addon-docs/blocks';

import * as ChatAttachmentStories from './ChatAttachment.stories';

<Meta of={ChatAttachmentStories} name='Usage' />

<Title />

## Purpose

One attached file or image in a chat. It goes in the `fieldHeader` slot of `ChatInput`, or anywhere a message shows its attachments.

## Usage

- File chips are a fixed width. A long name is shortened in the middle so the extension stays visible; hover or focus shows the full name.
- Images are a square thumbnail. When there is no preview, an image icon is shown instead.
- `status='error'` marks a failed attachment (critical colors, exclamation icon); pass `errorMessage` for the reason, which the tooltip and screen readers get. The sentence telling the user what to do belongs in the screen, for example `ChatInput`'s helper message.
- The remove button shows on hover and keyboard focus, and always on touch screens. Leave out `onRemove` for attachments that cannot be removed, such as in a sent message.

## Implementation

See the table below for the available props. The other stories show every variant and state.

<hr />

<Canvas of={ChatAttachmentStories.Default} />
<Controls of={ChatAttachmentStories.Default} />