1import { ChangeDetectionStrategy, Component, inject } from "@angular/core";
2import { ActivatedRoute } from "@angular/router";
3import {
4 registerRenderActivityMessage,
5 registerRenderToolCall,
6} from "@copilotkit/angular";
7import { z } from "zod";
8
9import { FeatureHeaderComponent } from "../feature-header.component";
10import { ShowcaseChatHostComponent } from "../showcase-chat-host.component";
11import {
12 asBrowseRenderer,
13 backgroundTaskActivityRendererConfig,
14 BrowseResultsToolCard,
15 observationalMemoryActivityRendererConfig,
16} from "./mastra-cards";
17
18@Component({
19 selector: "showcase-mastra-feature",
20 imports: [FeatureHeaderComponent, ShowcaseChatHostComponent],
21 changeDetection: ChangeDetectionStrategy.OnPush,
22 host: { class: "feature-page" },
23 template: `
24 <showcase-feature-header />
25 <main class="mastra-feature-page">
26 <section class="chat-surface" aria-label="Angular Mastra demonstration">
27 <showcase-chat-host />
28 </section>
29 </main>
30 `,
31})
32export class MastraFeatureComponent {
33 private readonly feature =
34 (inject(ActivatedRoute).snapshot.data["feature"] as string | undefined) ??
35 "unknown";
36
37 // region:mastra-activity-registration
38 constructor() {
39 switch (this.feature) {
40 case "background-agents":
41 registerRenderActivityMessage(backgroundTaskActivityRendererConfig);
42 break;
43 case "observational-memory":
44 registerRenderActivityMessage(
45 observationalMemoryActivityRendererConfig,
46 );
47 break;
48 case "browser-use":
49 registerRenderToolCall({
50 name: "browse_web",
51 args: z.object({ task: z.string() }),
52 component: asBrowseRenderer(BrowseResultsToolCard),
53 });
54 break;
55 }
56 }
57 // endregion:mastra-activity-registration
58}
59