User Message

For development, import UserMessage from @servicetitan/anvil2-ai-kit. For design, find it in the AI Kit Web Component Library file.

Options

UserMessage supports arbitrary content and an optional error line with a retry action.

Message Content

The bubble caps at 640px and wraps long content; short messages stay compact. content accepts any ReactNode — a plain string, inline composition (Carto Link, strong, etc.), or a rendered Markdown tree.

Error

error renders a message below the bubble. Pair it with onRetry to add a retry action to the toolbar — the button appears only when both are set.

Behavior

The toolbar’s actions and visibility both respond to the message’s content and its position in the conversation.

Content Length

The bubble never truncates or clips its content — it only wraps. There’s no maximum height or line count; a long message simply grows taller. The toolbar always shows the timestamp, plus a copy action whenever there’s text to copy; retry joins them only when error is also set. Copy is text-only — pass copyText for rich content (Markdown, fragments, images) to keep the message copyable; a message with no text shows no copy button. Set revealToolbarOnHover on every message except the most recent of its type, so only the latest keeps its toolbar always visible — earlier messages reveal theirs on hover or keyboard focus. This distinction doesn’t apply on touch (coarse-pointer) devices, which always show the toolbar regardless of revealToolbarOnHover.

Usage Guidelines

When to Use

Use the User Message when:

User-sent content – A conversation shows a message the user sent, in a right-aligned bubble.
Rich user content – The message includes inline links, formatting, or a rendered Markdown tree. Pass copy text so the copy action stays available.
Failed sends – A message did not deliver and the user needs an error line with a retry action.

When not to use

Avoid using the User Message for:

Agent responses – The agent authored the message. Use the Agent Message instead.
Media attachments – The user sent a file, image, video, or audio attachment that needs a preview or playback. Use the User Media Message instead.

Keyboard Interaction

Users can navigate and activate toolbar actions using standard keyboard controls; focus also reveals a hidden toolbar.

Key	Description
Tab	Moves focus into the toolbar, revealing it if hidden
Arrow keys	Moves focus between toolbar actions
Enter / Space	Activates the focused action

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.

Concepts & Guidelines

Anvil2

Resources

User Message - Web

Options

Message Content

Error

Behavior

Content Length

Usage Guidelines

When to Use

When not to use

Keyboard Interaction

Code

Common Examples

Content length

Error and retry

Internationalization

React Accessibility

`UserMessage` Props

​Options

​Message Content

​Error

​Behavior

​Content Length

​Toolbar Actions

​Reveal Toolbar on Hover

​Usage Guidelines

​When to Use

​When not to use

​Keyboard Interaction

​Code

​Common Examples

​Content length

​Error and retry

​Toolbar

​Internationalization

​React Accessibility

​UserMessage Props

Options

Message Content

Error

Behavior

Content Length

Toolbar Actions

Reveal Toolbar on Hover

Usage Guidelines

When to Use

When not to use

Keyboard Interaction

Code

Common Examples

Content length

Error and retry

Toolbar

Internationalization

React Accessibility

`UserMessage` Props