> ## 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 - Web

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

> [!NOTE]
>
> For development, import `AgentMessage` from
> `@servicetitan/anvil2-ai-kit`. For design, find it in the
> [AI Kit Web Component Library file](https://www.figma.com/design/QEIsArLktLeJAaFvcpw3PO/AI-Kit-Web-Component-Library).

**Implementation**

ai-kit-agent-message

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/ai-kit-agent-message?file=src/App.tsx)

```tsx lines expandable theme={null}
import { AgentMessage } from "@servicetitan/anvil2-ai-kit";

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)}
    />
  );
}

export default App;
```

## Common Examples

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

```tsx theme={null}
import { AgentMessage } from "@servicetitan/anvil2-ai-kit";

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

`content` accepts a string, inline markup, or a Markdown tree. Copy is text-only: pass `copyText` when `content` is rich so the copy action stays available.

ai-kit-agent-message-markdown

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/ai-kit-agent-message-markdown?file=src/App.tsx)

```tsx lines expandable theme={null}
import { AgentMessage, Markdown } from "@servicetitan/anvil2-ai-kit";

const markdown = `Here is a short plan:

1. Confirm the duplicate lines
2. Draft a credit memo
3. Send it for review`;

function App() {
  return (
    <AgentMessage
      content={<Markdown source={markdown} />}
      copyText={markdown}
      timestamp={new Date(2026, 3, 1, 16, 40)}
    />
  );
}

export default App;
```

### Feedback

Wire `onLike` and `onDislike` to show thumbs. The component reflects `currentFeedback`; toggling is yours. When feedback is set, the toolbar shows a confirmation line.

ai-kit-agent-message-feedback

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/ai-kit-agent-message-feedback?file=src/App.tsx)

```tsx lines expandable theme={null}
import { useState } from "react";
import { AgentMessage } from "@servicetitan/anvil2-ai-kit";
import type { AgentMessageFeedback } from "@servicetitan/anvil2-ai-kit";

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

  return (
    <AgentMessage
      content="Does this summary match what you expected?"
      timestamp={new Date(2026, 3, 1, 16, 40)}
      currentFeedback={feedback}
      onLike={() => setFeedback(feedback === "positive" ? null : "positive")}
      onDislike={() => setFeedback(feedback === "negative" ? null : "negative")}
    />
  );
}

export default App;
```

Omit both handlers to hide feedback entirely.

## Internationalization

The action toolbar owns these localized strings:

* `ai-kit.messageToolbar.copy`
* `ai-kit.messageToolbar.copied`
* `ai-kit.messageToolbar.like`
* `ai-kit.messageToolbar.removeLike`
* `ai-kit.messageToolbar.dislike`
* `ai-kit.messageToolbar.removeDislike`
* `ai-kit.messageToolbar.feedbackThanks`
* `ai-kit.messageToolbar.assistantActions`

Localize `content` before passing it. Mount `AiKitIntlProvider` inside `CartoTheme` to switch the toolbar strings.

## React Accessibility

* The toolbar groups assistant actions under a localized name.
* Timestamp is always present in the toolbar.
* Feedback buttons announce like, dislike, and selected state.

**AgentMessage Props**

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

## `AgentMessage` Props

The `AgentMessage` accepts the following props and forwards remaining `<div>` attributes except `children`, HTML `content`, and `style`.

**content** `ReactNode` *required*

Message body. String, inline markup, or a Markdown tree.

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

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

**copyText** `string`

Source text for copy. Takes precedence over a string `content`.

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

Controlled feedback selection. The component only reflects this value.

**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.


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