1import {
2  ChangeDetectionStrategy,
3  Component,
4  computed,
5  inject,
6} from "@angular/core";
7import { ActivatedRoute } from "@angular/router";
8import { integrationId } from "../runtime-context";
9import { ShowcaseChatHostComponent } from "./showcase-chat-host.component";
10
11@Component({
12  selector: "showcase-chat-feature",
13  imports: [ShowcaseChatHostComponent],
14  changeDetection: ChangeDetectionStrategy.OnPush,
15  host: { class: "feature-page" },
16  template: `
17    <header class="feature-header">
18      <div>
19        <h1>{{ featureName() }}</h1>
20        <p>{{ cellId() }}</p>
21      </div>
22      <span class="framework-badge">Angular</span>
23    </header>
24    <main class="chat-surface" aria-label="CopilotKit Angular demo">
25      <showcase-chat-host />
26    </main>
27  `,
28})
29export class ChatFeatureComponent {
30  private readonly route = inject(ActivatedRoute);
31  protected readonly integration = integrationId();
32  protected readonly feature =
33    (this.route.snapshot.data["feature"] as string | undefined) ?? "unknown";
34  protected readonly featureName = computed(() =>
35    this.feature
36      .split("-")
37      .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
38      .join(" "),
39  );
40  protected readonly cellId = computed(
41    () => `angular/${this.integration}/${this.feature}`,
42  );
43}
44