Frontend (gov-chat Web)

Vue 3 + Vuex single-page app — UI component inventory, state-management patterns, theme system, auth flow, chat UX, sidebar, and the admin dashboard.

Documents in this section

  1. UI Component Inventory — canonical map of the 52 .vue files (DS primitives, layout, chat, admin, services, files, settings, shared widgets).
  2. State Management — Vuex 4 store, the namespaced chatHistory module, the non-namespaced auth module, and the localStorage persistence plugin.
  3. Theme System — CSS-native theming with a single brand color, OKLch derivation, dark mode, and config variants.
  4. Auth Flow — full Keycloak OIDC sequence: login redirect, callback, in-memory tokens, silent renew, and the genie_post_logout flag.
  5. Chat UX — streaming send, Markdown sanitisation, confidence / grounding chips, the feedback dialog, and save / export flows.
  6. Sidebar & Navigation — the left services + saved-chats sidebar, the right related-documents + FAQ sidebar, mobile overlay behaviour.
  7. Admin Dashboard — the 8-tab admin surface (overview, hierarchy, documents, database, logs, query inspector, security, users) and the unsaved-changes guard.
  8. Accessibility — DS primitive ARIA semantics, focus management, the skip-link, and the ConfirmDialog typed-confirmation flow.
  9. Notifications — the global toast surface in App.vue, the notificationService API, and eventBus wiring.
  10. Settings Page — per-user toggles (theme, fontSize, locale, email/sound), localStorage keys, and the destructive data / account flows.
  11. User Profile — the 8-tab profile surface, /api/me contract, and the searchable country / nationality dropdowns.

Where to start

  • New to the codebase? Read the UI Component Inventory, then State Management, then Theme System.
  • Implementing a chat feature? Read Chat UX and the chat-related sections of State Management.
  • Wiring auth or troubleshooting the login loop? Auth Flow is the single source of truth.
  • Touching the admin surface? Admin Dashboard covers every tab and the role-gating model.

Source layout

components/gov-chat-frontend/
├── src/
│   ├── App.vue                   # Root shell, data-theme, notifications, router-view
│   ├── components/               # 40 application + 12 DS primitive .vue files
│   ├── views/                    # CallbackView, DashboardView (router targets)
│   ├── store/                    # Vuex: index.js + chatHistoryStore + modules/auth
│   ├── services/                 # axios clients with 401 retry
│   ├── router/                   # Vue Router with auth guards
│   ├── config/                   # oidcConfig.js, languageConfig.js
│   ├── i18n/locales/             # vue-i18n message bundles
│   ├── theme-variables.css       # OKLch tokens, dark-mode overrides
│   └── __tests__/                # Jest tests
└── public/config/                # build-time config variants

In-repo conventions live in components/gov-chat-frontend/CLAUDE.md.

UI Component Inventory

Canonical catalogue of the 52 Vue components in gov-chat-frontend — DS primitives, layout, chat, admin, services, files, settings, and shared widgets.

State Management

Vuex 4 in the Vue 3 web app — store wiring, namespacing rules, the auth and chatHistory modules, and the localStorage persistence plugin.

Theme System

CSS-native theming for the Vue 3 web app — single brand color, OKLch derivation, config variants, and dark mode.

Auth Flow

End-to-end Keycloak OIDC sequence in the web frontend — login redirect, callback, in-memory tokens, silent renew, and the genie_post_logout flag.

Chat UX

How the chat window streams a response, renders Markdown safely, surfaces confidence and grounding, captures feedback, and saves or exports the conversation.

Sidebar & Navigation

Both sidebars of the web app — left navigation (services tree, saved chats, weather), right context pane (related documents, FAQ), mobile overlay behaviour.

Admin Dashboard

The 8-tab admin surface — overview, knowledge hierarchy, documents, database, logs, query inspector, security, users — and the unsaved-changes guard.

User Profile

The 8-tab profile form, what each tab captures, the search-backed country dropdown, and the backend routes that load, save, reset, and delete the data.

Settings Page

The Settings page — display preferences (language, theme, font size), notification toggles, account management links, and the GDPR reset/delete flows.

Notifications (Toast System)

The in-app toast system — a single floating notification element rendered by App.vue, fed by the eventBus + notificationService, with four severity types and auto-dismiss.

Accessibility Primitives

Accessibility support in the GENIE.AI frontend — the DS design-system primitives, the dialog and context-menu a11y patterns, screen-reader handling for the chat stream, and the i18n-driven aria-label convention.

Last modified September 30, 2026: fix(docs): lean fix Commit 1 — IA weight reorder + about.md link fix (72c35f1ed)