Atlas is deprecated. Use AI Kit for any new Atlas experiences.
- Implementation
- MarkdownMessage API
Common Examples
Basic Usage
Display rich markdown content:import { MarkdownMessage } from "@servicetitan/anvil2-ext-atlas";
function MarkdownMessageExample() {
return (
<MarkdownMessage
message="Here are some options:\n\n1. **Option A** - First choice\n2. **Option B** - Second choice"
/>
);
}
With Toolbox Actions
Enable user feedback and actions:import { MarkdownMessage } from "@servicetitan/anvil2-ext-atlas";
function MarkdownWithToolbox() {
return (
<MarkdownMessage
message="Here is a detailed response with **formatting**."
toolboxProps={{
onLike: () => handleLike(),
onDislike: () => handleDislike(),
onRetry: () => handleRetry(),
}}
/>
);
}
Custom Branding
Use custom icon and assistant name:import { MarkdownMessage } from "@servicetitan/anvil2-ext-atlas";
import CustomLogo from "./custom-logo.svg";
function CustomBrandedMessage() {
return (
<MarkdownMessage
message="Hello from the custom assistant!"
svgIcon={CustomLogo}
assistant="My Assistant"
/>
);
}
<MarkdownMessage
message="**Bold** and *italic*"
error="Error message"
svgIcon={CustomIcon}
assistant="Atlas"
onRetry={handleRetry}
toolboxProps={{
onLike: handleLike,
onDislike: handleDislike,
}}
/>
MarkdownMessage Props
string
Custom assistant name to display instead of “Atlas”.
string
Additional CSS class name for custom styling.
string
Error message to display instead of content.
string
Markdown content to render. When undefined, shows loading indicator.
() => void
Callback for retry button in error state.
Svg
Custom icon to display instead of the Atlas logo.
Omit<ToolboxProps, 'text'>
Props to pass to the Toolbox component (excluding text which is set automatically).See the Toolbox API for more details.