Atlas is deprecated. Use AI Kit for any new Atlas experiences.
- Implementation
- Header API
Common Examples
import { Header } from "@servicetitan/anvil2-ext-atlas";
function BasicHeader() {
return (
<Header
title="Atlas"
onClose={() => console.log("Close clicked")}
/>
);
}
With All Actions
Enable all available header actions:import { Header } from "@servicetitan/anvil2-ext-atlas";
function FullHeader() {
return (
<Header
title="Atlas"
onBack={() => navigateBack()}
onViewHistory={() => openHistory()}
onFullscreen={() => toggleFullscreen()}
onCreateNewChat={() => startNewChat()}
onClose={() => closeWindow()}
historyCount={5}
/>
);
}
Draggable Header
Enable the drag handle for repositioning the chat window:import { Header, useDraggable } from "@servicetitan/anvil2-ext-atlas";
function DraggableHeader() {
const { isDragging, handleMouseDown } = useDraggable();
return (
<Header
title="Atlas"
isDraggable
isDragging={isDragging}
onMouseDown={handleMouseDown}
onClose={() => closeWindow()}
/>
);
}
With Title Badge
Display a badge next to the title:import { Header } from "@servicetitan/anvil2-ext-atlas";
function HeaderWithBadge() {
return (
<Header
title="Atlas"
titleBadge="Beta"
onClose={() => closeWindow()}
/>
);
}
Expanded State
In fullscreen mode, the drag handle is hidden:import { Header } from "@servicetitan/anvil2-ext-atlas";
function ExpandedHeader() {
const [isExpanded, setIsExpanded] = useState(false);
return (
<Header
title="Atlas"
isExpanded={isExpanded}
onFullscreen={() => setIsExpanded(!isExpanded)}
onClose={() => closeWindow()}
/>
);
}
<Header
title="Atlas"
isDraggable={true}
isDragging={false}
isExpanded={false}
historyCount={5}
titleBadge="Beta"
onMouseDown={handleMouseDown}
onBack={handleBack}
onClose={handleClose}
onViewHistory={handleHistory}
onFullscreen={handleFullscreen}
onCreateNewChat={handleNewChat}
/>
Header Props
string
Additional CSS class name for custom styling.
boolean
Disables the chat history button.
number
Number to display in the history button badge.
boolean
When true, displays the drag handle for repositioning the window.
boolean
Indicates if the window is currently being dragged. Changes cursor to grabbing.
boolean
Indicates fullscreen mode. Hides the drag handle and changes fullscreen tooltip.
() => void
Handler for back button click. Button only renders when provided.
() => void
Handler for close button click. Button only renders when provided.
() => void
Handler for new chat button click. Button only renders when provided.
() => void
Handler for fullscreen button click. Button only renders when provided.
(e: MouseEvent) => void
Handler for drag start. Required when
isDraggable is true.() => void
Handler for history button click. Button only renders when provided.
string
default:"Atlas"
The title displayed in the header.
string | number
Badge content to display next to the title.
Test ID Props
string
Test ID for the back button.
string
Test ID for the close button.
string
Test ID for the fullscreen button.
string
Test ID for the new chat button.
string
Test ID for the history button.