feat: add dyn select for flow step #6662

frontend/src/lib/components/InputTransformForm.svelte

@@ -9,7 +9,7 @@
 
 <script lang="ts">
 	import type { Schema } from '$lib/common'
-	import type { InputCat } from '$lib/utils'
+	import type { InputCat, DynamicInput as DynamicInputTypes } from '$lib/utils'
 	import { createEventDispatcher, getContext, untrack } from 'svelte'
 	import { computeShow } from '$lib/utils'
 
@@ -61,6 +61,7 @@
 		class?: string
 		editor?: SimpleEditor | undefined
 		otherArgs?: Record<string, InputTransform>
+		helperScript?: DynamicInputTypes.HelperScript | undefined
 	}
 
 	let {
@@ -83,7 +84,8 @@
 		hideHelpButton = false,
 		class: className = '',
 		editor = $bindable(undefined),
-		otherArgs = {}
+		otherArgs = {},
+		helperScript = undefined
 	}: Props = $props()
 
 	let monaco: SimpleEditor | undefined = $state(undefined)
@@ -620,6 +622,7 @@
 									</Button>
 								{:else}
 									<ToggleButton
+										disabled={inputCat === 'dynamic'}
 										small
 										light
 										tooltip="JavaScript expression ('flow_input' or 'results')."
@@ -632,7 +635,7 @@
 						</ToggleButtonGroup>
 					</div>
 
-					{#if propPickerWrapperContext}
+					{#if propPickerWrapperContext && inputCat !== 'dynamic'}
 						<FlowPlugConnect
 							id="flow-editor-plug"
 							{connecting}
@@ -733,6 +736,13 @@
 							nullable={schema.properties[argName].nullable}
 							bind:title={schema.properties[argName].title}
 							bind:placeholder={schema.properties[argName].placeholder}
+							{helperScript}
+							otherArgs={Object.fromEntries(
+								Object.entries(otherArgs).map(([key, transform]) => [
+									key,
+									transform?.type === 'static' ? transform.value : transform?.expr
+								])
+							)}
 						/>
 
 						{#if shouldShowS3ArrayHelper}

frontend/src/lib/components/InputTransformSchemaForm.svelte

@@ -2,7 +2,7 @@
 	import type { Schema } from '$lib/common'
 	import { VariableService, type InputTransform } from '$lib/gen'
 	import { workspaceStore } from '$lib/stores'
-	import { allTrue } from '$lib/utils'
+	import { allTrue, type DynamicInput as DynamicInputTypes } from '$lib/utils'
 	import { untrack } from 'svelte'
 	import { Button } from './common'
 	import StepInputsGen from './copilot/StepInputsGen.svelte'
@@ -23,6 +23,7 @@
 		pickableProperties?: PickableProperties | undefined
 		enableAi?: boolean
 		class?: string
+		helperScript?: DynamicInputTypes.HelperScript
 	}
 
 	let {
@@ -35,7 +36,8 @@
 		noDynamicToggle = false,
 		pickableProperties = undefined,
 		enableAi = false,
-		class: clazz = ''
+		class: clazz = '',
+		helperScript = undefined
 	}: Props = $props()
 
 	let inputCheck: { [id: string]: boolean } = $state({})
@@ -115,6 +117,7 @@
 						{noDynamicToggle}
 						{pickableProperties}
 						{enableAi}
+						{helperScript}
 						otherArgs={Object.fromEntries(
 							Object.entries(args ?? {}).filter(([key]) => key !== argName)
 						)}

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

@@ -570,6 +570,14 @@
 														}
 														extraLib={stepPropPicker.extraLib}
 														{enableAi}
+														helperScript={(flowModule?.value as RawScript).content &&
+														(flowModule?.value as RawScript).language
+															? {
+																	source: 'inline',
+																	code: (flowModule?.value as RawScript).content ?? '',
+																	lang: (flowModule?.value as RawScript).language ?? 'deno'
+																}
+															: undefined}
 													/>
 												</PropPickerWrapper>
 											</div>