useDraggable

import { ChatWindow, Header, useDraggable } from "@servicetitan/anvil2-ext-atlas";

function DraggableChatWindow() {
  const {
    position,
    isDragging,
    handleMouseDown,
    resetPosition,
  } = useDraggable({
    initialX: window.innerWidth - 390,
    initialY: 64,
    width: 390,
  });

  return (
    <ChatWindow open position={position} isDragging={isDragging}>
      <Header
        title="Atlas"
        isDraggable
        isDragging={isDragging}
        onMouseDown={handleMouseDown}
      />
      {/* Content */}
    </ChatWindow>
  );
}

function ChatWithReset() {
  const [fullscreen, setFullscreen] = useState(false);
  const { position, isDragging, handleMouseDown, resetPosition } = useDraggable();

  const handleFullscreenToggle = () => {
    if (fullscreen) {
      resetPosition(); // Reset to default position when exiting fullscreen
    }
    setFullscreen(!fullscreen);
  };

  return (
    <ChatWindow
      open
      fullscreen={fullscreen}
      position={fullscreen ? undefined : position}
      isDragging={isDragging}
    >
      <Header
        isDraggable={!fullscreen}
        isDragging={isDragging}
        onMouseDown={handleMouseDown}
        onFullscreen={handleFullscreenToggle}
        isExpanded={fullscreen}
      />
    </ChatWindow>
  );
}