feat: Update Orchestrator client app to display smartchips on welcome screen. (#417)

Additional changes include
 - Marking a2ui python library pyproject.toml as editable=true so that local changes are applied to the agents without extra uv manipulation
 - Add missing imports to orchestrator agents code.

Author: sugoi-yuzuru

samples/agent/adk/orchestrator/agent.py

@@ -15,7 +15,6 @@
 import json
 import logging
 import os
-from typing import List
 from a2a.client import A2ACardResolver
 from a2a.extensions.common import HTTP_EXTENSION_HEADER
 from google.adk.models.lite_llm import LiteLlm
@@ -30,10 +29,11 @@
 from google.adk.models.llm_request import LlmRequest
 from google.adk.models.llm_response import LlmResponse
 from subagent_route_manager import SubagentRouteManager
-from typing import override
+from typing import Any, override, List
 from a2a.types import TransportProtocol as A2ATransport
 
-from a2a.client.middleware import ClientCallInterceptor
+from a2a.client.client import Consumer, Client
+from a2a.client.middleware import ClientCallContext, ClientCallInterceptor
 from a2a.client.client import ClientConfig as A2AClientConfig
 from a2a.client.client_factory import ClientFactory as A2AClientFactory
 from a2ui.a2ui_extension import is_a2ui_part, A2UI_CLIENT_CAPABILITIES_KEY, A2UI_EXTENSION_URI, AGENT_EXTENSION_SUPPORTED_CATALOG_IDS_KEY, AGENT_EXTENSION_ACCEPTS_INLINE_CATALOGS_KEY, get_a2ui_agent_extension

samples/agent/adk/orchestrator/agent_executor.py

@@ -26,6 +26,7 @@
 from google.adk.memory.in_memory_memory_service import InMemoryMemoryService
 from google.adk.runners import Runner
 from google.adk.sessions import InMemorySessionService
+from google.adk.a2a.converters.request_converter import AgentRunRequest
 from google.adk.a2a.executor.a2a_agent_executor import (
     A2aAgentExecutorConfig,
     A2aAgentExecutor,

samples/agent/adk/pyproject.toml

@@ -6,5 +6,5 @@ default = true
 members = ["contact_lookup", "orchestrator", "restaurant_finder", "rizzcharts"]
 
 [tool.uv.sources]
-a2ui = { path = "../../../a2a_agents/python/a2ui_extension" }
+a2ui = { path = "../../../a2a_agents/python/a2ui_extension", editable = true }
 

samples/agent/adk/rizzcharts/pyproject.toml

@@ -30,4 +30,4 @@ url = "https://pypi.org/simple"
 default = true
 
 [tool.uv.sources]
-a2ui = { path = "../../../../a2a_agents/python/a2ui_extension" }
+a2ui = { path = "../../../../a2a_agents/python/a2ui_extension", editable = true }

samples/agent/adk/uv.lock

@@ -15,7 +15,36 @@
  -->
 
 <main class="main">
-  <a2a-chat-canvas [messageDecorator]="demoMessageDecorator"></a2a-chat-canvas>
+  <a2a-chat-canvas [messageDecorator]="demoMessageDecorator" [emptyHistoryTemplate]="welcomeMessage"></a2a-chat-canvas>
 </main>
 
+<ng-template #welcomeMessage>
+  <div class="empty-history">
+      <div class="agent-header">
+        <div class="agent-header-part agent-name">
+          <strong>{{ agentName() }}</strong>
+        </div>
+      </div>
+      <br />
+
+      <p class="empty-history-text">
+        I help you orchestrate tasks across multiple agents.
+      </p>
+      <div class="suggestion-chips">
+        <button mat-stroked-button class="chip" (click)="sendMessage('List Chinese restaurants in New York')">
+          <span class="material-icons-outlined">restaurant</span>
+          List restaurants
+        </button>
+        <button mat-stroked-button class="chip" (click)="sendMessage('List all contacts')">
+          <span class="material-icons-outlined">contacts</span>
+          List contacts
+        </button>
+        <button mat-stroked-button class="chip" (click)="sendMessage('Show me charts')">
+          <span class="material-icons-outlined">analytics</span>
+          Show me charts
+        </button>
+      </div>
+  </div>
+</ng-template>
+
 <router-outlet />

samples/client/angular/projects/orchestrator/src/app/app.html

@@ -14,4 +14,67 @@
 
 main {
     height: 100vh;
+}
+
+.empty-history {
+  display: block;
+  padding-bottom: 8rem;
+  padding-top: 2rem;
+  text-align: center;
+}
+
+.empty-history-text {
+  margin: 0;
+  font: var(--mat-sys-display-small);
+  margin-bottom: 2rem;
+}
+
+.agent-header {
+  display: flex;
+  align-items: center;
+  flex-flow: row wrap;
+  justify-content: center;
+  margin-bottom: 1rem;
+}
+
+.agent-header-part {
+  margin-inline-end: 1.25rem;
+  margin-block: 8px;
+  font-size: 1.5rem;
+}
+
+.agent-name {
+  background: linear-gradient(
+    90deg,
+    #217bfe 28.03%,
+    #078efb 49.56%,
+    #ac87eb 71.1%
+  );
+  background-clip: text;
+  color: transparent;
+}
+
+.suggestion-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  justify-content: center;
+  margin-top: 32px;
+}
+
+.chip {
+  // Override Material button styles to look like a chip
+    border-radius: 100px !important; // Force pill shape
+    padding: 10px 16px !important;
+    display: inline-flex !important;
+    align-items: center !important;
+    height: auto !important;
+    line-height: 25px !important; // Match icon height
+  .material-icons-outlined {
+    font-size: 20px;
+    margin-right: 8px;
+      line-height: 1; // Prevent icon from affecting line height
+      position: relative;
+      top: 4px; // Move icon down slightly to match text
+  }
 }

samples/client/angular/projects/orchestrator/src/app/app.scss

@@ -15,8 +15,10 @@
  */
 
 import { A2aChatCanvas } from '@a2a_chat_canvas/a2a-chat-canvas';
+import { ChatService } from '@a2a_chat_canvas/services/chat-service';
 import { DOCUMENT } from '@angular/common';
-import { Component, Inject, OnInit, Renderer2 } from '@angular/core';
+import { Component, Inject, OnInit, Renderer2, inject, signal } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
 import { RouterOutlet } from '@angular/router';
 import { environment } from '../environments/environment';
 import { demoMessageDecorator } from '../message-decorator/demo-message-decorator';
@@ -25,10 +27,12 @@ import { demoMessageDecorator } from '../message-decorator/demo-message-decorato
   selector: 'app-root',
   templateUrl: './app.html',
   styleUrl: './app.scss',
-  imports: [A2aChatCanvas, RouterOutlet],
+  imports: [A2aChatCanvas, RouterOutlet, MatButtonModule],
 })
 export class App implements OnInit {
   protected demoMessageDecorator = demoMessageDecorator;
+  protected readonly agentName = signal('Orchestrator Agent');
+  private readonly chatService = inject(ChatService);
 
   constructor(
     private _renderer2: Renderer2,
@@ -42,4 +46,8 @@ export class App implements OnInit {
     script.defer = true;
     this._renderer2.appendChild(this._document.body, script);
   }
+
+  sendMessage(text: string) {
+    this.chatService.sendMessage(text);
+  }
 }