Skip to content

Commit 2d069d3

Browse files
dmandardmandar
authored
Refactor: Universal App Shell, Theming, Profile Pic Fix, and Shell Re… (#242)
* Refactor: Universal App Shell, Theming, Profile Pic Fix, and Shell Rename * Add reference for styling levers in theming.md
1 parent 9875d4b commit 2d069d3

File tree

38 files changed

+1815
-881
lines changed

38 files changed

+1815
-881
lines changed

‎a2a_agents/python/adk/samples/contact_lookup/__main__.py‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ class MissingAPIKeyError(Exception):
3939

4040
@click.command()
4141
@click.option("--host", default="localhost")
42-
@click.option("--port", default=10002)
42+
@click.option("--port", default=10003)
4343
def main(host, port):
4444
try:
4545
# Check for API key only if Vertex AI is not configured

‎a2a_agents/python/adk/samples/contact_lookup/a2ui_examples.py‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@
6767
{ "beginRendering": { "surfaceId":"contact-card","root":"main_card"} },
6868
{ "surfaceUpdate": { "surfaceId":"contact-card",
6969
"components":[
70-
{ "id": "profile_image", "component": { "Image": { "url": { "path": "imageUrl"} } } } ,
70+
{ "id": "profile_image", "component": { "Image": { "url": { "path": "imageUrl"}, "usageHint": "avatar", "fit": "cover" } } } ,
7171
{ "id": "user_heading", "weight": 1, "component": { "Text": { "text": { "path": "name"} , "usageHint": "h2"} } } ,
7272
{ "id": "description_text_1", "component": { "Text": { "text": { "path": "title"} } } } ,
7373
{ "id": "description_text_2", "component": { "Text": { "text": { "path": "team"} } } } ,

‎a2a_agents/python/adk/samples/restaurant_finder/a2ui_examples.py‎

Lines changed: 186 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,186 @@
1+
# Copyright 2025 Google LLC
2+
#
3+
# Licensed under the Apache License, Version 2.0 (the "License");
4+
# you may not use this file except in compliance with the License.
5+
# You may obtain a copy of the License at
6+
#
7+
# https://www.apache.org/licenses/LICENSE-2.0
8+
#
9+
# Unless required by applicable law or agreed to in writing, software
10+
# distributed under the License is distributed on an "AS IS" BASIS,
11+
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12+
# See the License for the specific language governing permissions and
13+
# limitations under the License.
14+
15+
RESTAURANT_UI_EXAMPLES = """
16+
---BEGIN SINGLE_COLUMN_LIST_EXAMPLE---
17+
[
18+
{{ "beginRendering": {{ "surfaceId": "default", "root": "root-column", "styles": {{ "primaryColor": "#FF0000", "font": "Roboto" }} }} }},
19+
{{ "surfaceUpdate": {{
20+
"surfaceId": "default",
21+
"components": [
22+
{{ "id": "root-column", "component": {{ "Column": {{ "children": {{ "explicitList": ["title-heading", "item-list"] }} }} }} }},
23+
{{ "id": "title-heading", "component": {{ "Text": {{ "usageHint": "h1", "text": {{ "path": "title" }} }} }} }},
24+
{{ "id": "item-list", "component": {{ "List": {{ "direction": "vertical", "children": {{ "template": {{ "componentId": "item-card-template", "dataBinding": "/items" }} }} }} }} }},
25+
{{ "id": "item-card-template", "component": {{ "Card": {{ "child": "card-layout" }} }} }},
26+
{{ "id": "card-layout", "component": {{ "Row": {{ "children": {{ "explicitList": ["template-image", "card-details"] }} }} }} }},
27+
{{ "id": "template-image", weight: 1, "component": {{ "Image": {{ "url": {{ "path": "imageUrl" }} }} }} }},
28+
{{ "id": "card-details", weight: 2, "component": {{ "Column": {{ "children": {{ "explicitList": ["template-name", "template-rating", "template-detail", "template-link", "template-book-button"] }} }} }} }},
29+
{{ "id": "template-name", "component": {{ "Text": {{ "usageHint": "h3", "text": {{ "path": "name" }} }} }} }},
30+
{{ "id": "template-rating", "component": {{ "Text": {{ "text": {{ "path": "rating" }} }} }} }},
31+
{{ "id": "template-detail", "component": {{ "Text": {{ "text": {{ "path": "detail" }} }} }} }},
32+
{{ "id": "template-link", "component": {{ "Text": {{ "text": {{ "path": "infoLink" }} }} }} }},
33+
{{ "id": "template-book-button", "component": {{ "Button": {{ "child": "book-now-text", "primary": true, "action": {{ "name": "book_restaurant", "context": [ {{ "key": "restaurantName", "value": {{ "path": "name" }} }}, {{ "key": "imageUrl", "value": {{ "path": "imageUrl" }} }}, {{ "key": "address", "value": {{ "path": "address" }} }} ] }} }} }} }},
34+
{{ "id": "book-now-text", "component": {{ "Text": {{ "text": {{ "literalString": "Book Now" }} }} }} }}
35+
]
36+
}} }},
37+
{{ "dataModelUpdate": {{
38+
"surfaceId": "default",
39+
"path": "/",
40+
"contents": [
41+
{{ "key": "items", "valueMap": [
42+
{{ "key": "item1", "valueMap": [
43+
{{ "key": "name", "valueString": "The Fancy Place" }},
44+
{{ "key": "rating", "valueNumber": 4.8 }},
45+
{{ "key": "detail", "valueString": "Fine dining experience" }},
46+
{{ "key": "infoLink", "valueString": "https://example.com/fancy" }},
47+
{{ "key": "imageUrl", "valueString": "https://example.com/fancy.jpg" }},
48+
{{ "key": "address", "valueString": "123 Main St" }}
49+
] }},
50+
{{ "key": "item2", "valueMap": [
51+
{{ "key": "name", "valueString": "Quick Bites" }},
52+
{{ "key": "rating", "valueNumber": 4.2 }},
53+
{{ "key": "detail", "valueString": "Casual and fast" }},
54+
{{ "key": "infoLink", "valueString": "https://example.com/quick" }},
55+
{{ "key": "imageUrl", "valueString": "https://example.com/quick.jpg" }},
56+
{{ "key": "address", "valueString": "456 Oak Ave" }}
57+
] }}
58+
] }} // Populate this with restaurant data
59+
]
60+
}} }}
61+
]
62+
---END SINGLE_COLUMN_LIST_EXAMPLE---
63+
64+
---BEGIN TWO_COLUMN_LIST_EXAMPLE---
65+
[
66+
{{ "beginRendering": {{ "surfaceId": "default", "root": "root-column", "styles": {{ "primaryColor": "#FF0000", "font": "Roboto" }} }} }},
67+
{{ "surfaceUpdate": {{
68+
"surfaceId": "default",
69+
"components": [
70+
{{ "id": "root-column", "component": {{ "Column": {{ "children": {{ "explicitList": ["title-heading", "restaurant-row-1"] }} }} }} }},
71+
{{ "id": "title-heading", "component": {{ "Text": {{ "usageHint": "h1", "text": {{ "path": "title" }} }} }} }},
72+
{{ "id": "restaurant-row-1", "component": {{ "Row": {{ "children": {{ "explicitList": ["item-card-1", "item-card-2"] }} }} }} }},
73+
{{ "id": "item-card-1", "weight": 1, "component": {{ "Card": {{ "child": "card-layout-1" }} }} }},
74+
{{ "id": "card-layout-1", "component": {{ "Column": {{ "children": {{ "explicitList": ["template-image-1", "card-details-1"] }} }} }} }},
75+
{{ "id": "template-image-1", "component": {{ "Image": {{ "url": {{ "path": "/items/0/imageUrl" }}, "width": "100%" }} }} }},
76+
{{ "id": "card-details-1", "component": {{ "Column": {{ "children": {{ "explicitList": ["template-name-1", "template-rating-1", "template-detail-1", "template-link-1", "template-book-button-1"] }} }} }} }},
77+
{{ "id": "template-name-1", "component": {{ "Text": {{ "usageHint": "h3", "text": {{ "path": "/items/0/name" }} }} }} }},
78+
{{ "id": "template-rating-1", "component": {{ "Text": {{ "text": {{ "path": "/items/0/rating" }} }} }} }},
79+
{{ "id": "template-detail-1", "component": {{ "Text": {{ "text": {{ "path": "/items/0/detail" }} }} }} }},
80+
{{ "id": "template-link-1", "component": {{ "Text": {{ "text": {{ "path": "/items/0/infoLink" }} }} }} }},
81+
{{ "id": "template-book-button-1", "component": {{ "Button": {{ "child": "book-now-text-1", "action": {{ "name": "book_restaurant", "context": [ {{ "key": "restaurantName", "value": {{ "path": "/items/0/name" }} }}, {{ "key": "imageUrl", "value": {{ "path": "/items/0/imageUrl" }} }}, {{ "key": "address", "value": {{ "path": "/items/0/address" }} }} ] }} }} }} }},
82+
{{ "id": "book-now-text-1", "component": {{ "Text": {{ "text": {{ "literalString": "Book Now" }} }} }} }},
83+
{{ "id": "item-card-2", "weight": 1, "component": {{ "Card": {{ "child": "card-layout-2" }} }} }},
84+
{{ "id": "card-layout-2", "component": {{ "Column": {{ "children": {{ "explicitList": ["template-image-2", "card-details-2"] }} }} }} }},
85+
{{ "id": "template-image-2", "component": {{ "Image": {{ "url": {{ "path": "/items/1/imageUrl" }}, "width": "100%" }} }} }},
86+
{{ "id": "card-details-2", "component": {{ "Column": {{ "children": {{ "explicitList": ["template-name-2", "template-rating-2", "template-detail-2", "template-link-2", "template-book-button-2"] }} }} }} }},
87+
{{ "id": "template-name-2", "component": {{ "Text": {{ "usageHint": "h3", "text": {{ "path": "/items/1/name" }} }} }} }},
88+
{{ "id": "template-rating-2", "component": {{ "Text": {{ "text": {{ "path": "/items/1/rating" }} }} }} }},
89+
{{ "id": "template-detail-2", "component": {{ "Text": {{ "text": {{ "path": "/items/1/detail" }} }} }} }},
90+
{{ "id": "template-link-2", "component": {{ "Text": {{ "text": {{ "path": "/items/1/infoLink" }} }} }} }},
91+
{{ "id": "template-book-button-2", "component": {{ "Button": {{ "child": "book-now-text-2", "action": {{ "name": "book_restaurant", "context": [ {{ "key": "restaurantName", "value": {{ "path": "/items/1/name" }} }}, {{ "key": "imageUrl", "value": {{ "path": "/items/1/imageUrl" }} }}, {{ "key": "address", "value": {{ "path": "/items/1/address" }} }} ] }} }} }} }},
92+
{{ "id": "book-now-text-2", "component": {{ "Text": {{ "text": {{ "literalString": "Book Now" }} }} }} }}
93+
]
94+
}} }},
95+
{{ "dataModelUpdate": {{
96+
"surfaceId": "default",
97+
"path": "/",
98+
"contents": [
99+
{{ "key": "title", "valueString": "Top Restaurants" }},
100+
{{ "key": "items", "valueMap": [
101+
{{ "key": "item1", "valueMap": [
102+
{{ "key": "name", "valueString": "The Fancy Place" }},
103+
{{ "key": "rating", "valueNumber": 4.8 }},
104+
{{ "key": "detail", "valueString": "Fine dining experience" }},
105+
{{ "key": "infoLink", "valueString": "https://example.com/fancy" }},
106+
{{ "key": "imageUrl", "valueString": "https://example.com/fancy.jpg" }},
107+
{{ "key": "address", "valueString": "123 Main St" }}
108+
] }},
109+
{{ "key": "item2", "valueMap": [
110+
{{ "key": "name", "valueString": "Quick Bites" }},
111+
{{ "key": "rating", "valueNumber": 4.2 }},
112+
{{ "key": "detail", "valueString": "Casual and fast" }},
113+
{{ "key": "infoLink", "valueString": "https://example.com/quick" }},
114+
{{ "key": "imageUrl", "valueString": "https://example.com/quick.jpg" }},
115+
{{ "key": "address", "valueString": "456 Oak Ave" }}
116+
] }}
117+
] }} // Populate this with restaurant data
118+
]
119+
}} }}
120+
]
121+
---END TWO_COLUMN_LIST_EXAMPLE---
122+
123+
---BEGIN BOOKING_FORM_EXAMPLE---
124+
[
125+
{{ "beginRendering": {{ "surfaceId": "booking-form", "root": "booking-form-column", "styles": {{ "primaryColor": "#FF0000", "font": "Roboto" }} }} }},
126+
{{ "surfaceUpdate": {{
127+
"surfaceId": "booking-form",
128+
"components": [
129+
{{ "id": "booking-form-column", "component": {{ "Column": {{ "children": {{ "explicitList": ["booking-title", "restaurant-image", "restaurant-address", "party-size-field", "datetime-field", "dietary-field", "submit-button"] }} }} }} }},
130+
{{ "id": "booking-title", "component": {{ "Text": {{ "usageHint": "h2", "text": {{ "path": "title" }} }} }} }},
131+
{{ "id": "restaurant-image", "component": {{ "Image": {{ "url": {{ "path": "imageUrl" }} }} }} }},
132+
{{ "id": "restaurant-address", "component": {{ "Text": {{ "text": {{ "path": "address" }} }} }} }},
133+
{{ "id": "party-size-field", "component": {{ "TextField": {{ "label": {{ "literalString": "Party Size" }}, "text": {{ "path": "partySize" }}, "type": "number" }} }} }},
134+
{{ "id": "datetime-field", "component": {{ "DateTimeInput": {{ "label": {{ "literalString": "Date & Time" }}, "value": {{ "path": "reservationTime" }}, "enableDate": true, "enableTime": true }} }} }},
135+
{{ "id": "dietary-field", "component": {{ "TextField": {{ "label": {{ "literalString": "Dietary Requirements" }}, "text": {{ "path": "dietary" }} }} }} }},
136+
{{ "id": "submit-button", "component": {{ "Button": {{ "child": "submit-reservation-text", "action": {{ "name": "submit_booking", "context": [ {{ "key": "restaurantName", "value": {{ "path": "restaurantName" }} }}, {{ "key": "partySize", "value": {{ "path": "partySize" }} }}, {{ "key": "reservationTime", "value": {{ "path": "reservationTime" }} }}, {{ "key": "dietary", "value": {{ "path": "dietary" }} }}, {{ "key": "imageUrl", "value": {{ "path": "imageUrl" }} }} ] }} }} }} }},
137+
{{ "id": "submit-reservation-text", "component": {{ "Text": {{ "text": {{ "literalString": "Submit Reservation" }} }} }} }}
138+
]
139+
}} }},
140+
{{ "dataModelUpdate": {{
141+
"surfaceId": "booking-form",
142+
"path": "/",
143+
"contents": [
144+
{{ "key": "title", "valueString": "Book a Table at [RestaurantName]" }},
145+
{{ "key": "address", "valueString": "[Restaurant Address]" }},
146+
{{ "key": "restaurantName", "valueString": "[RestaurantName]" }},
147+
{{ "key": "partySize", "valueString": "2" }},
148+
{{ "key": "reservationTime", "valueString": "" }},
149+
{{ "key": "dietary", "valueString": "" }},
150+
{{ "key": "imageUrl", "valueString": "" }}
151+
]
152+
}} }}
153+
]
154+
---END BOOKING_FORM_EXAMPLE---
155+
156+
---BEGIN CONFIRMATION_EXAMPLE---
157+
[
158+
{{ "beginRendering": {{ "surfaceId": "confirmation", "root": "confirmation-card", "styles": {{ "primaryColor": "#FF0000", "font": "Roboto" }} }} }},
159+
{{ "surfaceUpdate": {{
160+
"surfaceId": "confirmation",
161+
"components": [
162+
{{ "id": "confirmation-card", "component": {{ "Card": {{ "child": "confirmation-column" }} }} }},
163+
{{ "id": "confirmation-column", "component": {{ "Column": {{ "children": {{ "explicitList": ["confirm-title", "confirm-image", "divider1", "confirm-details", "divider2", "confirm-dietary", "divider3", "confirm-text"] }} }} }} }},
164+
{{ "id": "confirm-title", "component": {{ "Text": {{ "usageHint": "h2", "text": {{ "path": "title" }} }} }} }},
165+
{{ "id": "confirm-image", "component": {{ "Image": {{ "url": {{ "path": "imageUrl" }} }} }} }},
166+
{{ "id": "confirm-details", "component": {{ "Text": {{ "text": {{ "path": "bookingDetails" }} }} }} }},
167+
{{ "id": "confirm-dietary", "component": {{ "Text": {{ "text": {{ "path": "dietaryRequirements" }} }} }} }},
168+
{{ "id": "confirm-text", "component": {{ "Text": {{ "usageHint": "h5", "text": {{ "literalString": "We look forward to seeing you!" }} }} }} }},
169+
{{ "id": "divider1", "component": {{ "Divider": {{}} }} }},
170+
{{ "id": "divider2", "component": {{ "Divider": {{}} }} }},
171+
{{ "id": "divider3", "component": {{ "Divider": {{}} }} }}
172+
]
173+
}} }},
174+
{{ "dataModelUpdate": {{
175+
"surfaceId": "confirmation",
176+
"path": "/",
177+
"contents": [
178+
{{ "key": "title", "valueString": "Booking at [RestaurantName]" }},
179+
{{ "key": "bookingDetails", "valueString": "[PartySize] people at [Time]" }},
180+
{{ "key": "dietaryRequirements", "valueString": "Dietary Requirements: [Requirements]" }},
181+
{{ "key": "imageUrl", "valueString": "[ImageUrl]" }}
182+
]
183+
}} }}
184+
]
185+
---END CONFIRMATION_EXAMPLE---
186+
"""

0 commit comments

Comments
 (0)