Created a new agent to showcase the list of components in the std catalog. Also fixed a few component bugs

renderers/lit/src/0.8/ui/checkbox.ts

@@ -22,6 +22,7 @@ import { A2uiMessageProcessor } from "@a2ui/web_core/data/model-processor";
 import { classMap } from "lit/directives/class-map.js";
 import { styleMap } from "lit/directives/style-map.js";
 import { structuralStyles } from "./styles.js";
+import { extractStringValue } from "./utils/utils.js";
 
 @customElement("a2ui-checkbox")
 export class Checkbox extends Root {
@@ -70,6 +71,8 @@ export class Checkbox extends Root {
       return;
     }
 
+
+
     this.processor.setData(
       this.component,
       this.value.path,
@@ -100,7 +103,12 @@ export class Checkbox extends Root {
         .checked=${value}
       />
       <label class=${classMap(this.theme.components.CheckBox.label)} for="data"
-        >${this.label?.literalString}</label
+        >${extractStringValue(
+          this.label,
+          this.component,
+          this.processor,
+          this.surfaceId
+        )}</label
       >
     </section>`;
   }
@@ -113,6 +121,7 @@ export class Checkbox extends Root {
         return this.#renderField(this.value.literal);
       } else if (this.value && "path" in this.value && this.value.path) {
         if (!this.processor || !this.component) {
+
           return html`(no model)`;
         }
 
@@ -122,6 +131,8 @@ export class Checkbox extends Root {
           this.surfaceId ?? A2uiMessageProcessor.DEFAULT_SURFACE_ID
         );
 
+
+
         if (textValue === null) {
           return html`Invalid label`;
         }

renderers/lit/src/0.8/ui/icon.ts

@@ -41,6 +41,24 @@ export class Icon extends Root {
         min-height: 0;
         overflow: auto;
       }
+
+      .g-icon {
+        font-family: 'Material Icons';
+        font-weight: normal;
+        font-style: normal;
+        font-size: 24px;
+        display: inline-block;
+        line-height: 1;
+        text-transform: none;
+        letter-spacing: normal;
+        word-wrap: normal;
+        white-space: nowrap;
+        direction: ltr;
+        -webkit-font-smoothing: antialiased;
+        text-rendering: optimizeLegibility;
+        -moz-osx-font-smoothing: grayscale;
+        font-feature-settings: 'liga';
+      }
     `,
   ];
 

renderers/lit/src/0.8/ui/multiple-choice.ts

@@ -191,8 +191,11 @@ export class MultipleChoice extends Root {
   }
 
   getCurrentSelections(): string[] {
-    if (!this.processor || !this.component || Array.isArray(this.selections)) {
-      return [];
+    if (!this.processor || !this.component) {
+      return Array.isArray(this.selections) ? this.selections : [];
+    }
+    if (Array.isArray(this.selections)) {
+      return this.selections;
     }
 
     const selectionValue = this.processor.getData(

samples/agent/adk/component_gallery/__main__.py

@@ -0,0 +1,94 @@
+
+"""Main entry point for the Component Gallery agent."""
+import logging
+import os
+import sys
+
+import click
+import uvicorn
+from a2a.server.apps import A2AStarletteApplication
+from a2a.server.request_handlers import DefaultRequestHandler
+from a2a.server.tasks import InMemoryTaskStore
+from a2a.types import AgentCapabilities, AgentCard, AgentSkill
+from a2ui.extension.a2ui_extension import get_a2ui_agent_extension
+from starlette.middleware.cors import CORSMiddleware
+from dotenv import load_dotenv
+
+from agent import ComponentGalleryAgent
+from agent_executor import ComponentGalleryExecutor
+
+load_dotenv()
+
+logging.basicConfig(
+    level=logging.INFO,
+    format="%(asctime)s - %(name)s - %(levelname)s - %(message)s",
+    handlers=[logging.StreamHandler(sys.stdout)],
+    force=True,
+)
+
+logger = logging.getLogger(__name__)
+
+@click.command()
+@click.option("--host", default="localhost")
+@click.option("--port", default=10005)
+def main(host, port):
+    try:
+        capabilities = AgentCapabilities(
+            streaming=True,
+            extensions=[get_a2ui_agent_extension()],
+        )
+
+        # Skill definition
+        skill = AgentSkill(
+            id="component_gallery",
+            name="Component Gallery",
+            description="Demonstrates A2UI components.",
+            tags=["gallery", "demo"],
+            examples=["Show me the gallery"],
+        )
+
+        base_url = f"http://{host}:{port}"
+
+        agent_card = AgentCard(
+            name="Component Gallery Agent",
+            description="A2UI Component Gallery",
+            url=base_url,
+            version="0.0.1",
+            default_input_modes=["text"],
+            default_output_modes=["text"],
+            capabilities=capabilities,
+            skills=[skill],
+        )
+
+        agent_executor = ComponentGalleryExecutor(base_url=base_url)
+
+        request_handler = DefaultRequestHandler(
+            agent_executor=agent_executor,
+            task_store=InMemoryTaskStore(),
+        )
+
+        server = A2AStarletteApplication(
+            agent_card=agent_card, http_handler=request_handler
+        )
+
+        app = server.build()
+
+        app.add_middleware(
+            CORSMiddleware,
+            allow_origins=["http://localhost:5173"],
+            allow_credentials=True,
+            allow_methods=["*"],
+            allow_headers=["*"],
+        )
+
+        # Check if images dir exists before mounting? Skipping for now.
+
+        print(f"Starting Component Gallery Agent on port {port}...")
+        uvicorn.run(app, host=host, port=port)
+
+    except Exception as e:
+        logger.error(f"An error occurred during server startup: {e}")
+        exit(1)
+
+if __name__ == "__main__":
+    main()