Agent Message – Code – React Native

Implementation
AgentMessage Props

import { AgentMessage } from "@servicetitan/anvil2-rn";

function App() {
  return (
    <AgentMessage
      content="I pulled the invoice and flagged two line items that look duplicated."
      timestamp={new Date(2026, 3, 1, 16, 40)}
    />
  );
}

Common Examples

To use the AgentMessage, pass content and a required timestamp. The row left-aligns the content and reserves an inline-end gutter. The kit forbids children.

import { AgentMessage } from "@servicetitan/anvil2-rn";

function ExampleComponent() {
  return (
    <AgentMessage
      content="I flagged two duplicate line items."
      timestamp={sentAt}
    />
  );
}

content accepts a string or composed React Native nodes. Copy is text-only: pass copyText when content is rich so the copy action stays available. The kit does not write to the clipboard. Provide onCopy to show the copy control.

import { AgentMessage, Text } from "@servicetitan/anvil2-rn";

<AgentMessage
  content={<Text text={markdown} />}
  copyText={markdown}
  timestamp={receivedAt}
  onCopy={(text) => Clipboard.setString(text)}
/>

Feedback

Wire onLike and onDislike to show thumbs. The component reflects currentFeedback; toggling is yours.

import { useState } from "react";
import {
  AgentMessage,
  type AgentMessageFeedback,
} from "@servicetitan/anvil2-rn";

function App() {
  const [feedback, setFeedback] = useState<AgentMessageFeedback>(null);

  return (
    <AgentMessage
      content="Does this summary match what you expected?"
      timestamp={receivedAt}
      currentFeedback={feedback}
      onLike={() =>
        setFeedback(feedback === "positive" ? null : "positive")
      }
      onDislike={() =>
        setFeedback(feedback === "negative" ? null : "negative")
      }
    />
  );
}

Omit both handlers to hide feedback entirely.Set showToolbar={false} for a host with no copy/feedback surface of its own — the timestamp and action row are omitted entirely rather than rendering a bare timestamp.

<AgentMessage
  content="Here's what I found."
  timestamp={receivedAt}
  showToolbar={false}
/>

Accessibility

Actions are grouped in a toolbar region named “Response actions”. The group renders only when there is at least one action.
The timestamp sits outside that group — a toolbar groups controls, and a timestamp is not one.
With showToolbar={false}, neither the timestamp nor the action group is present in the accessibility tree.
Action buttons are 40x40 for touch.
Feedback buttons announce like, dislike, and selected state.
Built-in toolbar labels are English until the kit gains an i18n layer.

<AgentMessage
  content="I flagged two duplicate line items."
  timestamp={sentAt}
  onCopy={copy}
  onLike={like}
  onDislike={dislike}
  currentFeedback={feedback}
/>

`AgentMessage` Props

The AgentMessage accepts the following props. It does not forward remaining React Native View props.

ReactNode

required

Message body. A string or composed React Native nodes. A plain-string content also supplies copy text when copyText is omitted.

Date | string | number

required

Send or receive time. Accepts a Date, ISO string, or epoch number.

string

Opt-in telemetry id. When set under Anvil2RNTelemetryProvider, copy, like, and dislike emit a press event with meta.action before the handler runs.

string

Source text for copy. Takes precedence over a string content. The copy control is omitted when neither yields text.

"positive" | "negative" | null

default:"null"

Controlled feedback selection. The component only reflects this value.

(text: string) => void

Copy handler. The kit stays clipboard-agnostic. The copy control renders only when this is provided and copy text is available.

() => void | Promise<void>

Thumbs-down handler. The button renders only when this is provided.

() => void | Promise<void>

Thumbs-up handler. The button renders only when this is provided.

Show the timestamp + action row. Set false for a host with no copy/feedback surface of its own.

string

Test hook forwarded to the row container.

​Common Examples

​Feedback

​Hiding the toolbar

​Accessibility

​AgentMessage Props

Common Examples

Feedback

Hiding the toolbar

Accessibility

`AgentMessage` Props