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
b203d8f70
CopilotKit Showcase