> ## 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 – Code

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

<Tabs>
  <Tab title="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.

    ## Accessibility

    * The toolbar groups assistant actions.
    * Timestamp is always present in the toolbar.
    * Feedback buttons announce like, dislike, and selected state.
    * Built-in toolbar labels are English until the kit gains an i18n layer.
  </Tab>

  <Tab title="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.

    <ParamField path="content" type="ReactNode" required>
      Message body. A string or composed React Native nodes. A plain-string
      `content` also supplies copy text when `copyText` is omitted.
    </ParamField>

    <ParamField path="timestamp" type="Date | string | number" required>
      Send or receive time. Accepts a `Date`, ISO string, or epoch number.
    </ParamField>

    <ParamField path="analyticsId" type="string">
      Opt-in telemetry id. When set under `Anvil2RNTelemetryProvider`, copy,
      like, and dislike emit a `press` event with `meta.action` before the
      handler runs.
    </ParamField>

    <ParamField path="copyText" type="string">
      Source text for copy. Takes precedence over a string `content`. The copy
      control is omitted when neither yields text.
    </ParamField>

    <ParamField path="currentFeedback" type={`"positive" | "negative" | null`} default="null">
      Controlled feedback selection. The component only reflects this value.
    </ParamField>

    <ParamField path="onCopy" type="(text: string) => void">
      Copy handler. The kit stays clipboard-agnostic. The copy control renders
      only when this is provided and copy text is available.
    </ParamField>

    <ParamField path="onDislike" type="() => void | Promise<void>">
      Thumbs-down handler. The button renders only when this is provided.
    </ParamField>

    <ParamField path="onLike" type="() => void | Promise<void>">
      Thumbs-up handler. The button renders only when this is provided.
    </ParamField>

    <ParamField path="testID" type="string">
      Test hook forwarded to the row container.
    </ParamField>
  </Tab>
</Tabs>