- Implementation
- AssistantMessage API
Common Examples
Basic Usage
Display a simple text response:Copy
Ask AI
import { AssistantMessage } from "@servicetitan/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:Copy
Ask AI
import { AssistantMessage } from "@servicetitan/ext-atlas";
function AssistantMessageLoading() {
// When message is undefined, shows loading indicator
return <AssistantMessage />;
}
Custom Branding
Use custom icon and assistant name:Copy
Ask AI
import { AssistantMessage } from "@servicetitan/ext-atlas";
import CustomLogo from "./custom-logo.svg";
function CustomBrandedMessage() {
return (
<AssistantMessage
message="Hello from the custom assistant!"
svgIcon={CustomLogo}
assistant="My Assistant"
/>
);
}
Copy
Ask AI
<AssistantMessage
message="Response text"
error={false}
svgIcon={CustomIcon}
assistant="Atlas"
onRetry={handleRetry}
/>
AssistantMessage Props
Custom assistant name to display instead of “Atlas”.
Additional CSS class name for custom styling.
Error state. When truthy, displays error message instead of content.
The message content. When undefined, shows loading indicator.
Callback for retry button in error state.
Custom icon to display instead of the Atlas logo.