feat(dashboards): add data copilot integration

apps/lfx-one/src/app/modules/dashboards/board-member/board-member-dashboard.component.html

@@ -4,8 +4,10 @@
 <div class="container mx-auto px-4 sm:px-6 lg:px-8" data-testid="dashboard-container">
   <!-- Foundation Project -->
   @if (selectedFoundation()) {
-    <div class="mb-6 flex items-center gap-4" data-testid="foundation-project">
+    <div class="mb-6 flex justify-between items-center gap-4" data-testid="foundation-project">
       <h1 class="text-2xl font-serif font-semibold text-gray-900">{{ selectedFoundation()?.name }} Overview</h1>
+      <!-- Data Copilot Button -->
+      <lfx-data-copilot></lfx-data-copilot>
     </div>
   }
 

apps/lfx-one/src/app/modules/dashboards/board-member/board-member-dashboard.component.ts

@@ -4,6 +4,7 @@
 import { Component, computed, inject, Signal } from '@angular/core';
 import { takeUntilDestroyed, toObservable, toSignal } from '@angular/core/rxjs-interop';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { DataCopilotComponent } from '@app/shared/components/data-copilot/data-copilot.component';
 import { Account, PendingActionItem } from '@lfx-one/shared/interfaces';
 import { catchError, of, switchMap } from 'rxjs';
 
@@ -19,7 +20,15 @@ import { PendingActionsComponent } from '../components/pending-actions/pending-a
 
 @Component({
   selector: 'lfx-board-member-dashboard',
-  imports: [OrganizationInvolvementComponent, PendingActionsComponent, MyMeetingsComponent, FoundationHealthComponent, SelectComponent, ReactiveFormsModule],
+  imports: [
+    OrganizationInvolvementComponent,
+    PendingActionsComponent,
+    MyMeetingsComponent,
+    FoundationHealthComponent,
+    SelectComponent,
+    ReactiveFormsModule,
+    DataCopilotComponent,
+  ],
   templateUrl: './board-member-dashboard.component.html',
   styleUrl: './board-member-dashboard.component.scss',
 })

apps/lfx-one/src/app/shared/components/data-copilot/data-copilot.component.html

@@ -0,0 +1,22 @@
+<!-- Copyright The Linux Foundation and each contributor to LFX. -->
+<!-- SPDX-License-Identifier: MIT -->
+
+<!-- Trigger Button -->
+<lfx-button
+  severity="secondary"
+  icon="fa-light fa-microchip-ai"
+  (click)="openDrawer()"
+  data-testid="data-copilot-button"
+  label="Ask LFX One AI"
+  size="small"></lfx-button>
+
+<!-- Drawer -->
+<p-drawer
+  [(visible)]="visible"
+  header="LFX Data Copilot"
+  position="right"
+  styleClass="md:w-1/2 w-full"
+  (onHide)="onVisibleChange(false)"
+  data-testid="data-copilot-drawer">
+  <div #iframeContainer class="iframe-container" data-testid="data-copilot-iframe-container"></div>
+</p-drawer>

apps/lfx-one/src/app/shared/components/data-copilot/data-copilot.component.scss

@@ -0,0 +1,10 @@
+// Copyright The Linux Foundation and each contributor to LFX.
+// SPDX-License-Identifier: MIT
+
+.iframe-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}

apps/lfx-one/src/app/shared/components/data-copilot/data-copilot.component.ts

@@ -0,0 +1,111 @@
+// Copyright The Linux Foundation and each contributor to LFX.
+// SPDX-License-Identifier: MIT
+
+import { afterNextRender, Component, computed, ElementRef, inject, signal, viewChild } from '@angular/core';
+import { ButtonComponent } from '@app/shared/components/button/button.component';
+import { AccountContextService } from '@app/shared/services/account-context.service';
+import { ProjectContextService } from '@app/shared/services/project-context.service';
+import { DrawerModule } from 'primeng/drawer';
+
+@Component({
+  selector: 'lfx-data-copilot',
+  standalone: true,
+  imports: [DrawerModule, ButtonComponent],
+  templateUrl: './data-copilot.component.html',
+  styleUrl: './data-copilot.component.scss',
+})
+export class DataCopilotComponent {
+  public readonly iframeContainer = viewChild<ElementRef<HTMLDivElement>>('iframeContainer');
+
+  private readonly accountContextService = inject(AccountContextService);
+  private readonly projectContextService = inject(ProjectContextService);
+
+  // Computed values from context services
+  private readonly organizationId = computed(() => this.accountContextService.selectedAccount().accountId);
+  private readonly organizationName = computed(() => this.accountContextService.selectedAccount().accountName);
+  private readonly projectContext = computed(() => this.projectContextService.selectedProject() || this.projectContextService.selectedFoundation());
+  private readonly projectSlug = computed(() => this.projectContext()?.slug || '');
+  private readonly projectName = computed(() => this.projectContext()?.name || '');
+
+  // Drawer visibility control
+  public readonly visible = signal<boolean>(false);
+
+  private iframeCreated = false;
+
+  public constructor() {
+    afterNextRender(() => {
+      // Create iframe only when drawer is visible and hasn't been created yet
+      if (this.visible() && !this.iframeCreated) {
+        this.createIframe();
+      }
+    });
+  }
+
+  /**
+   * Open the drawer
+   */
+  protected openDrawer(): void {
+    this.visible.set(true);
+
+    // Create iframe after drawer opens if not already created
+    if (!this.iframeCreated) {
+      setTimeout(() => this.createIframe(), 100);
+    }
+  }
+
+  /**
+   * Handle drawer visibility change
+   */
+  protected onVisibleChange(isVisible: boolean): void {
+    this.visible.set(isVisible);
+
+    // Destroy iframe when drawer is closed
+    if (!isVisible) {
+      this.destroyIframe();
+    }
+  }
+
+  /**
+   * Destroy the iframe and cleanup resources
+   */
+  private destroyIframe(): void {
+    const container = this.iframeContainer();
+    if (container?.nativeElement) {
+      // Remove all child nodes (iframe)
+      while (container.nativeElement.firstChild) {
+        container.nativeElement.removeChild(container.nativeElement.firstChild);
+      }
+    }
+    this.iframeCreated = false;
+  }
+
+  /**
+   * Create and append the iframe to the container
+   */
+  private createIframe(): void {
+    const container = this.iframeContainer();
+    if (this.iframeCreated || !container?.nativeElement) {
+      return;
+    }
+
+    const iframe = document.createElement('iframe');
+
+    // Construct the iframe src with query parameters
+    const params = new URLSearchParams({
+      organization_id: this.organizationId(),
+      organization_name: this.organizationName(),
+      project_slug: this.projectSlug(),
+      project_name: this.projectName(),
+    });
+
+    iframe.src = `https://lfx-data-copilot.onrender.com/embed?${params.toString()}`;
+    iframe.width = '100%';
+    iframe.height = '100%';
+    iframe.style.border = 'none';
+    iframe.title = 'LFX Data Copilot';
+
+    // Append the iframe to the container
+    container.nativeElement.appendChild(iframe);
+    this.iframeCreated = true;
+  }
+}