Components / agents

Prompt Input

The box a person types a message into. It grows with the text, Enter sends and Shift+Enter starts a new line.

import { PromptInput } from '@basiiik/ui';

The snippet an agent gets

From get_component_snippet, with the required props filled in from the spec. Every snippet is type-checked against the library before it is shipped.

import { PromptInput } from '@basiiik/ui';

<PromptInput onSend={(text) => console.log(text)} />

• Example values were filled in for the required prop onSend: replace them with your own.
• Values in braces are your own variables, handlers or data, such as const [open, setOpen] = useState(false).
• Empty and Filled follow the text (the send button is off while empty). Streaming is the streaming prop: the send button becomes a stop button and Enter does not send. Disabled uses the disabled attribute.
• Compose with: icon-button.
• Storybook: Agents/Prompt input.

Props

States. Empty and Filled follow the text (the send button is off while empty). Streaming is the streaming prop: the send button becomes a stop button and Enter does not send. Disabled uses the disabled attribute.

Native attributes such as className, id and data-* are forwarded to the root element.

Use it when

• The composer of a chat or assistant: the box a person types their request into
• Any multi-line input that is sent with Enter

Do not use it when

• A form field that is submitted with other fields (use Textarea)
• A search box (use Search)

Rules for agents

• Pass onSend and handle the text there; it is never called for empty text or while streaming
• While the agent answers set streaming and pass onStop that cancels the request
• Disable it (disabled) when the agent cannot take input, and say why in the placeholder
• Controls that belong with the box (attach, model picker) go in actions
• Keep a visible or spoken name: leave aria-label as it is or give a better one

Avoid

• A Textarea plus a hand-built send button
• Sending on Enter without Shift+Enter for a new line
• Listening for Enter during input-method composition
• A send button that stays active while the agent answers, with no way to stop

Writing the content

• Placeholder: an invitation, "Ask anything" or "Describe the screen you need"
• Do not repeat the label in the placeholder

Keyboard

• Enter sends
• Shift+Enter starts a new line
• Enter does nothing while an input method is composing (Japanese, Chinese, Korean)
• Tab moves to the send or stop button

Accessibility

• The text box is named by aria-label ("Message" by default) and described by how to send
• The send and stop buttons are icon buttons with their own names ("Send", "Stop generating")
• Disabled disables the box and the buttons

Colour tokens it reads

Related

• Conversation
• Chat Message
• Textarea
• Icon Button

agents 4 Figma variants Try it in the live demo