Harmonize prop picker display

This reverts commit c3f1569238.

frontend/src/lib/components/InputTransformForm.svelte

@@ -6,13 +6,15 @@
 	import ArgInput from './ArgInput.svelte'
 	import FieldHeader from './FieldHeader.svelte'
 	import DynamicInputHelpBox from './flows/content/DynamicInputHelpBox.svelte'
-	import type { PropPickerWrapperContext } from './flows/propPicker/PropPickerWrapper.svelte'
+	import type { PropPickerWrapperContext } from './prop_picker'
 	import { codeToStaticTemplate, getDefaultExpr } from './flows/utils'
 	import SimpleEditor from './SimpleEditor.svelte'
-	import { Button } from './common'
+	import { Button } from '$lib/components/common'
+	import AnimatedButton from '$lib/components/common/button/AnimatedButton.svelte'
 	import ToggleButtonGroup from '$lib/components/common/toggleButton-v2/ToggleButtonGroup.svelte'
 	import ToggleButton from '$lib/components/common/toggleButton-v2/ToggleButton.svelte'
-
+	import { fade } from 'svelte/transition'
+	import { tick } from 'svelte'
 	import type VariableEditor from './VariableEditor.svelte'
 	import type ItemPicker from './ItemPicker.svelte'
 	import type { InputTransform } from '$lib/gen'
@@ -23,7 +25,8 @@
 	import type { FlowCopilotContext } from './copilot/flow'
 	import StepInputGen from './copilot/StepInputGen.svelte'
 	import type { PickableProperties } from './flows/previousResults'
-
+	import { buildPrefixRegex } from './flows/previousResults'
+	import { twMerge } from 'tailwind-merge'
 	export let schema: Schema | { properties?: Record<string, any>; required?: string[] }
 	export let arg: InputTransform | any
 	export let argName: string
@@ -57,6 +60,8 @@
 	const { shouldUpdatePropertyType, exprsToSet } =
 		getContext<FlowCopilotContext | undefined>('FlowCopilotContext') || {}
 
+	const { inputMatches } = getContext<PropPickerWrapperContext>('PropPickerWrapper')
+
 	function setExpr() {
 		const newArg = $exprsToSet?.[argName]
 		if (newArg) {
@@ -131,6 +136,54 @@
 		}
 	}
 
+	let codeInjectionDetected = false
+
+	const dynamicTemplateRegexPairs = buildPrefixRegex([
+		'flow_input',
+		'results',
+		'resource',
+		'variable'
+	])
+
+	function checkCodeInjection(rawValue: string) {
+		if (!arg || !rawValue || rawValue.length < 3 || !dynamicTemplateRegexPairs) {
+			return undefined
+		}
+		const matches = dynamicTemplateRegexPairs.filter(({ regex }) => regex.test(rawValue))
+		if (matches.length > 0) {
+			return matches.map((m) => ({ word: m.word, value: rawValue }))
+		}
+		return undefined
+	}
+
+	async function setJavaScriptExpr(rawValue: string) {
+		arg = {
+			type: 'javascript',
+			expr: rawValue
+		}
+		propertyType = 'javascript'
+		monaco?.setCode('')
+		monaco?.insertAtCursor(rawValue)
+		await tick()
+		monaco?.focus()
+		await tick()
+		monaco?.setCursorToEnd()
+	}
+
+	function handleKeyUp(e: KeyboardEvent) {
+		if (
+			e.key === 'Tab' &&
+			isStaticTemplate(inputCat) &&
+			propertyType == 'static' &&
+			!noDynamicToggle &&
+			codeInjectionDetected
+		) {
+			setJavaScriptExpr(arg.value)
+		} else {
+			stepInputGen?.onKeyUp?.(e)
+		}
+	}
+
 	function isStaticTemplate(inputCat: InputCat) {
 		return inputCat === 'string' || inputCat === 'sql' || inputCat == 'yaml'
 	}
@@ -166,7 +219,24 @@
 
 	const { focusProp, propPickerConfig } = getContext<PropPickerWrapperContext>('PropPickerWrapper')
 
-	$: isStaticTemplate(inputCat) && propertyType == 'static' && setPropertyType(arg?.value)
+	$: updateStaticInput(inputCat, propertyType, arg)
+
+	function updateStaticInput(
+		inputCat: InputCat,
+		propertyType: 'static' | 'javascript',
+		arg: InputTransform | any
+	) {
+		if (!isStaticTemplate(inputCat)) {
+			return
+		}
+		if (propertyType == 'static') {
+			setPropertyType(arg?.value)
+			codeInjectionDetected = !!checkCodeInjection(arg?.value)
+		} else if (propertyType == 'javascript' && focused) {
+			setPropertyType(arg?.expr)
+			$inputMatches = checkCodeInjection(arg?.expr)
+		}
+	}
 
 	function setDefaultCode() {
 		if (!arg?.value) {
@@ -186,11 +256,22 @@
 	let stepInputGen: StepInputGen | undefined = undefined
 
 	loadResourceTypes()
+
+	$: connecting =
+		$propPickerConfig?.propName == argName && $propPickerConfig?.insertionMode == 'connect'
 </script>
 
 {#if arg != undefined}
-	<div class={$$props.class}>
-		<div class="flex flex-row justify-between gap-1 pb-1">
+	<div
+		class={twMerge(
+			'pl-2 pt-2 pb-2 ml-2 relative hover:bg-surface hover:shadow-md transition-all duration-200',
+			$propPickerConfig?.propName == argName
+				? 'bg-surface border-l-4 border-blue-500 shadow-md rounded-l-md z-2000'
+				: 'hover:rounded-md',
+			$$props.class
+		)}
+	>
+		<div class="flex flex-row justify-between gap-1 pb-1 px-2">
 			<div class="flex flex-wrap grow">
 				<FieldHeader
 					label={argName}
@@ -322,147 +403,181 @@
 						</ToggleButtonGroup>
 					</div>
 
-					<Button
-						title="Connect to another node's output"
-						variant="border"
-						color="light"
-						size="xs2"
-						on:click={() => {
-							focusProp(argName, 'connect', (path) => {
-								connectProperty(path)
-								dispatch('change', { argName })
-								return true
-							})
-						}}
-						id="flow-editor-plug"
-					>
-						<Plug size={16} /> &rightarrow;
-					</Button>
+					<AnimatedButton animate={connecting} baseRadius="6px" animationDuration="1s">
+						<Button
+							variant="border"
+							color="light"
+							size="xs2"
+							btnClasses={connecting ? 'text-blue-500' : 'text-primary'}
+							on:click={() => {
+								focusProp(argName, 'connect', (path) => {
+									connectProperty(path)
+									dispatch('change', { argName })
+									return true
+								})
+							}}
+						>
+							<Plug size={16} /> &rightarrow;
+						</Button>
+					</AnimatedButton>
 				</div>
 			{/if}
 		</div>
 
 		<div class="max-w-xs" />
 		<!-- svelte-ignore a11y-no-static-element-interactions -->
-		<div
-			class="relative {$propPickerConfig?.propName == argName
-				? 'outline outline-offset-1 outline-1 outline-blue-500 rounded-md'
-				: ''}"
-			on:keyup={stepInputGen?.onKeyUp}
-		>
-			{#if $propPickerConfig?.propName == argName && $propPickerConfig?.insertionMode == 'connect'}
+		<div class="relative" on:keyup={handleKeyUp}>
+			<!-- {#if $propPickerConfig?.propName == argName && $propPickerConfig?.insertionMode == 'connect'}
 				<span
 					class={'text-white  z-50 px-1 text-2xs py-0.5 font-bold rounded-t-sm w-fit absolute top-0 right-0 bg-blue-500'}
 				>
 					Connect input &rightarrow;
 				</span>
-			{/if}
+			{/if} -->
 			<!-- {inputCat}
 			{propertyType} -->
-			{#if isStaticTemplate(inputCat) && propertyType == 'static' && !noDynamicToggle}
-				{#if argName && schema?.properties?.[argName]?.description}
-					<div class="text-xs italic pb-1 text-secondary">
-						<pre class="font-main">{schema.properties[argName].description}</pre>
-					</div>
-				{/if}
-				<div class="mt-2 min-h-[28px]">
-					{#if arg}
-						<TemplateEditor
-							bind:this={monacoTemplate}
-							{extraLib}
+			<div class="relative flex flex-row items-top gap-2 justify-between">
+				<div class="min-w-0 grow">
+					{#if isStaticTemplate(inputCat) && propertyType == 'static' && !noDynamicToggle}
+						{#if argName && schema?.properties?.[argName]?.description}
+							<div class="text-xs italic pb-1 text-secondary">
+								<pre class="font-main">{schema.properties[argName].description}</pre>
+							</div>
+						{/if}
+						<div class="mt-2 min-h-[28px]">
+							{#if arg}
+								<TemplateEditor
+									bind:this={monacoTemplate}
+									{extraLib}
+									on:focus={onFocus}
+									on:blur={() => {
+										focused = false
+									}}
+									bind:code={arg.value}
+									fontSize={14}
+									on:change={() => {
+										dispatch('change', { argName })
+									}}
+								/>
+							{/if}
+						</div>
+
+						{#if codeInjectionDetected}
+							<Button
+								size="xs"
+								color="light"
+								btnClasses="font-normal text-xs w-fit 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={() => setJavaScriptExpr(arg.value)}
+							>
+								<span class="font-normal"
+									>JavaScript expression detected - press
+									<span class="font-bold">TAB</span> to exit static mode
+								</span>
+							</Button>
+						{/if}
+					{:else if (propertyType === undefined || propertyType == 'static') && schema?.properties?.[argName]}
+						<ArgInput
+							{resourceTypes}
+							noMargin
+							compact
+							bind:this={argInput}
 							on:focus={onFocus}
 							on:blur={() => {
 								focused = false
 							}}
-							bind:code={arg.value}
-							fontSize={14}
+							shouldDispatchChanges
 							on:change={() => {
 								dispatch('change', { argName })
 							}}
+							label={argName}
+							bind:editor={monaco}
+							bind:description={schema.properties[argName].description}
+							bind:value={arg.value}
+							type={schema.properties[argName].type}
+							oneOf={schema.properties[argName].oneOf}
+							required={schema.required?.includes(argName)}
+							bind:pattern={schema.properties[argName].pattern}
+							bind:valid={inputCheck}
+							defaultValue={schema.properties[argName].default}
+							bind:enum_={schema.properties[argName].enum}
+							bind:format={schema.properties[argName].format}
+							contentEncoding={schema.properties[argName].contentEncoding}
+							bind:itemsType={schema.properties[argName].items}
+							properties={schema.properties[argName].properties}
+							nestedRequired={schema.properties[argName].required}
+							displayHeader={false}
+							extra={argExtra}
+							{variableEditor}
+							{itemPicker}
+							bind:pickForField
+							showSchemaExplorer
+							nullable={schema.properties[argName].nullable}
+							bind:title={schema.properties[argName].title}
+							bind:placeholder={schema.properties[argName].placeholder}
 						/>
+					{:else if arg.expr != undefined}
+						<div class="border mt-2">
+							<SimpleEditor
+								bind:this={monaco}
+								bind:code={arg.expr}
+								on:change={() => {
+									dispatch('change', { argName })
+								}}
+								{extraLib}
+								lang="javascript"
+								shouldBindKey={false}
+								on:focus={() => {
+									focused = true
+									focusProp(argName, 'insert', (path) => {
+										monaco?.insertAtCursor(path)
+										return false
+									})
+								}}
+								on:change={() => {
+									dispatch('change', { argName })
+								}}
+								on:blur={() => {
+									focused = false
+								}}
+								autoHeight
+							/>
+						</div>
+						<DynamicInputHelpBox />
+						<div class="mb-2" />
+					{:else}
+						Not recognized input type {argName} ({arg.expr}, {propertyType})
+						<div class="flex mt-2">
+							<Button
+								variant="border"
+								size="xs"
+								on:click={() => {
+									arg.expr = ''
+								}}>Set expr to empty string</Button
+							></div
+						>
 					{/if}
 				</div>
-			{:else if (propertyType === undefined || propertyType == 'static') && schema?.properties?.[argName]}
-				<ArgInput
-					{resourceTypes}
-					noMargin
-					compact
-					bind:this={argInput}
-					on:focus={onFocus}
-					on:blur={() => {
-						focused = false
-					}}
-					shouldDispatchChanges
-					on:change={() => {
-						dispatch('change', { argName })
-					}}
-					label={argName}
-					bind:editor={monaco}
-					bind:description={schema.properties[argName].description}
-					bind:value={arg.value}
-					type={schema.properties[argName].type}
-					oneOf={schema.properties[argName].oneOf}
-					required={schema.required?.includes(argName)}
-					bind:pattern={schema.properties[argName].pattern}
-					bind:valid={inputCheck}
-					defaultValue={schema.properties[argName].default}
-					bind:enum_={schema.properties[argName].enum}
-					bind:format={schema.properties[argName].format}
-					contentEncoding={schema.properties[argName].contentEncoding}
-					bind:itemsType={schema.properties[argName].items}
-					properties={schema.properties[argName].properties}
-					nestedRequired={schema.properties[argName].required}
-					displayHeader={false}
-					extra={argExtra}
-					{variableEditor}
-					{itemPicker}
-					bind:pickForField
-					showSchemaExplorer
-					nullable={schema.properties[argName].nullable}
-					bind:title={schema.properties[argName].title}
-					bind:placeholder={schema.properties[argName].placeholder}
-				/>
-			{:else if arg.expr != undefined}
-				<div class="border mt-2">
-					<SimpleEditor
-						bind:this={monaco}
-						bind:code={arg.expr}
-						on:change={() => {
-							dispatch('change', { argName })
-						}}
-						{extraLib}
-						lang="javascript"
-						shouldBindKey={false}
-						on:focus={() => {
-							focused = true
-							focusProp(argName, 'insert', (path) => {
-								monaco?.insertAtCursor(path)
-								return false
-							})
-						}}
-						on:change={() => {
-							dispatch('change', { argName })
-						}}
-						on:blur={() => {
-							focused = false
-						}}
-						autoHeight
-					/>
-				</div>
-				<DynamicInputHelpBox />
-				<div class="mb-2" />
-			{:else}
-				Not recognized input type {argName} ({arg.expr}, {propertyType})
-				<div class="flex mt-2">
-					<Button
-						variant="border"
-						size="xs"
-						on:click={() => {
-							arg.expr = ''
-						}}>Set expr to empty string</Button
-					></div
-				>
-			{/if}
+
+				{#if $propPickerConfig?.propName == argName && ($propPickerConfig?.insertionMode == 'insert' || $propPickerConfig?.insertionMode == 'append')}
+					<div class="text-blue-500 mt-2" in:fade={{ duration: 200 }}>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							width="20"
+							height="20"
+							viewBox="0 0 24 24"
+							fill="currentColor"
+							stroke="currentColor"
+							stroke-width="2"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						>
+							<polyline points="24 24 12 12 24 0" />
+						</svg>
+					</div>
+				{:else}
+					<div class="w-0" />
+				{/if}
+			</div>
 		</div>
 	</div>
 {/if}

frontend/src/lib/components/InputTransformSchemaForm.svelte

@@ -84,7 +84,7 @@
 	{#if keys.length > 0}
 		{#each keys as argName (argName)}
 			{#if (!filter || filter.includes(argName)) && Object.keys(schema.properties ?? {}).includes(argName)}
-				<div class="z-10 pt-4">
+				<div class="z-10 pt-2 relative">
 					<InputTransformForm
 						{previousModuleId}
 						bind:arg={args[argName]}
@@ -128,7 +128,7 @@
 >
 	<div
 		slot="submission"
-		class="flex flex-row-reverse w-full bg-surface border-t border-gray-200 rounded-bl-lg rounded-br-lg"
+		class="flex flex-row-reverse w-full border-t border-gray-200 rounded-bl-lg rounded-br-lg"
 	>
 		<Button
 			variant="border"

frontend/src/lib/components/SimpleEditor.svelte

@@ -405,6 +405,15 @@
 			editor && editor.dispose()
 		} catch (err) {}
 	})
+
+	export function setCursorToEnd(): void {
+		if (editor) {
+			const lastLine = editor.getModel()?.getLineCount() ?? 1
+			const lastColumn = editor.getModel()?.getLineMaxColumn(lastLine) ?? 1
+			editor.setPosition({ lineNumber: lastLine, column: lastColumn })
+			editor.focus()
+		}
+	}
 </script>
 
 <EditorTheme />

frontend/src/lib/components/common/button/AnimatedButton.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+	import { twMerge } from 'tailwind-merge'
+
+	export let marginWidth = '2px'
+	export let animationDuration = '2s'
+	export let baseRadius = '4px'
+	export let animate = true
+	export let wrapperClasses = ''
+	export let ringColor = 'transparent'
+
+	let clientWidth = 0
+	let clientHeight = 0
+
+	$: circleRadius = Math.ceil(
+		Math.sqrt(clientWidth * clientWidth + clientHeight * clientHeight) / 2
+	)
+</script>
+
+<div
+	class={twMerge('gradient-button', wrapperClasses)}
+	style="--margin-width: {marginWidth}; --animation-duration: {animationDuration}; --base-radius: {baseRadius}; --circle-radius: {circleRadius}; --ring-color: {ringColor}"
+	class:animate
+	bind:clientWidth
+	bind:clientHeight
+>
+	<slot />
+</div>
+
+<style>
+	.gradient-button {
+		position: relative;
+		padding: var(--margin-width, 2px);
+		font-size: inherit;
+		border: none;
+		border-radius: calc(var(--base-radius) + var(--margin-width, 2px));
+		color: currentColor;
+		background: inherit;
+		z-index: 1;
+		overflow: hidden;
+	}
+
+	/* Circular gradient */
+	.gradient-button::before {
+		content: '';
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		width: calc(var(--circle-radius, 300px) * 2px);
+		height: calc(var(--circle-radius, 300px) * 2px);
+		background: var(--ring-color, transparent);
+		border-radius: 50%;
+		z-index: -1;
+		animation: none;
+	}
+
+	.gradient-button.animate::before {
+		background: conic-gradient(from 0deg, #a4c7f2, #0c79fd, #104688, #a4c7f2);
+		animation: rotate var(--animation-duration, 2s) linear infinite;
+	}
+
+	/* inner background */
+	.gradient-button::after {
+		content: '';
+		position: absolute;
+		top: var(--margin-width, 2px);
+		right: var(--margin-width, 2px);
+		bottom: var(--margin-width, 2px);
+		left: var(--margin-width, 2px);
+		background: inherit;
+		border-radius: var(--base-radius);
+		z-index: -1;
+	}
+
+	@keyframes rotate {
+		from {
+			transform: translate(-50%, -50%) rotate(0deg);
+		}
+		to {
+			transform: translate(-50%, -50%) rotate(360deg);
+		}
+	}
+
+	.gradient-button.animate:hover::before {
+		animation-duration: 1s;
+	}
+</style>

frontend/src/lib/components/common/popup/Popup.svelte

@@ -19,9 +19,9 @@
 </script>
 
 <Popover on:close class="leading-none">
-	<PopoverButton>
+	<PopoverButton let:open>
 		<div use:floatingRef>
-			<slot name="button" />
+			<slot name="button" {open} />
 		</div>
 	</PopoverButton>
 	<ConditionalPortal condition={shouldUsePortal} {target}>

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

@@ -4,11 +4,13 @@
 	import FlowModuleSchemaMap from './map/FlowModuleSchemaMap.svelte'
 	import WindmillIcon from '../icons/WindmillIcon.svelte'
 	import { Skeleton } from '../common'
-	import { getContext } from 'svelte'
+	import { getContext, setContext } from 'svelte'
 	import type { FlowEditorContext } from './types'
 	import type { FlowCopilotContext } from '../copilot/flow'
 	import { classNames } from '$lib/utils'
-
+	import { writable } from 'svelte/store'
+	import type { PropPickerWrapperContext, PropPickerConfig } from '$lib/components/prop_picker'
+	import type { PickableProperties } from '$lib/components/flows/previousResults'
 	const { flowStore } = getContext<FlowEditorContext>('FlowEditorContext')
 
 	export let loading: boolean
@@ -24,6 +26,23 @@
 
 	const { currentStepStore: copilotCurrentStepStore } =
 		getContext<FlowCopilotContext>('FlowCopilotContext')
+
+	const propPickerConfig = writable<PropPickerConfig | undefined>(undefined)
+	setContext<PropPickerWrapperContext>('PropPickerWrapper', {
+		propPickerConfig,
+		inputMatches: writable(undefined),
+		focusProp: (propName, insertionMode, onSelect) => {
+			propPickerConfig.set({
+				propName,
+				insertionMode,
+				onSelect
+			})
+		},
+		clearFocus: () => {
+			propPickerConfig.set(undefined)
+		},
+		filteredPickableProperties: writable<PickableProperties | undefined>(undefined)
+	})
 </script>
 
 <div

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

@@ -4,7 +4,7 @@
 	import { Alert, Badge } from '$lib/components/common'
 	import type { FlowModule, FlowModuleValue, InputTransform, PathScript, RawScript } from '$lib/gen'
 	import { getContext, setContext } from 'svelte'
-	import type { PropPickerWrapperContext } from '../propPicker/PropPickerWrapper.svelte'
+	import type { PropPickerWrapperContext } from '$lib/components/prop_picker'
 	import { writable } from 'svelte/store'
 	import Toggle from '../../Toggle.svelte'
 	import InputTransformSchemaForm from '$lib/components/InputTransformSchemaForm.svelte'
@@ -79,7 +79,9 @@
 	setContext<PropPickerWrapperContext>('PropPickerWrapper', {
 		focusProp: () => {},
 		propPickerConfig: writable(undefined),
-		clearFocus: () => {}
+		inputMatches: writable(undefined),
+		clearFocus: () => {},
+		filteredPickableProperties: writable(undefined)
 	})
 </script>
 

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

@@ -378,10 +378,11 @@
 							class={advancedSelected === 'runtime' ? 'h-[calc(100%-68px)]' : 'h-[calc(100%-34px)]'}
 						>
 							{#if selected === 'inputs' && (flowModule.value.type == 'rawscript' || flowModule.value.type == 'script' || flowModule.value.type == 'flow')}
-								<div class="h-full overflow-auto px-2" id="flow-editor-step-input">
+								<div class="h-full overflow-auto px-2 bg-surface" id="flow-editor-step-input">
 									<PropPickerWrapper
 										pickableProperties={stepPropPicker.pickableProperties}
 										error={failureModule}
+										noPadding
 									>
 										<InputTransformSchemaForm
 											bind:this={inputTransformSchemaForm}

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

@@ -28,7 +28,8 @@
 	import DrawerContent from '$lib/components/common/drawer/DrawerContent.svelte'
 	import { getDependeeAndDependentComponents } from '../flowExplorer'
 	import { replaceId } from '../flowStore'
-
+	import FlowPropPicker from '$lib/components/flows/propPicker/FlowPropPicker.svelte'
+	import type { PropPickerWrapperContext } from '$lib/components/prop_picker'
 	export let selected: boolean = false
 	export let deletable: boolean = false
 	export let retry: boolean = false
@@ -46,17 +47,24 @@
 	export let concurrency: boolean = false
 	export let retries: number | undefined = undefined
 	export let warningMessage: string | undefined = undefined
+	let pickableIds: Record<string, any> | undefined = undefined
 
 	const { flowInputsStore } = getContext<{ flowInputsStore: Writable<FlowInput | undefined> }>(
 		'FlowGraphContext'
 	)
 
 	const flowEditorContext = getContext<FlowEditorContext>('FlowEditorContext')
+
 	const dispatch = createEventDispatcher()
 
 	const { currentStepStore: copilotCurrentStepStore } =
 		getContext<FlowCopilotContext | undefined>('FlowCopilotContext') || {}
 
+	const { propPickerConfig, filteredPickableProperties } =
+		getContext<PropPickerWrapperContext>('PropPickerWrapper')
+
+	$: filteredPickableProperties && (pickableIds = $filteredPickableProperties?.priorIds)
+
 	let editId = false
 
 	let newId: string = id ?? ''
@@ -266,6 +274,19 @@ hover:border-blue-700 hover:!visible {hover ? '' : '!hidden'}"
 			{/if}
 		</div>
 	</div>
+
+	{#if id && $propPickerConfig && pickableIds && Object.keys(pickableIds).includes(id)}
+		<div class="absolute -bottom-[18px] right-[50%] translate-x-[50%]">
+			<FlowPropPicker
+				json={{
+					[id]: pickableIds[id]
+				}}
+				prefix={'results'}
+				viewOnly={false}
+			/>
+		</div>
+	{/if}
+
 	{#if deletable}
 		<button
 			class="absolute -top-[10px] -right-[10px] rounded-full h-[20px] w-[20px] trash center-center text-secondary
@@ -280,7 +301,7 @@ hover:border-blue-700 hover:!visible {hover ? '' : '!hidden'}"
 
 		{#if id !== 'preprocessor'}
 			<button
-				class="absolute -top-[10px] right-[60px] rounded-full h-[20px] w-[20px] trash center-center text-secondary
+				class="absolute -top-[10px] right-[60px] rounded-full h-[20px] w-[20px] center-center text-secondary
 outline-[1px] outline dark:outline-gray-500 outline-gray-300 bg-surface duration-150 hover:bg-blue-400 hover:text-white
  {hover ? '' : '!hidden'}"
 				on:click|preventDefault|stopPropagation={(event) => dispatch('move')}

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

@@ -4,6 +4,8 @@
 	import { classNames } from '$lib/utils'
 	import { createEventDispatcher, getContext } from 'svelte'
 	import type { FlowCopilotContext } from '$lib/components/copilot/flow'
+	import type { PropPickerConfig } from '$lib/components/prop_picker'
+	import FlowPropPicker from '$lib/components/flows/propPicker/FlowPropPicker.svelte'
 
 	export let label: string | undefined = undefined
 	export let bgColor: string = ''
@@ -14,6 +16,9 @@
 	export let borderColor: string | undefined = undefined
 	export let hideId: boolean = false
 	export let preLabel: string | undefined = undefined
+	export let propPickerConfig: PropPickerConfig | undefined = undefined
+	export let inputJson = {}
+	export let prefix = ''
 
 	const dispatch = createEventDispatcher<{
 		insert: {
@@ -33,7 +38,7 @@
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
 	class={classNames(
-		'w-full flex relative overflow-hidden rounded-sm',
+		'w-full flex relative rounded-sm',
 		selectable ? 'cursor-pointer' : '',
 		selected ? 'outline outline-offset-1 outline-2  outline-gray-600' : '',
 		label === 'Input' && $copilotCurrentStepStore === 'Input' ? 'z-[901]' : ''
@@ -76,4 +81,9 @@
 			{/if}
 		</div>
 	</div>
+	{#if propPickerConfig && Object.keys(inputJson).length > 0}
+		<div class="absolute -bottom-[18px] right-[50%] translate-x-[50%]">
+			<FlowPropPicker json={inputJson} {prefix} />
+		</div>
+	{/if}
 </div>

frontend/src/lib/components/flows/previousResults.ts

@@ -260,3 +260,42 @@ declare const approvers: string
 }
 `
 }
+
+export function buildPrefixRegex(words: string[]): Array<{ regex: RegExp; word: string }> {
+	return words.map((word) => {
+		const prefixes: string[] = []
+		for (let i = 1; i <= word.length; i++) {
+			prefixes.push(word.slice(0, i) + '$')
+		}
+		prefixes.push(word + '\\.')
+		prefixes.push(word + '\\[')
+
+		return {
+			regex: new RegExp(`^(${prefixes.join('|')}).*`),
+			word
+		}
+	})
+}
+
+export function filterNestedObject(obj: any, nestedKeys: string[]) {
+	if (nestedKeys.length === 0) return obj
+	if (nestedKeys.length === 1) {
+		if (nestedKeys[0] === '') {
+			return obj
+		}
+		const regexes = buildPrefixRegex(Object.keys(obj))
+		const matches = regexes.filter(({ regex }) => regex.test(nestedKeys[0]))
+		const filteredObj = {}
+		matches.forEach(({ word }) => {
+			if (obj.hasOwnProperty(word)) {
+				filteredObj[word] = obj[word]
+			}
+		})
+		return filteredObj
+	}
+	const [key, ...rest] = nestedKeys
+	if (obj && typeof obj === 'object' && key in obj) {
+		return filterNestedObject(obj[key], rest)
+	}
+	return undefined
+}

frontend/src/lib/components/flows/propPicker/FlowPropPicker.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+	import ObjectViewer from '$lib/components/propertyPicker/ObjectViewer.svelte'
+	import AnimatedButton from '$lib/components/common/button/AnimatedButton.svelte'
+	import { Popup } from '$lib/components/common'
+	import { Plug } from 'lucide-svelte'
+	import { twMerge } from 'tailwind-merge'
+	import type { PropPickerWrapperContext } from '$lib/components/prop_picker'
+	import { getContext } from 'svelte'
+	import Popover from '$lib/components/Popover.svelte'
+
+	export let json = {}
+	export let prefix = ''
+	export let viewOnly = false
+
+	const { propPickerConfig } = getContext<PropPickerWrapperContext>('PropPickerWrapper')
+</script>
+
+<button
+	on:click|preventDefault|stopPropagation={(e) => {
+		e.preventDefault()
+		e.stopPropagation()
+	}}
+	on:keydown|preventDefault|stopPropagation
+	data-prop-picker
+>
+	<AnimatedButton
+		animate={$propPickerConfig?.insertionMode === 'connect' && !viewOnly}
+		wrapperClasses="h-[20px] w-[20px] "
+		baseRadius="9999px"
+		marginWidth="1px"
+	>
+		<Popup floatingConfig={{ strategy: 'fixed', placement: 'bottom-start' }}>
+			<svelte:fragment slot="button" let:open>
+				<Popover disablePopup={open}>
+					<svelte:fragment slot="text">node outputs</svelte:fragment>
+					<button
+						class={twMerge(
+							'rounded-full trash center-center h-[18px] w-[18px]',
+							viewOnly
+								? 'outline-[1px] outline dark:outline-gray-500 outline-gray-300 duration-150 bg-surface hover:bg-surface-hover text-secondary'
+								: $propPickerConfig?.insertionMode == 'connect'
+								? 'bg-surface text-blue-500'
+								: 'outline-[1px] outline dark:outline-gray-500 outline-gray-300 duration-150 bg-blue-500 hover:bg-blue-700 text-white'
+						)}
+					>
+						<Plug size={12} strokeWidth={2} />
+					</button>
+				</Popover>
+			</svelte:fragment>
+			<div data-prop-picker>
+				<ObjectViewer
+					{json}
+					topBrackets={false}
+					pureViewer={viewOnly}
+					{prefix}
+					on:select={(e) => {
+						$propPickerConfig?.onSelect(e.detail)
+						$propPickerConfig = undefined
+					}}
+				/>
+			</div>
+		</Popup>
+	</AnimatedButton>
+</button>

frontend/src/lib/components/flows/propPicker/PropPickerWrapper.svelte

@@ -1,31 +1,13 @@
-<script context="module" lang="ts">
-	type InsertionMode = 'append' | 'connect' | 'insert'
-
-	type SelectCallback = (path: string) => boolean
-
-	type PropPickerConfig = {
-		insertionMode: InsertionMode
-		propName: string
-		onSelect: SelectCallback
-	}
-
-	export type PropPickerWrapperContext = {
-		propPickerConfig: Writable<PropPickerConfig | undefined>
-		focusProp: (propName: string, insertionMode: InsertionMode, onSelect: SelectCallback) => void
-		clearFocus: () => void
-	}
-</script>
-
 <script lang="ts">
 	import PropPicker from '$lib/components/propertyPicker/PropPicker.svelte'
 	import PropPickerResult from '$lib/components/propertyPicker/PropPickerResult.svelte'
-	import { clickOutside, sendUserToast } from '$lib/utils'
-	import { createEventDispatcher, setContext } from 'svelte'
+	import { clickOutside } from '$lib/utils'
+	import { createEventDispatcher, getContext } from 'svelte'
 	import { Pane, Splitpanes } from 'svelte-splitpanes'
-	import { writable, type Writable } from 'svelte/store'
 	import type { PickableProperties } from '../previousResults'
 	import { twMerge } from 'tailwind-merge'
-
+	import AnimatedButton from '$lib/components/common/button/AnimatedButton.svelte'
+	import type { PropPickerWrapperContext } from '$lib/components/prop_picker'
 	export let pickableProperties: PickableProperties | undefined
 	export let result: any = undefined
 	export let extraResults: any = undefined
@@ -35,74 +17,98 @@
 	export let notSelectable = false
 	export let noPadding: boolean = false
 
-	const propPickerConfig = writable<PropPickerConfig | undefined>(undefined)
 	const dispatch = createEventDispatcher()
 
-	setContext<PropPickerWrapperContext>('PropPickerWrapper', {
-		propPickerConfig,
-		focusProp: (propName, insertionMode, onSelect) => {
-			propPickerConfig.set({
-				propName,
-				insertionMode,
-				onSelect
-			})
-		},
-		clearFocus: () => {
-			propPickerConfig.set(undefined)
-		}
-	})
+	const { propPickerConfig } = getContext<PropPickerWrapperContext>('PropPickerWrapper')
+
+	async function getPropPickerElements(): Promise<HTMLElement[]> {
+		return Array.from(
+			document.querySelectorAll('[data-prop-picker], [data-prop-picker] *')
+		) as HTMLElement[]
+	}
 </script>
 
 <div
 	class="h-full w-full"
-	use:clickOutside
-	on:click_outside={() => propPickerConfig.set(undefined)}
+	data-prop-picker-root
+	use:clickOutside={{ capture: true, exclude: getPropPickerElements }}
+	on:click_outside={() => {
+		propPickerConfig.set(undefined)
+	}}
 >
-	<Splitpanes>
+	<Splitpanes class={$propPickerConfig ? 'splitpanes-remove-splitter' : ''}>
 		<Pane
 			minSize={20}
 			size={60}
-			class={twMerge('relative !transition-none', noPadding ? '' : 'p-2')}
+			class={twMerge('relative !transition-none ', noPadding ? '' : 'p-2')}
 		>
 			<slot />
 		</Pane>
 		<Pane
 			minSize={20}
 			size={40}
-			class="pt-2 relative !transition-none {$propPickerConfig ? 'border-2 border-blue-500' : ''}"
+			class="!transition-none z-1000 {$propPickerConfig ? 'ml-[-1px]' : ''}"
 		>
-			{#if result}
-				<PropPickerResult
-					{result}
-					{extraResults}
-					{flow_input}
-					on:select={({ detail }) => {
-						if (!notSelectable && !$propPickerConfig) {
-							sendUserToast('Set cursor within an input or click on the plug first', true)
-						}
-						dispatch('select', detail)
-						if ($propPickerConfig?.onSelect(detail)) {
-							propPickerConfig.set(undefined)
-						}
-					}}
-				/>
-			{:else if pickableProperties}
-				<PropPicker
-					{displayContext}
-					{error}
-					{pickableProperties}
-					{notSelectable}
-					on:select={({ detail }) => {
-						if (!notSelectable && !$propPickerConfig) {
-							sendUserToast('Set cursor within an input or click on the plug first', true)
-						}
-						dispatch('select', detail)
-						if ($propPickerConfig?.onSelect(detail)) {
-							propPickerConfig.set(undefined)
-						}
-					}}
-				/>
-			{/if}
+			<AnimatedButton
+				animate={$propPickerConfig?.insertionMode == 'connect'}
+				baseRadius="4px"
+				wrapperClasses="h-full w-full pt-2"
+				marginWidth="4px"
+				ringColor={$propPickerConfig?.insertionMode == 'insert' ||
+				$propPickerConfig?.insertionMode == 'append'
+					? '#3b82f6'
+					: 'transparent'}
+				animationDuration="1s"
+			>
+				{#if result}
+					<PropPickerResult
+						{result}
+						{extraResults}
+						{flow_input}
+						allowCopy={!notSelectable && !$propPickerConfig}
+						on:select={({ detail }) => {
+							dispatch('select', detail)
+							if ($propPickerConfig?.onSelect(detail)) {
+								propPickerConfig.set(undefined)
+							}
+						}}
+					/>
+				{:else if pickableProperties}
+					<PropPicker
+						{displayContext}
+						{error}
+						{pickableProperties}
+						{notSelectable}
+						allowCopy={!notSelectable && !$propPickerConfig}
+						on:select={({ detail }) => {
+							dispatch('select', detail)
+							if ($propPickerConfig?.onSelect(detail)) {
+								propPickerConfig.set(undefined)
+							}
+						}}
+					/>
+				{/if}
+			</AnimatedButton>
 		</Pane>
 	</Splitpanes>
 </div>
+
+<style>
+	:global(.splitpanes-remove-splitter > .splitpanes__pane) {
+		background-color: inherit !important;
+	}
+	:global(.splitpanes-remove-splitter > .splitpanes__splitter) {
+		background-color: transparent !important;
+		width: 0 !important;
+		border: none !important;
+	}
+
+	:global(.splitpanes__pane) {
+		overflow-y: auto;
+		scrollbar-width: none;
+	}
+
+	:global(.splitpanes__pane:hover) {
+		scrollbar-width: thin;
+	}
+</style>

frontend/src/lib/components/graph/renderers/nodes/ForLoopStartNode.svelte

@@ -5,7 +5,8 @@
 	import { getStateColor } from '../../util'
 	import type { GraphModuleState } from '../../model'
 	import type { GraphEventHandlers } from '../../graphBuilder'
-
+	import { getContext } from 'svelte'
+	import type { PropPickerWrapperContext } from '$lib/components/prop_picker'
 	export let data: {
 		offset: number
 		id: string
@@ -13,11 +14,21 @@
 		flowModuleStates: Record<string, GraphModuleState> | undefined
 		eventHandlers: GraphEventHandlers
 	}
+
+	const { propPickerConfig, filteredPickableProperties } =
+		getContext<PropPickerWrapperContext>('PropPickerWrapper')
+
+	$: filteredInput = filterIterFromInput($filteredPickableProperties?.flow_input)
+
+	function filterIterFromInput(inputJson: Record<string, any> | undefined): Record<string, any> {
+		if (!inputJson || typeof inputJson !== 'object' || !inputJson.iter) return {}
+		return { iter: inputJson.iter }
+	}
 </script>
 
 <NodeWrapper let:darkMode offset={data.offset}>
 	<VirtualItem
-		label={'Do one iteration'}
+		label={'Do one iterations'}
 		selectable={false}
 		selected={false}
 		id={data.id}
@@ -27,5 +38,8 @@
 		on:select={(e) => {
 			data?.eventHandlers?.select(e.detail)
 		}}
+		propPickerConfig={$propPickerConfig}
+		inputJson={filteredInput}
+		prefix="flow_input"
 	/>
 </NodeWrapper>

frontend/src/lib/components/graph/renderers/nodes/InputNode.svelte

@@ -7,6 +7,7 @@
 	import { getContext } from 'svelte'
 	import type { Writable } from 'svelte/store'
 	import InsertModuleButton from '$lib/components/flows/map/InsertModuleButton.svelte'
+	import type { PropPickerWrapperContext } from '$lib/components/prop_picker'
 
 	export let data: {
 		hasPreprocessor: boolean
@@ -23,6 +24,20 @@
 	const { selectedId } = getContext<{
 		selectedId: Writable<string | undefined>
 	}>('FlowGraphContext')
+
+	const { propPickerConfig, filteredPickableProperties } =
+		getContext<PropPickerWrapperContext>('PropPickerWrapper')
+
+	function filterIterFromInput(inputJson: Record<string, any> | undefined): Record<string, any> {
+		if (!inputJson || typeof inputJson !== 'object') return {}
+
+		const newJson = { ...inputJson }
+		delete newJson.iter
+
+		return newJson
+	}
+
+	$: filteredInput = filterIterFromInput($filteredPickableProperties?.flow_input)
 </script>
 
 <NodeWrapper let:darkMode>
@@ -64,5 +79,8 @@
 		on:select={(e) => {
 			data.eventHandlers?.select(e.detail)
 		}}
+		propPickerConfig={$propPickerConfig}
+		inputJson={filteredInput}
+		prefix="flow_input"
 	/>
 </NodeWrapper>

frontend/src/lib/components/prop_picker.ts

@@ -0,0 +1,20 @@
+import type { Writable } from 'svelte/store'
+import type { PickableProperties } from '$lib/components/flows/previousResults'
+
+type InsertionMode = 'append' | 'connect' | 'insert'
+
+type SelectCallback = (path: string) => boolean
+
+export type PropPickerConfig = {
+	insertionMode: InsertionMode
+	propName: string
+	onSelect: SelectCallback
+}
+
+export type PropPickerWrapperContext = {
+	propPickerConfig: Writable<PropPickerConfig | undefined>
+	filteredPickableProperties: Writable<PickableProperties | undefined>
+	inputMatches: Writable<{ word: string; value: string }[] | undefined>
+	focusProp: (propName: string, insertionMode: InsertionMode, onSelect: SelectCallback) => void
+	clearFocus: () => void
+}

frontend/src/lib/components/propertyPicker/ObjectViewer.svelte

@@ -1,13 +1,12 @@
 <script lang="ts">
-	import { copyToClipboard, pluralize, truncate } from '$lib/utils'
+	import { copyToClipboard, truncate } from '$lib/utils'
 
 	import { createEventDispatcher } from 'svelte'
-	import { Badge } from '../common'
 	import { computeKey } from './utils'
-	import WarningMessage from './WarningMessage.svelte'
 	import { NEVER_TESTED_THIS_FAR } from '../flows/models'
 	import Portal from '$lib/components/Portal.svelte'
-
+	import { Button } from '$lib/components/common'
+	import Popover from '$lib/components/Popover.svelte'
 	import { Download, PanelRightOpen } from 'lucide-svelte'
 	import S3FilePicker from '../S3FilePicker.svelte'
 	import { workspaceStore } from '$lib/stores'
@@ -19,9 +18,9 @@
 	export let collapsed = (level != 0 && level % 3 == 0) || Array.isArray(json)
 	export let rawKey = false
 	export let topBrackets = false
-	export let topLevelNode = false
 	export let allowCopy = true
 	export let collapseLevel: number | undefined = undefined
+	export let prefix = ''
 
 	let s3FileViewer: S3FilePicker
 
@@ -50,12 +49,21 @@
 
 	const dispatch = createEventDispatcher()
 
-	function selectProp(key: string, value: any | undefined = undefined) {
-		if (pureViewer && allowCopy) {
-			const valueToCopy = value !== undefined ? value : computeKey(key, isArray, currentPath)
-			copyToClipboard(valueToCopy)
+	function computeFullKey(key: string, rawKey: boolean) {
+		if (rawKey) {
+			return `${prefix}('${key}')`
 		}
-		dispatch('select', rawKey ? key : computeKey(key, isArray, currentPath))
+		const keyToSelect = computeKey(key, isArray, currentPath)
+		const separator = !prefix || keyToSelect.startsWith('[') ? '' : '.'
+		return prefix + separator + keyToSelect
+	}
+
+	function selectProp(key: string, value: any | undefined = undefined) {
+		const fullKey = computeFullKey(key, rawKey)
+		if (pureViewer && allowCopy) {
+			copyToClipboard(fullKey)
+		}
+		dispatch('select', fullKey)
 	}
 
 	$: keyLimit = isArray ? 1 : 100
@@ -73,33 +81,40 @@
 			{#if level != 0 && keys.length > 1}
 				<!-- svelte-ignore a11y-click-events-have-key-events -->
 				<!-- svelte-ignore a11y-no-static-element-interactions -->
-				<span class="cursor-pointer border hover:bg-surface-hover px-1 rounded" on:click={collapse}>
-					-
-				</span>
+				<Button
+					color="light"
+					size="xs2"
+					variant="border"
+					on:click={collapse}
+					wrapperClasses="inline-flex w-fit h-5"
+					btnClasses="font-semibold text-primary border-nord-300 rounded-[0.275rem]">-</Button
+				>
 			{/if}
 			{#if level == 0 && topBrackets}<span class="h-0">{openBracket}</span>{/if}
 			<ul class={`w-full pl-2 ${level === 0 ? 'border-none' : 'border-l border-dotted'}`}>
 				{#each keys.length > keyLimit ? keys.slice(0, keyLimit) : keys as key, index (key)}
 					<li>
-						<button on:click={() => selectProp(key)} class="whitespace-nowrap">
-							{#if topLevelNode}
-								<Badge baseClass="border border-blue-600" color="indigo">{key}</Badge>
-							{:else}
-								<span
-									class="key {pureViewer
-										? 'cursor-auto'
-										: 'border '} font-semibold rounded px-1 hover:bg-surface-hover text-2xs text-secondary"
-								>
-									{!isArray ? key : index}</span
-								>
-							{/if}:
-						</button>
-
+						<Popover>
+							<svelte:fragment slot="text">{computeFullKey(key, rawKey)}</svelte:fragment>
+							<Button
+								on:click={() => selectProp(key)}
+								size="xs2"
+								color="dark"
+								variant="contained"
+								wrapperClasses="inline-flex p-0 whitespace-nowrap w-fit h-4"
+								btnClasses="font-normal rounded-[0.275rem]"
+							>
+								<span class={pureViewer ? 'cursor-auto' : ''}>
+									{!isArray ? key : index}
+								</span>
+							</Button>
+						</Popover>
+						:
 						{#if getTypeAsString(json[key]) === 'object'}
 							<svelte:self
 								json={json[key]}
 								level={level + 1}
-								currentPath={computeKey(key, isArray, currentPath)}
+								currentPath={computeFullKey(key, isArray)}
 								{pureViewer}
 								{allowCopy}
 								on:select
@@ -107,28 +122,38 @@
 								collapsed={collapseLevel !== undefined ? level + 1 >= collapseLevel : undefined}
 							/>
 						{:else}
-							<button
-								class="val text-left {pureViewer
-									? 'cursor-auto'
-									: ''} rounded px-1 hover:bg-blue-100 dark:hover:bg-blue-100/10 {getTypeAsString(
-									json[key]
-								)}"
-								on:click={() => selectProp(key, json[key])}
-							>
-								{#if json[key] === NEVER_TESTED_THIS_FAR}
-									<WarningMessage />
-								{:else if json[key] == undefined}
-									<span class="text-2xs">undefined</span>
-								{:else if json[key] == null}
-									<span class="text-2xs">null</span>
-								{:else if typeof json[key] == 'string'}
-									<span title={json[key]} class="text-2xs">"{truncate(json[key], 200)}"</span>
-								{:else}
-									<span title={JSON.stringify(json[key])} class="text-2xs">
-										{truncate(JSON.stringify(json[key]), 200)}
-									</span>
-								{/if}
-							</button>
+							<Popover disablePopup={!json[key]}>
+								<svelte:fragment slot="text">
+									{JSON.stringify(json[key])}
+								</svelte:fragment>
+								<button
+									class="val text-left {pureViewer
+										? 'cursor-auto'
+										: ''} rounded px-1 {getTypeAsString(json[key])}"
+									on:click={() => {
+										if (json[key]) {
+											copyToClipboard(json[key])
+										}
+									}}
+									disabled={false}
+								>
+									{#if json[key] === NEVER_TESTED_THIS_FAR}
+										<span class="text-2xs text-tertiary font-normal">
+											Test the flow to see a value
+										</span>
+									{:else if json[key] == undefined}
+										<span class="text-2xs">undefined</span>
+									{:else if json[key] == null}
+										<span class="text-2xs">null</span>
+									{:else if typeof json[key] == 'string'}
+										<span class="text-2xs">"{truncate(json[key], 200)}"</span>
+									{:else}
+										<span class="text-2xs">
+											{truncate(JSON.stringify(json[key]), 200)}
+										</span>
+									{/if}
+								</button>
+							</Popover>
 						{/if}
 					</li>
 				{/each}
@@ -167,17 +192,18 @@
 
 	<!-- svelte-ignore a11y-click-events-have-key-events -->
 	<!-- svelte-ignore a11y-no-static-element-interactions -->
-	<span
-		class="border border-blue-600 rounded px-1 cursor-pointer hover:bg-gray-200"
-		class:hidden={!fullyCollapsed}
-		on:click={collapse}
-	>
-		{openBracket}{collapsedSymbol}{closeBracket}
-	</span>
+
 	{#if fullyCollapsed}
-		<span class="text-tertiary text-xs">
-			{pluralize(Object.keys(json).length, Array.isArray(json) ? 'item' : 'key')}
-		</span>
+		<Button
+			color="light"
+			size="xs2"
+			variant="border"
+			on:click={collapse}
+			wrapperClasses="inline-flex w-fit h-5"
+			btnClasses="font-semibold border-nord-300 rounded-[0.275rem] p-1"
+		>
+			{openBracket}{collapsedSymbol}{closeBracket}
+		</Button>
 	{/if}
 {:else if topBrackets}
 	<span class="text-primary">{openBracket}{closeBracket}</span>

frontend/src/lib/components/propertyPicker/PropPicker.svelte

@@ -3,41 +3,45 @@
 	import { workspaceStore } from '$lib/stores'
 	import { getContext } from 'svelte'
 	import { Badge, Button } from '../common'
-	import type { PropPickerWrapperContext } from '../flows/propPicker/PropPickerWrapper.svelte'
-	import { createEventDispatcher } from 'svelte'
+	import type { PropPickerWrapperContext } from '../prop_picker'
 
 	import ObjectViewer from './ObjectViewer.svelte'
 	import { keepByKey } from './utils'
 	import type { PickableProperties } from '../flows/previousResults'
 	import ClearableInput from '../common/clearableInput/ClearableInput.svelte'
+	import { filterNestedObject } from '../flows/previousResults'
 
 	export let pickableProperties: PickableProperties
 	export let displayContext = true
 	export let notSelectable: boolean
 	export let error: boolean = false
+	export let allowCopy = false
 
 	$: previousId = pickableProperties?.previousId
 	let variables: Record<string, string> = {}
 	let resources: Record<string, any> = {}
 	let displayVariable = false
 	let displayResources = false
-
-	const dispatch = createEventDispatcher()
+	let allResultsCollapsed = true
+	let flowInputsFiltered: Record<string, any> = {}
+	let resultByIdFiltered: Record<string, any> = {}
+	let collapsableInitialState:
+		| {
+				allResultsCollapsed: boolean
+				displayVariable: boolean
+				displayResources: boolean
+		  }
+		| undefined
 
 	const EMPTY_STRING = ''
 	let search = ''
 
-	const { propPickerConfig } = getContext<PropPickerWrapperContext>('PropPickerWrapper')
+	const { propPickerConfig, filteredPickableProperties, inputMatches } =
+		getContext<PropPickerWrapperContext>('PropPickerWrapper')
 
-	$: flowInputsFiltered =
-		search === EMPTY_STRING
-			? pickableProperties.flow_input
-			: keepByKey(pickableProperties.flow_input, search)
+	$filteredPickableProperties = { ...pickableProperties }
 
-	$: resultByIdFiltered =
-		search === EMPTY_STRING
-			? pickableProperties.priorIds
-			: keepByKey(pickableProperties.priorIds, search)
+	$: filterPickableProperties(), updateCollapsable(), search, $inputMatches
 
 	$: suggestedPropsFiltered = $propPickerConfig
 		? keepByKey(pickableProperties.priorIds, $propPickerConfig.propName)
@@ -62,23 +66,90 @@
 			).map((resource) => [resource.path, resource.description ?? ''])
 		)
 	}
+
+	function filterPickableProperties() {
+		flowInputsFiltered = pickableProperties.flow_input
+		resultByIdFiltered = pickableProperties.priorIds
+
+		if ($inputMatches) {
+			if (!$inputMatches.some((match) => match.word === 'flow_input')) {
+				flowInputsFiltered = []
+			}
+			if (!$inputMatches.some((match) => match.word === 'results')) {
+				resultByIdFiltered = []
+			}
+			if ($inputMatches.length == 1) {
+				if ($inputMatches[0].word === 'flow_input') {
+					let [, ...nestedKeys] = $inputMatches[0].value.split('.')
+					flowInputsFiltered = filterNestedObject(flowInputsFiltered, nestedKeys)
+				} else if ($inputMatches[0].word === 'results') {
+					let [, ...nestedKeys] = $inputMatches[0].value.split('.')
+					resultByIdFiltered = filterNestedObject(resultByIdFiltered, nestedKeys)
+				}
+			}
+		}
+
+		if (flowInputsFiltered && search !== EMPTY_STRING) {
+			flowInputsFiltered = keepByKey(flowInputsFiltered, search)
+		}
+		if (resultByIdFiltered && search !== EMPTY_STRING) {
+			resultByIdFiltered = keepByKey(resultByIdFiltered, search)
+		}
+
+		if ($filteredPickableProperties) {
+			resultByIdFiltered && ($filteredPickableProperties.priorIds = resultByIdFiltered)
+			flowInputsFiltered && ($filteredPickableProperties.flow_input = flowInputsFiltered)
+		}
+	}
+
+	async function updateCollapsable() {
+		if (!$inputMatches || $inputMatches.length !== 1) {
+			resetCollapsable()
+			return
+		}
+
+		if (!collapsableInitialState) {
+			collapsableInitialState = { allResultsCollapsed, displayVariable, displayResources }
+		}
+
+		if ($inputMatches[0].word === 'variable') {
+			await loadVariables()
+			displayVariable = true
+			return
+		}
+		if ($inputMatches[0].word === 'resource') {
+			await loadResources()
+			displayResources = true
+			return
+		}
+		if ($inputMatches[0].word === 'results') {
+			allResultsCollapsed = false
+			return
+		}
+	}
+
+	function resetCollapsable() {
+		if (!collapsableInitialState) {
+			return
+		}
+		;({ allResultsCollapsed, displayVariable, displayResources } = collapsableInitialState)
+		collapsableInitialState = undefined
+	}
 </script>
 
-<div class="flex flex-col h-full">
+<div class="flex flex-col h-full !bg-surface rounded overflow-hidden">
 	<div class="px-2">
 		{#if !notSelectable}
-			<div class="flex flex-row space-x-1">
-				{#if $propPickerConfig}
-					<Badge large color="blue">
-						{`Selected: ${$propPickerConfig?.propName}`}
-					</Badge>
-					<Badge large color="blue">
-						{`Mode: ${$propPickerConfig?.insertionMode}`}
-					</Badge>
-				{:else}
-					<Badge large color="blue">&leftarrow; Edit or connect an input</Badge>
-				{/if}
-			</div>
+			{#if $propPickerConfig}
+				<!-- <Badge large color="blue">
+					{`Selected: ${$propPickerConfig?.propName}`}
+				</Badge> -->
+				<Badge large color="blue">
+					{`Mode: ${$propPickerConfig?.insertionMode}`}
+				</Badge>
+			{:else}
+				<Badge large color="blue">&leftarrow; Edit or connect an input</Badge>
+			{/if}
 		{/if}
 		<ClearableInput bind:value={search} placeholder="Search prop..." wrapperClass="py-2" />
 	</div>
@@ -86,28 +157,26 @@
 		class="overflow-y-auto px-2 pt-2 grow"
 		class:bg-surface-secondary={!$propPickerConfig && !notSelectable}
 	>
-		<div class="flex justify-between items-center space-x-1">
-			<span class="font-bold text-sm">Flow Input</span>
-			<div class="flex space-x-2 items-center" />
-		</div>
-		<div class="overflow-y-auto mb-2">
-			<ObjectViewer
-				allowCopy={false}
-				pureViewer={!$propPickerConfig}
-				json={flowInputsFiltered}
-				on:select={(e) => {
-					dispatch(
-						'select',
-						e.detail?.startsWith('[') ? `flow_input${e.detail}` : `flow_input.${e.detail}`
-					)
-				}}
-			/>
-		</div>
-		{#if error}
-			<span class="font-bold text-sm">Error</span>
+		{#if flowInputsFiltered && Object.keys(flowInputsFiltered).length > 0}
+			<div class="flex justify-between items-center space-x-1">
+				<span class="font-normal text-sm text-secondary">Flow Input</span>
+				<div class="flex space-x-2 items-center" />
+			</div>
 			<div class="overflow-y-auto mb-2">
 				<ObjectViewer
-					allowCopy={false}
+					{allowCopy}
+					pureViewer={!$propPickerConfig}
+					json={flowInputsFiltered}
+					prefix="flow_input"
+					on:select
+				/>
+			</div>
+		{/if}
+		{#if error}
+			<span class="font-normal text-sm text-secondary">Error</span>
+			<div class="overflow-y-auto mb-2">
+				<ObjectViewer
+					{allowCopy}
 					pureViewer={!$propPickerConfig}
 					json={{
 						error: {
@@ -122,160 +191,186 @@
 			</div>
 			{#if Object.keys(pickableProperties.priorIds).length > 0}
 				{#if suggestedPropsFiltered && Object.keys(suggestedPropsFiltered).length > 0}
-					<span class="font-bold text-sm">Suggested Results</span>
+					<span class="font-normal text-sm text-secondary">Suggested Results</span>
 					<div class="overflow-y-auto mb-2">
 						<ObjectViewer
-							allowCopy={false}
-							topLevelNode
+							{allowCopy}
 							pureViewer={!$propPickerConfig}
 							collapsed={false}
 							json={suggestedPropsFiltered}
-							on:select={(e) => {
-								dispatch('select', `results.${e.detail}`)
-							}}
+							prefix="results"
+							on:select
 						/>
 					</div>
 				{/if}
-				<span class="font-bold text-sm">All Results</span>
+				<span class="font-normal text-sm text-secondary">All Results</span>
 				<div class="overflow-y-auto mb-2">
 					<ObjectViewer
-						allowCopy={false}
-						topLevelNode
+						{allowCopy}
 						pureViewer={!$propPickerConfig}
 						collapsed={true}
 						json={resultByIdFiltered}
-						on:select={(e) => {
-							dispatch('select', `results.${e.detail}`)
-						}}
+						prefix="results"
+						on:select
 					/>
 				</div>
 			{/if}
 		{:else}
-			{#if previousId}
-				<span class="font-bold text-sm">Previous Result</span>
+			{@const json = Object.fromEntries(
+				Object.entries(resultByIdFiltered).filter(([k, v]) => k == previousId)
+			)}
+			{#if previousId && Object.keys(json).length > 0}
+				<span class="font-normal text-sm text-secondary">Previous Result</span>
 				<div class="overflow-y-auto mb-2">
 					<ObjectViewer
-						allowCopy={false}
-						topLevelNode
+						{allowCopy}
 						pureViewer={!$propPickerConfig}
-						json={Object.fromEntries(
-							Object.entries(resultByIdFiltered).filter(([k, v]) => k == previousId)
-						)}
-						on:select={(e) => {
-							dispatch('select', `results.${e.detail}`)
-						}}
+						{json}
+						prefix="results"
+						on:select
 					/>
 				</div>
 			{/if}
 			{#if pickableProperties.hasResume}
-				<span class="font-bold text-sm">Resume payloads</span>
+				<span class="font-normal text-sm text-secondary">Resume payloads</span>
 				<div class="overflow-y-auto mb-2">
 					<ObjectViewer
-						allowCopy={false}
-						topLevelNode
+						{allowCopy}
 						pureViewer={!$propPickerConfig}
 						json={{
 							resume: 'The resume payload',
 							resumes: 'All resume payloads from all approvers',
 							approvers: 'The list of approvers'
 						}}
-						on:select={(e) => {
-							dispatch('select', `${e.detail}`)
-						}}
+						on:select
 					/>
 				</div>
 			{/if}
 			{#if Object.keys(pickableProperties.priorIds).length > 0}
-				{#if suggestedPropsFiltered && Object.keys(suggestedPropsFiltered).length > 0}
-					<span class="font-bold text-sm">Suggested Results</span>
+				{#if !$inputMatches && suggestedPropsFiltered && Object.keys(suggestedPropsFiltered).length > 0}
+					<span class="font-normal text-sm text-secondary">Suggested Results</span>
 					<div class="overflow-y-auto mb-2">
 						<ObjectViewer
-							allowCopy={false}
-							topLevelNode
+							{allowCopy}
 							pureViewer={!$propPickerConfig}
 							collapsed={false}
 							json={suggestedPropsFiltered}
-							on:select={(e) => {
-								dispatch('select', `results.${e.detail}`)
-							}}
+							prefix="results"
+							on:select
+						/>
+					</div>
+				{/if}
+				{#if Object.keys(resultByIdFiltered).length > 0}
+					<div class="overflow-y-auto mb-2">
+						<span class="font-normal text-sm text-tertiary">All Results :</span>
+						{#if !allResultsCollapsed}
+							<Button
+								color="light"
+								size="xs2"
+								variant="border"
+								on:click={() => {
+									allResultsCollapsed = true
+								}}
+								wrapperClasses="inline-flex w-fit h-4"
+								btnClasses="font-normal text-primary border-nord-300 rounded-[0.275rem]">-</Button
+							>
+						{/if}
+
+						<ObjectViewer
+							{allowCopy}
+							pureViewer={!$propPickerConfig}
+							bind:collapsed={allResultsCollapsed}
+							json={resultByIdFiltered}
+							prefix="results"
+							on:select
 						/>
 					</div>
 				{/if}
-				<span class="font-bold text-sm">All Results</span>
-				<div class="overflow-y-auto mb-2">
-					<ObjectViewer
-						allowCopy={false}
-						topLevelNode
-						pureViewer={!$propPickerConfig}
-						collapsed={true}
-						json={resultByIdFiltered}
-						on:select={(e) => {
-							dispatch('select', `results.${e.detail}`)
-						}}
-					/>
-				</div>
 			{/if}
 		{/if}
 
 		{#if displayContext}
-			<span class="font-bold text-sm">Variables </span>
-			<div class="overflow-y-auto mb-2">
-				{#if displayVariable}
-					<div class="flex">
+			{#if !$inputMatches || $inputMatches.some((match) => match.word === 'variable')}
+				<div class="overflow-y-auto mb-2">
+					<span class="font-normal text-sm text-secondary">Variables :</span>
+
+					{#if displayVariable}
 						<Button
 							color="light"
-							size="xs"
+							size="xs2"
 							variant="border"
 							on:click={() => {
 								displayVariable = false
-							}}>-</Button
+							}}
+							wrapperClasses="inline-flex w-fit h-4"
+							btnClasses="font-normal text-primary border-nord-300 rounded-[0.275rem]">-</Button
 						>
-					</div>
-					<ObjectViewer
-						allowCopy={false}
-						pureViewer={!$propPickerConfig}
-						rawKey={true}
-						json={variables}
-						on:select={(e) => dispatch('select', `variable('${e.detail}')`)}
-					/>
-				{:else}
-					<button
-						class="border border-blue-600 key font-normal rounded hover:bg-blue-100 px-1"
-						on:click={async () => {
-							await loadVariables()
-							displayVariable = true
-						}}>{'{...}'}</button
-					>
-				{/if}
-			</div>
-			<span class="font-bold text-sm">Resources</span>
-			<div class="overflow-y-auto mb-2">
-				{#if displayResources}
-					<Button
-						color="light"
-						variant="border"
-						size="xs"
-						on:click={() => {
-							displayResources = false
-						}}>-</Button
-					>
-					<ObjectViewer
-						allowCopy={false}
-						pureViewer={!$propPickerConfig}
-						rawKey={true}
-						json={resources}
-						on:select={(e) => dispatch('select', `resource('${e.detail}')`)}
-					/>
-				{:else}
-					<button
-						class="border border-blue-600 px-1 key font-normal rounded hover:bg-blue-100"
-						on:click={async () => {
-							await loadResources()
-							displayResources = true
-						}}>{'{...}'}</button
-					>
-				{/if}
-			</div>
+
+						<ObjectViewer
+							{allowCopy}
+							pureViewer={!$propPickerConfig}
+							rawKey={true}
+							json={variables}
+							prefix="variable"
+							on:select
+						/>
+					{:else}
+						<Button
+							color="light"
+							size="xs2"
+							variant="border"
+							on:click={async () => {
+								await loadVariables()
+								displayVariable = true
+							}}
+							wrapperClasses="inline-flex w-fit h-5"
+							btnClasses="font-semibold border-nord-300 rounded-[0.275rem] p-1"
+						>
+							{'{...}'}
+						</Button>
+					{/if}
+				</div>
+			{/if}
+			{#if !$inputMatches || $inputMatches.some((match) => match.word === 'resource')}
+				<div class="overflow-y-auto mb-2">
+					<span class="font-normal text-sm text-secondary">Resources :</span>
+
+					{#if displayResources}
+						<Button
+							color="light"
+							size="xs2"
+							variant="border"
+							on:click={() => {
+								displayResources = false
+							}}
+							wrapperClasses="inline-flex w-fit h-5"
+							btnClasses="font-semibold text-primary border-nord-300 rounded-[0.275rem]">-</Button
+						>
+						<ObjectViewer
+							{allowCopy}
+							pureViewer={!$propPickerConfig}
+							rawKey={true}
+							json={resources}
+							prefix="resource"
+							on:select
+						/>
+					{:else}
+						<Button
+							color="light"
+							size="xs2"
+							variant="border"
+							on:click={async () => {
+								await loadResources()
+								displayResources = true
+							}}
+							wrapperClasses="inline-flex w-fit h-5"
+							btnClasses="font-semibold border-nord-300 rounded-[0.275rem] p-1"
+						>
+							{'{...}'}
+						</Button>
+					{/if}
+				</div>
+			{/if}
 		{/if}
 	</div>
 </div>

frontend/src/lib/components/propertyPicker/PropPickerResult.svelte

@@ -1,31 +1,21 @@
 <script lang="ts">
-	import { createEventDispatcher } from 'svelte'
 	import ObjectViewer from './ObjectViewer.svelte'
 
+	export let allowCopy = false
 	export let result: any
 	export let extraResults: any = undefined
 	export let flow_input: any = undefined
-
-	const dispatch = createEventDispatcher()
 </script>
 
 <div class="w-full px-2">
-	<span class="font-bold text-sm">Result</span>
+	<span class="font-normal text-sm text-secondary">Result</span>
 	<div class="overflow-y-auto mb-2 w-full">
-		<ObjectViewer
-			allowCopy={false}
-			json={{ result, ...(extraResults ? extraResults : {}) }}
-			on:select
-		/>
+		<ObjectViewer {allowCopy} json={{ result, ...(extraResults ? extraResults : {}) }} on:select />
 	</div>
 	{#if flow_input}
-		<span class="font-bold text-sm">Flow Input</span>
+		<span class="font-normal text-sm text-secondary">Flow Input</span>
 		<div class="overflow-y-auto w-full">
-			<ObjectViewer
-				allowCopy={false}
-				json={flow_input}
-				on:select={(e) => dispatch('select', `flow_input.${e.detail}`)}
-			/>
+			<ObjectViewer {allowCopy} json={flow_input} prefix="flow_input" on:select />
 		</div>
 	{/if}
 </div>

frontend/src/lib/utils.ts

@@ -171,13 +171,36 @@ export function validatePassword(password: string): boolean {
 
 const portalDivs = ['app-editor-select']
 
-export function clickOutside(node: Node, capture?: boolean): { destroy(): void } {
-	const handleClick = (event: MouseEvent) => {
+interface ClickOutsideOptions {
+	capture?: boolean
+	exclude?: (() => Promise<HTMLElement[]>) | HTMLElement[] | undefined
+}
+
+export function clickOutside(
+	node: Node,
+	options?: ClickOutsideOptions | boolean
+): { destroy(): void; update(newOptions: ClickOutsideOptions | boolean): void } {
+	const handleClick = async (event: MouseEvent) => {
 		const target = event.target as HTMLElement
+		const opts = typeof options === 'boolean' ? { capture: options } : options
 
-		if (node && !node.contains(target) && !event.defaultPrevented) {
+		let excludedElements: HTMLElement[] = []
+		if (opts?.exclude) {
+			if (Array.isArray(opts.exclude)) {
+				excludedElements = opts.exclude
+			} else {
+				excludedElements = await opts.exclude()
+			}
+		}
+
+		const isExcluded = excludedElements.some((excludedEl) => {
+			const contains = excludedEl?.contains?.(target)
+			const isTarget = target === excludedEl
+			return contains || isTarget
+		})
+
+		if (node && !node.contains(target) && !event.defaultPrevented && !isExcluded) {
 			const portalDivsSelector = portalDivs.map((id) => `#${id}`).join(', ')
-
 			const parent = target.closest(portalDivsSelector)
 
 			if (!parent) {
@@ -186,11 +209,15 @@ export function clickOutside(node: Node, capture?: boolean): { destroy(): void }
 		}
 	}
 
-	document.addEventListener('click', handleClick, capture ?? true)
+	const capture = typeof options === 'boolean' ? options : options?.capture ?? true
+	document.addEventListener('click', handleClick, capture)
 
 	return {
+		update(newOptions: ClickOutsideOptions | boolean) {
+			options = newOptions
+		},
 		destroy() {
-			document.removeEventListener('click', handleClick, capture ?? true)
+			document.removeEventListener('click', handleClick, capture)
 		}
 	}
 }
@@ -724,7 +751,7 @@ export async function tryEvery({
 		try {
 			await tryCode()
 			break
-		} catch (err) { }
+		} catch (err) {}
 		i++
 	}
 	if (i >= times) {
@@ -948,5 +975,4 @@ export function getSchemaFromProperties(properties: { [name: string]: SchemaProp
 export function validateFileExtension(ext: string) {
 	const validExtensionRegex = /^[a-zA-Z0-9]+([._][a-zA-Z0-9]+)*$/
 	return validExtensionRegex.test(ext)
-
 }