From 91743c3cfbce22a72ca33feef4cd2fa4714a4282 Mon Sep 17 00:00:00 2001
From: HugoCasa <hugo@casademont.ch>
Date: Wed, 7 Feb 2024 14:33:33 +0100
Subject: [PATCH] feat: violet ai branding + flow summary (#3171)

* feat: violet ai branding + flow summary

* fix: npm run check
---
 .../src/lib/components/ScriptBuilder.svelte   |  89 ++---
 .../copilot/CodeCompletionStatus.svelte       |   9 +-
 .../src/lib/components/copilot/CronGen.svelte |   8 +-
 .../copilot/FlowCopilotStatus.svelte          |   8 +-
 .../lib/components/copilot/MetadataGen.svelte | 287 +++++++++-----
 .../copilot/MetadataGenToggle.svelte          |  16 +-
 .../lib/components/copilot/ScriptFix.svelte   |   4 +-
 .../lib/components/copilot/ScriptGen.svelte   |  18 +-
 .../flows/common/FlowCardHeader.svelte        |  11 +-
 .../flows/content/FlowSettings.svelte         | 371 +++++++++---------
 .../components/flows/map/VirtualItem.svelte   |   2 +-
 openflow.openapi.yaml                         |  22 --
 12 files changed, 449 insertions(+), 396 deletions(-)

diff --git a/frontend/src/lib/components/ScriptBuilder.svelte b/frontend/src/lib/components/ScriptBuilder.svelte
index b4b2db15a6..b5180860bf 100644
--- a/frontend/src/lib/components/ScriptBuilder.svelte
+++ b/frontend/src/lib/components/ScriptBuilder.svelte
@@ -35,7 +35,6 @@
 		Settings,
 		X
 	} from 'lucide-svelte'
-	import autosize from 'svelte-autosize'
 	import { SCRIPT_SHOW_BASH, SCRIPT_SHOW_GO } from '$lib/consts'
 	import UnsavedConfirmationModal from './common/confirmationModal/UnsavedConfirmationModal.svelte'
 	import { sendUserToast } from '$lib/toast'
@@ -369,8 +368,6 @@
 	let dirtyPath = false
 
 	let selectedTab: 'metadata' | 'runtime' | 'ui' = 'metadata'
-
-	let descriptionTextArea: HTMLTextAreaElement | undefined
 </script>
 
 <svelte:window on:keydown={onKeyDown} />
@@ -411,38 +408,31 @@
 										</div>
 									</svelte:fragment>
 									<div class="flex flex-col gap-4">
-										<MetadataGen
-											label="Summary"
-											bind:content={script.summary}
-											lang={script.language}
-											code={script.content}
-											configName="summary"
-											let:updateFocus
-											let:active
-											let:classNames
-											focused
-											on:change={() => {
-												if (initialPath == '' && script.summary?.length > 0 && !dirtyPath) {
-													path?.setName(
-														script.summary
-															.toLowerCase()
-															.replace(/[^a-z0-9_]/g, '_')
-															.replace(/-+/g, '_')
-															.replace(/^-|-$/g, '')
-													)
-												}
-											}}
-										>
-											<input
-												type="text"
-												autofocus
-												class={classNames}
-												on:focus={() => updateFocus(true)}
-												on:blur={() => updateFocus(false)}
-												bind:value={script.summary}
-												placeholder={!active ? 'Short summary to be displayed when listed' : ''}
+										<Label label="Summary">
+											<MetadataGen
+												label="Summary"
+												bind:content={script.summary}
+												lang={script.language}
+												code={script.content}
+												promptConfigName="summary"
+												generateOnAppear
+												on:change={() => {
+													if (initialPath == '' && script.summary?.length > 0 && !dirtyPath) {
+														path?.setName(
+															script.summary
+																.toLowerCase()
+																.replace(/[^a-z0-9_]/g, '_')
+																.replace(/-+/g, '_')
+																.replace(/^-|-$/g, '')
+														)
+													}
+												}}
+												elementProps={{
+													type: 'text',
+													placeholder: 'Short summary to be displayed when listed'
+												}}
 											/>
-										</MetadataGen>
+										</Label>
 										<Label label="Path">
 											<Path
 												bind:this={path}
@@ -455,27 +445,18 @@
 												kind="script"
 											/>
 										</Label>
-										<MetadataGen
-											bind:content={script.description}
-											lang={script.language}
-											code={script.content}
-											configName="description"
-											el={descriptionTextArea}
-											label="Description"
-											let:updateFocus
-											let:active
-											let:classNames
-										>
-											<textarea
-												on:focus={() => updateFocus(true)}
-												on:blur={() => updateFocus(false)}
-												class={classNames}
-												use:autosize
-												bind:this={descriptionTextArea}
-												bind:value={script.description}
-												placeholder={!active ? 'Description displayed in the details page' : ''}
+										<Label label="Description">
+											<MetadataGen
+												bind:content={script.description}
+												lang={script.language}
+												code={script.content}
+												promptConfigName="description"
+												elementType="textarea"
+												elementProps={{
+													placeholder: 'Description displayed'
+												}}
 											/>
-										</MetadataGen>
+										</Label>
 									</div>
 								</Section>
 
diff --git a/frontend/src/lib/components/copilot/CodeCompletionStatus.svelte b/frontend/src/lib/components/copilot/CodeCompletionStatus.svelte
index 96e7263c6d..f615cd899d 100644
--- a/frontend/src/lib/components/copilot/CodeCompletionStatus.svelte
+++ b/frontend/src/lib/components/copilot/CodeCompletionStatus.svelte
@@ -33,15 +33,12 @@
 				: {
 						icon: $codeCompletionSessionEnabled ? SparklesIcon : SparklesOffIcon,
 						classes: $codeCompletionSessionEnabled
-							? 'text-sky-900 dark:text-sky-200'
-							: 'text-sky-900/50 dark:text-sky-200/50'
+							? 'text-violet-800 dark:text-violet-400'
+							: 'text-violet-800/50 dark:text-violet-400/50'
 				  }}
 			on:click={() => {
 				storeSetting()
 			}}
-			btnClasses={$codeCompletionSessionEnabled
-				? 'bg-sky-50 dark:bg-gray-700 dark:hover:bg-surface-hover'
-				: ''}
 		/>
 	</Popover>
 {:else}
@@ -54,7 +51,7 @@
 			startIcon={{
 				icon: SparklesOffIcon
 			}}
-			disabled
+			btnClasses="text-violet-800/50 dark:text-violet-400/50"
 		/>
 	</Popover>
 {/if}
diff --git a/frontend/src/lib/components/copilot/CronGen.svelte b/frontend/src/lib/components/copilot/CronGen.svelte
index 498bc393e8..17c64d7dc9 100644
--- a/frontend/src/lib/components/copilot/CronGen.svelte
+++ b/frontend/src/lib/components/copilot/CronGen.svelte
@@ -56,13 +56,13 @@
 >
 	<svelte:fragment slot="button">
 		<Button
-			color={genLoading ? 'red' : 'dark'}
+			color={genLoading ? 'red' : 'light'}
 			size="xs"
 			nonCaptureEvent={!genLoading}
 			startIcon={{ icon: Wand2 }}
 			iconOnly
 			title="AI Assistant"
-			btnClasses="min-h-[30px] text-sky-900 dark:text-sky-200 bg-sky-100 dark:bg-gray-700 hover:bg-surface-hover dark:hover:bg-surface-hover"
+			btnClasses="min-h-[30px] text-violet-800 dark:text-violet-400 bg-violet-100 dark:bg-gray-700"
 			loading={genLoading}
 			clickableWhileLoading
 			on:click={genLoading ? () => abortController?.abort() : undefined}
@@ -84,10 +84,10 @@
 			/>
 			<Button
 				size="xs"
-				color="dark"
+				color="light"
 				variant="contained"
 				buttonType="button"
-				btnClasses="!p-1 !w-[38px] !ml-2 text-sky-900 dark:text-sky-200 bg-sky-100 dark:bg-gray-700 hover:bg-surface-hover dark:hover:bg-surface-hover"
+				btnClasses="!p-1 !w-[38px] !ml-2 text-violet-800 dark:text-violet-400 bg-violet-100 dark:bg-gray-700"
 				title="Generate CRON schedule from prompt"
 				aria-label="Generate"
 				iconOnly
diff --git a/frontend/src/lib/components/copilot/FlowCopilotStatus.svelte b/frontend/src/lib/components/copilot/FlowCopilotStatus.svelte
index 152485c1b7..b29e887535 100644
--- a/frontend/src/lib/components/copilot/FlowCopilotStatus.svelte
+++ b/frontend/src/lib/components/copilot/FlowCopilotStatus.svelte
@@ -38,7 +38,7 @@
 				$currentStepStore !== undefined ? 'z-[901]' : '',
 				copilotLoading || ($currentStepStore !== undefined && $currentStepStore !== 'Input')
 					? ''
-					: 'bg-sky-100 dark:bg-gray-700 text-sky-900 dark:text-sky-200 dark:hover:bg-surface-hover'
+					: '!text-violet-800 !dark:text-violet-400'
 			)}
 			on:click={() => {
 				if (copilotLoading || ($currentStepStore !== undefined && $currentStepStore !== 'Input')) {
@@ -72,7 +72,7 @@
 				? 'Stop'
 				: $currentStepStore !== undefined && $currentStepStore !== 'Input'
 				? 'Exit'
-				: 'AI Flow Builder'}
+				: 'AI Builder'}
 		</Button>
 		<div slot="content" class="text-sm flex flex-row items-center z-[901]">
 			<span class="font-semibold">
@@ -125,12 +125,12 @@
 				startIcon={{
 					icon: Wand2
 				}}
-				btnClasses="bg-sky-100 dark:bg-gray-700 text-sky-900 dark:text-sky-200 dark:hover:bg-surface-hover"
+				btnClasses="text-violet-800 dark:text-violet-400"
 				color={'light'}
 				variant={'border'}
 				nonCaptureEvent
 			>
-				AI
+				AI Builder
 			</Button>
 		</svelte:fragment>
 		<div class="block text-primary">
diff --git a/frontend/src/lib/components/copilot/MetadataGen.svelte b/frontend/src/lib/components/copilot/MetadataGen.svelte
index 19ba2483ee..39b17e8df8 100644
--- a/frontend/src/lib/components/copilot/MetadataGen.svelte
+++ b/frontend/src/lib/components/copilot/MetadataGen.svelte
@@ -1,23 +1,27 @@
 <script lang="ts">
 	import { getCompletion } from './lib'
-	import type { NewScript } from '$lib/gen'
 	import { isInitialCode } from '$lib/script_helpers'
-	import { Loader2 } from 'lucide-svelte'
+	import { Check, Loader2, Wand2 } from 'lucide-svelte'
 	import type { ChatCompletionMessageParam } from 'openai/resources'
 	import { copilotInfo, metadataCompletionEnabled } from '$lib/stores'
-	import Label from '../Label.svelte'
 	import { createEventDispatcher, onDestroy } from 'svelte'
 	import { sendUserToast } from '$lib/toast'
+	import { twMerge } from 'tailwind-merge'
+	import autosize from 'svelte-autosize'
+	import type { FlowValue } from '$lib/gen'
+	import YAML from 'yaml'
 
-	type Config = {
+	type PromptConfig = {
 		system: string
 		user: string
-		mode: 'automatic' | 'manual'
+		placeholderName: 'code' | 'flow'
 	}
 
-	const configs: {
-		summary: Config
-		description: Config
+	const promptConfigs: {
+		summary: PromptConfig
+		description: PromptConfig
+		flowSummary: PromptConfig
+		flowDescription: PromptConfig
 	} = {
 		summary: {
 			system: `
@@ -26,56 +30,94 @@ The summaries need to be as short as possible (maximum 8 words) and only give a
 Examples: List the commits of a GitHub repository, Divide a number by 16, etc..
 `,
 			user: `
-		Generate a very short summary for the script below:
-\'\'\'{lang}
+Generate a very short summary for the script below:
+\'\'\'code
 {code}
 \`\`\`
 `,
-			mode: 'automatic'
+			placeholderName: 'code'
 		},
 		description: {
 			system: `
 You are a helpful AI assistant. You generate descriptions from scripts.
-These descriptions are used to explain to other users what the script does, on particular on the input and what it returns.
-Descriptions should contain a maximum of 4-5 sentences.
-The description should focus on what it does and should not contain what concepts it uses (e.g. function named main, export an async function, etc...)
+These descriptions are used to explain to other users what the script does and how to use it.
+Be as short as possible to give a global idea, maximum 3-4 sentences.
+All scripts export an asynchronous function called main, do not include it in the description.
+Do not describe how to call it either.
 `,
 			user: `
-		Generate a description for the script below:
-\'\'\'{lang}
+Generate a description for the script below:
+\'\'\'code
 {code}
 \`\`\`
 `,
-			mode: 'manual'
+			placeholderName: 'code'
+		},
+		flowSummary: {
+			system: `
+			You are a helpful AI assistant. You generate very brief summaries from scripts.
+The summaries need to be as short as possible (maximum 8 words) and only give a global idea. Do not use any punctation. Avoid using prepositions and articles.
+`,
+			user: `
+Summarize the flow below in one very short sentence without punctation:
+{flow}`,
+			placeholderName: 'flow'
+		},
+		flowDescription: {
+			system: `
+You are a helpful AI assistant. You generate descriptions from flow.
+These descriptions are used to explain to other users what the flow does and how to use it.
+Be as short as possible to give a global idea, maximum 3-4 sentences.
+Do not include line breaks.
+`,
+			user: `
+Generate a description for the flow below:
+{flow}`,
+			placeholderName: 'flow'
 		}
 	}
 
+	function removeLocks(obj: any) {
+		if (obj && typeof obj === 'object') {
+			delete obj.lock
+			for (const key in obj) {
+				removeLocks(obj[key])
+			}
+		}
+		return obj
+	}
+
 	export let content: string | undefined
-	export let code: string
-	export let lang: NewScript.language
-	export let configName: keyof typeof configs
-
-	export let el: HTMLElement | undefined = undefined
-	export let label: string
+	export let code: string | undefined = undefined
+	export let flow: FlowValue | undefined = undefined
+	export let promptConfigName: keyof typeof promptConfigs
+	export let generateOnAppear: boolean = false
+	export let elementType: 'input' | 'textarea' = 'input'
+	export let elementProps: Record<string, any> = {}
 
+	let el: HTMLElement | undefined
 	let generatedContent = ''
-	let genEl: HTMLElement | undefined = undefined
 	let active = false
 	let loading = false
 	let abortController = new AbortController()
 	let manualDisabled = false
+	let width = 0
+	let genHeight = 0
 
-	export let focused = false
-	const updateFocus = (val) => {
-		focused = val
-	}
-
-	let config: Config = configs[configName]
+	let focused = false
+	let config: PromptConfig = promptConfigs[promptConfigName]
 
 	async function generateContent(automatic = false) {
 		abortController = new AbortController()
 		loading = true
 		try {
+			const placeholderContent = flow ? YAML.stringify(removeLocks(flow)) : code
+
+			if (!placeholderContent) {
+				sendUserToast('Could not generate summary: no content to generate from', true)
+				return
+			}
+			// return
 			const messages: ChatCompletionMessageParam[] = [
 				{
 					role: 'system',
@@ -83,7 +125,7 @@ The description should focus on what it does and should not contain what concept
 				},
 				{
 					role: 'user',
-					content: config.user.replace('{lang}', lang).replace('{code}', code)
+					content: config.user.replace(`{${config.placeholderName}}`, placeholderContent)
 				}
 			]
 			const response = await getCompletion(messages, abortController)
@@ -91,9 +133,6 @@ The description should focus on what it does and should not contain what concept
 			for await (const chunk of response) {
 				const toks = chunk.choices[0]?.delta?.content || ''
 				generatedContent += toks
-				if (el !== undefined && genEl !== undefined) {
-					el.style.height = Math.max(genEl.scrollHeight + 34, 58) + 'px'
-				}
 			}
 		} catch (err) {
 			if (!abortController.signal.aborted) {
@@ -111,11 +150,14 @@ The description should focus on what it does and should not contain what concept
 	if (
 		$copilotInfo.exists_openai_resource_path &&
 		$metadataCompletionEnabled &&
-		config.mode === 'automatic' &&
-		code &&
+		generateOnAppear &&
 		!content &&
+		code &&
 		!isInitialCode(code)
 	) {
+		setTimeout(() => {
+			el?.focus()
+		}, 0)
 		generateContent(true)
 	}
 
@@ -130,81 +172,120 @@ The description should focus on what it does and should not contain what concept
 		$metadataCompletionEnabled &&
 		!content &&
 		(loading || focused || !!generatedContent) &&
-		!manualDisabled
+		!manualDisabled &&
+		((config.placeholderName === 'code' && !!code) ||
+			(config.placeholderName === 'flow' &&
+				!!flow &&
+				Array.isArray(flow.modules) &&
+				flow.modules.length > 0))
 
 	$: focused && (manualDisabled = false)
 
+	$: if (content) {
+		abortController.abort()
+		generatedContent = ''
+	} else {
+		manualDisabled = false
+	}
+
+	$: if (elementType === 'textarea' && el !== undefined && !content) {
+		el.style.height = Math.max(genHeight + 34, 58) + 'px'
+	}
+
 	onDestroy(() => {
 		abortController.abort()
 	})
 </script>
 
-<div class="relative">
-	<div class="flex flex-row" />
-	<!-- svelte-ignore a11y-no-static-element-interactions -->
-	<Label {label}>
-		<div
-			class="relative"
-			on:keydown={(event) => {
-				if (!$copilotInfo.exists_openai_resource_path || !$metadataCompletionEnabled) {
-					return
-				}
-				if (event.key === 'Tab') {
-					if (!loading && generatedContent) {
-						event.preventDefault()
-						content = generatedContent
-						generatedContent = ''
-					} else if (!loading && !content) {
-						event.preventDefault()
-						generateContent()
-					}
-				} else if (event.key === 'Escape') {
-					event.preventDefault()
-					event.stopPropagation()
-					if (loading) {
-						abortController.abort()
-					} else {
-						manualDisabled = true
-					}
-				}
-			}}
-		>
-			<div
-				class={'absolute left-0.5  flex flex-row pl-1 gap-2 items-start top-[0.3rem] pointer-events-none'}
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
+	class={twMerge('relative', $$props.class)}
+	bind:clientWidth={width}
+	on:keydown={(event) => {
+		if (!$copilotInfo.exists_openai_resource_path || !$metadataCompletionEnabled) {
+			return
+		}
+		if (event.key === 'Tab') {
+			if (manualDisabled) {
+				event.preventDefault()
+				manualDisabled = false
+			} else if (!loading && generatedContent) {
+				event.preventDefault()
+				content = generatedContent
+				generatedContent = ''
+			} else if (!loading && !content) {
+				event.preventDefault()
+				generateContent()
+			}
+		} else if (event.key === 'Escape' && !manualDisabled) {
+			event.preventDefault()
+			event.stopPropagation()
+			if (loading) {
+				abortController.abort()
+			} else {
+				manualDisabled = true
+				generatedContent = ''
+			}
+		} else if (event.key === 'Backspace' && !loading && !content) {
+			manualDisabled = true
+			generatedContent = ''
+		}
+	}}
+>
+	<div
+		class={'absolute left-[0.5rem] top-[0.3rem] flex flex-row  gap-2 items-start  pointer-events-none'}
+	>
+		{#if active}
+			<span
+				class="absolute text-xs bg-violet-100 text-violet-800 dark:bg-gray-700 dark:text-violet-400 px-1 py-0.5 rounded-md flex flex-row items-center justify-center gap-2 transition-all shrink-0"
 			>
-				{#if active}
-					<span
-						class="absolute text-xs text-sky-900 bg-sky-100 dark:text-sky-200 dark:bg-gray-700 p-1 rounded-md flex flex-row items-center justify-center gap-2 w-32 shrink-0"
-					>
-						{#if loading}
-							<Loader2 class="animate-spin text-gray-500 dark:text-gray-400" size={16} />
-						{/if}
-						<div>
-							<span class="px-1 py-0.5 rounded-md text-2xs text-bold bg-white dark:bg-surface">
-								{#if loading}
-									ESC
-								{:else}
-									TAB
-								{/if}
-							</span>
-							{#if loading}
-								to cancel
-							{:else if generatedContent}
-								to accept
-							{:else}
-								to generate
-							{/if}
-						</div>
-					</span>
-					<span
-						class="text-sm leading-6 indent-[8.5rem] text-gray-500 dark:text-gray-400 pr-1"
-						bind:this={genEl}
-					>
-						{generatedContent}
-					</span>
-				{/if}
+				<span class="px-0.5 py-0.5 rounded-md text-2xs text-bold flex flex-row items-center gap-1">
+					{#if loading}
+						ESC
+					{:else}
+						TAB
+					{/if}
+					{#if loading}
+						<Loader2 class="animate-spin" size={12} />
+					{:else if generatedContent}
+						<Check size={12} />
+					{:else}
+						<Wand2 size={12} />
+					{/if}
+				</span>
+			</span>
+			<div
+				bind:clientHeight={genHeight}
+				class={twMerge(
+					'text-sm leading-6 indent-[3.5rem] text-gray-500 dark:text-gray-400 pr-1',
+					elementType === 'input' ? 'text-ellipsis overflow-hidden whitespace-nowrap' : ''
+				)}
+				style={elementType === 'input' ? `max-width: calc(${width}px - 0.5rem)` : ''}
+			>
+				{generatedContent}
 			</div>
-			<slot {updateFocus} {active} classNames={active && !generatedContent ? '!pl-[8.7rem]' : ''} />
-		</div>
-	</Label>
+		{/if}
+	</div>
+	{#if elementType === 'textarea'}
+		<textarea
+			bind:this={el}
+			bind:value={content}
+			use:autosize
+			{...elementProps}
+			placeholder={!active ? elementProps.placeholder : ''}
+			class={active ? '!indent-[3.5rem]' : ''}
+			on:focus={() => (focused = true)}
+			on:blur={() => (focused = false)}
+		/>
+	{:else}
+		<input
+			bind:this={el}
+			bind:value={content}
+			placeholder={!active ? elementProps.placeholder : ''}
+			class={active ? '!indent-[3.5rem]' : ''}
+			on:focus={() => (focused = true)}
+			on:blur={() => (focused = false)}
+		/>
+	{/if}
+	<!-- <slot {updateFocus} {active} {generatedContent} classNames={active ? '!indent-[8.8rem]' : ''} /> -->
 </div>
diff --git a/frontend/src/lib/components/copilot/MetadataGenToggle.svelte b/frontend/src/lib/components/copilot/MetadataGenToggle.svelte
index ef33eafd81..c3fcac040d 100644
--- a/frontend/src/lib/components/copilot/MetadataGenToggle.svelte
+++ b/frontend/src/lib/components/copilot/MetadataGenToggle.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { ExternalLink, Sparkles, ZapOffIcon } from 'lucide-svelte'
+	import { ExternalLink, Sparkles } from 'lucide-svelte'
 	import Button from '../common/button/Button.svelte'
 	import { copilotInfo, metadataCompletionEnabled } from '$lib/stores'
 	import Popover from '../Popover.svelte'
@@ -22,7 +22,7 @@
 {#if $copilotInfo.exists_openai_resource_path}
 	<Popover>
 		<svelte:fragment slot="text"
-			>Metadata completion: {$metadataCompletionEnabled ? 'disabled' : 'enabled'} (applies only to you)</svelte:fragment
+			>Metadata completion: {$metadataCompletionEnabled ? 'enabled' : 'disabled'} (applies only to you)</svelte:fragment
 		>
 		<Button
 			size="xs"
@@ -30,13 +30,13 @@
 			startIcon={{
 				icon: $metadataCompletionEnabled ? Sparkles : SparklesOffIcon,
 				classes: $metadataCompletionEnabled
-					? 'text-sky-900 dark:text-sky-200'
-					: 'text-sky-900/50 dark:text-sky-200/50'
+					? 'text-violet-800 dark:text-violet-400'
+					: 'text-violet-800/50 dark:text-violet-400/50'
 			}}
 			on:click={() => {
 				storeSetting()
 			}}
-			btnClasses={$metadataCompletionEnabled ? 'bg-sky-100 dark:bg-gray-700' : ''}
+			btnClasses="p-1.5"
 		/>
 	</Popover>
 {:else}
@@ -52,10 +52,12 @@
 		</svelte:fragment>
 		<Button
 			color="light"
+			size="xs"
+			class="text-violet-800/50 dark:text-violet-400/50"
+			btnClasses="p-1.5"
 			startIcon={{
-				icon: ZapOffIcon
+				icon: SparklesOffIcon
 			}}
-			disabled
 		/>
 	</Popover>
 {/if}
diff --git a/frontend/src/lib/components/copilot/ScriptFix.svelte b/frontend/src/lib/components/copilot/ScriptFix.svelte
index 637f7d23b4..8dc49f4a14 100644
--- a/frontend/src/lib/components/copilot/ScriptFix.svelte
+++ b/frontend/src/lib/components/copilot/ScriptFix.svelte
@@ -162,14 +162,14 @@
 					<Button
 						title="Fix code"
 						size="xs"
-						color={genLoading ? 'red' : 'blue'}
+						color={genLoading ? 'red' : 'light'}
 						spacingSize="xs2"
 						startIcon={genLoading ? undefined : { icon: Wand2 }}
 						nonCaptureEvent={!genLoading}
 						on:click={genLoading ? () => abortController?.abort() : undefined}
 						btnClasses={genLoading
 							? ''
-							: 'text-sky-900 bg-sky-100 dark:text-sky-200 dark:bg-gray-700 hover:bg-surface-hover dark:hover:bg-surface-hover'}
+							: 'text-violet-800 dark:text-violet-400 bg-violet-100 dark:bg-gray-700'}
 						>{#if genLoading}
 							<WindmillIcon
 								white
diff --git a/frontend/src/lib/components/copilot/ScriptGen.svelte b/frontend/src/lib/components/copilot/ScriptGen.svelte
index 0c596f5c32..682458bda6 100644
--- a/frontend/src/lib/components/copilot/ScriptGen.svelte
+++ b/frontend/src/lib/components/copilot/ScriptGen.svelte
@@ -270,9 +270,7 @@
 				<Button
 					size="xs"
 					color={genLoading ? 'red' : 'light'}
-					btnClasses={genLoading
-						? '!px-3 z-[5000]'
-						: '!px-2  bg-sky-50 dark:bg-gray-700 dark:hover:bg-surface-hover'}
+					btnClasses={genLoading ? '!px-3 z-[5000]' : '!px-2'}
 					nonCaptureEvent={!genLoading}
 					on:click={genLoading ? () => abortController?.abort() : undefined}
 					bind:element={button}
@@ -280,23 +278,19 @@
 					title="Generate code from Prompt"
 					startIcon={genLoading
 						? { icon: Ban }
-						: { icon: Wand2, classes: 'text-sky-900 dark:text-sky-200 ' }}
+						: { icon: Wand2, classes: 'text-violet-800 dark:text-violet-400' }}
 				/>
 			{:else}
 				<Button
 					title="Generate code from prompt"
 					btnClasses={twMerge(
 						'!font-medium',
-						genLoading
-							? 'z-[5000]'
-							: 'text-sky-900 dark:text-sky-200 bg-sky-50 dark:bg-gray-700 dark:hover:bg-surface-hover'
+						genLoading ? 'z-[5000]' : 'text-violet-800 dark:text-violet-400'
 					)}
 					size="xs"
 					color={genLoading ? 'red' : 'light'}
 					spacingSize="md"
-					startIcon={genLoading
-						? undefined
-						: { icon: Wand2, classes: 'text-sky-900 dark:text-sky-200' }}
+					startIcon={genLoading ? undefined : { icon: Wand2 }}
 					propagateEvent
 					on:click={genLoading
 						? () => abortController?.abort()
@@ -366,9 +360,9 @@
 						/>
 						<Button
 							size="xs"
-							color="blue"
+							color="light"
 							buttonType="button"
-							btnClasses="!p-1 !w-[38px] !ml-2 text-sky-900 dark:text-sky-200 bg-sky-100 dark:bg-gray-700 hover:bg-surface-hover dark:hover:bg-surface-hover"
+							btnClasses="!p-1 !w-[38px] !ml-2 text-violet-800 dark:text-violet-400 bg-violet-100 dark:bg-gray-700"
 							title="Generate code from prompt"
 							aria-label="Generate"
 							on:click={() => {
diff --git a/frontend/src/lib/components/flows/common/FlowCardHeader.svelte b/frontend/src/lib/components/flows/common/FlowCardHeader.svelte
index 4a762d32d2..fae7578b8a 100644
--- a/frontend/src/lib/components/flows/common/FlowCardHeader.svelte
+++ b/frontend/src/lib/components/flows/common/FlowCardHeader.svelte
@@ -2,6 +2,7 @@
 	import Badge from '$lib/components/common/badge/Badge.svelte'
 	import Button from '$lib/components/common/button/Button.svelte'
 	import LanguageIcon from '$lib/components/common/languageIcons/LanguageIcon.svelte'
+	import MetadataGen from '$lib/components/copilot/MetadataGen.svelte'
 	import IconedPath from '$lib/components/IconedPath.svelte'
 	import { ScriptService, type FlowModule, type PathScript } from '$lib/gen'
 	import { workspaceStore } from '$lib/stores'
@@ -41,7 +42,15 @@
 					<div class="mx-0.5">
 						<LanguageIcon lang={flowModule.value.language} width={20} height={20} />
 					</div>
-					<input bind:value={flowModule.summary} placeholder={'Summary'} class="w-full grow" />
+					<MetadataGen
+						bind:content={flowModule.summary}
+						promptConfigName="summary"
+						code={flowModule.value.content}
+						class="w-full"
+						elementProps={{
+							placeholder: 'Summary'
+						}}
+					/>
 				{:else if flowModule?.value.type === 'script' && 'path' in flowModule.value && flowModule.value.path}
 					<IconedPath path={flowModule.value.path} hash={flowModule.value.hash} class="grow" />
 
diff --git a/frontend/src/lib/components/flows/content/FlowSettings.svelte b/frontend/src/lib/components/flows/content/FlowSettings.svelte
index 56cd0a6816..9148b615cb 100644
--- a/frontend/src/lib/components/flows/content/FlowSettings.svelte
+++ b/frontend/src/lib/components/flows/content/FlowSettings.svelte
@@ -11,7 +11,6 @@
 	import { Alert, Button, SecondsInput } from '$lib/components/common'
 	import { getContext } from 'svelte'
 	import type { FlowEditorContext } from '../types'
-	import autosize from 'svelte-autosize'
 	import Slider from '$lib/components/Slider.svelte'
 	import { enterpriseLicense, workerTags, workspaceStore } from '$lib/stores'
 	import { isCloudHosted } from '$lib/cloud'
@@ -25,6 +24,8 @@
 	import Label from '$lib/components/Label.svelte'
 	import ErrorHandlerToggleButton from '$lib/components/details/ErrorHandlerToggleButton.svelte'
 	import WorkerTagPicker from '$lib/components/WorkerTagPicker.svelte'
+	import MetadataGen from '$lib/components/copilot/MetadataGen.svelte'
+	import MetadataGenToggle from '$lib/components/copilot/MetadataGenToggle.svelte'
 
 	export let noEditor: boolean
 
@@ -69,192 +70,202 @@
 
 				<svelte:fragment slot="content">
 					<TabContent value="settings-metadata" class="p-4 h-full overflow-auto">
-						<div class="h-full gap-8 flex flex-col">
-							<Label label="Summary">
-								<input
-									type="text"
-									autofocus
-									bind:value={$flowStore.summary}
-									placeholder="Short summary to be displayed when listed"
-									id="flow-summary"
-									on:keyup={() => {
-										if (initialPath == '' && $flowStore.summary?.length > 0 && !dirtyPath) {
-											path?.setName(
-												$flowStore.summary
-													.toLowerCase()
-													.replace(/[^a-z0-9_]/g, '_')
-													.replace(/-+/g, '_')
-													.replace(/^-|-$/g, '')
-											)
-										}
-									}}
-								/>
-							</Label>
-
-							{#if !noEditor}
-								<Label label="Path">
-									<Path
-										autofocus={false}
-										bind:this={path}
-										bind:dirty={dirtyPath}
-										bind:path={$pathStore}
-										{initialPath}
-										namePlaceholder="flow"
-										kind="flow"
-									/>
-								</Label>
-							{/if}
-
-							<Label label="Description">
-								<textarea
-									use:autosize
-									type="text"
-									class="text-sm"
-									id="inp"
-									bind:value={$flowStore.description}
-									placeholder="What this flow does and how to use it."
-									rows="3"
-								/>
-							</Label>
-
-							<!-- TODO: Add EE-only badge when we have it -->
-							<Toggle
-								disabled={!$enterpriseLicense || isCloudHosted()}
-								checked={$flowStore.value.priority !== undefined && $flowStore.value.priority > 0}
-								on:change={() => {
-									if ($flowStore.value.priority) {
-										$flowStore.value.priority = undefined
-									} else {
-										$flowStore.value.priority = 100
-									}
-								}}
-								options={{
-									right: `Label as high priority`,
-									rightTooltip: `All jobs scheduled by flows labeled as high priority take precedence over the other jobs in the jobs queue. ${
-										!$enterpriseLicense
-											? 'This is a feature only available on enterprise edition.'
-											: ''
-									}`
-								}}
-							>
-								<svelte:fragment slot="right">
-									<input
-										type="number"
-										class="!w-16 ml-4"
-										disabled={$flowStore.value.priority === undefined}
-										bind:value={$flowStore.value.priority}
-										on:focus
+						<Section label="Metadata">
+							<svelte:fragment slot="header">
+								<MetadataGenToggle />
+							</svelte:fragment>
+							<div class="h-full gap-8 flex flex-col">
+								<Label label="Summary">
+									<MetadataGen
+										bind:content={$flowStore.summary}
+										promptConfigName="flowSummary"
+										flow={$flowStore.value}
 										on:change={() => {
-											if ($flowStore.value.priority && $flowStore.value.priority > 100) {
-												$flowStore.value.priority = 100
-											} else if ($flowStore.value.priority && $flowStore.value.priority < 0) {
-												$flowStore.value.priority = 0
+											if (initialPath == '' && $flowStore.summary?.length > 0 && !dirtyPath) {
+												path?.setName(
+													$flowStore.summary
+														.toLowerCase()
+														.replace(/[^a-z0-9_]/g, '_')
+														.replace(/-+/g, '_')
+														.replace(/^-|-$/g, '')
+												)
 											}
 										}}
+										elementProps={{
+											type: 'text',
+											id: 'flow-summary',
+											placeholder: 'Short summary to be displayed when listed'
+										}}
 									/>
-								</svelte:fragment>
-							</Toggle>
+								</Label>
 
-							<div class="flex flex-row items-center gap-1">
-								<ErrorHandlerToggleButton
-									kind="flow"
-									scriptOrFlowPath={$pathStore}
-									bind:errorHandlerMuted={$flowStore.ws_error_handler_muted}
-									iconOnly={false}
-								/>
-							</div>
+								{#if !noEditor}
+									<Label label="Path">
+										<Path
+											autofocus={false}
+											bind:this={path}
+											bind:dirty={dirtyPath}
+											bind:path={$pathStore}
+											{initialPath}
+											namePlaceholder="flow"
+											kind="flow"
+										/>
+									</Label>
+								{/if}
 
-							<Slider text="How to trigger flows?">
-								<div class="text-sm text-tertiary border p-4 mb-20">
-									On-demand:
-									<ul class="pt-4">
-										<li>
-											1. <a
-												href="https://www.windmill.dev/docs/core_concepts/auto_generated_uis"
-												target="_blank">Auto-generated UIs</a
-											>
-										</li>
-										<li>
-											2. <a href="/apps/add?nodraft=true" target="_blank"> App Editor</a> for customized-UIs
-										</li>
-										<li>
-											3. <a href="/schedules" target="_blank">Scheduling</a>
-										</li>
-										<li>
-											4. <a href="https://www.windmill.dev/docs/advanced/cli" target="_blank"
-												>Windmill CLI</a
-											>
-										</li>
-										<br />
-										<li class="mt-2">
-											<div class="flex flex-col gap-2">
-												<p> From external events: </p>
-											</div>
-										</li>
-										<li class="mt-2">
-											5. Send a <a
-												href="https://www.windmill.dev/docs/core_concepts/webhooks"
-												target="_blank">webhook</a
-											>
-											after each event:
-											<ul class="list-disc pl-4"
-												><li
-													>Async <Tooltip
-														>Return an uuid instantly that you can use to fetch status and result</Tooltip
-													>:
-													<a
-														on:click={(e) => {
-															e.preventDefault()
-															copyToClipboard(url)
-														}}
-														href={url}
-														class="whitespace-nowrap text-ellipsis overflow-hidden mr-1"
-													>
-														{url}
-														<span class="text-secondary ml-2">
-															<Clipboard />
-														</span>
-													</a>
-												</li>
-												<li
-													>Sync <Tooltip>Wait for result within a timeout of 20s</Tooltip>:
-													<a
-														on:click={(e) => {
-															e.preventDefault()
-															copyToClipboard(syncedUrl)
-														}}
-														href={syncedUrl}
-														class="whitespace-nowrap text-ellipsis overflow-hidden mr-1"
-													>
-														{syncedUrl}
-														<span class="text-secondary ml-2">
-															<Clipboard />
-														</span>
-													</a>
-												</li>
-											</ul></li
-										>
-										<br />
-										<li>
-											6. Use a <a
-												href="https://www.windmill.dev/docs/flows/flow_trigger"
-												target="_blank">trigger script</a
-											>
-											and schedule this flow to run as frequently as needed and compare a state persisted
-											in Windmill to the state of the external system. If a difference is detected, then
-											the rest of the flow is triggered. Oftentimes, the second step of a flow is a for-loop
-											that will iterate over every elements. When using a trigger, a default schedule
-											will be created.
-											<img
-												class="shadow-lg border rounded"
-												alt="static button"
-												src="/trigger_button.png"
-											/>
-										</li></ul
-									>
+								<Label label="Description">
+									<MetadataGen
+										bind:content={$flowStore.description}
+										promptConfigName="flowDescription"
+										flow={$flowStore.value}
+										class="w-full"
+										elementType="textarea"
+										elementProps={{
+											id: 'inp',
+											placeholder: 'What this flow does and how to use it.'
+										}}
+									/>
+								</Label>
+
+								<!-- TODO: Add EE-only badge when we have it -->
+								<Toggle
+									disabled={!$enterpriseLicense || isCloudHosted()}
+									checked={$flowStore.value.priority !== undefined && $flowStore.value.priority > 0}
+									on:change={() => {
+										if ($flowStore.value.priority) {
+											$flowStore.value.priority = undefined
+										} else {
+											$flowStore.value.priority = 100
+										}
+									}}
+									options={{
+										right: `Label as high priority`,
+										rightTooltip: `All jobs scheduled by flows labeled as high priority take precedence over the other jobs in the jobs queue. ${
+											!$enterpriseLicense
+												? 'This is a feature only available on enterprise edition.'
+												: ''
+										}`
+									}}
+								>
+									<svelte:fragment slot="right">
+										<input
+											type="number"
+											class="!w-16 ml-4"
+											disabled={$flowStore.value.priority === undefined}
+											bind:value={$flowStore.value.priority}
+											on:focus
+											on:change={() => {
+												if ($flowStore.value.priority && $flowStore.value.priority > 100) {
+													$flowStore.value.priority = 100
+												} else if ($flowStore.value.priority && $flowStore.value.priority < 0) {
+													$flowStore.value.priority = 0
+												}
+											}}
+										/>
+									</svelte:fragment>
+								</Toggle>
+
+								<div class="flex flex-row items-center gap-1">
+									<ErrorHandlerToggleButton
+										kind="flow"
+										scriptOrFlowPath={$pathStore}
+										bind:errorHandlerMuted={$flowStore.ws_error_handler_muted}
+										iconOnly={false}
+									/>
 								</div>
-							</Slider>
-						</div>
+
+								<Slider text="How to trigger flows?">
+									<div class="text-sm text-tertiary border p-4 mb-20">
+										On-demand:
+										<ul class="pt-4">
+											<li>
+												1. <a
+													href="https://www.windmill.dev/docs/core_concepts/auto_generated_uis"
+													target="_blank">Auto-generated UIs</a
+												>
+											</li>
+											<li>
+												2. <a href="/apps/add?nodraft=true" target="_blank"> App Editor</a> for customized-UIs
+											</li>
+											<li>
+												3. <a href="/schedules" target="_blank">Scheduling</a>
+											</li>
+											<li>
+												4. <a href="https://www.windmill.dev/docs/advanced/cli" target="_blank"
+													>Windmill CLI</a
+												>
+											</li>
+											<br />
+											<li class="mt-2">
+												<div class="flex flex-col gap-2">
+													<p> From external events: </p>
+												</div>
+											</li>
+											<li class="mt-2">
+												5. Send a <a
+													href="https://www.windmill.dev/docs/core_concepts/webhooks"
+													target="_blank">webhook</a
+												>
+												after each event:
+												<ul class="list-disc pl-4"
+													><li
+														>Async <Tooltip
+															>Return an uuid instantly that you can use to fetch status and result</Tooltip
+														>:
+														<a
+															on:click={(e) => {
+																e.preventDefault()
+																copyToClipboard(url)
+															}}
+															href={url}
+															class="whitespace-nowrap text-ellipsis overflow-hidden mr-1"
+														>
+															{url}
+															<span class="text-secondary ml-2">
+																<Clipboard />
+															</span>
+														</a>
+													</li>
+													<li
+														>Sync <Tooltip>Wait for result within a timeout of 20s</Tooltip>:
+														<a
+															on:click={(e) => {
+																e.preventDefault()
+																copyToClipboard(syncedUrl)
+															}}
+															href={syncedUrl}
+															class="whitespace-nowrap text-ellipsis overflow-hidden mr-1"
+														>
+															{syncedUrl}
+															<span class="text-secondary ml-2">
+																<Clipboard />
+															</span>
+														</a>
+													</li>
+												</ul></li
+											>
+											<br />
+											<li>
+												6. Use a <a
+													href="https://www.windmill.dev/docs/flows/flow_trigger"
+													target="_blank">trigger script</a
+												>
+												and schedule this flow to run as frequently as needed and compare a state persisted
+												in Windmill to the state of the external system. If a difference is detected,
+												then the rest of the flow is triggered. Oftentimes, the second step of a flow
+												is a for-loop that will iterate over every elements. When using a trigger, a
+												default schedule will be created.
+												<img
+													class="shadow-lg border rounded"
+													alt="static button"
+													src="/trigger_button.png"
+												/>
+											</li></ul
+										>
+									</div>
+								</Slider>
+							</div>
+						</Section>
 					</TabContent>
 					<TabContent value="settings-schedule" class="p-4 h-full overflow-scroll">
 						<Alert
diff --git a/frontend/src/lib/components/flows/map/VirtualItem.svelte b/frontend/src/lib/components/flows/map/VirtualItem.svelte
index ecd04a7f43..82558d6f32 100644
--- a/frontend/src/lib/components/flows/map/VirtualItem.svelte
+++ b/frontend/src/lib/components/flows/map/VirtualItem.svelte
@@ -170,7 +170,7 @@
 						: undefined}
 					slot="trigger"
 					type="button"
-					class=" bg-sky-100 dark:bg-gray-700 text-sky-900 dark:text-sky-200 dark:hover:bg-surface-hover border mx-0.5 focus:outline-none hover:bg-surface-hover focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-8 h-8 flex items-center justify-center"
+					class=" bg-surface text-violet-800 dark:text-violet-400 border mx-0.5 focus:outline-none hover:bg-surface-hover focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-8 h-8 flex items-center justify-center"
 				>
 					<Wand2 size={16} />
 				</button>
diff --git a/openflow.openapi.yaml b/openflow.openapi.yaml
index ceddbc9b2d..beddde9d33 100644
--- a/openflow.openapi.yaml
+++ b/openflow.openapi.yaml
@@ -188,7 +188,6 @@ components:
         - $ref: "#/components/schemas/BranchOne"
         - $ref: "#/components/schemas/BranchAll"
         - $ref: "#/components/schemas/Identity"
-        - $ref: "#/components/schemas/Graphql"
       discriminator:
         propertyName: type
         mapping:
@@ -199,7 +198,6 @@ components:
           branchone: "#/components/schemas/BranchOne"
           branchall: "#/components/schemas/BranchAll"
           identity: "#/components/schemas/Identity"
-          graphql: "#/components/schemas/Graphql"
 
     RawScript:
       type: object
@@ -385,26 +383,6 @@ components:
       required:
         - type
 
-    Http:
-      type: object
-      properties:
-        type:
-          type: string
-          enum:
-            - http
-      required:
-        - type
-
-    Graphql:
-      type: object
-      properties:
-        type:
-          type: string
-          enum:
-            - graphql
-      required:
-        - type
-
     FlowStatus:
       type: object
       properties: