feat(angular): add CopilotActivity for standalone activity rendering by manfredsteyer · Pull Request #6033 · CopilotKit/CopilotKit

manfredsteyer · 2026-07-17T15:43:13Z

There is currently no dedicated way to render a single activity message in headless mode. Building it yourself means duplicating the private resolution logic of CopilotChatMessageView.

Tool calls already have a public component for this (RenderToolCalls), activities do not. This is an asymmetry in the Angular API and a gap compared to React's useRenderActivityMessage().

This PR adds CopilotActivity (<copilot-activity [message] [agentId]>), a standalone host for a single activity message. CopilotChatMessageView now delegates to it, so there is one implementation for the activity role. No behavior change. The renderer resolution moves into an internal pickActivityRenderer that is not exported.

Summary by CodeRabbit

New Features
- Added the public CopilotActivity Angular component for rendering individual activity messages.
- Supports activity renderer selection by activity type, agent scope, global registration, and wildcard fallback.
- Exposes message and optional agentId inputs for custom activity surfaces.
Improvements
- Updated CopilotChatMessageView to use CopilotActivity for activity rendering.
Documentation
- Added usage documentation and clarified activity rendering behavior.

Rendering activity messages outside of CopilotChatMessageView (custom chat shells, dashboards, headless setups) currently requires instantiating the whole message view or copying its private resolution logic. Tool calls already have a public component for this (RenderToolCalls), activities do not. This adds CopilotActivity (<copilot-activity [message] [agentId]>), a standalone host for a single activity message. CopilotChatMessageView now delegates to it, so there is one implementation for the activity role. No behavior change. The renderer resolution moves into an internal pickActivityRenderer that is not exported. Co-Authored-By: Claude Fable 5 <[email protected]>

rainerhahnekamp

Serwas @manfredsteyer, I did the review fully manually, so there are a few. comments I've left. we'll use the information for the review to come up with specific review skills in the future.

/cc @wolfmanfx

rainerhahnekamp · 2026-09-02T14:54:24Z

+
+    const parseResult = renderer.content.safeParse(message.content);
+    if (parseResult.success === false) {
+      console.warn(


I don't know. In Angular we usually log in ngDevMode. I'll leave that to your decision @manfredsteyer

If it's fine for you, I would stick with it because ngDevMode is currently not used in the code base and because we already have other places where a warning is print to the console.

rainerhahnekamp · 2026-09-02T14:56:36Z

+ * Kept internal for now (not part of the public API); it can be exposed later
+ * without a breaking change if there is demand for a headless resolver.
+ */
+export function pickActivityRenderer(


that could actually be a private function of CopilotKitActivity.

This was indeed the case before my changes. The reason for this change is mainly symmetry with the counter part pickToolCallHandler. Do you want it to be changed back to CopilotKitActivity anyway?

rainerhahnekamp · 2026-09-02T14:57:56Z

+ * without a breaking change if there is demand for a headless resolver.
+ */
+export function pickActivityRenderer(
+  options: PickActivityRendererOptions,


i am not a big fan of having an explicit type for three paramters. it would be more readable if that function just has three parameters.

Also this was done for symmetry with pickToolCallHandler. Do you want it to be still changed back?

rainerhahnekamp · 2026-09-02T15:30:15Z

+  `,
+})
+export class CopilotActivity {
+  readonly #copilotKit = inject(CopilotKit);


i think with the upcoming private in Angular 22,1, we should not use # anymore. Just private. angular/angular#70188

@rainerhahnekamp @manfredsteyer

angular/angular#70188 (comment)

rainerhahnekamp · 2026-09-02T15:51:15Z

+  imports: [NgComponentOutlet],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    @let render = resolveRender(message());


I am not really happy with calling a function here. Why not use a computed?

100% agree.

rainerhahnekamp · 2026-09-02T16:42:00Z

+
+@Component({
+  selector: "secondary-activity-renderer",
+  changeDetection: ChangeDetectionStrategy.Eager,


rainerhahnekamp · 2026-09-02T16:42:08Z

+
+@Component({
+  selector: "wildcard-activity-renderer",
+  changeDetection: ChangeDetectionStrategy.Eager,


rainerhahnekamp · 2026-09-02T16:44:01Z

+    expect(rendered?.getAttribute("data-content")).toBe(
+      JSON.stringify({ operations: [] }),
+    );
+    expect(getAgent).toHaveBeenCalledWith("demo-button");


is that necessary? i think the other assertions must failed if the agent wasn't called.

rainerhahnekamp · 2026-09-02T16:45:14Z

+  ...overrides,
+});
+
+describe("CopilotActivity", () => {


Test which could be added

once the Component is using a computed, we could also add a test where an agentid switches.

multiple messages and how the rendering changes.

rainerhahnekamp · 2026-09-02T17:21:56Z

+  ...overrides,
+});
+
+describe("pickActivityRenderer", () => {


i'd say pickRenderer is an implementation detail of CopilotActivity and should therefore be tested there. In fact, we could do specific picking tests in a nested describe.

…opilotActivity.mdx Co-authored-by: Rainer Hahnekamp <[email protected]>

manfredsteyer · 2026-09-04T21:23:21Z

Thanks @rainerhahnekamp for your review. Please see my answers above.

rainerhahnekamp · 2026-09-06T14:28:43Z

Serwas @manfredsteyer, yeah, so I fully understand that you were following the existing coding standards, but here's the thing: We don't fully see the existing codebase as "Angularized," and we won't have the resources to do a one-time "Angularization" project. Instead, we want to do this incrementally, and we have to start somewhere.

So here's what we can do. We can merge your PR as-is. Its public API is perfeclty fine nothing will change there. The new component will be available with the next Angular release. @wolfmanfx or me would then apply the mentioned comments in a separate PR.

In the meantime, we two could then continue with #6075

manfredsteyer · 2026-09-06T17:37:31Z

@rainerhahnekamp Sounds great. And I’ll keep these comments regarding modern Angular (OnPush, ...) in mind for future PRs.

rainerhahnekamp · 2026-09-06T19:53:11Z

Yeah, we should probably also collect all the reviews and make a code guidelines skill out of them. Then the models do it automatically.

rainerhahnekamp · 2026-09-06T19:54:19Z

Danke Manfred!

coderabbitai · 2026-09-06T19:55:57Z

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Team

Run ID: c09c2813-7584-4fe1-94d3-05c2de7369d1

📥 Commits

Reviewing files that changed from the base of the PR and between b5727e4 and 0d46ef5.

📒 Files selected for processing (14)

.changeset/angular-copilot-activity.md
packages/angular/API.md
packages/angular/src/lib/components/activity/__tests__/activity-renderer-stubs.ts
packages/angular/src/lib/components/activity/__tests__/copilot-activity.spec.ts
packages/angular/src/lib/components/activity/__tests__/pick-activity-renderer.spec.ts
packages/angular/src/lib/components/activity/copilot-activity.ts
packages/angular/src/lib/components/activity/pick-activity-renderer.ts
packages/angular/src/lib/components/chat/__tests__/copilot-chat-message-view.component.spec.ts
packages/angular/src/lib/components/chat/__tests__/dummy-activity-renderer.component.ts
packages/angular/src/lib/components/chat/__tests__/fallback-activity-renderer.component.ts
packages/angular/src/lib/components/chat/copilot-chat-message-view.ts
packages/angular/src/public-api.ts
showcase/shell-docs/src/content/reference/angular/components/CopilotActivity.mdx
showcase/shell-docs/src/content/reference/angular/components/CopilotChatMessageView.mdx

📝 Walkthrough

Walkthrough

Adds standalone CopilotActivity rendering for Angular. It selects activity renderers by type and agent scope, validates content, supports wildcard fallbacks, routes chat activity messages through the component, and exposes the component through package exports and documentation.

Changes

Angular activity rendering

Layer / File(s)	Summary
Renderer selection and precedence `packages/angular/src/lib/components/activity/pick-activity-renderer.ts`, `packages/angular/src/lib/components/activity/__tests__/pick-activity-renderer.spec.ts`	Adds renderer selection for exact, agent-scoped, global, wildcard, and unmatched activity types.
CopilotActivity component and validation `packages/angular/src/lib/components/activity/copilot-activity.ts`, `packages/angular/src/lib/components/activity/__tests__/*`	Adds the standalone component, renderer input wiring, agent lookup, schema validation, warning handling, dynamic rendering, and renderer test stubs.
Chat integration and public surface `packages/angular/src/lib/components/chat/`, `packages/angular/src/public-api.ts`, `packages/angular/API.md`, `showcase/shell-docs/src/content/reference/angular/components/`, `.changeset/angular-copilot-activity.md`	Routes chat activity messages through `CopilotActivity`, updates integration tests, exports the component, adds documentation, and declares a minor package release.

Estimated code review effort: 3 (Moderate) | ~25 minutes

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands.}

manfredsteyer · 2026-09-07T07:34:12Z

I thank you, @rainerhahnekamp

manfredsteyer requested review from jpr5, marthakelly, mme, ranst91 and tylerslaton as code owners July 17, 2026 15:43

manfredsteyer force-pushed the feat/angular-copilot-activity branch from ff503eb to bda5c41 Compare August 27, 2026 13:24

manfredsteyer requested review from rainerhahnekamp and wolfmanfx as code owners August 27, 2026 13:24

manfredsteyer changed the title ~~feat(angular): extract activity rendering into standalone CopilotActivity component~~ feat(angular): add CopilotActivity for standalone activity rendering Aug 27, 2026

rainerhahnekamp force-pushed the feat/angular-copilot-activity branch from a1d079e to bda5c41 Compare August 27, 2026 14:06

rainerhahnekamp requested changes Sep 2, 2026

View reviewed changes

Update showcase/shell-docs/src/content/reference/angular/components/C…

603bdb4

…opilotActivity.mdx Co-authored-by: Rainer Hahnekamp <[email protected]>

Merge branch 'main' into feat/angular-copilot-activity

0d46ef5

rainerhahnekamp enabled auto-merge September 6, 2026 19:53

rainerhahnekamp approved these changes Sep 6, 2026

View reviewed changes

rainerhahnekamp merged commit 0782606 into CopilotKit:main Sep 6, 2026
1 check was pending

rainerhahnekamp mentioned this pull request Sep 6, 2026

refactor(angular): apply CopilotActivity review feedback #6929

Open

Conversation

manfredsteyer commented Jul 17, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

rainerhahnekamp left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

manfredsteyer commented Sep 4, 2026

Uh oh!

rainerhahnekamp commented Sep 6, 2026

Uh oh!

manfredsteyer commented Sep 6, 2026

Uh oh!

rainerhahnekamp commented Sep 6, 2026

Uh oh!

Uh oh!

rainerhahnekamp commented Sep 6, 2026

Uh oh!

coderabbitai Bot commented Sep 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review failed

Walkthrough

Changes

Uh oh!

manfredsteyer commented Sep 7, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

manfredsteyer commented Jul 17, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Sep 6, 2026 •

edited

Loading