PDS proposals
← All proposals

Chat Input

A labelled textarea with a toolbar inside the same bordered box:

Net-new componentOpen in Storybook

proposals/ChatInput/context.md21 lines · View on GitHub

Chat Input

Problem

Chat and agent screens need a field for composing a prompt. PDS has Textarea, but no toolbar inside the field for add, a model selector, voice and Send. This is a net-new pattern, built on the Textarea foundations.

Proposal

A labelled textarea with a toolbar inside the same bordered box:

  • Start: an add menu (MenuButton, with "Add photos & files" in it).
  • End: model selector (the bare Select), voice button, and the Send button (a primary IconButton: send, working, stop).
  • Label (visually hidden by default, still read by screen readers) and a helper message below, as on every PDS input. Drag the bottom corner to resize.
  • Two more slots, aboveField (context bar on the top edge) and fieldHeader (attachments inside the border), and a compact single-line variant.

The toolbar is two slots (actionsStart, actionsEnd), so the screen decides what goes in them.

Source

Erika's screenshot (~/Desktop/Screenshot 2026-10-12 at 4.56.42 PM.png): label, "Ask Zappy..." placeholder, toolbar inside the field, helper message. No Figma or Jira links.