PaceUI

Intro
Agents
Crafts
Charts
Motion
PreviousNext

Thinking States

An interactive state indicator for AI agents searching through tools, integrations, and context.

Simple Step

A focused single step indicating current tool execution with real-time source retrieval indicators.

Action Step

An action and approval step requesting user authorization before proceeding with critical operations.

When to use

  • Displaying real-time thinking, tool execution, or context gathering in AI agent chat feeds.
  • Surfacing multi-source retrieval progression (e.g., querying Slack, Notion, Gmail, GitHub).
  • Prompting human-in-the-loop approvals before executing sensitive code modifications or deployments.
  • Providing transparent visual feedback while an agent plans or synthesizes responses.

When not to use

  • Instant synchronous actions that complete in under 200ms.
  • Plain generic loading spinners where no contextual step or source information exists.

API Reference

ThinkingStateProps

PropTypeDefaultDescription
titlestring"Thinking..."Title describing the current thought or action step.
descriptionstring—Additional supporting status text or details.
status"pending" | "running" | "completed" | "error" | "awaiting_approval""running"Current execution status of the thinking phase.
sourcesThinkingSourceItem[]—List of tools or integrations being queried.
activeSourceIdstring—Identifier of the source currently being searched.
stepsThinkingStepItem[]—Array of thinking steps for multi-step agent flows.
showDetailsbooleantrueWhether to display the source badges list.
headerSlotReact.ReactNode—Optional custom action or control rendered on the right side of the header.
actionsReact.ReactNode—Action controls rendered at the bottom of the steps.
onRecreateStep(stepId: string) => void—Callback fired when user triggers recreation on a step.
classNamestring—Optional class overrides for the container card.

ThinkingStepItem

FieldTypeDescription
idstringUnique identifier for the step.
titlestringTitle of the step.
descriptionstringOptional supporting description or summary.
status"pending" | "running" | "completed" | "error" | "awaiting_approval"Status of the step.
sourcesThinkingSourceItem[]Sources/tools queried in this step.
activeSourceIdstringID of the source currently being queried.
approvalThinkingStepApprovalConfiguration for approval prompt.
actionsReact.ReactNodeOptional custom action buttons for this step.

ThinkingStepApproval

FieldTypeDescription
titlestringHeader title of the approval prompt.
descriptionstringDetailed description or context for the requested action.
confirmLabelstringCustom label for confirm button (default: "Approve").
declineLabelstringCustom label for decline button (default: "Decline").
status"pending" | "approved" | "declined"Current status of the approval.
onApprove() => voidCallback fired on approval button click.
onDecline() => voidCallback fired on decline button click.

ThinkingSourceItem

FieldTypeDescription
idstringUnique identifier for the source or tool.
labelstringDisplay label for the source (e.g., Slack, Notion).
iconSrcstringOptional URL or path to the integration logo.
status"pending" | "running" | "completed" | "error"Status of the individual source step.

Accessibility

  • Status states convey progress and errors using distinct semantic icons alongside status text for colorblind accessibility.
  • Step indicators use aria-live="polite" regions so screen readers receive updates without interrupting focus.
  • All interactive controls and toggles are fully navigable and operable via keyboard.

Motion

  • Coordinates shared animated transitions through <LayoutGroup> to protect against sudden layout shifts.
  • Step badges smoothly expand and collapse using spring presets tuned for natural reactivity (stiffness: 450, damping: 22).
  • Loading spinner and pulse cues use hardware-accelerated CSS animations.