Diff Value – Code

Implementation
DiffValue Props

Common Examples

To use the DiffValue, import it from @servicetitan/anvil2-ai-kit and pass the previous value through from and the proposed value through to.

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

function ExampleComponent() {
  return <DiffValue from="6.5h" to="8.0h" />;
}

Automatic layout

DiffValue uses inline layout for short, single-line values. It switches to block layout when either value exceeds 80 characters or contains a newline. Pass layout to override the automatic choice.

Empty and removed values

Omit from, pass null, or pass whitespace to render the localized empty label. Do the same for to to render the localized removed label.

Truncation

Block layout uses TruncatedText. Set truncateLines to control the collapsed line limit.

Internationalization

DiffValue uses three messages:

ai-kit.diffValue.empty
ai-kit.diffValue.removed
ai-kit.diffValue.changedFromTo

English is the default. Mount AiKitIntlProvider inside CartoTheme to switch locale or override these strings. The changedFromTo message receives {from} and {to} values.

<AiKitIntlProvider
  messages={{
    "ai-kit.diffValue.empty": "Empty",
    "ai-kit.diffValue.removed": "Removed",
    "ai-kit.diffValue.changedFromTo": "Changed from {from} to {to}",
  }}
>
  <DiffValue from="Draft" to="Approved" />
</AiKitIntlProvider>

React Accessibility

A visually hidden localized summary announces the relationship as “Changed from X to Y.”
Inline layout hides duplicate visual values from assistive technology.
Block layout keeps Show more and Show less controls reachable when either value is truncated.
The arrow is decorative and hidden from assistive technology.

<DiffValue
  from="Previous value"
  to="Proposed value"
  layout="block"
  truncateLines={2}
/>

`DiffValue` Props

The DiffValue accepts the following props.

string

Class merged onto the root element.

string | null

Previous value. Omit, pass null, or pass only whitespace to render the localized empty label.

"inline" | "block"

Layout mode. When omitted, long or multiline values use "block" and other values use "inline".

string | null

Proposed value. Omit, pass null, or pass only whitespace to render the localized removed label.

number

default:"2"

Maximum lines before truncation in block layout.

AI Kit

Agent Experience

Diff Value – Code

Common Examples

Automatic layout

Empty and removed values

Truncation

Internationalization

React Accessibility

`DiffValue` Props

​Common Examples

​Automatic layout

​Empty and removed values

​Truncation

​Internationalization

​React Accessibility

​DiffValue Props

Common Examples

Automatic layout

Empty and removed values

Truncation

Internationalization

React Accessibility

`DiffValue` Props