[DO NOT MERGE] docs(thermidor): use standard a2ui renderer in ng sample - #7942
[DO NOT MERGE] docs(thermidor): use standard a2ui renderer in ng sample#7942fbeaudoincoveo wants to merge 16 commits into
Conversation
|
✅ Snyk checks have passed. No issues have been found so far.
💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse. |
There was a problem hiding this comment.
As explained in the PR description, three additional prompts were added to the mock-converse-api so that we can test the sample with (mocked) v0.9 a2ui surfaces.
There was a problem hiding this comment.
Registers the sample's custom Angular components with the A2UI renderer so it knows which component to instantiate when it encounters a ProductCarousel, ComparisonTable, etc. in the surface messages.
There was a problem hiding this comment.
Replaced individual input() fields with the renderer's props signal and derive display values from it using prop(). The template is otherwise unchanged.
Similar changes were made in other a2ui components to adapt them to the standard a2ui Angular renderer
There was a problem hiding this comment.
Temporary change, just to make it obvious what prompts to use when testing locally.
There was a problem hiding this comment.
This was a custom switch/dispatcher that used NgComponentOutlet to map each componentType string to the right Angular component. The standard A2UI renderer's SurfaceComponent does exactly the same thing via the catalog, so it's redundant and we can get rid of it! 🥳
There was a problem hiding this comment.
Removed the surfaces input and quickAction output (no longer needed). Surfaces are now rendered via the standard <a2ui-v09-surface> component, driven by surface IDs exposed as a signal from the adapter service.
There was a problem hiding this comment.
This lets the A2UI renderer receive operations as deltas without having to diff against an accumulated state.
I'll probably cherry-pick this commit and merge it into main separately. This is a net improvement. Without this, we would have to do quite a bit of adaptative work in the implementation.
There was a problem hiding this comment.
Small util to keep components a bit DRYer
There was a problem hiding this comment.
This service is a thin Angular wrapper around A2uiRendererService. It forwards incoming operations to the renderer and exposes the active surface IDs as a signal for the template. It also handles clearing surfaces between turns via deleteSurface messages.
There was a problem hiding this comment.
Surface operations now flow directly from the controller via onSurfaceOperation callback to the adapter. On submit, the conversation service clears previous surfaces so only the current turn's content is displayed.
There was a problem hiding this comment.
This was the custom code that manually parsed raw A2UI operations into typed surface objects and managed state (deduplication, loading flags, data model extraction).
The standard A2UI renderer does all of this internally, so we can delete it entirely! 🥳
There was a problem hiding this comment.
These changes ensure that the app provides the A2UI renderer service and registers the custom component catalog so the renderer knows how to instantiate our components.
There was a problem hiding this comment.
Since the standard renderer handles parsing and data binding internally, these types are now unused and we can get rid of them! 🥳
As of today, the /converse endpoint is returning a A2UI that does not fully respect the v0.8 specification of the standard.
There are plans to make it return legit v0.9 A2UI, as this would allow implementations to rely on standard renderers (e.g., @a2ui/angular), as opposed to using custom logic to parse and render the A2UI surface.
This PR shows what it would look like to use the standard A2UI v0.9 Angular renderer in the Angular conversational sample. In order to make it testable, we're adding new prompts / responses to the mock converse service:
In order to test the sample, run the mock service and start the sample with
pnpm run dev:mock(see the README for more details).Most notably, this PR allows us to delete:
Removing a2ui-parser.ts is particularly good. There is lots of complex / error-prone logic in there.