Custom UI Type

If you wish to use other components of Apache ECharts library, or create your own custom UI type, you can easily do it by adding a new file to the resources/js/components_project/chat/ui_types directory. The file must be named in PascalCase, for example: YourNewType.vue.

Once the file is added, you can use your new UI type in the AI Agent builder by specifying it in the ui_type field. Note that the value must be written in kebab-case, for example: your-new-type.

On the code side, we have an automatic UI type resolver that converts kebab-case names to PascalCase component names. This logic is implemented in the resources/js/composables/useUiComponentLoader.ts file.

If you have a special case that requires custom resolution logic, you can define it in the specialCaseMappings constant.

output:

[
.... can be other ui types ...
  {
    "ui_type": "your-new-type",
    "title": "Your New Type",
    "description": "Your new type description",
    "data": {
        "your_data": "your_data"
    }
  }
... can be other ui types ...
]