;
}
};
```tsx lines expandable theme={null}
import {
ArtifactCard,
ArtifactPanel,
ArtifactPanelLayout,
} from "@servicetitan/anvil2-ext-atlas";
import { Flex, Text } from "@servicetitan/anvil2";
import { useState } from "react";
function App() {
const [activeId, setActiveId] = useState(null);
return (
I checked invoice 10492 against the service agreement and technician
notes. One thing to flag: labor came in 1.5 hours over the approved
estimate.
setActiveId("insight-1")}
/>
{
if (!open) setActiveId(null);
}}
position="right"
title="Supplemental info"
description="Variance details for invoice 10492"
triggerKey={activeId ?? undefined}
>
Side-by-side details on the variance flagged in the chat.
);
}
export default App;
```
## Common Examples
`ArtifactPanel` reads its responsive mode (inline vs. overlay) from the surrounding `ArtifactPanelLayout`. Wrap chat content and any artifact panels in `ArtifactPanelLayout` so the panel can switch modes when the available width changes. Outside a layout the panel falls back to inline mode.
### Basic Usage
Wrap chat content and the panel in `ArtifactPanelLayout`. Open and close the panel from consumer state:
```tsx theme={null}
import { useState } from "react";
import {
ArtifactPanel,
ArtifactPanelLayout,
} from "@servicetitan/anvil2-ext-atlas";
function ArtifactDetails({ children }) {
const [open, setOpen] = useState(false);
return (
{children}
{/* artifact content */}
);
}
```
### Swapping Artifacts While Open
Pass `triggerKey` so the panel treats a value change as a new open event — focus shifts into the panel for the new artifact, and close-restore returns focus to the most recent trigger:
```tsx theme={null}
import { useState } from "react";
import { ArtifactCard, ArtifactPanel } from "@servicetitan/anvil2-ext-atlas";
function ChatWithArtifacts() {
const [activeId, setActiveId] = useState(null);
return (
<>
setActiveId("insight-1")}
/>
setActiveId("insight-2")}
/>
{
if (!open) setActiveId(null);
}}
title={`Insight ${activeId ?? ""}`}
triggerKey={activeId ?? undefined}
>
{/* artifact content */}
);
}
```
### Agent-Initiated Open
For panels opened by the agent rather than a user gesture, set `focusOnOpen` to `false` so focus is not pulled away from the chat composer:
```tsx theme={null}
{/* artifact content */}
```
## React Accessibility
* The panel renders an `
```tsx theme={null}
{content}
```
## `ArtifactPanel` Props
Content rendered in the panel body. Accepts arbitrary content including markdown, GenUI components, and other interactive elements.
Whether the panel is currently rendered.
Called when the panel requests an open-state change (e.g. when the close button is clicked).
Panel heading rendered in the header and referenced by `aria-labelledby`.
Optional sub-header text rendered beneath the title.
Move focus into the panel when it opens, and return focus to the previously focused element when it closes. Set false for agent-initiated opens so focus is not pulled away from the chat composer.
Pick the initial focus target when `focusOnOpen` is true. Defaults to the first non-close focusable.
Side the panel is anchored to. Drives border placement.
Identifier for the current artifact. When this value changes while the panel is already open, focus management treats it as a new open event: it captures the newly-focused trigger and re-shifts focus into the panel, so close-restore returns to the right element.
