PDS proposals
← All proposals

Thinking State

A small inline status: the agent icon (Zappy by default), a label ("Thinking..."), and the elapsed time in the code font ("17.1s").

Net-new componentOpen in Storybook

proposals/ThinkingState/custom.md27 lines · View on GitHub

Custom and net-new: ThinkingState

Everything in this proposal that is not plain PDS v2. npm run check:tokens reads this file: each net-new class, custom CSS variable and raw value found in the code must appear here in backticks.

Net-new components

  • .pds-thinking-state — A small inline status: the agent icon (Zappy by default), a label ("Thinking..."), and the elapsed time in the code font ("17.1s").
    • Parts and modifiers: .pds-thinking-state--active, .pds-thinking-state--m, .pds-thinking-state--stopped, .pds-thinking-state--xs, .pds-thinking-state__icon, .pds-thinking-state__label, .pds-thinking-state__time

Additions to existing PDS components

None.

Net-new props

All props of ThinkingStateProps are new (net-new component).

Custom CSS variables

  • --thinking-state-font-size — set on .pds-thinking-state
  • --thinking-state-gap — set on .pds-thinking-state
  • --thinking-state-time-size — set on .pds-thinking-state

Raw values kept on purpose

None.