Atlas is deprecated. Use AI Kit for any new Atlas experiences.
- Implementation
- ChatWindow API
Common Examples
import { ChatWindow } from "@servicetitan/anvil2-ext-atlas";
function BasicChatWindow() {
const [open, setOpen] = useState(false);
return (
<ChatWindow open={open}>
{/* Header, Content, Footer components */}
</ChatWindow>
);
}
With Position
Use theposition prop to create a floating chat window at specific coordinates:import { ChatWindow } from "@servicetitan/anvil2-ext-atlas";
function PositionedChatWindow() {
const [open, setOpen] = useState(true);
return (
<ChatWindow
open={open}
position={{ x: 100, y: 64 }}
>
{/* Chat content */}
</ChatWindow>
);
}
Draggable Window
Combine with theuseDraggable hook to create a draggable chat window:import { ChatWindow, Header, useDraggable } from "@servicetitan/anvil2-ext-atlas";
function DraggableChatWindow() {
const [open, setOpen] = useState(true);
const { position, isDragging, handleMouseDown, resetPosition } = useDraggable();
return (
<ChatWindow
open={open}
position={position}
isDragging={isDragging}
>
<Header
title="Atlas"
isDraggable
isDragging={isDragging}
onMouseDown={handleMouseDown}
onClose={() => setOpen(false)}
/>
{/* Content and Footer */}
</ChatWindow>
);
}
Fullscreen Mode
Enable fullscreen mode for an expanded chat experience:import { ChatWindow } from "@servicetitan/anvil2-ext-atlas";
function FullscreenChatWindow() {
const [open, setOpen] = useState(true);
const [fullscreen, setFullscreen] = useState(false);
return (
<ChatWindow
open={open}
fullscreen={fullscreen}
>
<Header
title="Atlas"
isExpanded={fullscreen}
onFullscreen={() => setFullscreen(!fullscreen)}
onClose={() => setOpen(false)}
/>
{/* Content and Footer */}
</ChatWindow>
);
}
<ChatWindow
open={true}
position={{ x: 100, y: 64 }}
isDragging={false}
fullscreen={false}
>
{children}
</ChatWindow>
ChatWindow Props
ReactNode
required
The content to render inside the chat window, typically Header, Content, and Footer components.
boolean
required
Controls whether the chat window is visible. Triggers open/close animations.
boolean
default:"false"
When true, the window expands to fill the available space with a fade animation instead of the standard slide animation.
boolean
default:"false"
Indicates if the window is currently being dragged. When true, layout animations are disabled to prevent conflicts.
{ x: number; y: number }
Optional coordinates for positioning the chat window. When provided, the window uses absolute positioning.