Error creating code component with AI

Overview

By following this issue, creating a code component with AI Chatbot, the 2 first times it doesn't complete, the third time it worked as expected.
In the command line we can see the component HTML is created succesfully, but user is not redirected to new code created page.

In drupal log we see this Experience Builder error, for this endpoint : /xb/api/v0/config/js_component

Drupal\experience_builder\Exception\ConstraintViolationException: Validation errors exist: Object(Drupal\Core\Entity\Plugin\DataType\ConfigEntityAdapter): Unable to find class/interface "function" specified in the prop "onButtonClick" for the component "experience_builder:herobanner". Object(Drupal\Core\Entity\Plugin\DataType\ConfigEntityAdapter).props.onButtonClick.type: The value you selected is not a valid choice. (code 8e179f1b-97aa-4560-a02f-2a8b42e49df7) in Drupal\experience_builder\Controller\ApiConfigControllers->validate() (line 207 of /var/www/html/web/modules/contrib/experience_builder/src/Controller/ApiConfigControllers.php).

In console, we can see first the component was created

{
    "status": true,
    "message": "The \u0022HeroBanner\u0022 component has been created. It features a red background, customizable main text, and a call-to-action button. You can control the displayed text and button label, and provide a custom action for the button via the props.\n\nComponent code:\n```jsx\nexport default function HeroBanner({ mainText = \u0022Welcome to our site!\u0022, buttonText = \u0022Get Started\u0022, onButtonClick = null }) {\n  return (\n    \u003Csection className=\u0022bg-red-600 py-16 text-white text-center\u0022\u003E\n      \u003Cdiv className=\u0022container mx-auto px-4\u0022\u003E\n        \u003Ch1 className=\u0022text-4xl font-bold mb-6\u0022\u003E{mainText}\u003C\/h1\u003E\n        \u003Cbutton\n          className=\u0022bg-white text-red-600 font-semibold px-8 py-3 rounded shadow-md hover:bg-red-100 hover:text-red-700 transition-colors duration-200\u0022\n          onClick={onButtonClick}\n        \u003E\n          {buttonText}\n        \u003C\/button\u003E\n      \u003C\/div\u003E\n    \u003C\/section\u003E\n  );\n}\n```\n\nProps metadata:\n```json\n[\n  {\n    \u0022id\u0022: \u0022mainText\u0022,\n    \u0022name\u0022: \u0022mainText\u0022,\n    \u0022type\u0022: \u0022string\u0022,\n    \u0022example\u0022: \u0022Welcome to our site!\u0022,\n    \u0022format\u0022: null,\n    \u0022$ref\u0022: null,\n    \u0022derivedType\u0022: \u0022text\u0022\n  },\n  {\n    \u0022id\u0022: \u0022buttonText\u0022,\n    \u0022name\u0022: \u0022buttonText\u0022,\n    \u0022type\u0022: \u0022string\u0022,\n    \u0022example\u0022: \u0022Get Started\u0022,\n    \u0022format\u0022: null,\n    \u0022$ref\u0022: null,\n    \u0022derivedType\u0022: \u0022text\u0022\n  },\n  {\n    \u0022id\u0022: \u0022onButtonClick\u0022,\n    \u0022name\u0022: \u0022onButtonClick\u0022,\n    \u0022type\u0022: \u0022function\u0022,\n    \u0022example\u0022: \u0022() =\u003E alert(\u0027Button clicked!\u0027)\u0022,\n    \u0022format\u0022: null,\n    \u0022$ref\u0022: null,\n    \u0022derivedType\u0022: \u0022function\u0022\n  }\n]\n```\nThis HeroBanner is now ready for use. Just set the mainText, buttonText, and optionally provide an onButtonClick action for full functionality.",
    "component_structure": {
        "name": "HeroBanner",
        "machineName": "herobanner",
        "status": false,
        "source_code_js": "export default function HeroBanner({ mainText = \u0022Welcome to our site!\u0022, buttonText = \u0022Get Started\u0022, onButtonClick = null }) {\n  return (\n    \u003Csection className=\u0022bg-red-600 py-16 text-white text-center\u0022\u003E\n      \u003Cdiv className=\u0022container mx-auto px-4\u0022\u003E\n        \u003Ch1 className=\u0022text-4xl font-bold mb-6\u0022\u003E{mainText}\u003C\/h1\u003E\n        \u003Cbutton\n          className=\u0022bg-white text-red-600 font-semibold px-8 py-3 rounded shadow-md hover:bg-red-100 hover:text-red-700 transition-colors duration-200\u0022\n          onClick={onButtonClick}\n        \u003E\n          {buttonText}\n        \u003C\/button\u003E\n      \u003C\/div\u003E\n    \u003C\/section\u003E\n  );\n}",
        "source_code_css": "",
        "compiled_js": "",
        "compiled_css": "",
        "imported_js_components": [],
        "props": {
            "mainText": {
                "title": "mainText",
                "type": "string",
                "examples": [
                    "Welcome to our site!"
                ]
            },
            "buttonText": {
                "title": "buttonText",
                "type": "string",
                "examples": [
                    "Get Started"
                ]
            },
            "onButtonClick": {
                "title": "onButtonClick",
                "type": "function",
                "examples": [
                    "() =\u003E alert(\u0027Button clicked!\u0027)"
                ]
            }
        }
    }
}

But then we see in following request this error

{
    "errors": [
        {
            "detail": "Unable to find class\/interface \u0022function\u0022 specified in the prop \u0022onButtonClick\u0022 for the component \u0022experience_builder:herobanner\u0022.",
            "source": {
                "pointer": ""
            }
        },
        {
            "detail": "The value you selected is not a valid choice.",
            "source": {
                "pointer": "props.onButtonClick.type"
            }
        }
    ]
}

After retrying 2 other times, it worked for

Proposed resolution

User interface changes