Composer

Agent chat · src/components/Composer/Composer.tsx

Where a person writes to the agent.

Enter sends, Shift+Enter makes a line. The guard on isComposing and keyCode === 229 is why this is worth reading: in Korean, Japanese and Chinese input, Enter first COMMITS the characters being composed. Without the guard, typing 안녕 and pressing Enter sends a half-composed message - the bug is invisible to anyone testing in English, and it makes the product unusable in two of its three languages.

The field grows to maxRows and then scrolls, measured off the real line height rather than a guess, so it does not push the page around on a long message.

Send is disabled while empty and becomes Stop while busy - a person should never have to find a different control to interrupt an answer.

Import

import { Composer } from '@redrob-labs/ui';

Rendered

The design system's own preview case, run against this package's build. The parity gate compares this rendering to the reference bundle's.

Props

Prop	Type	Notes
`value`	`string`
`defaultValue`	`string`
`placeholder`	`string`
`label`	`string`	Accessible name for the field. Visually hidden.
`context`	`React.ReactNode`	Attachments or a quoted message, above the field.
`leading`	`React.ReactNode`	Replaces the default add button on the left.
`tools`	`React.ReactNode`	Controls to the left of Send: a model picker, a mode toggle.
`status`	`React.ReactNode`	A `ComposerStatus` under the field.
`busy`	`boolean`	An answer is arriving. Turns Send into Stop.
`disabled`	`boolean`
`maxRows`	`number`	Grows to this many rows, then scrolls.
`addLabel`	`string`
`submitLabel`	`string`
`stopLabel`	`string`
`className`	`string`
`onChange`	`(value: string) => void`
`onSubmit`	`(value: string) => void`
`onAdd`	`() => void`
`onStop`	`() => void`