Assistant Message

Implementation
AssistantMessage API

Common Examples

Basic Usage

Display a simple text response:

import { AssistantMessage } from "@servicetitan/anvil2-ext-atlas";

function AssistantMessageExample() {
  return (
    <AssistantMessage message="I can help you with that! Let me look up the information." />
  );
}

Loading State

Show loading indicator when waiting for response:

import { AssistantMessage } from "@servicetitan/anvil2-ext-atlas";

function AssistantMessageLoading() {
  // When message is undefined, shows loading indicator
  return <AssistantMessage />;
}

Custom Branding

Use custom icon and assistant name:

import { AssistantMessage } from "@servicetitan/anvil2-ext-atlas";
import CustomLogo from "./custom-logo.svg";

function CustomBrandedMessage() {
  return (
    <AssistantMessage
      message="Hello from the custom assistant!"
      svgIcon={CustomLogo}
      assistant="My Assistant"
    />
  );
}

<AssistantMessage
  message="Response text"
  error={false}
  svgIcon={CustomIcon}
  assistant="Atlas"
  onRetry={handleRetry}
/>

`AssistantMessage` Props

assistant

string

Custom assistant name to display instead of “Atlas”.

className

string

Additional CSS class name for custom styling.

error

string | boolean

Error state. When truthy, displays error message instead of content.

message

string

The message content. When undefined, shows loading indicator.

onRetry

() => void

Callback for retry button in error state.

svgIcon

Svg

Custom icon to display instead of the Atlas logo.

Atlas

Documentation Index

​Common Examples

​Basic Usage

​Loading State

​Custom Branding

​AssistantMessage Props

Common Examples

Basic Usage

Loading State

Custom Branding

`AssistantMessage` Props