Skip to main content

Architecture: hbf-console

C4 Component Diagram​

Key Flows​

Authentication​

  1. LoginScreen dispatches an RTK Query mutation via authApi.
  2. On success, JWT and refresh token are stored in localStorage.
  3. Root.jsx sets a REFRESH_TOKEN_INTERVAL_MILLISECONDS interval that calls isTokenAboutToExpire and fires refreshTokenMutation preemptively.
  4. When running inside MS Teams (is.inMicrosoftTeams()), microsoftTeams.app.initialize() is called at mount and TeamsLoginScreen uses teamsAppLogin util for SSO.

Bot Designer Render​

  1. BotScreen loads bot data via RTK Query (hbf-bot/hbf-core).
  2. The flow graph JSON is transformed by generateFlowGraph (dagre layout) into ReactFlow nodes and edges.
  3. AddNodePanel provides a draggable palette; dropping a node dispatches a Redux action to append it to the graph.
  4. Each node type has a display component (rendered on canvas) and a form component (rendered in the properties panel on selection).

Live Chat​

  1. On org load with LIVE_AGENT role, Root.jsx dispatches establishConnection thunk.
  2. The thunk opens a Socket.IO connection to hbf-lcm (REACT_APP_API_LIVECHAT_URL).
  3. Incoming message and presence events update the liveChat Redux slice.
  4. LiveChatScreen renders the inbox using @chatscope/chat-ui-kit-react.
  5. On org change or logout, disconnectLivechatSocket is dispatched.

Feature Flag Routing​

constants/env.js reads REACT_APP_* env vars at build time. The router in Root.jsx uses these flags to conditionally include routes and swap screen components (e.g., IS_HRWIZ_CONSOLE_ENABLED replaces BotScreen with HRWizConsoleScreen; IS_LIVECHAT_CONSOLE_ONLY strips all routes except live chat).