Guidance Card – Code

Implementation
GuidanceCard Props
GuidanceChange

Common Examples

To use the GuidanceCard, pass a referenceLabel and ordered changeSections. Wire onApply, onEdit, and onDismiss to handle Accept, Edit, and Reject.

import { GuidanceCard } from "@servicetitan/anvil2-ai-kit";

function ExampleComponent() {
  return (
    <GuidanceCard
      referenceLabel="Estimate #12345"
      changeSections={[
        {
          type: "single",
          changes: [
            {
              id: "labor-hours",
              label: "Labor hours",
              from: "6.5h",
              to: "8.0h",
            },
          ],
        },
      ]}
      onApply={(ids) => apply(ids)}
      onEdit={(ids) => edit(ids)}
      onDismiss={() => reject()}
    />
  );
}

States

state is "default", "accepted", "rejected", or "skipped". Non-default states collapse the body unless you set defaultExpanded. Accepted state can filter visible rows through appliedChangeIds.

Selection

Multiple single changes each get a checkbox. A single change has no checkbox; Accept applies to that item.

Change sections

Use type: "single" for scalar diffs and type: "table" for labeled line-item tables. Table cells may be a string, { type: "text", value }, { type: "diff", from, to }, or { type: "addition", value }.

Reference link

Pass referenceHref to make the reference label a link.

Actions

Accept and Edit receive the currently selected single-change and table-row ids. Reject calls onDismiss with no selection.

Internationalization

GuidanceCard owns these localized strings:

ai-kit.guidanceCard.suggestedChanges
ai-kit.guidanceCard.suggestionsAccepted
ai-kit.guidanceCard.suggestionsRejected
ai-kit.guidanceCard.suggestionsSkipped
ai-kit.guidanceCard.accept
ai-kit.guidanceCard.edit
ai-kit.guidanceCard.reject
ai-kit.guidanceCard.reasonPrefix

Localize referenceLabel, change labels, reasons, and table headers before passing them. Mount AiKitIntlProvider inside CartoTheme to switch the built-in strings.

React Accessibility

Title text reflects the current state.
Multiple changes expose selectable rows. A single change applies without a checkbox.
Table groups use the kit table selection semantics, including localized select-all and select-row labels.

<GuidanceCard
  referenceLabel="Estimate #12345"
  changeSections={sections}
  onApply={apply}
  onEdit={edit}
  onDismiss={reject}
/>

`GuidanceCard` Props

The GuidanceCard accepts the following props.

GuidanceChangeSection[]

required

Ordered body sections of single changes or table groups.

string

required

Reference shown under the title, such as "Estimate #12345".

string[]

Accepted state: ids of applied single changes and table rows. Filters visible content.

string

Class merged onto the root element.

boolean

default:"false"

Whether a non-default state starts expanded.

(acceptedChangeIds: string[]) => void

Called when Accept is pressed with the current selection.

() => void

Called when Reject is pressed.

(acceptedChangeIds: string[]) => void

Called when Edit is pressed with the current selection.

string

Optional href for the reference label.

"default" | "accepted" | "rejected" | "skipped"

default:"default"

Card lifecycle state.

const change: GuidanceChange = {
  id: "labor-hours",
  label: "Labor hours",
  from: "6.5h",
  to: "8.0h",
  reason: "Job ran longer than estimated.",
};

`GuidanceChange`

string

required

Stable identity used for selection and accepted-state filtering.

string

required

Eyebrow label for the change.

string | null

Previous value. Omit both from and to to hide the diff. Explicit null still shows empty or removed.

string

Supporting copy shown in the reason callout.

string | null

Proposed value.

AI Kit

Agent Experience

Guidance Card – Code

Common Examples

States

Selection

Change sections

Reference link

Actions

Internationalization

React Accessibility

`GuidanceCard` Props

`GuidanceChange`

​Common Examples

​States

​Selection

​Change sections

​Reference link

​Actions

​Internationalization

​React Accessibility

​GuidanceCard Props

​GuidanceChange

Common Examples

States

Selection

Change sections

Reference link

Actions

Internationalization

React Accessibility

`GuidanceCard` Props

`GuidanceChange`