Approval Card
Navigation
Tabs
Conversation
MarkerMessage
ComponentsApproval Card
Agent

Approval Card

A human-in-the-loop question from the agent. Options stand as columns in reading order beside the question · approve, and the card contracts to a one-column receipt.

Design question

Before acting, an agent asks. Horizontal approval cards stack options downward under the question. When options are columns, which side is first, which arrow key means next, and what remains in the thread after the decision?

Default

본문을 몇 단으로 조판할까요?

The question is the rightmost column and the options follow leftward in reading order · scanning them is just reading, and reading ends at the approve action. ArrowLeft moves forward. Approving contracts the card to a one-column receipt.

tsx
1// Question at the READING START (rightmost), options leftward in
2// reading order, actions at the far left · reading ends at the decision.
3<div style={{ display: "flex", flexDirection: "row-reverse", gap: 16 }}>
4 <p id="q" style={{ writingMode: "vertical-rl", textOrientation: "mixed" }}>
5 본문을 몇 단으로 조판할까요?
6 </p>
7 <div role="radiogroup" aria-labelledby="q"
8 style={{ display: "flex", flexDirection: "row-reverse", gap: 8 }}>

Guidance

Do
  • Order options rightmost-first · reading order, with the recommended option preselected
  • Map ArrowLeft/ArrowDown to next and ArrowRight/ArrowUp to previous, wrapping at the ends
  • End the card with its actions at the far left · reading finishes at the decision
  • Leave a receipt column after the decision · the thread keeps what was chosen
  • Keep option columns at a 44px minimum width for touch
Don't
  • Stack options downward under the question · that breaks the question's column
  • Map ArrowRight to next because it feels forward · screen geometry is not reading direction
  • Vanish the card after approval · an empty gap erases the decision from the thread
PreviousPrompt BarNext Toast