windmill-components 1.531.1 → 1.537.1

package/package/components/flows/content/ScriptEditorDrawer.svelte

@@ -14,6 +14,7 @@ let scriptEditorDrawer = $state();
 const dispatch = createEventDispatcher();
 export async function openDrawer(hash, cb) {
     script = undefined;
+    closeAnyway = false;
     scriptEditorDrawer?.openDrawer?.();
     script = await ScriptService.getScriptByHash({
         workspace: $workspaceStore,
@@ -64,7 +65,6 @@ let unsavedModalOpen = $state(false);
 async function checkForUnsavedChanges() {
     if (closeAnyway) {
         scriptEditorDrawer?.closeDrawer();
-        closeAnyway = false;
         return;
     }
     if (savedScript && script) {
@@ -72,6 +72,7 @@ async function checkForUnsavedChanges() {
         const current = cleanValueProperties(script);
         if (orderedJsonStringify(saved) !== orderedJsonStringify(current)) {
             unsavedModalOpen = true;
+            scriptEditorDrawer?.openDrawer();
         }
         else {
             scriptEditorDrawer?.closeDrawer();
@@ -79,6 +80,7 @@ async function checkForUnsavedChanges() {
     }
 }
 let args = $state({});
+let displayEditor = $state(true);
 </script>
 
 <ConfirmationModal
@@ -89,8 +91,9 @@ let args = $state({});
 		unsavedModalOpen = false
 	}}
 	on:confirmed={() => {
-		unsavedModalOpen = false
+		console.log('confirmed')
 		closeAnyway = true
+		unsavedModalOpen = false
 		scriptEditorDrawer?.closeDrawer()
 	}}
 >
@@ -107,7 +110,7 @@ let args = $state({});
 				}
 				unsavedModalOpen = false
 				closeAnyway = true
-				scriptEditorDrawer?.closeDrawer()
+				displayEditor = false
 				diffDrawer?.openDrawer()
 				diffDrawer?.setDiff({
 					title: 'Saved <> Current',
@@ -133,7 +136,6 @@ let args = $state({});
 	bind:this={scriptEditorDrawer}
 	size="1200px"
 	on:close={() => {
-		scriptEditorDrawer?.openDrawer()
 		checkForUnsavedChanges()
 	}}
 >
@@ -146,7 +148,7 @@ let args = $state({});
 			scriptEditorDrawer?.closeDrawer()
 		}}
 	>
-		{#if script}
+		{#if script && displayEditor}
 			{#key script.hash}
 				<ScriptEditor
 					showCaptures={false}
@@ -187,7 +189,7 @@ let args = $state({});
 						return
 					}
 					closeAnyway = true
-					scriptEditorDrawer?.closeDrawer()
+					displayEditor = false
 					diffDrawer?.openDrawer()
 					diffDrawer?.setDiff({
 						mode: 'simple',
@@ -227,10 +229,6 @@ let args = $state({});
 <DiffDrawer
 	bind:this={diffDrawer}
 	on:close={() => {
-		if (!closeAnyway) {
-			scriptEditorDrawer?.openDrawer()
-		} else {
-			closeAnyway = false
-		}
+		displayEditor = true
 	}}
 />

package/package/components/flows/dfs.d.ts

@@ -1,4 +1,4 @@
 import type { FlowModule } from '../../gen';
-export declare function dfs<T>(modules: FlowModule[], f: (x: FlowModule, modules: FlowModule[], branches: FlowModule[][]) => T, { skipToolNodes }?: {
+export declare function dfs<T>(modules: FlowModule[], f: (x: FlowModule, modules: FlowModule[], branches: FlowModule[][]) => T, opts?: {
     skipToolNodes?: boolean;
 }): T[];

package/package/components/flows/dfs.js

@@ -1,27 +1,27 @@
-export function dfs(modules, f, { skipToolNodes = false } = {}) {
+export function dfs(modules, f, opts = {}) {
     let result = [];
     for (const module of modules) {
         if (module.value.type == 'forloopflow' || module.value.type == 'whileloopflow') {
             result = result.concat(f(module, modules, [module.value.modules]));
-            result = result.concat(dfs(module.value.modules, f));
+            result = result.concat(dfs(module.value.modules, f, opts));
         }
         else if (module.value.type == 'branchone') {
             const allBranches = [module.value.default, ...module.value.branches.map((b) => b.modules)];
             result = result.concat(f(module, modules, allBranches));
             for (const branch of allBranches) {
-                result = result.concat(dfs(branch, f));
+                result = result.concat(dfs(branch, f, opts));
             }
         }
         else if (module.value.type == 'branchall') {
             const allBranches = module.value.branches.map((b) => b.modules);
             result = result.concat(f(module, modules, allBranches));
             for (const branch of allBranches) {
-                result = result.concat(dfs(branch, f));
+                result = result.concat(dfs(branch, f, opts));
             }
         }
-        else if (module.value.type == 'aiagent' && !skipToolNodes) {
+        else if (module.value.type == 'aiagent' && !opts.skipToolNodes) {
             result = result.concat(f(module, modules, [module.value.tools]));
-            result = result.concat(dfs(module.value.tools, f));
+            result = result.concat(dfs(module.value.tools, f, opts));
         }
         else {
             result.push(f(module, modules, []));

package/package/components/flows/flowInfers.js

@@ -82,27 +82,27 @@ export async function loadSchemaFromModule(module) {
                         }
                     ]
                 },
-                system_prompt: {
-                    type: 'string',
-                    default: 'You are a helpful assistant'
-                },
                 user_message: {
                     type: 'string'
                 },
+                system_prompt: {
+                    type: 'string'
+                },
                 max_completion_tokens: {
                     type: 'number'
                 },
                 temperature: {
-                    type: 'number'
+                    type: 'number',
+                    description: 'Controls randomness in text generation. Range: 0.0 (deterministic) to 2.0 (random).'
                 }
             },
-            required: ['provider', 'model', 'system_prompt', 'user_message'],
+            required: ['provider', 'model', 'user_message'],
             type: 'object',
             order: [
                 'provider',
                 'model',
-                'system_prompt',
                 'user_message',
+                'system_prompt',
                 'max_completion_tokens',
                 'temperature'
             ]

package/package/components/flows/flowStateUtils.svelte.js

@@ -113,8 +113,7 @@ export async function createBranchAll(id) {
 export async function createAiAgent(id) {
     const aiAgentFlowModules = {
         id,
-        value: { type: 'aiagent', tools: [], input_transforms: {} },
-        summary: 'AI Agent'
+        value: { type: 'aiagent', tools: [], input_transforms: {} }
     };
     const flowModuleState = await loadFlowModuleState(aiAgentFlowModules);
     return [aiAgentFlowModules, flowModuleState];

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

@@ -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>

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

@@ -1,12 +1,9 @@
 <script lang="ts">import { Button } from '../../common';
-import LanguageIcon from '../../common/languageIcons/LanguageIcon.svelte';
-import IconedResourceType from '../../IconedResourceType.svelte';
-import { Building, Repeat, Square, ArrowDown, GitBranch, Bot } from 'lucide-svelte';
 import { createEventDispatcher, getContext } from 'svelte';
 import FlowModuleSchemaItem from './FlowModuleSchemaItem.svelte';
+import FlowModuleIcon from '../FlowModuleIcon.svelte';
 import { prettyLanguage } from '../../../common';
 import { msToSec } from '../../../utils';
-import BarsStaggered from '../../icons/BarsStaggered.svelte';
 import FlowJobsMenu from './FlowJobsMenu.svelte';
 import { isTriggerStep } from '../../graph/graphBuilder.svelte';
 import { checkIfParentLoop } from '../utils';
@@ -107,9 +104,7 @@ let parentLoop = $derived(flowStore?.val && mod ? checkIfParentLoop(flowStore.va
 					{darkMode}
 				>
 					{#snippet icon()}
-						<div>
-							<Repeat size={16} />
-						</div>
+						<FlowModuleIcon module={mod} />
 					{/snippet}
 				</FlowModuleSchemaItem>
 			{:else if mod.value.type === 'branchone'}
@@ -130,9 +125,7 @@ let parentLoop = $derived(flowStore?.val && mod ? checkIfParentLoop(flowStore.va
 					{darkMode}
 				>
 					{#snippet icon()}
-						<div>
-							<GitBranch size={16} />
-						</div>
+						<FlowModuleIcon module={mod} />
 					{/snippet}
 				</FlowModuleSchemaItem>
 			{:else if mod.value.type === 'branchall'}
@@ -153,9 +146,7 @@ let parentLoop = $derived(flowStore?.val && mod ? checkIfParentLoop(flowStore.va
 					{darkMode}
 				>
 					{#snippet icon()}
-						<div>
-							<GitBranch size={16} />
-						</div>
+						<FlowModuleIcon module={mod} />
 					{/snippet}
 				</FlowModuleSchemaItem>
 			{:else}
@@ -179,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')
@@ -203,32 +195,13 @@ let parentLoop = $derived(flowStore?.val && mod ? checkIfParentLoop(flowStore.va
 					{skipped}
 				>
 					{#snippet icon()}
-						<div>
-							{#if mod.value.type === 'aiagent'}
-								<Bot size={16} />
-							{:else if mod.value.type === 'rawscript'}
-								<LanguageIcon lang={mod.value.language} width={16} height={16} />
-							{:else if mod.summary == 'Terminate flow'}
-								<Square size={16} />
-							{:else if mod.value.type === 'identity'}
-								<ArrowDown size={16} />
-							{:else if mod.value.type === 'flow'}
-								<BarsStaggered size={16} />
-							{:else if mod.value.type === 'script'}
-								{#if mod.value.path.startsWith('hub/')}
-									<div>
-										<IconedResourceType
-											width="20px"
-											height="20px"
-											name={mod.value.path.split('/')[2]}
-											silent={true}
-										/>
-									</div>
-								{:else}
-									<Building size={14} />
-								{/if}
-							{/if}
-						</div>
+						{@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"