;
}
};
```tsx lines expandable theme={null}
import { Header } from "@servicetitan/anvil2-ext-atlas";
import { Card } from "@servicetitan/anvil2";
function App() {
return (
console.log("back clicked")}
onClose={() => console.log("close clicked")}
onViewHistory={() => console.log("view history clicked")}
onFullscreen={() => console.log("fullscreen clicked")}
onCreateNewChat={() => console.log("new chat clicked")}
/>
);
}
export default App;
```
## Common Examples
```tsx theme={null}
import { Header } from "@servicetitan/anvil2-ext-atlas";
function BasicHeader() {
return (
console.log("Close clicked")}
/>
);
}
```
### With All Actions
Enable all available header actions:
```tsx theme={null}
import { Header } from "@servicetitan/anvil2-ext-atlas";
function FullHeader() {
return (
navigateBack()}
onViewHistory={() => openHistory()}
onFullscreen={() => toggleFullscreen()}
onCreateNewChat={() => startNewChat()}
onClose={() => closeWindow()}
historyCount={5}
/>
);
}
```
### Draggable Header
Enable the drag handle for repositioning the chat window:
```tsx theme={null}
import { Header, useDraggable } from "@servicetitan/anvil2-ext-atlas";
function DraggableHeader() {
const { isDragging, handleMouseDown } = useDraggable();
return (
closeWindow()}
/>
);
}
```
### With Title Badge
Display a badge next to the title:
```tsx theme={null}
import { Header } from "@servicetitan/anvil2-ext-atlas";
function HeaderWithBadge() {
return (
closeWindow()}
/>
);
}
```
### Expanded State
In fullscreen mode, the drag handle is hidden:
```tsx theme={null}
import { Header } from "@servicetitan/anvil2-ext-atlas";
function ExpandedHeader() {
const [isExpanded, setIsExpanded] = useState(false);
return (
setIsExpanded(!isExpanded)}
onClose={() => closeWindow()}
/>
);
}
```
```tsx theme={null}
```
## `Header` Props
Additional CSS class name for custom styling.
Disables the chat history button.
Number to display in the history button badge.
When true, displays the drag handle for repositioning the window.
Indicates if the window is currently being dragged. Changes cursor to grabbing.
Indicates fullscreen mode. Hides the drag handle and changes fullscreen tooltip.
Handler for back button click. Button only renders when provided.
Handler for close button click. Button only renders when provided.
Handler for new chat button click. Button only renders when provided.
Handler for fullscreen button click. Button only renders when provided.
Handler for drag start. Required when `isDraggable` is true.
Handler for history button click. Button only renders when provided.
The title displayed in the header.
Badge content to display next to the title.
### Test ID Props
Test ID for the back button.
Test ID for the close button.
Test ID for the fullscreen button.
Test ID for the new chat button.
Test ID for the history button.
