User Message – Code

Implementation
UserMessage Props

Common Examples

To use the UserMessage, pass content and a required timestamp. The bubble right-aligns with a 24px left gutter. The kit forbids children.

import { UserMessage } from "@servicetitan/anvil2-ai-kit";

function ExampleComponent() {
  return (
    <UserMessage
      content="Can you look at this invoice?"
      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. When neither yields text, the copy button is omitted.

Content length

Long messages wrap inside the bubble.

Error and retry

Pass error to render a line below the bubble. onRetry shows a refresh action only when error is also set.The toolbar always includes copy (when copyable) and the formatted timestamp. Set revealToolbarOnHover so a chat list can hide the toolbar until hover or focus, typically on every message except the latest. Coarse pointers always show the toolbar. Keyboard focus reveals it.

Internationalization

The action toolbar owns these localized strings:

ai-kit.messageToolbar.copy
ai-kit.messageToolbar.copied
ai-kit.messageToolbar.retry
ai-kit.messageToolbar.userActions

Localize content and error before passing them. Mount AiKitIntlProvider inside CartoTheme to switch the toolbar strings.

React Accessibility

The toolbar groups user message actions under a localized name.
Timestamp is always present in the toolbar.
Hover-hidden toolbars remain reachable from the keyboard.

<UserMessage
  content="Can you look at this invoice?"
  timestamp={sentAt}
  copyText="Can you look at this invoice?"
/>

`UserMessage` Props

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

ReactNode

required

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

Date | string | number

required

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

string

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

string

Error line below the bubble. Omit or pass empty to hide it.

() => void | Promise<void>

Retry a failed send. Surfaces only when error is set.

Hides the toolbar until hover or focus. Touch always shows it.

AI Kit

Agent Experience

User Message – Code

Common Examples

Content length

Error and retry

Internationalization

React Accessibility

`UserMessage` Props

​Common Examples

​Content length

​Error and retry

​Toolbar

​Internationalization

​React Accessibility

​UserMessage Props

Common Examples

Content length

Error and retry

Toolbar

Internationalization

React Accessibility

`UserMessage` Props