#3577937: add default tools editor

Bruno Brunorequested to merge
issue/ai-3577937:3577937-default-tools-editor into 1.3.x

Adds a new React app default-tools-editor which provides an 'Interactive' way to manipulate the Default Information Tools field for Agents which only takes YAML. Allowing for easier Add/Removal/Edit of different tools.

Some of the features of the react app:

  • Ability to change tabs between YAML and the Interactive mode. So manual adjustments are still possible
  • Autocomplete on tool selection field, listing all available tools on the website.
  • Lists all available tool parameters based on the chosen tool, along with the described Help Text (description) for the expected values for that specific parameter
  • Provides a clearer description of what each field expects and how it is used. For example, Description field actually expects an example of the Expected tool output, this is now clearer with the help of better labelling and field descriptions.
  • No need to write unique keys for each object, it is automatically created based on the label
  • Can be attached to any Default Information Tools field which expects YAML.
  • Per-tool draft buffer: edits stay local until Save / Discard, preventing partial state from leaking into the YAML textarea.

Note: The app uses <details /> element for collapsing/opening of different tools. This is paired together with claro classes like claro-details which provides an identical experience to the standard Details in Claro/Gin. Any use outside these themes still works, but would need to introduce their own CSS for a nicer experience.

Testing Instructions

  1. Checkout the branch
  2. cd into ui/default-tools-editor/
  3. npm install && npm run build to build the react app
  4. Clear caches and navigate to /admin/config/ai/agents, edit any agent.
  5. Scroll down to the Default information tools field
  6. Check that you can Add/Remove/Edit tools. Remember when editing tools to save the Draft by clicking Save
  7. Check that any changes are synced to the YAML field in the YAML tab.

AI Usage Transparency

  • AI Assisted Code

This code was developed with significant AI assistance, including AI-generated implementations, with human guidance, and reviewed, tested, and refined by a human.

Edited by Bruno Bruno

Merge request reports