Reiterate on AI generated components with render error

Overview

Currently one issue that we have is that the component generation prompt is not aware of libraries that exists in Canvas.

This means that the AI might hallucinate or by chance use libraries for the component that is not available or that for other reasons does not render.

When this happens an error message will be thrown, something like:
Uncaught (in promise) TypeError: Failed to resolve module specifier "test". Relative references must start with either "/", "./", or "../".

The problem we have now is that the error messages that would be very useful for the agent to rectify any error is only available in the browser when the browser renders it.

Since we do not have a PHP or rendering engine that can show these errors we have to find another solutions.

There are some solutions on how to solve this in backend code, but this means that the agent has to control a browser via something like the Chromium Tool for instance. But all those solutions are not viable on cheap hosting.

So managing this in the frontend might be the correct solution as an initial step. This means that what we would do is that when the agent has suggested that a component should be rendered, the Canvas app has to render it and catch any errors and if errors exists, send this back to the agent again, with the initial component.

That means that the first request will look like this:

• User Message: "Can you create a hero section"

If the component renders correctly, we do nothing else.

But if it fails, the loading/processing should continue and it should automatically send something like this into the agent:

• User Message: "Can you create a hero section"
• Assistant Message: "I have created a hero section with a title, subtitle and two CTA"
• User Message: "Can you fix the following issue: Uncaught (in promise) TypeError: Failed to resolve module specifier "test". Relative references must start with either "/", "./", or "../".

And it does that X times - if it fails after X times we have to remove the component and tell them to retry.

Proposed resolution

1. When the agent finishes a component modification response and the component has been written, we try to render it and catch errors.
2. If an error doesn't exist, it would work like today.
3. If an error does exist, the loading of the agent/component view should continue.
4. In the background another chat message is sent with the error for the agent to retry. (Should this be visible to the end user?)
5. Go back to #1.
6. After X tries, we give up and give back a message that it was unable to solve the issue.

User interface changes