1import type { AfterViewInit } from "@angular/core";
2import {
3  ChangeDetectionStrategy,
4  Component,
5  ViewContainerRef,
6  viewChild,
7} from "@angular/core";
8import { CopilotSidebar } 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-sidebar-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>A docked Copilot</h2>
28        <p>The application and assistant remain visible side by side.</p>
29      </section>
30      <ng-container #sidebarHost />
31    </main>
32  `,
33})
34export class SidebarFeatureComponent implements AfterViewInit {
35  protected readonly demoLabel = "Sidebar chat demonstration";
36  private readonly sidebarHost = viewChild.required("sidebarHost", {
37    read: ViewContainerRef,
38  });
39
40  ngAfterViewInit(): void {
41    const sidebar = createDynamicComponent(this.sidebarHost(), CopilotSidebar);
42    sidebar.setInput("chatComponent", ShowcaseChatHostComponent);
43    renderDynamicComponent(sidebar);
44  }
45}
46