Atlas is deprecated. Use AI Kit for any new Atlas experiences.
- 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
string
Custom assistant name to display instead of “Atlas”.
string
Additional CSS class name for custom styling.
string | boolean
Error state. When truthy, displays error message instead of content.
string
The message content. When undefined, shows loading indicator.
() => void
Callback for retry button in error state.
Svg
Custom icon to display instead of the Atlas logo.