Implement activity message rendering (#32)

Author: mme

apps/angular/demo-server/package.json

@@ -8,7 +8,7 @@
     "start": "node --env-file=.env --loader tsx src/index.ts"
   },
   "dependencies": {
-    "@ag-ui/client": "0.0.40-alpha.6",
+    "@ag-ui/client": "0.0.40-alpha.11",
     "@ag-ui/langgraph": "^0.0.11",
     "@copilotkitnext/demo-agents": "workspace:^",
     "@copilotkitnext/runtime": "workspace:^",

apps/angular/storybook/package.json

@@ -9,7 +9,7 @@
     "storybook:build": "ng run storybook-angular:build-storybook"
   },
   "dependencies": {
-    "@ag-ui/client": "0.0.40-alpha.6",
+    "@ag-ui/client": "0.0.40-alpha.11",
     "@angular/animations": "^18.2.0",
     "@angular/common": "^18.2.0",
     "@angular/compiler": "^18.2.0",

apps/angular/storybook/stories/CopilotChatUserMessage.stories.ts

@@ -1,18 +1,14 @@
 import type { Meta, StoryObj } from "@storybook/angular";
 import { moduleMetadata } from "@storybook/angular";
 import { CommonModule } from "@angular/common";
-import {
-  CopilotChatUserMessage,
-  provideCopilotChatLabels,
-  type UserMessage,
-} from "@copilotkitnext/angular";
+import { CopilotChatUserMessage, provideCopilotChatLabels } from "@copilotkitnext/angular";
+import { UserMessage } from "@ag-ui/client";
 
 // Simple default message
 const simpleMessage: UserMessage = {
   id: "simple-user-message",
   content: "Hello! Can you help me build an Angular component?",
   role: "user",
-  timestamp: new Date(),
 };
 
 // Longer user message
@@ -29,7 +25,6 @@ const longMessage: UserMessage = {
 
 Can you help me implement this step by step? I'm particularly struggling with the form validation and state management parts.`,
   role: "user",
-  timestamp: new Date(),
 };
 
 // Code-related user message
@@ -55,15 +50,13 @@ export class UserListComponent {
 
 How can I fix this?`,
   role: "user",
-  timestamp: new Date(),
 };
 
 // Short question
 const shortMessage: UserMessage = {
   id: "short-user-message",
   content: "What's the difference between signals and observables in Angular?",
   role: "user",
-  timestamp: new Date(),
 };
 
 const meta: Meta<CopilotChatUserMessage> = {
@@ -130,7 +123,7 @@ export class ChatComponent {
     role: 'user',
     timestamp: new Date(),
   };
-  
+
   onEditMessage(event: any): void {
     console.log('Edit message:', event);
   }
@@ -179,7 +172,7 @@ Can you help me implement this step by step? I'm particularly struggling with th
     role: 'user',
     timestamp: new Date(),
   };
-  
+
   onEditMessage(event: any): void {
     console.log('Edit message:', event);
   }
@@ -220,7 +213,7 @@ export class ChatComponent {
     role: 'user',
     timestamp: new Date(),
   };
-  
+
   onEditMessage(event: any): void {
     alert('Edit message clicked!');
     console.log('Edit message:', event);
@@ -261,7 +254,7 @@ export class ChatComponent {
     role: 'user',
     timestamp: new Date(),
   };
-  
+
   // No edit handler - edit button won't appear
 }`,
         language: "typescript",
@@ -318,7 +311,7 @@ How can I fix this?\`,
     role: 'user',
     timestamp: new Date(),
   };
-  
+
   onEditMessage(event: any): void {
     alert('Edit code message clicked!');
   }
@@ -359,7 +352,7 @@ export class ChatComponent {
     role: 'user',
     timestamp: new Date(),
   };
-  
+
   onEditMessage(event: any): void {
     console.log('Edit short message clicked!');
   }
@@ -391,7 +384,7 @@ export const WithAdditionalToolbarItems: Story = {
           🔄
         </button>
       </ng-template>
-      
+
       <div style="display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 16px;">
         <div style="width: 100%; max-width: 640px;">
           <copilot-chat-user-message
@@ -429,7 +422,7 @@ import { CopilotChatUserMessage, UserMessage } from '@copilotkitnext/angular';
         🔄
       </button>
     </ng-template>
-    
+
     <copilot-chat-user-message
       [message]="message"
       [additionalToolbarItems]="additionalItems"
@@ -439,22 +432,22 @@ import { CopilotChatUserMessage, UserMessage } from '@copilotkitnext/angular';
 })
 export class ChatComponent {
   @ViewChild('additionalItems') additionalItems!: TemplateRef<any>;
-  
+
   message: UserMessage = {
     id: 'simple-user-message',
     content: 'Hello! Can you help me build an Angular component?',
     role: 'user',
     timestamp: new Date(),
   };
-  
+
   onEditMessage(event: any): void {
     console.log('Edit clicked!');
   }
-  
+
   onCustomAction1(): void {
     alert('Custom button 1 clicked!');
   }
-  
+
   onCustomAction2(): void {
     alert('Custom button 2 clicked!');
   }
@@ -482,7 +475,7 @@ export const CustomAppearance: Story = {
           {{ content }}
         </div>
       </ng-template>
-      
+
       <ng-template #toolbar>
         <div class="w-full bg-transparent flex items-center justify-end -mr-[5px] mt-[8px] invisible group-hover:visible">
           <div class="flex items-center gap-1 justify-end">
@@ -499,7 +492,7 @@ export const CustomAppearance: Story = {
           </div>
         </div>
       </ng-template>
-      
+
       <div style="display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 16px;">
         <div style="width: 100%; max-width: 640px;">
           <copilot-chat-user-message
@@ -522,8 +515,7 @@ export const CustomComponents: Story = {
   args: {
     message: simpleMessage,
     editMessage: () => console.log("Edit clicked!"),
-    inputClass:
-      "bg-gradient-to-r from-purple-100 to-pink-100 rounded-xl p-4 shadow-sm",
+    inputClass: "bg-gradient-to-r from-purple-100 to-pink-100 rounded-xl p-4 shadow-sm",
   },
   render: () => ({
     props: {
@@ -536,7 +528,7 @@ export const CustomComponents: Story = {
           💬 {{ content }}
         </div>
       </ng-template>
-      
+
       <div style="display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 16px;">
         <div style="width: 100%; max-width: 640px;">
           <copilot-chat-user-message
@@ -559,30 +551,26 @@ export const WithBranchNavigation: Story = {
   args: {
     message: {
       id: "branch-message",
-      content:
-        "This message has multiple branches. You can navigate between them using the branch controls.",
+      content: "This message has multiple branches. You can navigate between them using the branch controls.",
       role: "user",
     },
     editMessage: () => console.log("Edit clicked!"),
     branchIndex: 2,
     numberOfBranches: 3,
-    switchToBranch: ({ branchIndex }) =>
-      console.log(`Switching to branch ${branchIndex + 1}`),
+    switchToBranch: ({ branchIndex }) => console.log(`Switching to branch ${branchIndex + 1}`),
   },
 };
 
 export const WithManyBranches: Story = {
   args: {
     message: {
       id: "many-branches-message",
-      content:
-        "This is branch 5 of 10. Use the navigation arrows to explore different variations of this message.",
+      content: "This is branch 5 of 10. Use the navigation arrows to explore different variations of this message.",
       role: "user",
     },
     editMessage: () => console.log("Edit clicked!"),
     branchIndex: 4,
     numberOfBranches: 10,
-    switchToBranch: ({ branchIndex }) =>
-      alert(`Would switch to branch ${branchIndex + 1} of 10`),
+    switchToBranch: ({ branchIndex }) => alert(`Would switch to branch ${branchIndex + 1} of 10`),
   },
 };

apps/react/demo/package.json

@@ -9,7 +9,9 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@ag-ui/client": "0.0.40-alpha.6",
+    "@ag-ui/client": "0.0.40-alpha.11",
+    "@ag-ui/a2a": "0.0.5",
+    "@a2a-js/sdk": "^0.2.2",
     "@copilotkitnext/agent": "workspace:*",
     "@copilotkitnext/core": "workspace:*",
     "@copilotkitnext/react": "workspace:*",

apps/react/demo/src/app/api/copilotkit/[[...slug]]/route.ts

@@ -1,6 +1,8 @@
 import { CopilotRuntime, createCopilotEndpoint, InMemoryAgentRunner } from "@copilotkitnext/runtime";
 import { handle } from "hono/vercel";
 import { BasicAgent } from "@copilotkitnext/agent";
+import { A2AAgent } from "@ag-ui/a2a";
+import { A2AClient } from "@a2a-js/sdk/client";
 
 // Determine which model to use based on available API keys
 const getModelConfig = () => {
@@ -15,11 +17,14 @@ const getModelConfig = () => {
   return "openai/gpt-4o";
 };
 
-const agent = new BasicAgent({
-  model: getModelConfig(),
-  prompt: "You are a helpful AI assistant.",
-  temperature: 0.7,
-});
+// const agent = new BasicAgent({
+//   model: getModelConfig(),
+//   prompt: "You are a helpful AI assistant.",
+//   temperature: 0.7,
+// });
+//
+const a2aClient = new A2AClient("http://localhost:10002");
+const agent = new A2AAgent({ a2aClient, debug: true });
 
 const runtime = new CopilotRuntime({
   agents: {

apps/react/demo/src/app/page.tsx

@@ -39,7 +39,20 @@ export default function Home() {
   });
 
   return (
-    <CopilotKitProvider runtimeUrl="/api/copilotkit" renderToolCalls={[wildcardRenderer]} showDevConsole="auto">
+    <CopilotKitProvider
+      runtimeUrl="/api/copilotkit"
+      renderToolCalls={[wildcardRenderer]}
+      showDevConsole="auto"
+      renderActivityMessages={[
+        {
+          activityType: "a2ui-surface",
+          content: z.any(),
+          render: ({ content }) => {
+            return <pre>{JSON.stringify(content, null, 2)}</pre>;
+          },
+        },
+      ]}
+    >
       <div style={{ height: "100vh", margin: 0, padding: 0, overflow: "hidden" }}>
         <Chat />
       </div>
@@ -48,9 +61,9 @@ export default function Home() {
 }
 
 function Chat() {
-  useConfigureSuggestions({
-    instructions: "Suggest helpful next actions",
-  });
+  //useConfigureSuggestions({
+  //  instructions: "Suggest helpful next actions",
+  //});
 
   // useConfigureSuggestions({
   //   suggestions: [

packages/agent/package.json

@@ -36,7 +36,7 @@
     "vitest": "^3.0.5"
   },
   "dependencies": {
-    "@ag-ui/client": "0.0.40-alpha.6",
+    "@ag-ui/client": "0.0.40-alpha.11",
     "@ai-sdk/anthropic": "^2.0.22",
     "@ai-sdk/google": "^2.0.17",
     "@ai-sdk/openai": "^2.0.42",

packages/agent/src/index.ts

@@ -232,6 +232,34 @@ export function defineTool<TParameters extends z.ZodTypeAny>(config: {
   };
 }
 
+type AGUIUserMessage = Extract<Message, { role: "user" }>;
+
+function flattenUserMessageContent(content?: AGUIUserMessage["content"]): string {
+  if (!content) {
+    return "";
+  }
+
+  if (typeof content === "string") {
+    return content;
+  }
+
+  return content
+    .map((part) => {
+      if (
+        part &&
+        typeof part === "object" &&
+        "type" in part &&
+        (part as { type?: unknown }).type === "text" &&
+        typeof (part as { text?: unknown }).text === "string"
+      ) {
+        return (part as { text: string }).text;
+      }
+      return "";
+    })
+    .filter((text) => text.length > 0)
+    .join("\n");
+}
+
 /**
  * Converts AG-UI messages to Vercel AI SDK ModelMessage format
  */
@@ -260,7 +288,7 @@ export function convertMessagesToVercelAISDKMessages(messages: Message[]): Model
     } else if (message.role === "user") {
       const userMsg: UserModelMessage = {
         role: "user",
-        content: message.content || "",
+        content: flattenUserMessageContent(message.content),
       };
       result.push(userMsg);
     } else if (message.role === "tool") {

packages/angular/package.json

@@ -31,8 +31,8 @@
     "test:watch": "vitest --watch"
   },
   "dependencies": {
-    "@ag-ui/client": "0.0.40-alpha.6",
-    "@ag-ui/core": "0.0.40-alpha.6",
+    "@ag-ui/client": "0.0.40-alpha.11",
+    "@ag-ui/core": "0.0.40-alpha.11",
     "@copilotkitnext/core": "workspace:*",
     "@copilotkitnext/shared": "workspace:*",
     "clsx": "^2.1.1",