Chat Window – Code

import { ChatWindow } from "@servicetitan/ext-atlas";

function BasicChatWindow() {
  const [open, setOpen] = useState(false);

  return (
    <ChatWindow open={open}>
      {/* Header, Content, Footer components */}
    </ChatWindow>
  );
}

import { ChatWindow } from "@servicetitan/ext-atlas";

function PositionedChatWindow() {
  const [open, setOpen] = useState(true);

  return (
    <ChatWindow 
      open={open} 
      position={{ x: 100, y: 64 }}
    >
      {/* Chat content */}
    </ChatWindow>
  );
}

import { ChatWindow, Header, useDraggable } from "@servicetitan/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>
  );
}

import { ChatWindow } from "@servicetitan/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>
  );
}