synthetic

AiChatInput

A composer that grows with the message.

Project assistantSend, dictate, intent

Command

Dictating

Disabled

In context

Assistant on a phoneComposer pinned under the thread

Assistant

Who owns offline sync for tasks?

Jonas Weber. It is in review.

Boxed variant

Bar and boxvariant="boxed" singleLine: a surface bar with a top rule, a rounded field and a separate round button

Typed

Recording

Transcribing

Disabled

Send only

With notice

Mic and send morph

Dictation composerEmpty shows the mic; text morphs it to Send. Mic starts recording, again stops and transcribes

Recording is simulated; the caller owns the real speech-to-text.

Blocked statesEvery state that stops sending explains itself

Disabled while the catechist replies

Offline

Quota exceeded

Transcribing

Props

Prop	Type	Required	Default
`value`	`string \| undefined`	No	—
`defaultValue`	`string \| undefined`	No
`onValueChange`	`((value: string) => void) \| undefined`	No	—
`onSend`	`((value: string) => void) \| undefined`	No	—
`placeholder`	`string \| undefined`	No	—
`intent`	`AiChatInputIntent \| undefined`	No	message
`dictation`	`boolean \| undefined`	No	false
`dictating`	`boolean \| undefined`	No	false
`onDictationToggle`	`((active: boolean) => void) \| undefined`	No	—
`disabled`	`ReactNode`	No	—
`onDictate`	`(() => void) \| undefined`	No	—
`recording`	`boolean \| { seconds: number; } \| undefined`	No	false
`transcribing`	`boolean \| undefined`	No	false
`banner`	`ReactNode`	No	—
`sendIcon`	`ReactNode`	No	—
`micIcon`	`ReactNode`	No	—
`maxRows`	`number \| undefined`	No	6
`maxLength`	`number \| undefined`	No	—
`showCounter`	`boolean \| undefined`	No	false
`submitOnEnter`	`boolean \| undefined`	No	true
`variant`	`"default" \| "boxed" \| undefined`	No	default
`singleLine`	`boolean \| undefined`	No	false
`busyIcon`	`ReactNode`	No	—
`aria-label`	`string \| undefined`	No	—
`className`	`string \| undefined`	No	—

Accessibility

A real <textarea> (labelled by aria-label, default "Chat message") that grows to maxRows then scrolls. Enter sends, Shift+Enter breaks a line. The send and dictation controls are real buttons with text labels; onSend never fires for an empty draft.

data-rebar-* attributes

data-rebar-component="ai-chat-input", data-rebar-intent; parts: textarea, actions, dictation-button (carries data-rebar-active while dictating), send-button.

Migrating to Ant Design

Not codemod-covered: AntD has no AI chat input. Compose Input.TextArea (autoSize) with a send button, or use Ant Design X's Sender.

maxLength, counter and Enter behaviour

maxLength caps the message (typing and pasting stop at it); showCounter adds a live "n / max" counter that turns to the danger tone at 90%. submitOnEnter={false} makes Enter add a line so sending happens only from the button (default true: Enter sends, Shift+Enter adds a line).

<AiChatInput maxLength={500} showCounter submitOnEnter={false} onSend={send} />