Header – Code

Implementation
Header API

Common Examples

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

className

string

Additional CSS class name for custom styling.

disabledChatsIcon

boolean

Disables the chat history button.

historyCount

number

Number to display in the history button badge.

isDraggable

boolean

When true, displays the drag handle for repositioning the window.

isDragging

boolean

Indicates if the window is currently being dragged. Changes cursor to grabbing.

isExpanded

boolean

Indicates fullscreen mode. Hides the drag handle and changes fullscreen tooltip.

onBack

() => void

Handler for back button click. Button only renders when provided.

onClose

() => void

Handler for close button click. Button only renders when provided.

onCreateNewChat

() => void

Handler for new chat button click. Button only renders when provided.

onFullscreen

() => void

Handler for fullscreen button click. Button only renders when provided.

onMouseDown

(e: MouseEvent) => void

Handler for drag start. Required when isDraggable is true.

onViewHistory

() => void

Handler for history button click. Button only renders when provided.

title

string

default:"Atlas"

The title displayed in the header.

titleBadge

string | number

Badge content to display next to the title.

Test ID Props

backButtonId

string

Test ID for the back button.

closeButtonId

string

Test ID for the close button.

fullscreenButtonId

string

Test ID for the fullscreen button.

newChatButtonId

string

Test ID for the new chat button.

viewHistoryButtonId

string

Test ID for the history button.

Atlas

​Common Examples

​With All Actions

​Draggable Header

​With Title Badge

​Expanded State

​Header Props

​Test ID Props

Common Examples

With All Actions

Draggable Header

With Title Badge

Expanded State

`Header` Props

Test ID Props