Updates made to allow Orchestrator UI to display which A2A Agent was in charge of putting together the reponse message.

See https://screenshot.googleplex.com/7FX9rvH4sEpezdq for demo.

Author: sugoi-yuzuru

angular/projects/a2a-chat-canvas/src/lib/services/chat-service.ts

@@ -146,11 +146,17 @@ export class ChatService {
       (part): UiMessageContent => convertPartToUiMessageContent(part, this.partResolvers),
     );
 
+    const adkAuthor = response.result.metadata?.['adk_author'];
+    const additionalMetadata = adkAuthor ? {'adk_author': adkAuthor} : null;
+    
     this.updateLastMessage((msg) => ({
       ...msg,
       contents: [...msg.contents, ...newContents],
       status: 'completed',
       lastUpdated: new Date().toISOString(),
+      ...(additionalMetadata 
+        ? { metadata: {...msg.metadata, ...additionalMetadata} }
+        : {}),
     }));
 
     // Let A2UI Renderer process the A2UI data parts in agent response.

angular/projects/a2a-chat-canvas/src/lib/types/ui-message.ts

@@ -19,6 +19,10 @@ export interface UiMessage {
   readonly created: string;
   /** ISO timestamp of when the message was last updated. */
   readonly lastUpdated: string;
+  /** Optional metadata for auxiliar data related to the message. */
+  readonly metadata?: {
+    [k: string]: unknown;
+  }
 }
 
 /**

angular/projects/orchestrator/src/message-decorator/demo-message-decorator.html

@@ -17,6 +17,11 @@
 <ng-container *ngTemplateOutlet="coreContentTemplateRef()"></ng-container>
 
 @if (message().role.type === 'ui_agent' && message().status === 'completed') {
+  @if (agentName()) {
+    <div class="agent-credit">
+      Response generated by {{agentName()}}
+    </div>
+  }
   <div class="message-actions">
     <button matIconButton>
       <mat-icon fontSet="material-icons-outlined">thumb_up</mat-icon>

angular/projects/orchestrator/src/message-decorator/demo-message-decorator.scss

@@ -12,6 +12,13 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+.agent-credit {
+  display: flex;
+  flex-direction: row;
+  font-size: 0.8rem;
+  color: var(--n-60);
+}
+
 .message-actions {
   display: flex;
   flex-direction: row;

angular/projects/orchestrator/src/message-decorator/demo-message-decorator.ts

@@ -20,7 +20,7 @@ import {
 } from '@a2a_chat_canvas/components/chat/chat-history/message-decorator/types';
 import { UiMessage } from '@a2a_chat_canvas/types/ui-message'; // Assuming path based on context
 import { NgTemplateOutlet } from '@angular/common';
-import { Component, input, TemplateRef } from '@angular/core';
+import { Component, computed, input, TemplateRef, Signal } from '@angular/core';
 import { MatIconButton } from '@angular/material/button';
 import { MatIcon } from '@angular/material/icon';
 
@@ -31,9 +31,18 @@ import { MatIcon } from '@angular/material/icon';
   imports: [MatIcon, MatIconButton, NgTemplateOutlet],
 })
 export class DemoMessageDecoratorComponent implements MessageDecoratorComponent {
-  readonly message = input.required<UiMessage>();
+  private readonly adkAuthorToAgentName: Record<string, string> = {
+    'orchestrator_agent': 'Orchestrator Agent',
+    'Ecommerce_Dashboard_Agent': 'Ecommerce Dashboard Agent',
+    'Restaurant_Agent': 'Restaurant Agent',
+    'Contact_Lookup_Agent': 'Contact Lookup Agent',
+  } as const;
 
+  readonly message = input.required<UiMessage>();  
   readonly coreContentTemplateRef = input.required<TemplateRef<unknown>>();
+
+  readonly agentName: Signal<string | null> = computed(() => this.adkAuthor() ? this.adkAuthorToAgentName[this.adkAuthor()!] : null);
+  private readonly adkAuthor: Signal<string | null> = computed(() => this.message().metadata?.['adk_author'] as string | null);
 }
 
 export const demoMessageDecorator: MessageDecorator = async () => {