diff --git a/articles/tools/copilot/images/activate-copilot.png b/articles/tools/copilot/images/activate-copilot.png index 0e7f7ae5ee..fd2547c711 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/overview.png b/articles/tools/copilot/images/overview.png index 479da1cfd8..9a87149b5b 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/index.adoc b/articles/tools/copilot/index.adoc index b144370801..eaba2ade46 100644 --- a/articles/tools/copilot/index.adoc +++ b/articles/tools/copilot/index.adoc @@ -33,7 +33,7 @@ Vaadin Copilot helps you to set up a development environment by suggesting and g === 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 three-day preview or by starting a 30-day trial period. +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. == Basic Operation @@ -49,14 +49,14 @@ pass:[] 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. -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 window. Use kbd:[ESC] to close it again. +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 five 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 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. *➁ 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. @@ -64,9 +64,6 @@ image::images/overview.png[Vaadin Copilot UI Overview] 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. -The *➄ Command window* is a context-sensitive popup window with an input prompt. This is where you can give commands to the AI. - - == Built-In Panels |=== @@ -142,20 +139,19 @@ Copilot uses a plugin architecture which allows additional functionality to appe *Select*:: Convenient way of selecting parent and sibling components. -*Copy*, *Paste*:: Copy and paste selected component. See +*Copy*, *Paste*, *Duplicate*, *Delete*:: Copy, paste, duplicate and delete selected component. See <> for more information. [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. + *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. -*Duplicate*:: Make a copy of the component. +*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. -*Delete*:: Delete the component. - - == 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. @@ -163,7 +159,7 @@ You can rearrange components by using drag-and-drop. Drop zones appear to visual == AI Assistant -You can ask Copilot to perform tasks related to view manipulation using a natural language prompt in the Command window popup. The AI does its best to fulfill your request. Think of it as a very helpful junior developer, who remembers plenty about topics you might have forgotten or not looked into yet, but is still very inexperienced and needs supervision. It's slower than you on small tasks if you already know exactly how to do them. It's faster, though, if you need to research how to do a task, or if it involves plenty of typing. +You can ask Copilot to perform tasks related to selected view component manipulation using a natural language prompt in the toolbar popup. The AI does its best to fulfill your request. Think of it as a very helpful junior developer, who remembers plenty about topics you might have forgotten or not looked into yet, but is still very inexperienced and needs supervision. It's slower than you on small tasks if you already know exactly how to do them. It's faster, though, if you need to research how to do a task, or if it involves plenty of typing. Basically, be ready to fix minor mistakes, undo a whole change -- but be prepared to be pleasantly surprised. @@ -181,7 +177,7 @@ Try to do the following to make a button primary: [source] ---- -> make the button primary +> make this button primary ---- This type of task can be slow compared to making the change, manually. However, it can be very useful when you don't remember how to do it in the code. @@ -218,7 +214,7 @@ When developing UIs, there's a tendency to switch repeatedly between code and th Vaadin Copilot integrates seamlessly into your regular development workflow. This way you can switch back and forth between the code in your IDE and Copilot, depending on which is appropriate. Copilot considers the file on disk to be the source of truth. All changes are made to the file, then hot deployed to the browser. -To get the best Copilot experience, use the Vaadin plugin for link:https://plugins.jetbrains.com/plugin/23758-vaadin[IntelliJ] or link:https://marketplace.visualstudio.com/items?itemName=vaadin.vaadin-vscode[Visual Studio Code]. The plugin improves saving changes you made into your files and integrates with the undo-functionality (IntelliJ only). +To get the best Copilot experience, use the Vaadin plugin for link:https://plugins.jetbrains.com/plugin/23758-vaadin[IntelliJ], link:https://marketplace.visualstudio.com/items?itemName=vaadin.vaadin-vscode[Visual Studio Code] or link:https://marketplace.eclipse.org/content/vaadin-tools[Eclipse]. The plugin improves saving changes you made into your files and integrates with the undo-functionality (IntelliJ only). Depending on the IDE, Vaadin plugin might display additional hints for improving development process. @@ -282,7 +278,7 @@ Most modern IDEs support automatic code formatting on file save. To enable this === Formatting via Build Tool Plugins -If your project is based on Vaadin starter project (like <<{articles}/getting-started/start#,Walking Skeleton>>), it is likely already configured with the https://github.com/diffplug/spotless[Spotless] plugin. +If your project is based on Vaadin starter project (like one from <<{articles}/getting-started/start#,Getting Started>> guide), it is likely already configured with the https://github.com/diffplug/spotless[Spotless] plugin. You can apply formatting manually via: @@ -300,7 +296,7 @@ Copilot can send information related to your project outside local environment i |Source code related to given view, depending on operation |User asked for permission before operation. This can be changed via Settings > AI Usage. -|Command Window prompt submitted +|Prompt submitted |Prompt, AI model request and response, 30 days retention |User asked for permission before operation. This can be changed via Settings > AI Usage. User can also opt out in https://vaadin.com/profile[Profile Settings] on your Vaadin.com account