@spektra/application-copilot-widget

A framework-agnostic, CSS-library agnostic copilot widget. It renders entirely inside a Shadow DOM, so the host app's styles (Bootstrap, Angular Material, Tailwind, etc.) cannot affect the widget and the widget's styles cannot leak out. It works in Angular, React, Vue, or plain HTML.

Build

cd packages/application-copilot-widget
npm install
npm run build      # outputs dist/ (ESM + CJS + types) via tsup

Use (Angular example)

import { ApplicationCopilotWidget } from '@spektra/application-copilot-widget';

ApplicationCopilotWidget.init({
  projectKey: 'cloud-events',
  environment: 'stage',
  apiBaseUrl: environment.applicationCopilotApi,
  signalRHubUrl: `${environment.applicationCopilotApi}/hubs/application-copilot`,
  tenantUniqueName: this.tenantUniqueName,
  getAuthToken: () => this.authService.accessToken,   // sent as Authorization: Bearer
  // devUserEmail: '[email protected]',              // local testing only

  getContext: () => ({
    projectKey: 'cloud-events',
    environment: 'stage',
    page: { pageKey: 'create-update-event', activeTab: this.activeTab, componentHint: 'ScheduleComponent' },
    entities: { eventRequestId: this.eventRequestId },
    uiState: {
      disabledFields: [
        ...(this.scheduleForm.get('startDateTime')?.disabled ? ['eventStartDate'] : []),
        ...(this.scheduleForm.get('endDateTime')?.disabled ? ['eventEndDate'] : [])
      ]
    },
    // Hint values for the Schedule rule (backend re-verifies the role):
    clientSnapshot: {
      sectionMode: this.sectionMode,
      isDraftMode: this.isDraftMode,
      isBudgetStatusClosed: this.isBudgetStatusClosed,
      showPendingRegistrationBanner: this.showPendingRegistrationBanner,
      eventPriorDays: this.editEventObj?.EventPriorDays,
      controlSetting: {
        canEdit: this.startDateControlSetting?.CanEdit,
        priorDays: this.startDateControlSetting?.PriorDays
      }
    },
    contextVersion: this.contextVersion,
    capturedAt: new Date().toISOString()
  })
});

Public API

ApplicationCopilotWidget.init(config);
ApplicationCopilotWidget.open();
ApplicationCopilotWidget.ask('Why are the dates disabled?');
ApplicationCopilotWidget.setContext(context);
ApplicationCopilotWidget.captureError(errorContext);
ApplicationCopilotWidget.close();

Why Shadow DOM

The widget mounts a single host element and attaches attachShadow({ mode: 'open' }). All markup and CSS live inside that shadow root, and :host { all: initial } neutralises inherited styles. The result: pixel-identical rendering regardless of the host's CSS framework, with zero risk of class-name collisions in either direction.