Chat Confirmation

Usage

import {
  ChatConfirmation,
  type ConfirmationState,
} from "@tulipfarm/sprout/chat-confirmation";

const [state, setState] = useState<ConfirmationState>({ kind: "pending" });

<ChatConfirmation
  title="Remove the Notes field from Supplier deliveries"
  description="Review these changes before approving."
  details={[
    { label: "Action", value: "Change table schema" },
    { label: "Effect", value: "Remove field values" },
    { label: "Affected rows", value: "128" },
  ]}
  state={state}
  disabled={!canVerifyEffect}
  onDecision={async (decision) => {
    setState({ kind: "submitting", decision });
    setState(await save(decision));
  }}
/>

• title: what the agent wants to do. Long titles end with an ellipsis.
• description: one line above the facts.
• details: { label, value }[], shown in order. Long values wrap.
• state: pending,{ kind: "submitting", decision },approved, rejected, expired,cancelled, or{ kind: "error", message }.
• onDecision: called with "approve" or"reject".
• disabled: locks both buttons, such as while the request is refreshing or its effect cannot be verified.

States

Pending, submitting, and error show Approval requiredwith both buttons. While submitting, both are disabled and the chosen one shows a spinner. An error shows above the buttons so people can try again. Approved, declined, expired, and cancelled fold the card and show the outcome.

Table approval in chat

A schema change with its request status below: details, a status check, and an alert when the refresh failed. The buttons lock while the request needs a check and when the effect cannot be verified.

Settle without submitting

A decision can settle at once. Pick any state from the menu.

Accessibility

The card is a section named by the title, which is anh4 button that opens and closes the details. A busy button hasaria-busy and its spinner is hidden. Errors userole="alert"; the outcome uses role="status". If the decision was made from inside the card, focus moves to the outcome when it settles, so keyboard users keep their place.

The details grow and shrink in 180ms; with reduced motion they change at once.

Theme tokens

Text uses --sprout-muted, errors--sprout-danger, and the outcome focus ring--sprout-focus. The card, badge, and buttons use their own tokens.