1import type { AfterViewInit } from "@angular/core";
2import {
3  ChangeDetectionStrategy,
4  Component,
5  ViewContainerRef,
6  viewChild,
7} from "@angular/core";
8import { CopilotPopup } from "@copilotkit/angular";
9
10import { FeatureHeaderComponent } from "./feature-header.component";
11import {
12  createDynamicComponent,
13  renderDynamicComponent,
14} from "./render-dynamic-component";
15import { ShowcaseChatHostComponent } from "./showcase-chat-host.component";
16
17@Component({
18  selector: "showcase-popup-feature",
19  imports: [FeatureHeaderComponent],
20  changeDetection: ChangeDetectionStrategy.OnPush,
21  host: { class: "feature-page" },
22  template: `
23    <showcase-feature-header />
24    <main class="shell-demo-content" [attr.aria-label]="demoLabel">
25      <section>
26        <p class="feature-eyebrow">Prebuilt surface</p>
27        <h2>Chat from anywhere</h2>
28        <p>The popup stays available while the application remains usable.</p>
29      </section>
30      <ng-container #popupHost />
31    </main>
32  `,
33})
34export class PopupFeatureComponent implements AfterViewInit {
35  protected readonly demoLabel = "Popup chat demonstration";
36  private readonly popupHost = viewChild.required("popupHost", {
37    read: ViewContainerRef,
38  });
39
40  ngAfterViewInit(): void {
41    const popup = createDynamicComponent(this.popupHost(), CopilotPopup);
42    popup.setInput("chatComponent", ShowcaseChatHostComponent);
43    renderDynamicComponent(popup);
44  }
45}
46