feat: new live onboarding for flows

frontend/src/lib/components/FlowTutorials.svelte

@@ -5,13 +5,16 @@
 	import FlowBuilderTutorialSimpleFlow from './tutorials/FlowBuilderTutorialSimpleFlow.svelte'
 	import FlowBuilderTutorialForLoop from './tutorials/FlowBuilderTutorialForLoop.svelte'
 	import FlowBuilderTutorialErrorHandler from './tutorials/FlowBuilderTutorialErrorHandler.svelte'
+	import FlowBuilderLiveTutorial from './tutorials/FlowBuilderLiveTutorial.svelte'
 
 	let flowBuilderTutorialSimpleFlow: FlowBuilderTutorialSimpleFlow | undefined = $state(undefined)
 	let flowBuilderTutorialForLoop: FlowBuilderTutorialForLoop | undefined = $state(undefined)
 	let flowBuilderTutorialBranchOne: FlowBuilderTutorialBranchOne | undefined = $state(undefined)
 	let flowBuilderTutorialBranchAll: FlowBuilderTutorialBranchAll | undefined = $state(undefined)
 	let flowBuilderTutorialErrorHandler: FlowBuilderTutorialErrorHandler | undefined =
 		$state(undefined)
+	let flowBuilderLiveTutorial: FlowBuilderLiveTutorial | undefined =
+		$state(undefined)
 
 	export function runTutorialById(id: string, indexToInsertAt?: number | undefined) {
 		if (id === 'forloop') {
@@ -24,6 +27,8 @@
 			flowBuilderTutorialSimpleFlow?.runTutorial()
 		} else if (id === 'error-handler') {
 			flowBuilderTutorialErrorHandler?.runTutorial()
+		} else if (id === 'flow-live-tutorial') {
+			flowBuilderLiveTutorial?.runTutorial()
 		}
 	}
 
@@ -62,3 +67,9 @@
 	on:skipAll={skipAll}
 	on:reload
 />
+<FlowBuilderLiveTutorial
+	bind:this={flowBuilderLiveTutorial}
+	on:error
+	on:skipAll={skipAll}
+	on:reload
+/>

frontend/src/lib/components/PageHeader.svelte

@@ -5,6 +5,7 @@
 	export let tooltip: string = ''
 	export let documentationLink: string | undefined = undefined
 	export let primary: boolean = true
+	export let childrenWrapperDivClasses: string = ''
 </script>
 
 <div class="flex flex-row flex-wrap justify-between pb-2 my-4 mr-2">
@@ -31,7 +32,7 @@
 	{/if}
 
 	{#if $$slots.default}
-		<div class="my-2">
+		<div class="my-2 {childrenWrapperDivClasses}">
 			<slot />
 		</div>
 	{/if}

frontend/src/lib/components/WorkspaceTutorials.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import WorkspaceOnboardingTutorial from './tutorials/workspace/WorkspaceOnboardingTutorial.svelte'
+
+	let workspaceOnboardingTutorial: WorkspaceOnboardingTutorial | undefined = $state(undefined)
+
+	export function runTutorialById(id: string) {
+		if (id === 'workspace-onboarding') {
+			workspaceOnboardingTutorial?.runTutorial()
+		}
+	}
+</script>
+
+<WorkspaceOnboardingTutorial
+	bind:this={workspaceOnboardingTutorial}
+/>

frontend/src/lib/components/flows/CreateActionsApp.svelte

@@ -25,6 +25,7 @@
 <!-- Buttons -->
 <div class="flex flex-row gap-2">
 	<Button
+		id="create-app-button"
 		aiId="apps-create-actions-app"
 		aiDescription="Create a new low-code app"
 		unifiedSize="lg"

frontend/src/lib/components/flows/CreateActionsFlow.svelte

@@ -25,6 +25,7 @@
 <!-- Buttons -->
 <div class="flex flex-row gap-2">
 	<Button
+		id="create-flow-button"
 		aiId="flows-create-actions-flow"
 		aiDescription="Create a new flow"
 		unifiedSize="lg"

frontend/src/lib/components/flows/content/FlowModuleComponent.svelte

@@ -458,50 +458,52 @@
 													<AssetsDropdownButton {assets} />
 												{/if}
 											</div>
-											<Editor
-												loadAsync
-												folding
-												path={$pathStore + '/' + flowModule.id}
-												bind:websocketAlive
-												bind:this={editor}
-												class="h-full relative"
-												code={flowModule.value.content}
-												scriptLang={flowModule?.value?.language}
-												automaticLayout={true}
-												cmdEnterAction={async () => {
-													selected = 'test'
-													if (selectedId == flowModule.id) {
-														if (flowModule.value.type === 'rawscript' && editor) {
-															flowModule.value.content = editor.getCode()
+											<div id="flow-editor-code-section" class="h-full relative">
+												<Editor
+													loadAsync
+													folding
+													path={$pathStore + '/' + flowModule.id}
+													bind:websocketAlive
+													bind:this={editor}
+													class="h-full relative"
+													code={flowModule.value.content}
+													scriptLang={flowModule?.value?.language}
+													automaticLayout={true}
+													cmdEnterAction={async () => {
+														selected = 'test'
+														if (selectedId == flowModule.id) {
+															if (flowModule.value.type === 'rawscript' && editor) {
+																flowModule.value.content = editor.getCode()
+															}
+															await reload(flowModule)
+															modulePreview?.runTestWithStepArgs()
 														}
-														await reload(flowModule)
-														modulePreview?.runTestWithStepArgs()
-													}
-												}}
-												on:change={async (event) => {
-													const content = event.detail
-													if (flowModule.value.type === 'rawscript') {
-														if (flowModule.value.content !== content) {
-															flowModule.value.content = content
+													}}
+													on:change={async (event) => {
+														const content = event.detail
+														if (flowModule.value.type === 'rawscript') {
+															if (flowModule.value.content !== content) {
+																flowModule.value.content = content
+															}
+															await reload(flowModule)
 														}
-														await reload(flowModule)
-													}
-												}}
-												formatAction={() => {
-													reload(flowModule)
-													saveDraft()
-												}}
-												fixedOverflowWidgets={true}
-												args={Object.entries(flowModule.value.input_transforms).reduce(
-													(acc, [key, obj]) => {
-														acc[key] = obj.type === 'static' ? obj.value : undefined
-														return acc
-													},
-													{}
-												)}
-												key={`flow-inline-${$workspaceStore}-${$pathStore}-${flowModule.id}`}
-												moduleId={flowModule.id}
-											/>
+													}}
+													formatAction={() => {
+														reload(flowModule)
+														saveDraft()
+													}}
+													fixedOverflowWidgets={true}
+													args={Object.entries(flowModule.value.input_transforms).reduce(
+														(acc, [key, obj]) => {
+															acc[key] = obj.type === 'static' ? obj.value : undefined
+															return acc
+														},
+														{}
+													)}
+													key={`flow-inline-${$workspaceStore}-${$pathStore}-${flowModule.id}`}
+													moduleId={flowModule.id}
+												/>
+											</div>
 											<DiffEditor
 												open={false}
 												bind:this={diffEditor}

frontend/src/lib/components/flows/map/FlowModuleSchemaItemViewer.svelte

@@ -38,6 +38,7 @@
 </script>
 
 <div
+	id={id || undefined}
 	class="relative flex gap-1 justify-between items-center w-full overflow-hidden rounded-sm
 	 p-2 text-2xs module text-primary"
 >

frontend/src/lib/components/scripts/CreateActionsScript.svelte

@@ -9,6 +9,7 @@
 <!-- Buttons -->
 <div class="flex flex-row gap-2">
 	<Button
+		id="create-script-button"
 		{aiId}
 		{aiDescription}
 		unifiedSize="lg"

frontend/src/lib/components/sidebar/SidebarContent.svelte

@@ -312,6 +312,13 @@
 		// 	icon: Cog,
 		// 	disabled: !$userStore?.is_admin && !$userStore?.is_super_admin
 		// },
+		{
+			label: 'Guides',
+			href: `${base}/guides`,
+			icon: BookOpen,
+			aiId: 'sidebar-menu-link-guides',
+			aiDescription: 'Button to navigate to guides and documentation'
+		},
 		{
 			label: 'Settings',
 			icon: Settings,