windmill-components 1.532.0 → 1.542.4

package/package/components/flows/map/FlowModuleSchemaItem.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">import { preventDefault, stopPropagation } from 'svelte/legacy';
 import Popover from '../../Popover.svelte';
 import { classNames } from '../../../utils';
-import { AlertTriangle, Bed, Database, Gauge, Move, PhoneIncoming, Repeat, Square, SkipForward, Pin, X, Play, Loader2 } from 'lucide-svelte';
+import { Bed, Database, Gauge, Move, PhoneIncoming, Repeat, Square, SkipForward, Pin, X, Play, Loader2, TriangleAlert } from 'lucide-svelte';
 import { createEventDispatcher, getContext } from 'svelte';
 import { fade } from 'svelte/transition';
 import { twMerge } from 'tailwind-merge';
@@ -37,9 +37,7 @@ let moduleTest = $state(undefined);
 let testIsLoading = $state(false);
 let hover = $state(false);
 let connectingData = $state(undefined);
-let lastJob = $state(undefined);
 let outputPicker = $state(undefined);
-let historyOpen = $state(false);
 let testJob = $state(undefined);
 let outputPickerBarOpen = $state(false);
 let flowStateStore = $derived(flowEditorContext?.flowStateStore);
@@ -55,32 +53,13 @@ function updateConnectingData(id, pickableIds, flowPropPickerConfig, flowStateSt
 $effect(() => {
     updateConnectingData(id, pickableIds, $flowPropPickerConfig, flowStateStore);
 });
-function updateLastJob(flowStateStore) {
-    if (!flowStateStore ||
-        !id ||
-        flowStateStore.val[id]?.previewResult === 'never tested this far') {
-        return;
-    }
-    lastJob = {
-        id: flowStateStore.val[id]?.previewJobId ?? '',
-        result: flowStateStore.val[id]?.previewResult,
-        type: 'CompletedJob',
-        success: flowStateStore.val[id]?.previewSuccess ?? undefined
-    };
-}
-$effect(() => {
-    if (testJob && testJob.type === 'CompletedJob') {
-        lastJob = $state.snapshot(testJob);
-    }
-    else if (id) {
-        updateLastJob(flowStateStore);
-    }
-});
 let isConnectingCandidate = $derived(!!id && !!$flowPropPickerConfig && !!pickableIds && Object.keys(pickableIds).includes(id));
 const outputPickerVisible = $derived(editMode && (isConnectingCandidate || alwaysShowOutputPicker) && !!id);
 const icon_render = $derived(icon);
 const action = $derived(getAiModuleAction(id));
 let testRunDropdownOpen = $state(false);
+let outputPickerInner = $state(undefined);
+let historyOpen = $derived.by(() => outputPickerInner?.getHistoryOpen?.() ?? false);
 </script>
 
 {#if deletable && id && editId}
@@ -145,7 +124,15 @@ let testRunDropdownOpen = $state(false);
 	{@const flowStore = flowEditorContext?.flowStore.val}
 	{@const mod = flowStore?.value ? dfsPreviousResults(id, flowStore, false)[0] : undefined}
 	{#if mod && flowStateStore?.val?.[id]}
-		<ModuleTest bind:this={moduleTest} {mod} bind:testIsLoading bind:testJob />
+		<ModuleTest
+			bind:this={moduleTest}
+			{mod}
+			bind:testIsLoading
+			bind:testJob
+			onJobDone={() => {
+				outputPickerInner?.setJobPreview?.()
+			}}
+		/>
 	{/if}
 {/if}
 
@@ -329,7 +316,6 @@ let testRunDropdownOpen = $state(false);
 							prefix={'results'}
 							connectingData={isConnecting ? connectingData : undefined}
 							{mock}
-							{lastJob}
 							{testJob}
 							moduleId={id}
 							onSelect={selectConnection}
@@ -337,12 +323,12 @@ let testRunDropdownOpen = $state(false);
 							{path}
 							{loopStatus}
 							rightMargin
-							bind:derivedHistoryOpen={historyOpen}
 							historyOffset={{ mainAxis: 12, crossAxis: -9 }}
 							clazz="p-1"
 							isLoading={testIsLoading ||
 								(id ? stepHistoryLoader?.stepStates[id]?.loadingJobs : false)}
 							initial={id ? stepHistoryLoader?.stepStates[id]?.initial : undefined}
+							bind:this={outputPickerInner}
 						/>
 					{/snippet}
 				</OutputPicker>
@@ -350,60 +336,67 @@ let testRunDropdownOpen = $state(false);
 		</div>
 
 		{#if deletable && !action}
-			<button
-				class="absolute -top-[10px] -right-[10px] rounded-full h-[20px] w-[20px] trash center-center text-secondary
-outline-[1px] outline dark:outline-gray-500 outline-gray-300 bg-surface duration-0 hover:bg-red-400 hover:text-white
- {hover || selected ? '' : '!hidden'}"
-				title="Delete"
-				onclick={stopPropagation(
-					preventDefault((event) => dispatch('delete', { id, type: modType }))
-				)}
-				onpointerdown={stopPropagation(preventDefault(() => {}))}
+			<div
+				class="absolute -translate-y-[100%] top-2 -right-2 flex flex-row gap-1 p-1 min-w-[52px] h-7 group justify-end"
 			>
-				<X class="mx-[3px]" size={12} strokeWidth={2} />
-			</button>
-
-			{#if id !== 'preprocessor'}
+				{#if id !== 'preprocessor'}
+					<button
+						class={twMerge(
+							'trash center-center p-1 text-secondary shadow-sm bg-surface duration-0 hover:bg-blue-400 hover:text-white',
+							hover ? 'block' : '!hidden',
+							'shadow-md rounded-md',
+							'group-hover:block'
+						)}
+						onclick={stopPropagation(preventDefault((event) => dispatch('move')))}
+						title="Move"
+					>
+						<Move size={12} />
+					</button>
+				{/if}
 				<button
-					class="absolute -top-[10px] right-[60px] rounded-full h-[20px] w-[20px] trash center-center text-secondary
-outline-[1px] outline dark:outline-gray-500 outline-gray-300 bg-surface duration-0 hover:bg-blue-400 hover:text-white
- {hover ? '' : '!hidden'}"
-					onclick={stopPropagation(preventDefault((event) => dispatch('move')))}
-					title="Move"
+					class={twMerge(
+						'trash center-center text-secondary shadow-sm bg-surface duration-0 hover:bg-red-400 hover:text-white p-1',
+						selected || hover ? 'block' : '!hidden',
+						'group-hover:block',
+						'shadow-md rounded-md'
+					)}
+					title="Delete"
+					onclick={stopPropagation(
+						preventDefault((event) => dispatch('delete', { id, type: modType }))
+					)}
+					onpointerdown={stopPropagation(preventDefault(() => {}))}
 				>
-					<Move class="mx-[3px]" size={12} strokeWidth={2} />
+					<X size={12} />
 				</button>
-			{/if}
+			</div>
 
 			{#if (id && Object.values($flowInputsStore?.[id]?.flowStepWarnings || {}).length > 0) || Boolean(warningMessage)}
-				<div class="absolute -top-[10px] -left-[10px]">
-					<Popover>
-						{#snippet text()}
-							<ul class="list-disc px-2">
-								{#if id}
-									{#each Object.values($flowInputsStore?.[id]?.flowStepWarnings || {}) as m}
-										<li>
-											{m.message}
-										</li>
-									{/each}
-								{/if}
-							</ul>
-						{/snippet}
-						<div
-							class={twMerge(
-								'flex items-center justify-center h-full w-full rounded-md p-0.5 border  duration-0 ',
-								id &&
-									Object.values($flowInputsStore?.[id]?.flowStepWarnings || {})?.some(
-										(x) => x.type === 'error'
-									)
-									? 'border-red-600 text-red-600 bg-red-100 hover:bg-red-300'
-									: 'border-yellow-600 text-yellow-600 bg-yellow-100 hover:bg-yellow-300'
-							)}
-						>
-							<AlertTriangle size={14} strokeWidth={2} />
-						</div>
-					</Popover>
-				</div>
+				<Popover
+					class={twMerge(
+						'absolute -translate-y-[100%] top-1 -left-1',
+						'flex items-center justify-center rounded-b-none rounded-md p-1 shadow-md  duration-0 ',
+						id &&
+							Object.values($flowInputsStore?.[id]?.flowStepWarnings || {})?.some(
+								(x) => x.type === 'error'
+							)
+							? 'border-red-600 text-red-600 bg-red-100 hover:bg-red-300'
+							: ' text-yellow-600 bg-yellow-100 hover:bg-yellow-300'
+					)}
+				>
+					{#snippet text()}
+						<ul class="list-disc px-2">
+							{#if id}
+								{#each Object.values($flowInputsStore?.[id]?.flowStepWarnings || {}) as m}
+									<li>
+										{m.message}
+									</li>
+								{/each}
+							{/if}
+						</ul>
+					{/snippet}
+
+					<TriangleAlert size={12} strokeWidth={2} />
+				</Popover>
 			{/if}
 		{/if}
 	</div>
@@ -411,7 +404,7 @@ outline-[1px] outline dark:outline-gray-500 outline-gray-300 bg-surface duration
 	{#if editMode && enableTestRun && flowJob?.type !== 'QueuedJob'}
 		<!-- svelte-ignore a11y_no_static_element_interactions -->
 		<div
-			class="absolute top-1/2 -translate-y-1/2 -translate-x-[100%] -left-[0] flex items-center w-fit px-2 h-9 min-w-14"
+			class="absolute top-1/2 -translate-y-1/2 -translate-x-[100%] -left-[0] flex items-center w-fit px-1 h-9 min-w-9"
 			onmouseenter={() => (hover = true)}
 			onmouseleave={() => (hover = false)}
 		>
@@ -419,11 +412,11 @@ outline-[1px] outline dark:outline-gray-500 outline-gray-300 bg-surface duration
 				<div transition:fade={{ duration: 100 }}>
 					{#if !testIsLoading}
 						<Button
-							size="sm"
+							size="xs"
 							color="light"
 							title="Run"
 							variant="border"
-							btnClasses="p-1.5"
+							btnClasses="px-1 py-1.5"
 							on:click={() => {
 								outputPicker?.toggleOpen(true)
 								moduleTest?.loadArgsAndRunTest()
@@ -438,7 +431,7 @@ outline-[1px] outline dark:outline-gray-500 outline-gray-300 bg-surface duration
 									}
 								}
 							]}
-							dropdownBtnClasses="!w-4 px-1"
+							dropdownBtnClasses="!w-3 px-0.5"
 							bind:dropdownOpen={testRunDropdownOpen}
 						>
 							{#if testIsLoading}
@@ -452,7 +445,7 @@ outline-[1px] outline dark:outline-gray-500 outline-gray-300 bg-surface duration
 							size="xs"
 							color="red"
 							variant="contained"
-							btnClasses="!h-[25.5px] !w-[44.5px] !p-1.5 gap-0.5"
+							btnClasses="!h-[25.5px] !w-[36px] !p-1.5 gap-0.5"
 							on:click={async () => {
 								moduleTest?.cancelJob()
 							}}

package/package/components/flows/map/FlowModuleSchemaItem.svelte.d.ts

@@ -60,8 +60,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 declare const FlowModuleSchemaItem: $$__sveltets_2_IsomorphicComponent<Props, {
     changeId: CustomEvent<any>;
     pointerdown: CustomEvent<any>;
-    delete: CustomEvent<any>;
     move: CustomEvent<any>;
+    delete: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "">;

package/package/components/flows/map/FlowModuleSchemaItemViewer.svelte

@@ -55,7 +55,7 @@ hover:border-blue-700 hover:!visible {hover ? '' : '!hidden'}"
 							onclick?.()
 						})
 					)}
-					title="Edit Id"><Pencil size={14} /></button
+					title="Edit Id"><Pencil size={12} /></button
 				>
 			{/if}
 		{:else if id?.startsWith('subflow:')}

package/package/components/flows/map/InsertModuleButton.svelte

@@ -75,6 +75,7 @@ shouldUsePortal={true} -->
 			on:new
 			on:pickFlow
 			on:pickScript
+			allowTrigger={index == 0}
 			{kind}
 		/>
 	{/snippet}

package/package/components/flows/map/InsertModuleInner.svelte

@@ -5,21 +5,18 @@ import ToggleHubWorkspaceQuick from '../../ToggleHubWorkspaceQuick.svelte';
 import TopLevelNode from '../pickers/TopLevelNode.svelte';
 // import type { Writable } from 'svelte/store'
 const dispatch = createEventDispatcher();
-export let stop = false;
-export let funcDesc = '';
-export let disableAi = false;
-export let kind = 'script';
-export let allowTrigger = true;
-export let scriptOnly = false;
+let { stop = false, funcDesc = $bindable(''), disableAi = false, kind = 'script', allowTrigger = true, scriptOnly = false } = $props();
 let customUi = getContext('customUi');
-let selectedKind = kind;
-let preFilter = 'all';
-let loading = false;
-let small = false;
-let width = 0;
-let height = 0;
-$: displayPath = width > 650 || height > 400;
-$: small = kind === 'preprocessor' || kind === 'failure';
+let selectedKind = $state(kind);
+let preFilter = $state('all');
+let loading = $state(false);
+let small = $state(false);
+let width = $state(0);
+let height = $state(0);
+let displayPath = $derived(width > 650 || height > 400);
+$effect(() => {
+    small = kind === 'preprocessor' || kind === 'failure';
+});
 </script>
 
 <!-- <Menu transitionDuration={0} pointerDown bind:show={open} noMinW {placement} let:close> -->
@@ -37,7 +34,7 @@ shouldUsePortal={true} -->
 		: 'w-[650px]'} pt-1 pr-1 pl-1 gap-1.5 resize overflow-auto {small
 		? 'min-w-[450px]'
 		: 'min-w-[650px]'} min-h-[400px]"
-	on:wheel={(e) => {
+	onwheel={(e) => {
 		e.stopPropagation()
 	}}
 	role="none"

package/package/components/flows/map/InsertModuleInner.svelte.d.ts

@@ -1,3 +1,11 @@
+interface Props {
+    stop?: boolean;
+    funcDesc?: string;
+    disableAi?: boolean;
+    kind?: 'script' | 'trigger' | 'preprocessor' | 'failure';
+    allowTrigger?: boolean;
+    scriptOnly?: boolean;
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -11,14 +19,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const InsertModuleInner: $$__sveltets_2_IsomorphicComponent<{
-    stop?: boolean;
-    funcDesc?: string;
-    disableAi?: boolean;
-    kind?: "script" | "trigger" | "preprocessor" | "failure";
-    allowTrigger?: boolean;
-    scriptOnly?: boolean;
-}, {
+declare const InsertModuleInner: $$__sveltets_2_IsomorphicComponent<Props, {
     insert: CustomEvent<any>;
     new: CustomEvent<any>;
     pickScript: CustomEvent<any>;
@@ -26,6 +27,6 @@ declare const InsertModuleInner: $$__sveltets_2_IsomorphicComponent<{
     close: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "funcDesc">;
 type InsertModuleInner = InstanceType<typeof InsertModuleInner>;
 export default InsertModuleInner;

package/package/components/flows/map/MapItem.svelte

@@ -170,6 +170,7 @@ let parentLoop = $derived(flowStore?.val && mod ? checkIfParentLoop(flowStore.va
 					{bgColor}
 					{bgHoverColor}
 					label={mod.summary ||
+						(mod.value.type === 'aiagent' ? 'AI Agent' : undefined) ||
 						(mod.id === 'preprocessor'
 							? 'Preprocessor'
 							: mod.id.startsWith('failure')
@@ -194,10 +195,13 @@ let parentLoop = $derived(flowStore?.val && mod ? checkIfParentLoop(flowStore.va
 					{skipped}
 				>
 					{#snippet icon()}
-						{@const size = mod.value.type === 'script' && mod.value.path.startsWith('hub/')
-							? 20
-							: mod.value.type === "script" ? 14 : 16}
-						<FlowModuleIcon module={mod} size={size} />
+						{@const size =
+							mod.value.type === 'script' && mod.value.path.startsWith('hub/')
+								? 20
+								: mod.value.type === 'script'
+									? 14
+									: 16}
+						<FlowModuleIcon module={mod} {size} />
 					{/snippet}
 				</FlowModuleSchemaItem>
 			{/if}

package/package/components/flows/map/VirtualItem.svelte

@@ -70,7 +70,7 @@ const outputType = $derived(showJobStatus
 					{selected}
 					{hover}
 					id={id ?? ''}
-					isConnectingCandidate={true}
+					isConnectingCandidate={nodeKind !== 'result'}
 					variant="virtual"
 					type={outputType}
 					{darkMode}

package/package/components/flows/pickers/TopLevelNode.svelte

@@ -52,7 +52,7 @@ const dispatch = createEventDispatcher();
 			<GitBranch size={14} />
 			Branch to all
 		{:else if label === 'AI Agent'}
-			<BotIcon size={14} />
+			<BotIcon size={14} class="text-violet-800 dark:text-violet-400" />
 			AI Agent
 		{/if}
 	</span>

package/package/components/flows/propPicker/InputPickerInner.svelte

@@ -3,11 +3,11 @@ import ObjectViewer from '../../propertyPicker/ObjectViewer.svelte';
 import { twMerge } from 'tailwind-merge';
 import { DollarSign, Pencil, RefreshCw, SquareFunction } from 'lucide-svelte';
 let { inputTransform, id, onEditInput } = $props();
-const { flowStore, flowStateStore, testSteps, previewArgs } = getContext('FlowEditorContext') || {};
+const { flowStore, flowStateStore, stepsInputArgs, previewArgs } = getContext('FlowEditorContext') || {};
 onMount(() => {
-    testSteps?.updateStepArgs(id, flowStateStore?.val, flowStore?.val, previewArgs?.val);
+    stepsInputArgs?.updateStepArgs(id, flowStateStore?.val, flowStore?.val, previewArgs?.val);
 });
-const input = $derived(testSteps?.getStepArgs(id));
+const input = $derived(stepsInputArgs?.getStepArgs(id));
 </script>
 
 <div class="p-4 pr-6 h-full overflow-y-auto">
@@ -29,10 +29,10 @@ const input = $derived(testSteps?.getStepArgs(id));
 			{:else if inputTransform[key].type === 'static'}
 				<DollarSign size={12} class="text-tertiary font-mono -my-1" />
 			{/if}
-			{#if testSteps?.isArgManuallySet(id, key)}
+			{#if stepsInputArgs?.isArgManuallySet(id, key)}
 				<button
 					onclick={() => {
-						testSteps?.evalArg(id, key, flowStateStore?.val, flowStore?.val, previewArgs?.val)
+						stepsInputArgs?.evalArg(id, key, flowStateStore?.val, flowStore?.val, previewArgs?.val)
 					}}
 					title="Re-evaluate input"
 					class="-my-1 ml-0.5 hover:text-primary dark:hover:text-primary dark:text-gray-500 text-gray-300"