- 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
Custom assistant name to display instead of “Atlas”.
Additional CSS class name for custom styling.
Error message to display instead of content.
Markdown content to render. When undefined, shows loading indicator.
Callback for retry button in error state.
Custom icon to display instead of the Atlas logo.
Props to pass to the Toolbox component (excluding text which is set automatically).See the Toolbox API for more details.