Migrate Rizzcharts client sample to use v0_9 angular renderer#1116
Migrate Rizzcharts client sample to use v0_9 angular renderer#1116suyangw-g wants to merge 1 commit intogoogle:mainfrom
Conversation
There was a problem hiding this comment.
Code Review
This pull request migrates the Angular client samples to the A2UI v0.9 architecture, updating message handling from 'beginRendering' to 'createSurface' and refactoring custom components like Canvas, Chart, and GoogleMap to use the new 'props' input system. Feedback focuses on addressing a regression in error handling within the ChatService, enhancing type safety by replacing 'any' types with specific interfaces in component inputs, and removing an obsolete 'title' property in the YouTube component.
| this.a2uiRenderer.surfaceGroup.onAction.subscribe(async (action: A2uiClientAction) => { | ||
| try { | ||
| // TODO: Replace this with a more robust event handling mechanism. | ||
| // Send A2UI actions silently if requested from the action context | ||
| const isSilent = Boolean(event.message.userAction?.context?.['silent']); | ||
| await this.sendMessage(JSON.stringify(event.message), isSilent); | ||
| event.completion.next([]); | ||
| event.completion.complete(); | ||
| const isSilent = Boolean(action.context?.['silent']); | ||
| await this.sendMessage(JSON.stringify({ version: 'v0.9', action }), isSilent); | ||
| } catch (err) { | ||
| event.completion.error(err); | ||
| console.error('Failed to send action:', err); | ||
| } | ||
| }); |
There was a problem hiding this comment.
The error handling for A2UI actions has been simplified to just console.error. This is a regression from the previous implementation which propagated errors via event.completion.error(err). This change could lead to user actions failing silently without any feedback. Consider implementing a more robust error handling mechanism, such as displaying a notification to the user, to improve the user experience.
There was a problem hiding this comment.
In the older implementation (e.g., using MessageProcessor.events), we had access to event.completion.error. With the migration to the v0_9 renderer and surfaceGroup.onAction, that specific completion handle isn't available on the event.
| * @param child The component node, either as a string ID or an object. | ||
| * @returns The string ID of the component. | ||
| */ | ||
| protected getComponentId(child: string | any): string { |
There was a problem hiding this comment.
Using any for the child parameter type is not type-safe and reduces code maintainability. It's better to use a more specific type. Based on the usage, it seems child could be typed as string | { id: string } which would be more appropriate and safer.
| protected getComponentId(child: string | any): string { | |
| protected getComponentId(child: string | { id: string }): string { |
|
|
||
| private resolvePieChartData( | ||
| pathPrefix: Primitives.StringValue, | ||
| dataArray: any[], |
There was a problem hiding this comment.
Using any[] for dataArray is not type-safe. It's better to define a specific interface for the chart data items to improve maintainability and prevent potential errors.
For example:
interface ChartDataItem {
label: string;
value: number;
drillDown?: ChartDataItem[];
}Then you can use ChartDataItem[] as the type.
| dataArray: any[], | |
| dataArray: { label: string; value: number; drillDown?: any[] }[], |
|
|
||
| private resolveLocations(value: CustomProperties | undefined): Pin[] { | ||
| protected readonly resolvedPins = computed(() => { | ||
| const pinsArray = this.props()['pins']?.value() as any[]; |
There was a problem hiding this comment.
Casting pinsArray to any[] is not type-safe. For better code clarity and to prevent potential runtime errors, you should define a specific interface for the pin data and use it for the type assertion.
For example:
interface PinData {
lat: number;
lng: number;
name: string;
description?: string;
background?: string;
borderColor?: string;
glyphColor?: string;
}| const pinsArray = this.props()['pins']?.value() as any[]; | |
| const pinsArray = this.props()['pins']?.value() as { lat: number; lng: number; name: string; [key: string]: any }[]; |
| this.props()['videoId']?.value() as string | null | ||
| ); | ||
|
|
||
| readonly title = input<Primitives.StringValue | null>(); |
This PR migrates the
rizzchartsclient sample and the shareda2a-chat-canvaslibrary to use the newv0_9Angular renderer and message protocol. This involves a shift from the path-based data resolution pattern to a more direct, property-bound approach using reactive inputs.Key Changes
1. Protocol Update to v0.9
extractA2uiDataPartsina2a-chat-canvasto processv0.9message types:createSurface,updateComponents,updateDataModel, anddeleteSurface(replacingbeginRendering,surfaceUpdate, etc.).@a2ui/web_core/v0_9.2. Catalog Refactoring
Catalogdefinition inrizzchartswith the newAngularCatalogclass.Canvas,Chart,GoogleMap,YouTube) are now registered with a unique URI and mapped using the new catalog structure alongsideBASIC_COMPONENTS.3. Component Refactoring (Removal of
DynamicComponent)rizzchartsno longer extendDynamicComponent.resolvePrimitiveand complex path strings (e.g.,${pathPrefix.path}[${index}]), components now receive data via a singlepropsinput:input<Record<string, BoundProperty>>({}).ChartandGoogleMap, where arrays and objects are iterated over directly as resolved JavaScript objects rather than being fetched by path in a loop.4. Build & Configuration
tsconfigfiles in both projects to handle path mappings and dependencies correctly for the new version.README.mdto reflect that dependencies now build fromrenderers/web_coreandrenderers/markdowninstead ofrenderers/lit.Files Modified (Summary)
catalog.ts,chart.ts,google-map.ts,youtube.tsinrizzcharts.a2a-chat-canvasconfiguration, services, and utilities (a2ui.ts).samples/client/angular/README.md.