windmill-components 1.511.1 → 1.531.0

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

@@ -1,7 +1,8 @@
 import type { FlowModule, Job } from '../../../gen';
 import type { InlineScript, InsertKind } from '../../graph/graphBuilder.svelte';
 import type { GraphModuleState } from '../../graph';
-import { type Writable } from 'svelte/store';
+import { ModulesTestStates } from '../../modulesTest.svelte';
+import type { StateStore } from '../../../utils';
 interface Props {
     sidebarSize?: number | undefined;
     disableStaticInputs?: boolean;
@@ -13,7 +14,8 @@ interface Props {
     workspace?: string | undefined;
     onTestUpTo?: ((id: string) => void) | undefined;
     onEditInput?: (moduleId: string, key: string) => void;
-    localModuleStates?: Writable<Record<string, GraphModuleState>>;
+    localModuleStates?: Record<string, GraphModuleState>;
+    testModuleStates?: ModulesTestStates;
     aiChatOpen?: boolean;
     showFlowAiButton?: boolean;
     toggleAiChat?: () => void;
@@ -26,7 +28,7 @@ interface Props {
     individualStepTests?: boolean;
     flowJob?: Job | undefined;
     showJobStatus?: boolean;
-    suspendStatus?: Writable<Record<string, {
+    suspendStatus?: StateStore<Record<string, {
         job: Job;
         nb: number;
     }>>;
@@ -67,6 +69,6 @@ declare const FlowModuleSchemaMap: $$__sveltets_2_IsomorphicComponent<Props, {
     removeBranch: (id: string, index: number) => void;
     isNodeVisible: (nodeId: string) => boolean;
     setExpr: (module: FlowModule, expr: string) => void;
-}, "sidebarSize">;
+}, "suspendStatus" | "sidebarSize">;
 type FlowModuleSchemaMap = InstanceType<typeof FlowModuleSchemaMap>;
 export default FlowModuleSchemaMap;

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

@@ -59,7 +59,10 @@ shouldUsePortal={true} -->
 			{#if kind === 'trigger'}
 				<SchedulePollIcon size={14} />
 			{:else if kind === 'failure'}
-				<Bug size={14} />
+				<div class="flex items-center gap-1">
+					<Bug size={14} />
+					<span class="text-xs w-20">Error Handler</span>
+				</div>
 			{:else}
 				<Cross size={iconSize} />
 			{/if}

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

@@ -10,6 +10,7 @@ export let funcDesc = '';
 export let disableAi = false;
 export let kind = 'script';
 export let allowTrigger = true;
+export let scriptOnly = false;
 let customUi = getContext('customUi');
 let selectedKind = kind;
 let preFilter = 'all';
@@ -58,7 +59,7 @@ shouldUsePortal={true} -->
 	</div>
 
 	<div class="flex flex-row grow min-h-0">
-		{#if kind === 'script'}
+		{#if kind === 'script' && !scriptOnly}
 			<div class="flex-none flex flex-col text-xs text-primary">
 				<TopLevelNode
 					label="Action"
@@ -130,6 +131,13 @@ shouldUsePortal={true} -->
 						dispatch('new', { kind: 'branchall' })
 					}}
 				/>
+				<TopLevelNode
+					label="AI Agent"
+					on:select={() => {
+						dispatch('close')
+						dispatch('new', { kind: 'aiagent' })
+					}}
+				/>
 			</div>
 		{/if}
 

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

@@ -17,6 +17,7 @@ declare const InsertModuleInner: $$__sveltets_2_IsomorphicComponent<{
     disableAi?: boolean;
     kind?: "script" | "trigger" | "preprocessor" | "failure";
     allowTrigger?: boolean;
+    scriptOnly?: boolean;
 }, {
     insert: CustomEvent<any>;
     new: CustomEvent<any>;

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

@@ -1,7 +1,7 @@
 <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 } from 'lucide-svelte';
+import { Building, Repeat, Square, ArrowDown, GitBranch, Bot } from 'lucide-svelte';
 import { createEventDispatcher, getContext } from 'svelte';
 import FlowModuleSchemaItem from './FlowModuleSchemaItem.svelte';
 import { prettyLanguage } from '../../../common';
@@ -204,7 +204,9 @@ let parentLoop = $derived(flowStore?.val && mod ? checkIfParentLoop(flowStore.va
 				>
 					{#snippet icon()}
 						<div>
-							{#if mod.value.type === 'rawscript'}
+							{#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} />

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

@@ -1,5 +1,5 @@
 <script lang="ts">import BarsStaggered from '../../icons/BarsStaggered.svelte';
-import { CheckCircle2, ChevronRight, Code, GitBranch, Repeat, Square, Zap } from 'lucide-svelte';
+import { BotIcon, CheckCircle2, ChevronRight, Code, GitBranch, Repeat, Square, Zap } from 'lucide-svelte';
 import { createEventDispatcher } from 'svelte';
 import { twMerge } from 'tailwind-merge';
 export let label;
@@ -51,6 +51,9 @@ const dispatch = createEventDispatcher();
 		{:else if label === 'Branch to all'}
 			<GitBranch size={14} />
 			Branch to all
+		{:else if label === 'AI Agent'}
+			<BotIcon size={14} />
+			AI Agent
 		{/if}
 	</span>
 	{#if returnIcon && selected}

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

@@ -5,13 +5,14 @@ import { DollarSign, Pencil, RefreshCw, SquareFunction } from 'lucide-svelte';
 let { inputTransform, id, onEditInput } = $props();
 const { flowStore, flowStateStore, testSteps, previewArgs } = getContext('FlowEditorContext') || {};
 onMount(() => {
-    testSteps?.updateStepArgs(id, $flowStateStore, flowStore?.val, previewArgs?.val);
+    testSteps?.updateStepArgs(id, flowStateStore?.val, flowStore?.val, previewArgs?.val);
 });
-const input = $derived(testSteps?.getStepArgs(id)?.value);
+const input = $derived(testSteps?.getStepArgs(id));
 </script>
 
 <div class="p-4 pr-6 h-full overflow-y-auto">
-	<ObjectViewer json={input} {inputTransform} {metaData} {editKey} />
+	<!-- {JSON.stringify({ inputTransform, input })} -->
+	<ObjectViewer json={input} {metaData} {editKey} />
 </div>
 
 {#snippet metaData(key: string)}
@@ -31,7 +32,7 @@ const input = $derived(testSteps?.getStepArgs(id)?.value);
 			{#if testSteps?.isArgManuallySet(id, key)}
 				<button
 					onclick={() => {
-						testSteps?.evalArg(id, key, $flowStateStore, flowStore?.val, previewArgs?.val)
+						testSteps?.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"

package/package/components/flows/propPicker/OutputBadge.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">import { twMerge } from 'tailwind-merge';
 import { base } from '../../../base';
 import { ExternalLink } from 'lucide-svelte';
+import { emptyString } from '../../../utils';
 export let job = undefined;
 </script>
 
@@ -14,21 +15,26 @@ export let job = undefined;
 		<div
 			class={twMerge(
 				'rounded-full w-2 h-2',
-				'success' in job && job.success ? 'bg-green-400' : 'bg-red-400'
+				'success' in job && job.success
+					? 'bg-green-400'
+					: job.type === 'CompletedJob'
+						? 'bg-red-400'
+						: 'bg-yellow-400'
 			)}
 			title={'success' in job && job.success ? 'Success' : 'Failed'}
 		></div>
-
 		<span class="text-xs truncate" dir="rtl" title={`job id: ${job.id}`}>
 			{job.id.slice(-5)}
 		</span>
-		<a
-			target="_blank"
-			href="{base}/run/{job.id}?workspace={job.workspace_id}"
-			class="text-right float-right text-gray-300 group-hover:text-gray-400 transition-all duration-200 dark:text-gray-500 dark:group-hover:text-gray-300"
-			title="See run detail in a new tab"
-		>
-			<ExternalLink size={12} />
-		</a>
+		{#if !emptyString(job.id)}
+			<a
+				target="_blank"
+				href="{base}/run/{job.id}?workspace={job.workspace_id}"
+				class="text-right float-right text-gray-300 group-hover:text-gray-400 transition-all duration-200 dark:text-gray-500 dark:group-hover:text-gray-300"
+				title="See run detail in a new tab"
+			>
+				<ExternalLink size={12} />
+			</a>
+		{/if}
 	</div>
 {/if}

package/package/components/flows/propPicker/OutputPickerInner.svelte

@@ -42,10 +42,10 @@ function checkOverflow() {
     }
 }
 function selectJob(nJob) {
-    if (nJob && 'result' in nJob) {
+    if (nJob && (nJob.result_stream || nJob.type == 'CompletedJob')) {
         selectedJob = nJob;
     }
-    else if (job && 'result' in job) {
+    else if (job && (job.result_stream || job.type == 'CompletedJob')) {
         selectedJob = job;
     }
     else {
@@ -53,7 +53,7 @@ function selectJob(nJob) {
     }
 }
 $effect(() => {
-    if (!job || !('result' in job)) {
+    if (!job || !(job.result_stream || job.type == 'CompletedJob')) {
         return;
     }
     selectJob(job);
@@ -169,7 +169,7 @@ let job = $derived.by(() => {
     return undefined;
 });
 let popoverHeight = $derived(customHeight ?? (clientHeight > 0 ? clientHeight : 0));
-const isLoadingAndNotMock = $derived(isLoading && !mock?.enabled);
+const isLoadingAndNotMock = $derived(isLoading && job?.result_stream === undefined && !mock?.enabled);
 const copilot_fix_render = $derived(copilot_fix);
 </script>
 
@@ -329,6 +329,15 @@ const copilot_fix_render = $derived(copilot_fix);
 							>
 						{/if}
 					</div>
+				{:else if testJob}
+					<!-- {JSON.stringify(testJob)} -->
+					<OutputBadge
+						job={testJob}
+						class={twMerge(
+							'min-w-16 text-secondary',
+							preview || testJob?.id !== job?.id ? 'bg-surface shadow-sm h-[23px]' : ''
+						)}
+					/>
 				{/if}
 
 				{#if !disableMock && !isLoadingAndNotMock}
@@ -418,7 +427,7 @@ const copilot_fix_render = $derived(copilot_fix);
 			</div>
 
 			<div class="px-2">
-				{#if selectedJob && 'result' in selectedJob && displayResultJob && toolbarLocationJob === 'external'}
+				{#if selectedJob && displayResultJob && toolbarLocationJob === 'external'}
 					<DisplayResultControlBar
 						workspaceId={selectedJob.workspace_id}
 						jobId={selectedJob.id}
@@ -548,8 +557,10 @@ const copilot_fix_render = $derived(copilot_fix);
 							bind:forceJson
 							workspaceId={undefined}
 							jobId={undefined}
+							result_stream={undefined}
 							result={mock?.return_value}
 							externalToolbarAvailable
+							fixTableSizingToParent
 							on:toolbar-location-changed={({ detail }) => {
 								toolbarLocationMock = detail
 							}}
@@ -566,7 +577,7 @@ const copilot_fix_render = $derived(copilot_fix);
 						pureViewer={false}
 					/>
 				{/if}
-			{:else if selectedJob != undefined && 'result' in selectedJob}
+			{:else if selectedJob != undefined && (selectedJob.result_stream || selectedJob.type == 'CompletedJob')}
 				{#if fullResult}
 					<div class="break-words relative h-full">
 						{#key selectedJob}
@@ -576,7 +587,9 @@ const copilot_fix_render = $derived(copilot_fix);
 								workspaceId={selectedJob?.workspace_id}
 								jobId={selectedJob?.id}
 								result={selectedJob?.result}
+								result_stream={selectedJob?.result_stream}
 								externalToolbarAvailable
+								fixTableSizingToParent
 								on:toolbar-location-changed={({ detail }) => {
 									toolbarLocationJob = detail
 								}}

package/package/components/flows/propPicker/OutputPickerInner.svelte.d.ts

@@ -7,6 +7,8 @@ type SelectedJob = ((Job | {
     success: boolean;
 }) & {
     preview?: boolean;
+    result_stream?: string;
+    result?: unknown;
 }) | undefined;
 interface Props {
     prefix?: string;
@@ -36,7 +38,9 @@ interface Props {
     disableMock?: boolean;
     disableHistory?: boolean;
     lastJob?: Job;
-    testJob?: Job;
+    testJob?: Job & {
+        result_stream?: string;
+    };
     derivedHistoryOpen?: boolean;
     historyOffset?: any;
     clazz?: string;
@@ -52,6 +56,6 @@ interface Props {
     onResetInitial?: () => void;
     customEmptyJobMessage?: string;
 }
-declare const OutputPickerInner: import("svelte").Component<Props, {}, "preview" | "isLoading" | "mock" | "forceJson" | "selectedJob" | "derivedHistoryOpen">;
+declare const OutputPickerInner: import("svelte").Component<Props, {}, "preview" | "forceJson" | "mock" | "isLoading" | "selectedJob" | "derivedHistoryOpen">;
 type OutputPickerInner = ReturnType<typeof OutputPickerInner>;
 export default OutputPickerInner;

package/package/components/flows/propPicker/StepHistory.svelte

@@ -35,7 +35,10 @@ function initLoadInputs() {
     infiniteList?.setLoader(loadInputsPageFn);
 }
 $effect(() => {
-    staticInputs && infiniteList?.loadData('forceRefresh');
+    staticInputs;
+    for (const s of staticInputs ?? [])
+        s; // listen to changes one level deep
+    infiniteList?.loadData('forceRefresh');
 });
 async function getJobResultAndLogs(jobId, noLogs) {
     try {

package/package/components/flows/testSteps.svelte.d.ts

@@ -1,13 +1,14 @@
 import type { FlowModule, OpenFlow } from '../../gen';
 import type { FlowState } from './flowState';
 import { type PickableProperties } from './previousResults';
-import { type ModuleArgs } from './utils';
 export declare class TestSteps {
     #private;
     constructor();
     setStepArgsManually(moduleId: string, args: Record<string, any>): void;
-    getStepArgs(moduleId: string): ModuleArgs | undefined;
+    getStepArgs(moduleId: string): Record<string, any> | undefined;
+    getStepInputArgs(moduleId: string, argName: string): any | undefined;
     setStepArgs(moduleId: string, args: Record<string, any>): void;
+    setStepInputArgs(moduleId: string, argName: string, value: any): void;
     getStepArg(moduleId: string, argName: string): any | undefined;
     setEvaluatedStepArg(moduleId: string, argName: string, value: any): void;
     isArgManuallySet(moduleId: string, argName: string): boolean;

package/package/components/flows/testSteps.svelte.js

@@ -5,40 +5,43 @@ export class TestSteps {
     #steps = $state({});
     constructor() { }
     setStepArgsManually(moduleId, args) {
-        if (!this.#steps[moduleId]) {
-            this.#steps[moduleId] = { value: {} };
-        }
-        this.#steps[moduleId].value = args;
+        this.#steps[moduleId] = args;
     }
     getStepArgs(moduleId) {
         return this.#steps[moduleId];
     }
+    getStepInputArgs(moduleId, argName) {
+        return this.#steps[moduleId]?.[argName];
+    }
     setStepArgs(moduleId, args) {
+        this.#steps[moduleId] = args;
+    }
+    setStepInputArgs(moduleId, argName, value) {
         if (!this.#steps[moduleId]) {
-            this.#steps[moduleId] = { value: {} };
+            this.#steps[moduleId] = {};
         }
-        this.#steps[moduleId].value = args;
+        this.#steps[moduleId][argName] = value;
     }
     getStepArg(moduleId, argName) {
         return this.#steps[moduleId]?.[argName];
     }
     setEvaluatedStepArg(moduleId, argName, value) {
         if (!this.#steps[moduleId]) {
-            this.#steps[moduleId] = { value: {} };
+            this.#steps[moduleId] = {};
         }
         if (!this.#stepsEvaluated[moduleId]) {
-            this.#stepsEvaluated[moduleId] = { value: {} };
+            this.#stepsEvaluated[moduleId] = {};
         }
-        this.#steps[moduleId].value[argName] = $state.snapshot(value);
-        this.#stepsEvaluated[moduleId].value[argName] = $state.snapshot(value);
+        this.#steps[moduleId][argName] = $state.snapshot(value);
+        this.#stepsEvaluated[moduleId][argName] = $state.snapshot(value);
     }
     isArgManuallySet(moduleId, argName) {
-        return (JSON.stringify(this.#steps[moduleId]?.value?.[argName]) !==
-            JSON.stringify(this.#stepsEvaluated[moduleId]?.value?.[argName]));
+        return (JSON.stringify(this.#steps[moduleId]?.[argName]) !==
+            JSON.stringify(this.#stepsEvaluated[moduleId]?.[argName]));
     }
     getManuallyEditedArgs(moduleId) {
         const manuallyEditedArgs = [];
-        const moduleArgs = this.#steps[moduleId]?.value ?? {};
+        const moduleArgs = this.#steps[moduleId] ?? {};
         Object.keys(moduleArgs).forEach((argName) => {
             if (this.isArgManuallySet(moduleId, argName)) {
                 manuallyEditedArgs.push(argName);
@@ -65,8 +68,8 @@ export class TestSteps {
         const stepPropPicker = getStepPropPicker(flowState, parentModule, previousModule, moduleId, flow, previewArgs, false);
         const pickableProperties = stepPropPicker.pickableProperties;
         const argSnapshot = $state.snapshot(evalValue(argName, modules[0], pickableProperties, false));
-        this.#stepsEvaluated[moduleId].value[argName] = argSnapshot;
-        this.#steps[moduleId].value[argName] = structuredClone(argSnapshot);
+        this.#stepsEvaluated[moduleId][argName] = argSnapshot;
+        this.#steps[moduleId][argName] = structuredClone(argSnapshot);
     }
     initializeFromSchema(mod, schema, pickableProperties) {
         const args = Object.fromEntries(Object.keys(schema.properties ?? {}).map((k) => [
@@ -75,20 +78,20 @@ export class TestSteps {
         ]));
         const manuallyEditedArgs = this.getManuallyEditedArgs(mod.id);
         if (!this.#steps[mod.id]) {
-            this.#steps[mod.id] = { value: {} };
+            this.#steps[mod.id] = {};
         }
         if (!this.#stepsEvaluated[mod.id]) {
-            this.#stepsEvaluated[mod.id] = { value: {} };
+            this.#stepsEvaluated[mod.id] = {};
         }
-        this.#stepsEvaluated[mod.id].value = $state.snapshot(args);
+        this.#stepsEvaluated[mod.id] = $state.snapshot(args);
         // Preserve manually edited args
         const argsSnapshot = $state.snapshot(args);
         Object.keys(argsSnapshot).forEach((key) => {
             if (manuallyEditedArgs.includes(key)) {
-                argsSnapshot[key] = this.#steps[mod.id]?.value?.[key];
+                argsSnapshot[key] = this.#steps[mod.id]?.[key];
             }
         });
-        this.#steps[mod.id].value = argsSnapshot;
+        this.#steps[mod.id] = argsSnapshot;
     }
     updateStepArgs(id, flowState, flow, previewArgs) {
         if (!flowState || !flow) {
@@ -112,11 +115,11 @@ export class TestSteps {
             return;
         }
         const nargs = {};
-        Object.keys(this.#stepsEvaluated[moduleId]?.value ?? {}).forEach((key) => {
+        Object.keys(this.#stepsEvaluated[moduleId] ?? {}).forEach((key) => {
             if (keys.includes(key)) {
-                nargs[key] = this.#stepsEvaluated[moduleId]?.value?.[key];
+                nargs[key] = this.#stepsEvaluated[moduleId]?.[key];
             }
         });
-        this.#stepsEvaluated[moduleId].value = nargs;
+        this.#stepsEvaluated[moduleId] = nargs;
     }
 }

package/package/components/flows/types.d.ts

@@ -56,7 +56,7 @@ export type FlowEditorContext = {
     pathStore: Writable<string>;
     flowStore: StateStore<ExtendedOpenFlow>;
     flowInputEditorState: Writable<FlowInputEditorState>;
-    flowStateStore: Writable<FlowState>;
+    flowStateStore: StateStore<FlowState>;
     testSteps: TestSteps;
     saveDraft: () => void;
     initialPathStore: Writable<string>;

package/package/components/flows/utils.d.ts

@@ -1,13 +1,9 @@
 import { type FlowModule, type Job, type RestartedFrom, type OpenFlow } from '../../gen';
-import { type Writable } from 'svelte/store';
 import type { FlowModuleState } from './flowState';
 import { type PickableProperties } from './previousResults';
 import type { ExtendedOpenFlow } from './types';
 import type { GraphModuleState } from '../graph';
 import type { ModulesTestStates } from '../modulesTest.svelte';
-export type ModuleArgs = {
-    value: Record<string, any>;
-};
 export declare function evalValue(k: string, mod: FlowModule, pickableProperties: PickableProperties | undefined, showError: boolean): any;
 export declare function filteredContentForExport(flow: ExtendedOpenFlow): {
     summary: string;
@@ -40,4 +36,6 @@ export declare function checkIfParentLoop(flowStore: ExtendedOpenFlow, modId: st
  * Extracts job information and converts it to GraphModuleState format
  * for graph rendering
  */
-export declare function updateDerivedModuleStatesFromTestJobs(moduleId: string | undefined, moduleTestStates: ModulesTestStates | undefined, moduleStates: Writable<Record<string, GraphModuleState>> | undefined): void;
+export declare function updateDerivedModuleStatesFromTestJobs(moduleId: string | undefined, moduleTestStates: ModulesTestStates | undefined, moduleStates: Record<string, GraphModuleState> | undefined): {
+    [x: string]: GraphModuleState;
+} | undefined;

package/package/components/flows/utils.js

@@ -181,9 +181,8 @@ export function updateDerivedModuleStatesFromTestJobs(moduleId, moduleTestStates
             };
         }
     }
-    // Update the store with test job states
-    moduleStates.update((currentStates) => ({
-        ...currentStates,
+    return {
+        ...moduleStates,
         ...newStates
-    }));
+    };
 }