> ## Documentation Index
> Fetch the complete documentation index at: https://anvil.servicetitan.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Agent Message - React Native

> The AgentMessage renders a left-aligned agent chat row with copy, feedback, and a timestamp.

> [!NOTE]
>
> For development, import `AgentMessage` from
> `@servicetitan/anvil2-rn`. For design, find it in the
> [Mobile Agentic Component Library file](https://www.figma.com/design/gjGWnAOnI1kukfzjsUQ6dP/Mobile-Agentic-Component-Library).

**Implementation**

```tsx theme={null}
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`.

```tsx theme={null}
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.

```tsx theme={null}
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.

```tsx theme={null}
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.

### Hiding the toolbar

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.

```tsx theme={null}
<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 Props**

```tsx theme={null}
<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.

**content** `ReactNode` *required*

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

**timestamp** `Date | string | number` *required*

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

**analyticsId** `string`

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

**copyText** `string`

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

**currentFeedback** `"positive" | "negative" | null` (default: null)

Controlled feedback selection. The component only reflects this value.

**onCopy** `(text: string) =\> void`

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

**onDislike** `() =\> void | Promise\<void\>`

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

**onLike** `() =\> void | Promise\<void\>`

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

**showToolbar** `boolean` (default: true)

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

**testID** `string`

Test hook forwarded to the row container.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.