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.

- The toolbar is two slots, `actionsStart` and `actionsEnd`. The screen decides what goes in them; the usual set is `IconButton`s, a `ModelSelector` and a `SendButton`.
- Keep the label and the helper message, as on every PDS input. The label stays visible above the field.
- 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.
- 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} />