From 6efaf4d2d3becf5daebf643462caeb4f93a13c77 Mon Sep 17 00:00:00 2001
From: HugoCasa <hugo@casademont.ch>
Date: Tue, 20 Feb 2024 14:31:59 +0100
Subject: [PATCH] fix: ai fill deep copy before slicing modules + minor
 improvements (#3255)

* fix: AI fill deep copy before slicing modules

* feat: green to accept + improve single input gen prompt

* fix: prompt nit
---
 .../lib/components/copilot/IteratorGen.svelte | 17 +++++++++-----
 .../lib/components/copilot/MetadataGen.svelte |  7 +++++-
 .../components/copilot/PredicateGen.svelte    |  8 +++----
 .../components/copilot/StepInputGen.svelte    | 22 ++++++++++++-------
 .../components/copilot/StepInputsGen.svelte   | 20 +++++++++++------
 5 files changed, 48 insertions(+), 26 deletions(-)

diff --git a/frontend/src/lib/components/copilot/IteratorGen.svelte b/frontend/src/lib/components/copilot/IteratorGen.svelte
index 140672620e..1f2ed94a63 100644
--- a/frontend/src/lib/components/copilot/IteratorGen.svelte
+++ b/frontend/src/lib/components/copilot/IteratorGen.svelte
@@ -3,7 +3,7 @@
 	import Button from '../common/button/Button.svelte'
 	import { getNonStreamingCompletion } from './lib'
 	import { sendUserToast } from '$lib/toast'
-	import type { InputTransform } from '$lib/gen'
+	import type { Flow, InputTransform } from '$lib/gen'
 	import ManualPopover from '../ManualPopover.svelte'
 	import { createEventDispatcher, getContext } from 'svelte'
 	import type { FlowEditorContext } from '../flows/types'
@@ -13,6 +13,7 @@
 	import { dfs } from '../flows/dfs'
 	import { yamlStringifyExceptKeys } from './utils'
 	import { copilotInfo, stepInputCompletionEnabled } from '$lib/stores'
+	import { twMerge } from 'tailwind-merge'
 
 	let generatedContent = ''
 	let loading = false
@@ -36,7 +37,8 @@
 		}
 		abortController = new AbortController()
 		loading = true
-		const idOrders = dfs($flowStore.value.modules, (x) => x.id)
+		const flow: Flow = JSON.parse(JSON.stringify($flowStore))
+		const idOrders = dfs(flow.value.modules, (x) => x.id)
 		const upToIndex = idOrders.indexOf($selectedId)
 		if (upToIndex === -1) {
 			throw new Error('Could not find the selected id in the flow')
@@ -44,9 +46,7 @@
 
 		const flowDetails =
 			'Take into account the following information for never tested results:\n<flowDetails>\n' +
-			yamlStringifyExceptKeys(sliceModules($flowStore.value.modules, upToIndex, idOrders), [
-				'lock'
-			]) +
+			yamlStringifyExceptKeys(sliceModules(flow.value.modules, upToIndex, idOrders), ['lock']) +
 			'</flowDetails>'
 		try {
 			const availableData = {
@@ -136,7 +136,12 @@ Only output the expression, do not explain or discuss.`
 		<Button
 			size="xs"
 			color="light"
-			btnClasses="text-violet-800 dark:text-violet-400 bg-violet-100 dark:bg-gray-700 dark:hover:bg-surface-hover"
+			btnClasses={twMerge(
+				'text-violet-800 dark:text-violet-400 bg-violet-100 dark:bg-gray-700 dark:hover:bg-surface-hover',
+				!loading && generatedContent.length > 0
+					? 'bg-green-100 text-green-800 hover:bg-green-100 dark:text-green-400 dark:bg-green-700 dark:hover:bg-green-700'
+					: ''
+			)}
 			on:click={() => {
 				if (!loading && generatedContent.length > 0) {
 					dispatch('setExpr', generatedContent)
diff --git a/frontend/src/lib/components/copilot/MetadataGen.svelte b/frontend/src/lib/components/copilot/MetadataGen.svelte
index c99facc249..b5e6b64e90 100644
--- a/frontend/src/lib/components/copilot/MetadataGen.svelte
+++ b/frontend/src/lib/components/copilot/MetadataGen.svelte
@@ -227,7 +227,12 @@ Generate a description for the flow below:
 	>
 		{#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"
+				class={twMerge(
+					'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',
+					!loading && generatedContent.length > 0
+						? 'bg-green-100 text-green-800 dark:text-green-400 dark:bg-green-700'
+						: ''
+				)}
 			>
 				<span class="px-0.5 py-0.5 rounded-md text-2xs text-bold flex flex-row items-center gap-1">
 					{#if loading}
diff --git a/frontend/src/lib/components/copilot/PredicateGen.svelte b/frontend/src/lib/components/copilot/PredicateGen.svelte
index 21ec11a01e..1df3ab6576 100644
--- a/frontend/src/lib/components/copilot/PredicateGen.svelte
+++ b/frontend/src/lib/components/copilot/PredicateGen.svelte
@@ -12,6 +12,7 @@
 	import { yamlStringifyExceptKeys } from './utils'
 	import { copilotInfo, stepInputCompletionEnabled } from '$lib/stores'
 	import Popup from '../common/popup/Popup.svelte'
+	import type { Flow } from '$lib/gen'
 
 	let loading = false
 	export let pickableProperties: PickableProperties | undefined = undefined
@@ -28,7 +29,8 @@
 	async function generatePredicate() {
 		abortController = new AbortController()
 		loading = true
-		const idOrders = dfs($flowStore.value.modules, (x) => x.id)
+		const flow: Flow = JSON.parse(JSON.stringify($flowStore))
+		const idOrders = dfs(flow.value.modules, (x) => x.id)
 		const upToIndex = idOrders.indexOf($selectedId)
 		if (upToIndex === -1) {
 			throw new Error('Could not find the selected id in the flow')
@@ -36,9 +38,7 @@
 
 		const flowDetails =
 			'Take into account the following information for never tested results:\n<flowDetails>\n' +
-			yamlStringifyExceptKeys(sliceModules($flowStore.value.modules, upToIndex, idOrders), [
-				'lock'
-			]) +
+			yamlStringifyExceptKeys(sliceModules(flow.value.modules, upToIndex, idOrders), ['lock']) +
 			'</flowDetails>'
 		try {
 			const availableData = {
diff --git a/frontend/src/lib/components/copilot/StepInputGen.svelte b/frontend/src/lib/components/copilot/StepInputGen.svelte
index b72dbe2b30..74b2c56c18 100644
--- a/frontend/src/lib/components/copilot/StepInputGen.svelte
+++ b/frontend/src/lib/components/copilot/StepInputGen.svelte
@@ -3,7 +3,7 @@
 	import Button from '../common/button/Button.svelte'
 	import { getNonStreamingCompletion } from './lib'
 	import { sendUserToast } from '$lib/toast'
-	import type { InputTransform } from '$lib/gen'
+	import type { Flow, InputTransform } from '$lib/gen'
 	import ManualPopover from '../ManualPopover.svelte'
 	import { createEventDispatcher, getContext } from 'svelte'
 	import type { FlowEditorContext } from '../flows/types'
@@ -16,6 +16,7 @@
 	import { copilotInfo, stepInputCompletionEnabled } from '$lib/stores'
 	import type { SchemaProperty } from '$lib/common'
 	import FlowCopilotInputsModal from './FlowCopilotInputsModal.svelte'
+	import { twMerge } from 'tailwind-merge'
 
 	let generatedContent = ''
 	let loading = false
@@ -67,7 +68,8 @@
 		}
 		abortController = new AbortController()
 		loading = true
-		const idOrders = dfs($flowStore.value.modules, (x) => x.id)
+		const flow: Flow = JSON.parse(JSON.stringify($flowStore))
+		const idOrders = dfs(flow.value.modules, (x) => x.id)
 		const upToIndex = idOrders.indexOf($selectedId)
 		if (upToIndex === -1) {
 			throw new Error('Could not find the selected id in the flow')
@@ -75,9 +77,7 @@
 
 		const flowDetails =
 			'Take into account the following information for never tested results:\n<flowDetails>\n' +
-			yamlStringifyExceptKeys(sliceModules($flowStore.value.modules, upToIndex, idOrders), [
-				'lock'
-			]) +
+			yamlStringifyExceptKeys(sliceModules(flow.value.modules, upToIndex, idOrders), ['lock']) +
 			'</flowDetails>'
 		try {
 			const availableData = {
@@ -88,11 +88,12 @@
 The current step is ${selectedId}, you can find the details for the step and previous ones below:
 ${flowDetails}
 Determine for the input "${argName}", what to pass either from the previous results or the flow inputs. 
-All possibles inputs either start with results. or flow_input. and are follow by the key of the input.
+All possibles inputs either start with results. or flow_input. and are followed by the key of the input.
 Here's a summary of the available data:
 <available>
 ${YAML.stringify(availableData)}</available>
-If none of the available results are appropriate, are already used or are more appropriate for other inputs, you can also imagine new flow_input properties which we will create programmatically based on what you provide.
+Favor results and flow_input.iter.value over flow inputs.
+If none of the results and flow inputs are appropriate (or a more appropriate for other step inputs), you can also imagine new flow_input properties which we will create programmatically based on what you provide.
 Reply with the most probable answer, do not explain or discuss.
 Use javascript object dot notation to access the properties.
 Only return the expression without any wrapper.`
@@ -198,7 +199,12 @@ Only return the expression without any wrapper.`
 		<Button
 			size="xs"
 			color="light"
-			btnClasses="text-violet-800 dark:text-violet-400 bg-violet-100 dark:bg-gray-700 dark:hover:bg-surface-hover"
+			btnClasses={twMerge(
+				'text-violet-800 dark:text-violet-400 bg-violet-100 dark:bg-gray-700 dark:hover:bg-surface-hover',
+				!loading && generatedContent.length > 0
+					? 'bg-green-100 text-green-800 hover:bg-green-100 dark:text-green-400 dark:bg-green-700 dark:hover:bg-green-700'
+					: ''
+			)}
 			on:click={() => {
 				if (!loading && generatedContent.length > 0) {
 					dispatch('setExpr', generatedContent)
diff --git a/frontend/src/lib/components/copilot/StepInputsGen.svelte b/frontend/src/lib/components/copilot/StepInputsGen.svelte
index 309540eab2..33af6ed822 100644
--- a/frontend/src/lib/components/copilot/StepInputsGen.svelte
+++ b/frontend/src/lib/components/copilot/StepInputsGen.svelte
@@ -15,6 +15,8 @@
 	import { Popup } from '../common'
 	import type { SchemaProperty, Schema } from '$lib/common'
 	import FlowCopilotInputsModal from './FlowCopilotInputsModal.svelte'
+	import type { Flow } from '$lib/gen'
+	import { twMerge } from 'tailwind-merge'
 
 	let loading = false
 	export let pickableProperties: PickableProperties | undefined = undefined
@@ -38,16 +40,15 @@
 		abortController = new AbortController()
 		loading = true
 		stepInputsLoading?.set(true)
-		const idOrders = dfs($flowStore.value.modules, (x) => x.id)
+		const flow: Flow = JSON.parse(JSON.stringify($flowStore))
+		const idOrders = dfs(flow.value.modules, (x) => x.id)
 		const upToIndex = idOrders.indexOf($selectedId)
 		if (upToIndex === -1) {
 			throw new Error('Could not find the selected id in the flow')
 		}
 		const flowDetails =
 			'Take into account the following information for never tested results:\n<flowDetails>\n' +
-			yamlStringifyExceptKeys(sliceModules($flowStore.value.modules, upToIndex, idOrders), [
-				'lock'
-			]) +
+			yamlStringifyExceptKeys(sliceModules(flow.value.modules, upToIndex, idOrders), ['lock']) +
 			'</flowDetails>'
 
 		try {
@@ -72,8 +73,8 @@ Reply with the most probable answer, do not explain or discuss.
 Use javascript object dot notation to access the properties.
 
 Your answer has to be in the following format (one line per input):
-{input_name1}: {expression1}
-{input_name2}: {expression2}
+input_name1: expression1
+input_name2: expression2
 ...`
 
 			generatedContent = await getNonStreamingCompletion(
@@ -171,7 +172,12 @@ Your answer has to be in the following format (one line per input):
 		<Button
 			size="xs"
 			color="light"
-			btnClasses="text-violet-800 dark:text-violet-400"
+			btnClasses={twMerge(
+				'text-violet-800 dark:text-violet-400',
+				!loading && Object.keys($generatedExprs || {}).length > 0
+					? 'bg-green-100 text-green-800 hover:bg-green-100 dark:text-green-400 dark:bg-green-700 dark:hover:bg-green-700'
+					: ''
+			)}
 			on:mouseenter={(ev) => {
 				if (out) {
 					out = false