Chat Input

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

import * as ChatInputStories from './ChatInput.stories';

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

<Title />

## Purpose

A labelled textarea with a toolbar inside the same bordered box. It has a configurable footer utility section for buttons. Used for AI Chat interfaces.

## Usage

Use it to compose a prompt on chat and agent screens.

- There are four slots. `aboveField` sits on the top edge outside the border, `fieldHeader` sits inside the border above the text (for attachments), and the toolbar is `actionsStart` and `actionsEnd`. The screen decides what goes in them; the usual set is `IconButton`s, a bare `Select` for the model and a primary `IconButton` for Send.
- Keep the label and the helper message, as on every PDS input. The label is required and read by screen readers, but hidden on screen by default (the placeholder says what the field is for); set `showLabel` to show it.
- The field can be resized by dragging the bottom corner.
- Pass `onFilesDrop` to let people drag files onto the field. The field shows a dashed border (and the optional `dropLabel`) while a file is over it, and hands the dropped files to the handler. Try it on the sample below: drag a file onto the field. The screen decides what to do with the files.
- `variant='compact'` is a single-line bar with the controls on the same row; it is not resizable.
- Enter and Shift+Enter are not handled here; the screen decides what sends.
- For plain multi-line text with no toolbar, use `Textarea`.

## Implementation

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

<hr />

<Canvas of={ChatInputStories.Slots} />
<Controls of={ChatInputStories.Default} />