diff --git a/articles/tools/copilot/images/activate-copilot.png b/articles/tools/copilot/images/activate-copilot.png index fd2547c711..814f3cff44 100644 Binary files a/articles/tools/copilot/images/activate-copilot.png and b/articles/tools/copilot/images/activate-copilot.png differ diff --git a/articles/tools/copilot/images/activation-button.png b/articles/tools/copilot/images/activation-button.png deleted file mode 100644 index c32a08a5a6..0000000000 Binary files a/articles/tools/copilot/images/activation-button.png and /dev/null differ diff --git a/articles/tools/copilot/images/development-workflow.png b/articles/tools/copilot/images/development-workflow.png new file mode 100644 index 0000000000..b9e085ca31 Binary files /dev/null and b/articles/tools/copilot/images/development-workflow.png differ diff --git a/articles/tools/copilot/images/modes.png b/articles/tools/copilot/images/modes.png new file mode 100644 index 0000000000..b981e0633d Binary files /dev/null and b/articles/tools/copilot/images/modes.png differ diff --git a/articles/tools/copilot/images/overview.png b/articles/tools/copilot/images/overview.png index 9a87149b5b..0086320094 100644 Binary files a/articles/tools/copilot/images/overview.png and b/articles/tools/copilot/images/overview.png differ diff --git a/articles/tools/copilot/images/toolbar.png b/articles/tools/copilot/images/toolbar.png new file mode 100644 index 0000000000..7504b8affe Binary files /dev/null and b/articles/tools/copilot/images/toolbar.png differ diff --git a/articles/tools/copilot/index.adoc b/articles/tools/copilot/index.adoc index 1b2facdfb3..5ed366a8d0 100644 --- a/articles/tools/copilot/index.adoc +++ b/articles/tools/copilot/index.adoc @@ -10,7 +10,7 @@ order: 10 Vaadin Copilot is a useful tool that's ready to assist you when you run an application in development mode. Copilot is a visual development tool, and it's an AI-empowered assistant. With it, you can inspect and edit the UI, and use generative AI to help with a variety of tasks. [NOTE] -Copilot functionality that makes changes to code, including but not limited to AI functionality, requires you to log in and accept the terms and conditions. This functionality is available for all subscribers. +Copilot functionality that makes changes to code, including but not limited to AI functionality, requires you to log in using Vaadin account. Vaadin Copilot is designed to work seamlessly with an IDE, and to fit into regular development workflow. When activated, Copilot appears in the browser, on top of your running application. You can switch between your IDE and Copilot to make changes where it's most convenient. @@ -21,109 +21,113 @@ Vaadin Copilot comes built into the development mode of your application; you do See the <> guide for more information. Also, see the <>, and <> documentation pages. -Once your application is running, click the image:images/activation-button.png[Activation button,26] button to activate or deactivate Copilot. +Once your application is running, Copilot toolbar image:images/toolbar.png[Copilot toolbar,100] is present in bottom right of the screen. image::images/activate-copilot.png[Activation of Vaadin Copilot] === Development Workflow -Vaadin Copilot helps you to set up a development environment by suggesting and guiding you through installation of an IDE plugin and enabling a Java hotswap solution. Development workflow helper is available directly from the image:images/activation-button.png[Activation,26] menu and the Info panel. - - -=== Copilot Trial - -Vaadin Copilot provides features that are free for all users. However, features related to view manipulation and AI usage require a subscription. You may try those features for free by activating a seven-day trial. +Vaadin Copilot helps you to set up a development environment by suggesting and guiding you through installation of an IDE plugin and enabling a Java hotswap solution. Development workflow helper is available directly from the menu and the Info panel. +image:images/development-workflow.png[Development Workflow] == Basic Operation -Copilot supersedes previous development tools, and is activated via the same image:images/activation-button.png[Activation,26] button that appears on top of your application in development mode. When activated, Copilot takes over the browser and disables interaction with the application until it's deactivated. +Copilot allows to switch operating modes during development of your application. We can distinguish four modes: +- Play mode - normal interaction with application +- Inspect mode - Copilot can be used to analyze structure and components of given view +- Test mode - Copilot can help you generate tests and check accessibility compliance +- Edit mode - Copilot can help you to modify your application with use of visual edition and AI tools -Enable the keyboard shortcuts so you can effortlessly enter and exit Copilot while you're developing. +image:images/modes.png[Copilot Operating Modes] +With keyboard shortcuts you can effortlessly toggle Play and recent Copilot mode while you're developing. pass:[] === Keyboard Shortcuts -The shortcut to enable Copilot is kbd:[⇧+CTRL+CTRL] or kbd:[⇧+CMD+CMD]. Meaning, hold kbd:[SHIFT] while pressing kbd:[CTRL] or kbd:[CMD] twice in quick succession. +The shortcut to toggle Copilot Play and last used mode is kbd:[⇧+CTRL+CTRL] or kbd:[⇧+CMD+CMD]. Meaning, hold kbd:[SHIFT] while pressing kbd:[CTRL] or kbd:[CMD] twice in quick succession. -You can deactivate Copilot using the same shortcut you used to activate it. When active, you can use kbd:[⇧+SPACE] (i.e., while holding kbd:[SHIFT], press kbd:[SPACEBAR]) to open the command popup. Use kbd:[ESC] to close it again. pass:[] == Vaadin Copilot UI -The Copilot UI consists of four main parts. Referring to the numbers in the graphic that follows, the *➀ Activation Button* activates and deactivates Copilot, and hosts a popup menu with some configuration options. This is the only functionality available when Copilot is not activated. Once activated, Copilot offers more. +The Copilot UI consists of two main parts. Referring to the numbers in the graphic that follows, the *➀ Toolbar* allows changing current Copilot mode. Use Toolbar menu to access Setting, Application Info, Application Logs and more. -*➁ Drawers* are located to the left, right, and bottom edges of the browser window, and appear when you move the mouse close enough to those edges. Drawers are where you'll find most of the Copilot functionality tucked away by default. +Floating *➁ Panels*, with each representing a specific functionality. Each panel can be dragged, resized and closed. -image::images/overview.png[Vaadin Copilot UI Overview] +After selecting component in the view, *➂ Component badge* is displayed. It contains set of utilities like AI prompt, sizing and padding helpers, and component properties. -Each Drawer contains *➂ Panels*, with each representing a specific functionality. Each panel can be turned into a *➃ Floating Panel* so that it doesn't auto-hide with the Drawer, and can be moved, collapsed, and resized. +image::images/overview.png[Vaadin Copilot UI Overview] == Built-In Panels |=== -|Panel |Default Drawer |Description - -|Properties -|Right -|Properties editor for selected component. - -|Documentation -|Right -|Vaadin documentation for selected component. +|Panel |Location |Description -|Theme Editor -|Right -|Allows you to change style of selected component, modify the theme global properties and save your browser inspector changes into application stylesheet. +|Accessibility Checker (a11y) +|Toolbar Test mode +|Accessibility testing engine. Helps to identify common accessibility issues like missing page title or missing input label. Provides recommendations how to fix them. -|Info -|Right +|App Info +|Toolbar menu |Application information. Includes guide on how to enable HotSwap. -|Accessibility Checker (a11y) -|Right -|Accessibility testing engine. Helps to identify common accessibility issues like missing page title or missing input label. Provides recommendations how to fix them. +|App Log +|Toolbar menu +|Application debug message log with a preview of Hilla endpoints requests and responses. -|UI Test Generation -|Right -|Generates Playwright UI tests for current Flow and Hilla view. _Experimental feature_. +|Backend & Data +|Toolbar Edit mode +|Access to H2 console and project dependencies helper. Allows setting up Spring Security. -|Internationalization (i18n) -|Right -|Make the UI ready for localization by generating translation keys for text elements, and converting static strings in UI code to translation API calls. See <>. +|Components +|Toolbar Edit mode +|A palette containing Vaadin and composite components. Drag to UI or Outline to add to the application. + +|Documentation +|Toolbar Edit and Inspect modes +|Vaadin documentation for selected component. |Features -|Right +|Toolbar menu |Manage <<{articles}/flow/configuration/feature-flags#,Feature Flags>>. -|Backend & Data -|Right -|Access to H2 console and project dependencies helper. Allows setting up Spring Security. +|Internationalization (i18n) +|Toolbar Edit mode +|Make the UI ready for localization by generating translation keys for text elements, and converting static strings in UI code to translation API calls. See <>. |Outline -|Left +|Toolbar Edit and Inspect modes |Component/element hierarchy. Hover to highlight; click to select; and drag & drop to rearrange. -|Palette -|Left -|A palette containing Vaadin and composite components. Drag to UI or Outline to add to the application. +|Properties +|Toolbar Edit and Inspect modes +|Properties editor for selected component. -|Views & Routes -|Left -|List of application routes with corresponding components and information about access control. Allows to create new views based on templates or using AI. +|Theme Editor +|Toolbar Edit mode +|Allows you to change style of selected component, modify the theme global properties and save your browser inspector changes into application stylesheet. |UI Services -|Left +|Toolbar Edit mode |List of Hilla services with corresponding parameters and information about access control. -|Log -|Bottom -|Application debug message log with a preview of Hilla endpoints requests and responses. +|UI Test Generation +|Toolbar Test mode +|Generates Playwright UI tests for current Flow and Hilla view. + +|UI Test Recorder +|Toolbar Test mode +|Records user interactions to generate end-to-end Vaadin TestBench tests automatically. _Experimental feature_. + +|Views & Routes +|Toolbar Edit mode +|List of application routes with corresponding components and information about access control. Allows to create new views based on templates or using AI. |=== @@ -144,17 +148,19 @@ Copilot uses a plugin architecture which allows additional functionality to appe [Read more about additional Copilot features.] -*Create component*:: Create a new component of the selected type as a child of the selected component. The new component is added to the source code, and your IDE opens the source file on the row where the component is created. +*Extract to Inner component*:: Create a new component of the selected type as a child of the selected component. The new component is added to the source code, and your IDE opens the source file on the row where the component is created. *Wrap with...*:: Wrap the selected components within a new layout. The components are placed in the layout in the same order you select them. The resulting layout is placed in the same place as the first component you select. *Set Data...*:: Allows connecting a component to an existing data provider or to creating new one. While creating new data provider you can create entity manually or by using AI. -*Add click listener*:: A quick way to add a click listener stub to the source code. Your IDE opens the source file on the row where the listener has been added. +*Add Listener*:: A quick way to add listeners stubs to the source code. Your IDE opens the source file on the row where the listener has been added. + +*Add to Components*:: Allows adding custom components to Components palette. == Drag & Drop -You can rearrange components by using drag-and-drop. Drop zones appear to visualize where components can be dropped. You can also use drag-and-drop on the Outline, and drag in new components from the Palette. +You can rearrange components by using drag-and-drop. Drop zones appear to visualize where components can be dropped. You can also use drag-and-drop on the Outline, and drag in new components from the Components palette. == AI Assistant