SessionStateChip
The state of one agent session: starting, working, waiting for you, done, ready or exited. Pick it wherever a session is listed; make it a button when the app can explain how the state was detected.
- SessionStateChip
PreviewLink to the section Preview
Live in all three themes. Everything here is interactive.
Light theme, SessionStateChip
StartingWorkingWaiting for youDoneReadyExited
StartingWorkingWaiting for youDoneReadyExitedWaiting for you
Dark theme, SessionStateChip
StartingWorkingWaiting for youDoneReadyExited
StartingWorkingWaiting for youDoneReadyExitedWaiting for you
High contrast theme, SessionStateChip
StartingWorkingWaiting for youDoneReadyExited
StartingWorkingWaiting for youDoneReadyExitedWaiting for you
UsageLink to the section Usage
import { SessionStateChip } from '@skribly/ui/agents'<SessionStateChip state="blocked" label={t('state.blocked')} />
<SessionStateChip state="done" label={t('state.done')} onPress={explain} actionLabel={t('state.why')} />Every label is a prop, so the app passes its own words in its own language. See no built-in text.
AccessibilityLink to the section Accessibility
- The word is always in the page; hideLabel keeps it for screen readers only.
- Each state also has its own glyph (ring, disc, diamond, tick, hollow disc, square), so it reads without colour, and the glyph turns CanvasText in forced colours.
- Pulses stop under reduced motion. live makes one chip a polite status, so a change to Waiting for you is read out.
- As a button it reads the state, then actionLabel, and shows actionLabel as a tooltip.
This demo runs through axe in all three themes on every test run. See what the tests check.