Atlas is deprecated. Use AI Kit for any new Atlas experiences.
- Implementation
- Toolbox API
Common Examples
Basic Usage
Message action toolbar:import { Toolbox, UserFeedback } from "@servicetitan/anvil2-ext-atlas";
function MessageToolbox() {
const [feedback, setFeedback] = useState(UserFeedback.None);
return (
<Toolbox
text="Message content to copy"
currentFeedback={feedback}
onLike={async () => {
await submitFeedback("positive");
setFeedback(UserFeedback.Positive);
}}
onDislike={async () => {
await submitFeedback("negative");
setFeedback(UserFeedback.Negative);
}}
onRetry={async () => {
await regenerateResponse();
}}
/>
);
}
With All Actions
Include all available actions:import { Toolbox, UserFeedback } from "@servicetitan/anvil2-ext-atlas";
function FullToolbox() {
return (
<Toolbox
text="Message content"
currentFeedback={UserFeedback.None}
onLike={handleLike}
onDislike={handleDislike}
onRetry={handleRetry}
onFlag={handleFlag}
onPlay={handlePlay}
/>
);
}
Copy Only
Simple copy functionality:import { Toolbox } from "@servicetitan/anvil2-ext-atlas";
function CopyOnlyToolbox() {
return <Toolbox text="Content to copy" />;
}
<Toolbox
text="Message content"
currentFeedback={UserFeedback.None}
onRetry={handleRetry}
onLike={handleLike}
onDislike={handleDislike}
onFlag={handleFlag}
onPlay={handlePlay}
/>
Toolbox Props
UserFeedback
Current feedback state:
None, Positive, or Negative. Affects which buttons are shown.() => Promise<void>
Async callback for dislike button. Button only renders when provided.
() => Promise<void>
Async callback for flag button. Button only renders when provided.
() => Promise<void>
Async callback for like button. Button only renders when provided.
() => Promise<void>
Async callback for play audio button. Button only renders when provided.
() => Promise<void>
Async callback for retry button. Button only renders when provided.
string
The text content to copy when the copy button is clicked.
UserFeedback Enum
enum UserFeedback {
None = "None",
Positive = "Positive",
Negative = "Negative",
}