Agent Message – Code

Implementation
AgentMessage Props

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.

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.

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

ReactNode

required

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

Date | string | number

required

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

string

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

"positive" | "negative" | null

default:"null"

Controlled feedback selection. The component only reflects this value.

() => void | Promise<void>

Thumbs-down handler. The button renders only when this is provided.

() => void | Promise<void>

Thumbs-up handler. The button renders only when this is provided.

AI Kit

Agent Experience

Agent Message – Code

Common Examples

Feedback

Internationalization

React Accessibility

`AgentMessage` Props

​Common Examples

​Feedback

​Internationalization

​React Accessibility

​AgentMessage Props

Common Examples

Feedback

Internationalization

React Accessibility

`AgentMessage` Props