Skip to main content

CrimooCopilot-front

Purpose and Production Relevance​

CrimooCopilot-front is a standalone React/Vite frontend for the Copilot assistant. It provides the conversational interface, GTM selectors, protected routes, and iframe overlay/click-passthrough behavior.

Production relevance: supporting/parallel Copilot application. Confirm whether the active Copilot UI is this standalone app or the integrated Angular route before changing user-facing behavior.

Stack and Main Dependencies​

  • React.
  • Vite.
  • Tailwind CSS.
  • React Router.
  • Axios.
  • Radix UI Select.
  • Lucide React.
  • DOMPurify, Marked, and html2canvas.

Important files and folders:

  • CrimooCopilot-front/src/components
  • CrimooCopilot-front/src/pages
  • CrimooCopilot-front/src/lib
  • CrimooCopilot-front/src/utils
  • CrimooCopilot-front/package.json

Business Responsibilities​

  • Render Copilot chat and assistant workflows.
  • Let users select GTM account/container context.
  • Protect routes with auth state.
  • Show review/configuration states.
  • Run as an iframe overlay above a target page when injected by a loader.
  • Forward clicks through transparent overlay areas to the underlying page.

Technical Architecture and Source-Code Entry Points​

The most distinctive behavior is iframe click passthrough:

  1. The Copilot iframe covers the page.
  2. Interactive Copilot UI elements keep pointer events.
  3. Transparent areas detect clicks.
  4. The frame sends PASSTHROUGH_CLICK with coordinates to the parent.
  5. The parent temporarily hides the iframe, finds the underlying element, and dispatches a click.

Key Data Flows and Service Integrations​

  • Talks to CrimooCopilot-Backend through VITE_API_URL.
  • Uses JWT/auth state for protected pages.
  • Uses postMessage for parent-page iframe integration.
  • May overlap with node-api integrated Copilot routes depending deployment.

Environment, Deploy, and Runtime Notes​

Common commands:

cd CrimooCopilot-front
npm install
npm run dev
npm run build
npm run preview

Environment:

  • VITE_API_URL defaults to the local backend if not configured.

Debugging Checklist​

  • If API calls fail, check VITE_API_URL, CORS, and auth token handling.
  • If iframe blocks the page, check pointer-events CSS and PASSTHROUGH_CLICK handling.
  • If click passthrough clicks the wrong element, inspect coordinate transforms, scrolling, and iframe visibility timing.
  • If markdown/chat output is unsafe or broken, check sanitization and renderer paths.

Tests or Validation Commands​

cd CrimooCopilot-front
npm run build
npm run lint

Mastery Checklist​

  • Explain the overlay model and click passthrough.
  • Add a Copilot UI state without breaking transparent-area interaction.
  • Confirm active backend/API route before changing contracts.
  • Debug iframe integration using browser devtools and postMessage logs.