onSend | (message: string, segments: readonly ChatInputSegment[], details: ChatInputSendDetails) => void | — | Called when Enter or Send asks to send. It runs only when the message has text other than whitespace, and never
while a response is generating, while an input method is composing, or while the composer is disabled or
read-only. Shift+Enter inserts a newline instead.
message is the typed text trimmed at both ends, with each inline chip written as @label. segments is the
same content in order, so inline chips keep their ids. Context chips are never part of either.
The text and the inline chips clear after this returns unless details.cancel() is called. A send that can
fail should cancel and clear the composer itself once the message is accepted.
@param message - The trimmed text
@param segments - The trimmed content in order
@param details - Change metadata; event is the key or click, and cancel() keeps the text |
sendLabel | LocalizedMessage | — | Accessible name of the Send control at rest, such as "Send message". It is never drawn. |
sendPendingLabel | LocalizedMessage | — | Accessible name of the Send control while a response is "submitted" or "streaming" and there is no Stop, such as "Sending message". |
addLabel | LocalizedMessage | — | Accessible name of the add control, such as "Add". It is never drawn. |
aria-describedby | string | — | Id of the element that describes the typed area. |
aria-invalid | boolean | — | Marks the typed area invalid and draws the strong edge. |
aria-label | LocalizedMessage | — | Accessible name of the typed area. The composer draws no visible label. |
aria-labelledby | string | — | Id of the element that names the typed area. |
attach | readonly ChatInputAttachItem[] | — | Rows of the attach menu, in order. An empty array shows no add control.
Not allowed without addLabel. |
chips | readonly ChatInputChip[] | — | Persistent context chips in a row above the typed area. They survive a send and are never part of the sent message. Pass the full set on every render; the row mirrors it. An empty array draws no row. |
chipsLabel | LocalizedMessage | — | Names the row of context chips, such as "Context". |
className | string | — | Classes appended after the generated classes. Put overrides in @layer chroma.overrides. |
data-align | undefined | — | — |
data-checked | undefined | — | — |
data-copy-status | undefined | — | — |
data-dirty | undefined | — | — |
data-disabled | undefined | — | — |
data-dragging | undefined | — | — |
data-ending-style | undefined | — | — |
data-expanded | undefined | — | — |
data-filled | undefined | — | — |
data-focus-visible | undefined | — | — |
data-focused | undefined | — | — |
data-highlighted | undefined | — | — |
data-hovered | undefined | — | — |
data-indeterminate | undefined | — | — |
data-instant | undefined | — | — |
data-invalid | undefined | — | — |
data-is-new | undefined | — | — |
data-loading | undefined | — | — |
data-nested | undefined | — | — |
data-open | undefined | — | — |
data-orientation | undefined | — | — |
data-overflow | undefined | — | — |
data-placeholder | undefined | — | — |
data-popup-open | undefined | — | — |
data-pressed | undefined | — | — |
data-readonly | undefined | — | — |
data-required | undefined | — | — |
data-scrolling | undefined | — | — |
data-selected | undefined | — | — |
data-side | undefined | — | — |
data-starting-style | undefined | — | — |
data-touched | undefined | — | — |
data-valid | undefined | — | — |
defaultValue | string | — | Initial text when uncontrolled. |
disabled | boolean | — | Disables the typed area and every control. |
handleRef | Ref<ChatInputHandle> | — | Imperative handle for inserting chips. |
id | string | — | Element id of the root. |
inputRef | Ref<HTMLDivElement> | — | Ref to the typed area, the element with the textbox role, such as to focus it when a drawer opens. |
layout | ChatInputLayout | ChatInputLayout.Reflow | How the controls sit relative to the typed area. |
modeToggle | ChatInputModeToggle | — | A binary mode shown before the trailing control. |
onChipDismiss | ((id: string, details: ChatInputChipDismissDetails) => void) | — | Called when a context chip is removed with its control, and when an inline chip leaves the text, whether by its
control, Backspace, a cut or an undo. Without it context chips are drawn with no remove control. A context chip
belongs to the parent, which removes it from chips. Calling details.cancel() on a removal with the control
keeps an inline chip.
@param id - The id of the chip
@param details - Change metadata; reason is ItemPress for the control and InputChange for an edit |
onStop | (() => void) | — | Not allowed without stopLabel.
Stops an in-flight response. While status is "submitted" or "streaming" the trailing control becomes Stop. |
onSuggestionClick | ((id: string) => void) | — | Called with the id of a suggestion after it is inlined. The composer already did the work; this is for reacting to it. |
onValueChange | ((value: string, details: ChatInputValueChangeDetails) => void) | — | Called for every change of the text: a keystroke, paste or drop, an inline chip added or removed, and the clear
after a send. The typed area has already changed when this runs, so an edit cannot be canceled. A controlled
parent stores the value here; a value that differs from the last one reported replaces the typed area with plain
text and removes its inline chips.
@param value - The text, with each inline chip written as @label
@param details - Change metadata |
placeholder | LocalizedMessage | — | Placeholder copy while the typed area is empty. |
readOnly | boolean | — | The typed area can be read and focused but not edited, and nothing is sent. |
ref | Ref<HTMLDivElement> | — | Ref to the root div. |
sendDisabledAnnouncement | LocalizedMessage | — | Announced politely when there is nothing to send: when the person empties the text, and when they press Enter in
an empty composer. Say why Send is unavailable, such as "Nothing to send". Not announced after a send. |
size | InputSize | — | Control scale: the height of the buttons and of one line. Defaults to {@link InputSize.Large}. |
status | ChatInputStatus | "ready" | Status of the send, the AI SDK's ChatStatus. While "submitted" or "streaming" a send is blocked, and the
trailing control becomes Stop when onStop is set, else Send in its pending state. |
stopLabel | LocalizedMessage | — | Accessible name of the Stop control, such as "Stop generating". |
suggestions | readonly ChatInputChip[] | — | Quick actions under the surface. A chosen one moves into the text as a chip and leaves the row; it returns when the chip does. |
suggestionsLabel | LocalizedMessage | — | Names the list of suggestions, such as "Suggestions". |
value | string | — | Controlled text, with each inline chip written as @label. undefined on the first render is uncontrolled. Pass "" for a controlled empty value. |