1import { ChangeDetectionStrategy, Component } from "@angular/core";
2import { registerRenderActivityMessage } from "@copilotkit/angular";
3import { mcpAppsActivityRendererConfig } from "@copilotkit/angular/mcp-apps";
4
5import { FeatureHeaderComponent } from "../feature-header.component";
6import { ShowcaseChatHostComponent } from "../showcase-chat-host.component";
7import { SHOWCASE_MCP_APPS_PROVIDER } from "./mcp-apps-provider";
8
9@Component({
10  selector: "showcase-mcp-apps-feature",
11  imports: [FeatureHeaderComponent, ShowcaseChatHostComponent],
12  providers: [SHOWCASE_MCP_APPS_PROVIDER],
13  changeDetection: ChangeDetectionStrategy.OnPush,
14  host: { class: "feature-page" },
15  template: `
16    <showcase-feature-header />
17    <main class="generated-ui-feature-page">
18      <section class="chat-surface" aria-label="Angular MCP Apps demonstration">
19        <showcase-chat-host />
20      </section>
21    </main>
22  `,
23})
24export class MCPAppsFeatureComponent {
25  protected readonly demoLabel = "MCP Apps demonstration";
26
27  constructor() {
28    registerRenderActivityMessage(mcpAppsActivityRendererConfig);
29  }
30}
31