- 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
Current feedback state:
None, Positive, or Negative. Affects which buttons are shown.Async callback for dislike button. Button only renders when provided.
Async callback for flag button. Button only renders when provided.
Async callback for like button. Button only renders when provided.
Async callback for play audio button. Button only renders when provided.
Async callback for retry button. Button only renders when provided.
The text content to copy when the copy button is clicked.
UserFeedback Enum
enum UserFeedback {
None = "None",
Positive = "Positive",
Negative = "Negative",
}