> ## Documentation Index
> Fetch the complete documentation index at: https://anvil.servicetitan.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Toolbox – Code
> Toolbox provides action buttons for message interactions.
export const LiveCode = ({children, customHeight, clickToLoad, example, fullWidth, fullHeight, hideCodeInLiveCode, screenshot, screenshotOnly, showCode: showCodeProp}) => {
const SCREENSHOTS_BASE = "https://servicetitan.github.io/anvil2-docs-live-code/screenshots";
const STACKBLITZ_BASE = "https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples";
const [showCodeBlock, setShowCodeBlock] = useState(showCodeProp ?? false);
const [isLocalOverride, setIsLocalOverride] = useState(false);
useEffect(() => {
const examplePath = `/images/live-code-screenshots-tmp/${example}.png`;
fetch(examplePath, {
method: "HEAD"
}).then(r => {
if (r.ok) setIsLocalOverride(true);
}).catch(() => {});
}, [example]);
const screenshotBase = isLocalOverride ? "/images/live-code-screenshots-tmp" : SCREENSHOTS_BASE;
if (screenshotOnly) {
return
;
}
if (screenshot) {
return
{!showCodeProp ?
: null}
StackBlitz demo
;
}
};
```tsx lines expandable theme={null}
import { Toolbox, UserFeedback } from "@servicetitan/anvil2-ext-atlas";
import { Card, Flex, Text } from "@servicetitan/anvil2";
import { useState } from "react";
function App() {
const [feedback, setFeedback] = useState(UserFeedback.None);
return (
All Actions Available
console.log("retry clicked")}
onLike={async () => {
console.log("like clicked");
setFeedback(UserFeedback.Positive);
}}
onDislike={async () => {
console.log("dislike clicked");
setFeedback(UserFeedback.Negative);
}}
onFlag={async () => console.log("flag clicked")}
onPlay={async () => console.log("play clicked")}
currentFeedback={feedback}
/>
);
}
export default App;
```
## Common Examples
### Basic Usage
Message action toolbar:
```tsx theme={null}
import { Toolbox, UserFeedback } from "@servicetitan/anvil2-ext-atlas";
function MessageToolbox() {
const [feedback, setFeedback] = useState(UserFeedback.None);
return (
{
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:
```tsx theme={null}
import { Toolbox, UserFeedback } from "@servicetitan/anvil2-ext-atlas";
function FullToolbox() {
return (
);
}
```
### Copy Only
Simple copy functionality:
```tsx theme={null}
import { Toolbox } from "@servicetitan/anvil2-ext-atlas";
function CopyOnlyToolbox() {
return ;
}
```
```tsx theme={null}
```
## `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
```tsx theme={null}
enum UserFeedback {
None = "None",
Positive = "Positive",
Negative = "Negative",
}
```
