Windmill AI & more docs (Faton to polish Windmill AI page) (#321)

* Windmill AI v1

* Windmill AI & more docs

* Windmill AI page + doc, endgame

docs/advanced/3_cli/index.mdx

@@ -1,6 +1,6 @@
 import DocCard from '@site/src/components/DocCard';
 
-# Command Line Interface (wmill)
+# Command Line Interface (CLI)
 
 The Windmill CLI, `wmill` allows you to interact with Windmill instances right from your
 terminal.

docs/apps/2_outputs.md

@@ -71,32 +71,31 @@ Inputs can be connected to any outputs. When connecting, you can click on the ou
 
 <video
     className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
-    autoPlay
-    loop
     controls
     src="/videos/app-connections.mp4"
+    alt="Connecting inputs"
 />
 
 <br/>
 
 Here are the steps to connect an input to an output:
 
 - Click on the component input you want to connect to an output.
-- Click the right arrow to open the connection menu.
-  - You can navigate you app, without running any scripts.
-  - When you hover a component, the corresponding outputs are highlighted in orange.
-  - If you click on a component, the output will be pinned and stays open.
-- You can now click on the output you want to connect to the input.
+- Click on the plug icon to open the connection menu, then:
+  - either click on the red plug directly next to the component, and pick the output
+  - or pick the component directly from the output menu on the left.
 - The input is now connected to the output through an eval.
 
+Alternatively, refer to the component directly through an [eval](./3_app-runnable-panel.mdx#evals), e.g. `a.result`.
+
+![App outputs](../assets/apps/2_app_outputs/connecting_eval.png "Connecting through eval")
+
 ### Editing the id of a component
 
 You can edit the id of a component by clicking on the id. Component id can only contain letters and numbers.
 
 <video
     className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
-    autoPlay
-    loop
     controls
     src="/videos/app-edit-id.mp4"
 />

docs/apps/4_app_configuration_settings/1_app_component_library.mdx

@@ -34,7 +34,7 @@ Components can be configured in two ways:
 
 ## Inserting components
 
-Click on a component in the component library to insert it in the app canvas. It will be automatically positioned to the first available spot starting from the top left corner
+Click on a component in the component library to insert it in the app canvas. It will be automatically positioned to the first available spot starting from the top left corner.
 
 ## Layout
 
@@ -328,4 +328,15 @@ The layout components are used to organize the components in the app canvas.
     controls
     src="/videos/chartjs.mp4"
     alt="ChartJS"
-/>
+/>
+
+## Groups
+
+<div class="grid grid-cols-2 gap-2 my-4">
+	<DocCard
+		title="Group of Components"
+		description="Components can be grouped within containers."
+		href="/docs/apps/app_configuration_settings/components_groups"
+		color="orange"
+	/>
+</div>

docs/apps/4_app_configuration_settings/4_app_styling.mdx

@@ -63,7 +63,7 @@ For complex apps, you may not want to repeat the styling configuration on each c
 
 ### CSS Editor
 
-The [Global CSS Editor](../../misc/15_css_editor/index.md) is designed to give styling and theming across your entire app. This functionality offers a centralized location for defining, managing, and applying CSS rules. It's useful for ensuring consistent styling and for creating reusable themes.
+The [Global CSS Editor](../9_css_editor.md) is designed to give styling and theming across your entire app. This functionality offers a centralized location for defining, managing, and applying CSS rules. It's useful for ensuring consistent styling and for creating reusable themes.
 
 The Global CSS Editor is a feature exclusive to [Enterprise Edition](../../misc/7_plans_details/index.mdx). However, users on the Community Edition can still access and experiment with this tool directly in the editor for evaluation purposes, although these changes will not be reflected in the app preview.
 
@@ -79,7 +79,7 @@ The Global CSS Editor is a feature exclusive to [Enterprise Edition](../../misc/
 	<DocCard
 		title="CSS Editor"
 		description="The Global CSS Editor is designed to give styling and theming across your entire app."
-		href="/docs/misc/css_editor"
+		href="/docs/apps/css_editor"
 		color="orange"
 	/>
 </div>

docs/apps/4_app_configuration_settings/5_components_groups.md

@@ -19,4 +19,15 @@ Inside those "container groups", you can refer to "group.x" to refer to one of t
 3. Fill the group field's object, either manually or dynamically through an [eval](../3_app-runnable-panel.mdx#evals).
 4. Now the container's components can be [connected](../2_outputs.md#connecting-inputs) to the group fields items through `group.group_field_name.optional_subitems`
 
-The next iteration will allow to save those groups in the workspace.
+Component groups can be saved to workspace. They will be available from all workspace apps as a component under the "Groups" category.
+
+<video
+    className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
+    autoPlay
+    controls
+    src="/videos/save_component_group.mp4"
+/>
+
+<br/>
+
+Group of components are saved as resources, under the `app_groups` [folder](../../core_concepts/8_groups_and_folders/index.mdx).

docs/misc/15_css_editor/index.md → docs/apps/9_css_editor.md

@@ -2,7 +2,7 @@
 
 The Global CSS Editor is designed to give styling and theming across your entire app. This functionality offers a centralized location for defining, managing, and applying CSS rules. It's useful for ensuring consistent styling and for creating reusable themes.
 
-The Global CSS Editor is a feature exclusive to [Enterprise & Team Editions](../7_plans_details/index.mdx). However, users on the Community Edition can still access and experiment with this tool directly in the editor for evaluation purposes, although these changes will not be reflected in the app preview.
+The Global CSS Editor is a feature exclusive to [Cloud & Enterprise Self-Hosted](../misc/7_plans_details/index.mdx). However, users on the Community Edition can still access and experiment with this tool directly in the editor for evaluation purposes, although these changes will not be reflected in the app preview.
 
 <video
   className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
@@ -42,11 +42,11 @@ In addition to the core features of the Global CSS Editor, the Helper Block is d
 2. View Class Identifiers and Variables: Once you select a component, a list of its specific classes and modifiable CSS variables will be displayed.
 3. Insert to Code: Next to each class and variable, there is an "Insert" button. Clicking this will automatically insert the relevant item into the code editor.
 
-![Use helper](./use_helper.png 'Use helper')
+![Use helper](../assets/apps/9_css_editor/use_helper.png 'Use helper')
 
 ## Migrating Component-Level Styles to Global CSS
 
-In the Enterprise & Team Editions of the Global CSS Editor, you can migrate component-level styles to the global level, streamlining the process of achieving consistent design across your application. This feature allows for two types of component-level styles to be migrated:
+In the Cloud & Enterprise Self-Hosted of the Global CSS Editor, you can migrate component-level styles to the global level, streamlining the process of achieving consistent design across your application. This feature allows for two types of component-level styles to be migrated:
 
 1. Navigate to the component whose styles you wish to migrate. Select the option to 'Move to CSS editor', which will open a modal window.
 

docs/code_editor/ai_generation.mdx

@@ -0,0 +1,27 @@
+---
+canonical_url: /docs/core_concepts/ai_generation
+---
+
+import DocCard from '@site/src/components/DocCard';
+
+# Windmill AI
+
+Windmill provides ways to have AI help you in your coding experience.
+
+<video
+    className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
+    controls
+    src="/videos/ai_generation.mp4"
+/>
+
+<br/>
+
+All details at [Windmill AI](../core_concepts/22_ai_generation/index.md):
+
+<div class="grid grid-cols-2 gap-6 mb-4">
+	<DocCard
+    	title="Windmill AI"
+    	description="Have AI complete code on Windmill."
+    	href="/docs/core_concepts/ai_generation"
+    />
+</div>

docs/code_editor/index.mdx

@@ -57,9 +57,9 @@ Windmill's code editor has the following specific-features:
 		href="/docs/code_editor/assistants"
 	/>
 	<DocCard
-		title="AI Generation"
+		title="Windmill AI"
 		description="Windmill provides ways to have AI help you in your coding experience."
-		href="/docs/code_editor/ai_generation"
+		href="/docs/core_concepts/ai_generation"
 	/>
 </div>
 

docs/compared_to/prefect.mdx

@@ -14,7 +14,7 @@ We highlight below the main differences between the 2 on the following axis:
 		- [Benchmark #1](#benchmark-1)
 		- [Benchmark #2](#benchmark-2)
 	- [Observability and Monitoring](#observability-and-monitoring)
-	- [AI Generation](#ai-generation)
+	- [Windmill AI](#ai-generation)
 	- [Pricing](#pricing)
 	- [Scripts and Apps](#scripts-and-apps)
 
@@ -234,7 +234,7 @@ The main difference is that Prefect's application seems to be conceived as a rel
     />
 </div>
 
-## AI Generation
+## Windmill AI
 
 Windmill provides ways to have AI help you in your coding experience. From prompts, generate scripts that interact with your integrations, or flows where the AI manages the data transmission between steps, or even automatic error resolution.
 
@@ -248,9 +248,9 @@ Windmill provides ways to have AI help you in your coding experience. From promp
 
 <div class="grid grid-cols-2 gap-6 mb-4">
 	<DocCard
-    	title="AI Generation"
+    	title="Windmill AI"
     	description="Have AI complete code on Windmill."
-    	href="/docs/code_editor/ai_generation"
+    	href="/docs/core_concepts/ai_generation"
     />
 </div>
 

docs/core_concepts/17_collaboration/index.mdx

@@ -68,13 +68,13 @@ Workspaces in Windmill enable a dev/staging/prod workflow directly from the web
 
 :::info Enterprise Feature
 
-This feature is [enterprise & team editions](../../misc/7_plans_details/index.mdx) only.
+This feature is [Cloud & Enterprise Self-Hosted](../../misc/7_plans_details/index.mdx) only.
 
 :::
 
 ## Multiplayer Editing
 
-Multiplayer editing is available for script editing in the enterprise & team editions of Windmill. It allows simultaneous collaboration and displays a presence bar to avoid conflicts. Windmill is actively working on adding multiplayer editing for flow and app editors as well. This feature enhances real-time collaboration among team members.
+Multiplayer editing is available for script editing in the Cloud & Enterprise Self-Hosted of Windmill. It allows simultaneous collaboration and displays a presence bar to avoid conflicts. Windmill is actively working on adding multiplayer editing for flow and app editors as well. This feature enhances real-time collaboration among team members.
 
 <video
 	className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
@@ -95,7 +95,7 @@ Multiplayer editing is available for script editing in the enterprise & team edi
 
 :::info Enterprise Feature
 
-This feature is [enterprise & team editions](/pricing) only.
+This feature is [Cloud & Enterprise Self-Hosted](/pricing) only.
 
 :::
 
@@ -118,7 +118,7 @@ You can use this to:
 <div class="text-xl mb-2 font-semibold"></div>
 <div class="grid grid-cols-2 gap-6 mb-4">
 	<DocCard
-		title="Command Line Interface (wmill)"
+		title="Command Line Interface (CLI)"
 		description="The Windmill CLI, `wmill` allows you to interact with Windmill instances right from your terminal."
 		href="/docs/advanced/cli"
 	/>