AC Copilot support for Custom Components

[MarcinVaadin]

Description

Make it possible to use custom components with Copilot, as if they were first class components.

This includes

• Drag & drop, copy & paste, delete, etc direct manipulation features within the UI
• Outline & view interactions support “drill down” when appropriate
• Customizable palette (organize, sharing)
• Drag from palette
• AI support (know about custom components and able to use them)

“Custom component” is a part of the UI that is defined in a separate (class / template), in a separate file or as a “helper” component in the same file, external to the view being edited with Copilot.
A custom component can be defined in the project (“project component”) and thus editable by Copilot, or it can be defined in a separate module or dependency (“external component”).
A “custom layout” is a custom component that can contain other components.

Use cases

Main, generic use case

As a developer
I want to be able to work with custom components using Copilot
So that I can improve my work efficiency

Detailed use cases

As a component developer
I want to be able to provide unified company components across multiple developer teams
So that they could be used by developers

As a developer
I want to be able to work with custom components
So that all existing Copilot features are supported

As a developer
I want to be able to use custom components in Hilla and Flow projects
So that all standard Copilot operations are supported

As a developer
I want to be able to prompt AI for changing my view with custom components
So that it produces results that do not break my application

Acceptance criteria

Support both Java (Flow) and React (Hilla) components; components can support both, but in most cases custom components are probably either/or.

1. Ability to edit views containing custom components
   • Drag & drop within view and outline
   • Component (file) boundaries are clearly indicated and respected
   • “Drill down” to edit custom component content
2. Ability to organize and customize palette content
   • Show custom components, div-soup composites (the “Composite” part in Palette today)
   • Show content from multiple sources (user, project, organization, …)
   • Ability to organize so that relevant / often used / favorite components can be easily found
   • Search shows matching components and sections
   • Automatically find and list custom components in palette until they are moved/hidden
3. Ability to add custom components to views
   • Drag from palette
   • Imports are added when needed
4. AI has the ability to use custom components
   • Adds imports as needed
   • Understands custom components role in view and performs valid code updates

General criteria [TBD]

• Design - requires @anezthes involvement

• UX/DX tests in Alpha

• Documentation

• How to test?

• Limitations:

Security

• Security implications have been taken into account (elaborate or link to product security requirement specification if there are implications)