Chat bar
Ask's compact composer: one --bg-muted box, a two-line textarea on top and a row of small controls under it. Smart replies sits on the left; clear and send sit on the right. It's the search bar's sibling: the same box, the same focus colour, stacked rather than in a line.
States
sending is the moment between Enter and the reply: send is disabled until the answer starts. Smart replies is a solid toggle, hidden in the demo where replies are canned. Clear is a text button.
Anatomy
div.composer the column it sits in, max 46rem
div.chat-bar the box
textarea rows=2, at least 3.2rem; no well of its own
div.chat-bar-row right-aligned, wraps
span.left pushed left
button.chip-toggle smart replies
button.text clear
button.send.pill send ↵
box
--bg-muted, --border-default hairline, the 12px literal radius, padding .7rem .9rem .55rem, .4rem between the text and the row. The border turns --border-accent while anything inside has focus.
message
The textarea with its well taken away: body serif, line-height 1.6, at least 3.2rem.
row
.9rem between controls; the left group takes the spare room.
Tokens
Fill --bg-muted; rule --border-default, focus --border-accent; message --text-default, placeholder --text-muted. In Figma: Chat bar, state × smart, with a message property; the toggle and both buttons are instances.