Atlas

Demo

​

Installation

npm install @servicetitan/ext-atlas

​

Import

import {
  ChatWindow,
  Header,
  Footer,
  Content,
  AssistantMessage,
  UserMessage,
  MarkdownMessage,
} from "@servicetitan/ext-atlas";

​

Key Features

​

Chat Window System

• ChatWindow - The main container with open/close animations and positioning
• Header - Configurable header with drag, fullscreen, and navigation controls
• Footer - Message input area with the rich text composer
• Content - Scrollable message container with auto-scroll behavior

​

Message Components

• UserMessage - Messages sent by the user
• AssistantMessage - Simple text responses from Atlas
• MarkdownMessage - Rich markdown-formatted responses with toolbox actions
• SystemMessage - Interactive system prompts with radio options
• ErrorMessage - Error states with retry functionality

​

Recommendation Cards

• SingleRecommendationCard - Single-select options with radio buttons
• MultipleRecommendationCard - Multi-select options with checkboxes
• ConfirmationCard - Simple confirmation prompts with action buttons

​

Utility Components

• Suggestion / SuggestionList - Clickable suggestion chips
• Toolbox - Copy, like, dislike, and retry actions for messages
• Loader - Animated loading indicator for pending responses
• Spinner - Full-screen loading spinner
• Welcome - Onboarding welcome screen
• SystemError - Error state display

​

Hooks

• useDraggable - Make the chat window draggable with boundary constraints
• useInfiniteScroll - Load more content when scrolling
• useScrollCallback - Respond to scroll position changes

​

Component Architecture

import {
  ChatWindow,
  Header,
  Content,
  Footer,
  UserMessage,
  MarkdownMessage,
} from "@servicetitan/ext-atlas";

function AtlasChat() {
  const [open, setOpen] = useState(false);
  const [messages, setMessages] = useState([]);
  const [inputMessage, setInputMessage] = useState("");

  return (
    <ChatWindow open={open}>
      <Header
        title="Atlas"
        onClose={() => setOpen(false)}
        onCreateNewChat={handleNewChat}
      />
      <Content itemsLength={messages.length}>
        {messages.map((msg) =>
          msg.type === "user" ? (
            <UserMessage key={msg.id} message={msg.content} />
          ) : (
            <MarkdownMessage key={msg.id} message={msg.content} />
          )
        )}
      </Content>
      <Footer
        message={inputMessage}
        onMessageChange={setInputMessage}
        onSubmit={handleSend}
      />
    </ChatWindow>
  );
}

​

Dependencies

• Anvil2 - Core UI components (Button, Card, Flex, Text, etc.)
• Framer Motion - Animations and transitions
• React Markdown - Markdown rendering for message content
• MobX React - Observable state management (optional)