Skip to main content

AI Brief: hbf-console

React 17 single-page application that serves as the main admin console for the Helvia Chatbricks platform. It provides an agent designer (visual flow graph editor), analytics and observatory dashboards, live chat inbox, knowledge base management, organization settings, and MS Teams integration.

What This Repo Does​

The console is the primary interface for Chatbricks customers to build and manage conversational AI agents. It covers the full agent lifecycle: visual flow design with a drag-and-drop node canvas (powered by ReactFlow and dagre), analytics and observatory (echarts, d3), a live chat inbox where human agents handle escalated conversations (Socket.IO), knowledge base configuration, integrations, and org administration. The app also runs as an MS Teams tab (via @microsoft/teams-js).

Tech Stack​

  • Language: JavaScript (JSX) — no TypeScript
  • Framework: React 17, Create React App (CRACO override)
  • State management: Redux Toolkit + RTK Query, redux-first-history
  • UI library: Ant Design 4 (antd)
  • Key dependencies: reactflow 11, dagre, d3 7, echarts 5, @microsoft/teams-js 2, socket.io-client, @fluentui/react-northstar, react-router-dom 6, i18next, react-quill-new, @chatscope/chat-ui-kit-react
  • Styling: LESS compiled to CSS (less-watch-compiler), overrides on antd theme

Entry Points​

  • Main: src/index.js
  • App root: src/App.jsx (Redux Provider, Router, I18n)
  • Route tree: src/screens/Root.jsx
  • Store: src/store/ (Redux slices + RTK Query APIs)

Key Directories​

DirectoryPurpose
src/screens/One file per route/screen (BotScreen, AnalyticsScreen, LiveChatScreen, etc.)
src/components/Graphs/Agent designer: ReactFlow canvas, node palette (AddNodePanel), 20+ node types each with a display component and a form component
src/components/LiveChat/Live chat inbox UI components and filters
src/components/Analytics/Analytics section components
src/components/Charts/Reusable echarts/d3 chart wrappers
src/components/Forms/Shared forms (KnowledgeBases, Plugins, DeploymentSettings, form field components)
src/components/Layout/MainLayout, AuthLayout, EmptyLayout
src/store/Redux slices and RTK Query API definitions per domain
src/constants/Navigation paths, API base paths, env flags, flow graph constants
src/utils/Misc, auth, array, date, string, is-type utilities

UI Sections (major views/pages)​

  • Dashboard: org-level KPI summary (DashboardScreen)
  • Bot Designer: visual flow editor per agent/bot — drag-and-drop nodes, edges, properties panel (BotScreen, components/Graphs/)
  • Bots List: list of agents per org (BotsScreen)
  • Analytics: echarts dashboards with conversation metrics, missed questions, CSAT (AnalyticsScreen, ChatSessionsScreen, MissedQuestionsScreen, SurveysScreen)
  • Monitoring / Observatory: session replay, test runs, automated agent testing (MonitoringScreen, AutomatedAgentTestsScreen)
  • Live Chat: human-agent inbox with Socket.IO real-time updates, conversation notes, tags (LiveChatScreen)
  • Knowledge Bases: RAG/FAQ knowledge base management and form (OrganizationKnowledgeBasesScreen)
  • Integrations: channel integrations config (OrganizationIntegrationsScreen)
  • Organization Settings: org profile, data retention, LLM config (OrganizationSettingsScreen)
  • Organization Users: user management and invitations (OrganizationUsersScreen)
  • Organization Logs: audit log viewer (OrganizationLogsScreen)
  • Media: media library — upload/browse/delete files (MediaScreen, backed by hbf-media-manager)
  • Scheduled Reports: configure and view scheduled analytics exports (ScheduledReportsScreen)

Scheduled Reports Notes​

  • ScheduledReportFormModal.jsx is a type-aware report scheduler with three extracted fieldsets: AnalyticsFieldset.jsx, SessionsFieldset.jsx, and SurveysFieldset.jsx.
  • The modal keeps shared schedule inputs in the parent and switches per-type config fields by type (ANALYTICS_PDF, SESSION_XLSX, SURVEY_CSV).
  • The schedules table includes a Type column so mixed report schedules are distinguishable at a glance.
  • The schedules table also exposes a Run now row action for manual execution.
  • SESSION_XLSX schedules support tenant-scoped deployment filtering via deploymentIds.
  • SURVEY_CSV schedules enforce exactly one tenant in the form because activities are loaded via per-tenant useFetchActivitiesQuery({ orgId, tenantId }).
  • The survey activity picker is a searchable Select, not a free-text input, and only enables once a single tenant is selected.

External Dependencies​

  • Auth: custom JWT (stored in localStorage), auto-refresh via RTK Query refreshToken mutation; MS Teams SSO via @microsoft/teams-js
  • Real-time: Socket.IO client for live chat presence and message delivery
  • APIs: hbf-core (primary backend), hbf-media-manager, hbf-knowledge-manager, hbf-scheduler (scheduled flows) — base URLs configured via env vars
  • Observability: Not detected (no APM client in frontend)

Running Locally​

npm start   # compiles LESS and starts CRACO dev server in parallel

Tests​

npm test         # react-scripts test (watch mode)
npm run test:exit  # CI mode