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

# User Message – Code

> The UserMessage renders a right-aligned user chat bubble with a timestamped action toolbar.

<Tabs>
  <Tab title="Implementation">
    ```tsx theme={null}
    import { UserMessage } from "@servicetitan/anvil2-rn";

    function App() {
      return (
        <UserMessage
          content="Hey — can you take a look at this?"
          timestamp={new Date(2026, 3, 1, 16, 40)}
        />
      );
    }
    ```

    ## Common Examples

    To use the `UserMessage`, pass `content` and a required `timestamp`. The bubble right-aligns. The kit forbids `children`.

    ```tsx theme={null}
    import { UserMessage } from "@servicetitan/anvil2-rn";

    function ExampleComponent() {
      return (
        <UserMessage
          content="Can you look at this invoice?"
          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.

    ### Error and retry

    Pass `error` to render a failure line under the bubble. `onRetry` only appears when `error` is also set.

    ```tsx theme={null}
    <UserMessage
      content="Can you look at this invoice?"
      timestamp={sentAt}
      error="Couldn't send this message."
      onRetry={() => retry()}
    />
    ```

    ## Accessibility

    * The toolbar groups user actions with the timestamp.
    * Retry is available only when `error` is set.
    * Built-in toolbar labels are English until the kit gains an i18n layer.
  </Tab>

  <Tab title="UserMessage Props">
    ```tsx theme={null}
    <UserMessage
      content="Can you look at this invoice?"
      timestamp={sentAt}
      onCopy={copy}
    />
    ```

    ## `UserMessage` Props

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

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

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

    <ParamField path="analyticsId" type="string">
      Opt-in telemetry id. When set under `Anvil2RNTelemetryProvider`, copy
      and retry 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`.
    </ParamField>

    <ParamField path="error" type="string">
      Error message under the bubble. Omit or pass an empty string to hide
      it.
    </ParamField>

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

    <ParamField path="onRetry" type="() => void | Promise<void>">
      Retry handler. The retry control renders only when `error` is also
      set.
    </ParamField>

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