windmill-components 1.493.10 → 1.501.4

package/package/components/flows/content/FlowModuleComponent.svelte

@@ -1,16 +1,18 @@
-<script lang="ts">import { Pane, Splitpanes } from 'svelte-splitpanes';
+<script lang="ts">import { createBubbler } from 'svelte/legacy';
+const bubble = createBubbler();
+import { Pane, Splitpanes } from 'svelte-splitpanes';
 import Tab from '../../common/tabs/Tab.svelte';
 import Tabs from '../../common/tabs/Tabs.svelte';
 import Editor from '../../Editor.svelte';
 import EditorBar from '../../EditorBar.svelte';
 import ModulePreview from '../../ModulePreview.svelte';
 import Toggle from '../../Toggle.svelte';
-import { createScriptFromInlineScript, fork } from '../flowStateUtils';
+import { createScriptFromInlineScript, fork } from '../flowStateUtils.svelte';
 import FlowCard from '../common/FlowCard.svelte';
 import FlowModuleHeader from './FlowModuleHeader.svelte';
 import { getLatestHashForScript, scriptLangToEditorLang } from '../../../scripts';
 import PropPickerWrapper from '../propPicker/PropPickerWrapper.svelte';
-import { getContext, tick } from 'svelte';
+import { getContext, onDestroy, tick, untrack } from 'svelte';
 import FlowModuleScript from './FlowModuleScript.svelte';
 import FlowModuleEarlyStop from './FlowModuleEarlyStop.svelte';
 import FlowModuleSuspend from './FlowModuleSuspend.svelte';
@@ -38,48 +40,38 @@ import Label from '../../Label.svelte';
 import { enterpriseLicense } from '../../../stores';
 import { isCloudHosted } from '../../../cloud';
 import { loadSchemaFromModule } from '../flowInfers';
-import { computeFlowStepWarning, initFlowStepWarnings } from '../utils';
-import { debounce } from '../../../utils';
-import { dfs } from '../dfs';
 import FlowModuleSkip from './FlowModuleSkip.svelte';
 import { JobService } from '../../../gen';
 import { workspaceStore } from '../../../stores';
 import { checkIfParentLoop } from '../utils';
 import ModulePreviewResultViewer from '../../ModulePreviewResultViewer.svelte';
-const { selectedId, previewArgs, flowStateStore, flowStore, pathStore, saveDraft, flowInputsStore, customUi, executionCount } = getContext('FlowEditorContext');
-export let flowModule;
-export let failureModule = false;
-export let preprocessorModule = false;
-export let parentModule = undefined;
-export let previousModule;
-export let scriptKind = 'script';
-export let scriptTemplate = 'script';
-export let noEditor;
-export let enableAi;
-export let savedModule = undefined;
-let tag = undefined;
-let diffMode = false;
-let editor;
-let diffEditor;
-let modulePreview;
-let websocketAlive = {
+import { aiChatManager } from '../../copilot/chat/AIChatManager.svelte';
+import { refreshStateStore } from '../../../svelte5Utils.svelte';
+import { getStepHistoryLoaderContext } from '../../stepHistoryLoader.svelte';
+const { selectedId, currentEditor, previewArgs, flowStateStore, flowStore, pathStore, saveDraft, customUi, executionCount } = getContext('FlowEditorContext');
+let { flowModule = $bindable(), failureModule = false, preprocessorModule = false, parentModule = $bindable(), previousModule, scriptKind = 'script', scriptTemplate = 'script', noEditor, enableAi, savedModule = undefined, forceTestTab = false, highlightArg = undefined } = $props();
+let tag = $state(undefined);
+let diffMode = $state(false);
+let editor = $state();
+let diffEditor = $state();
+let modulePreview = $state();
+let websocketAlive = $state({
     pyright: false,
     deno: false,
     go: false,
     ruff: false,
     shellcheck: false
-};
-let selected = preprocessorModule ? 'test' : 'inputs';
-let advancedSelected = 'retries';
-let advancedRuntimeSelected = 'concurrency';
-let s3Kind = 's3_client';
-let validCode = true;
-let width = 1200;
-let lastJob = undefined;
-let testJob = undefined;
-let testIsLoading = false;
-let scriptProgress = undefined;
-$: lastDeployedCode = onModulesChange(savedModule, flowModule);
+});
+let selected = $state(preprocessorModule ? 'test' : 'inputs');
+let advancedSelected = $state('retries');
+let advancedRuntimeSelected = $state('concurrency');
+let s3Kind = $state('s3_client');
+let validCode = $state(true);
+let width = $state(1200);
+let lastJob = $state(undefined);
+let testJob = $state(undefined);
+let testIsLoading = $state(false);
+let scriptProgress = $state(undefined);
 function onModulesChange(savedModule, flowModule) {
     // console.log('onModulesChange', savedModule, flowModule)
     return savedModule?.value?.type === 'rawscript' &&
@@ -88,21 +80,6 @@ function onModulesChange(savedModule, flowModule) {
         ? savedModule.value.content
         : undefined;
 }
-const { modulesStore: copilotModulesStore } = getContext('FlowCopilotContext') || {};
-function setCopilotModuleEditor() {
-    copilotModulesStore?.update((modules) => {
-        const module = modules.find((m) => m.id === flowModule.id);
-        if (module) {
-            module.editor = editor;
-        }
-        return modules;
-    });
-}
-$: editor !== undefined && setCopilotModuleEditor();
-$: stepPropPicker =
-    $executionCount != undefined && failureModule
-        ? getFailureStepPropPicker($flowStateStore, $flowStore, $previewArgs)
-        : getStepPropPicker($flowStateStore, parentModule, previousModule, flowModule.id, $flowStore, $previewArgs, false);
 function onKeyDown(event) {
     if ((event.ctrlKey || event.metaKey) && event.key == 'Enter') {
         event.preventDefault();
@@ -110,8 +87,8 @@ function onKeyDown(event) {
         modulePreview?.runTestWithStepArgs();
     }
 }
-let inputTransformSchemaForm = undefined;
-let reloadError = undefined;
+let inputTransformSchemaForm = $state(undefined);
+let reloadError = $state(undefined);
 async function reload(flowModule) {
     reloadError = undefined;
     try {
@@ -119,11 +96,6 @@ async function reload(flowModule) {
         validCode = true;
         if (inputTransformSchemaForm) {
             inputTransformSchemaForm.setArgs(input_transforms);
-            if (!deepEqual(schema, $flowStateStore[flowModule.id]?.schema)) {
-                $flowInputsStore[flowModule?.id] = {
-                    flowStepWarnings: await initFlowStepWarnings(flowModule.value, schema ?? {}, dfs($flowStore.value.modules, (fm) => fm.id))
-                };
-            }
         }
         else {
             if (flowModule.value.type == 'rawscript' ||
@@ -158,28 +130,15 @@ function selectAdvanced(subtab) {
     selected = 'advanced';
     advancedSelected = subtab;
 }
-let forceReload = 0;
-let editorPanelSize = noEditor ? 0 : flowModule.value.type == 'script' ? 30 : 50;
-let editorSettingsPanelSize = 100 - editorPanelSize;
-$: $selectedId && onSelectedIdChange();
+let forceReload = $state(0);
+let editorPanelSize = $state(noEditor ? 0 : flowModule.value.type == 'script' ? 30 : 50);
+let editorSettingsPanelSize = $state(100 - untrack(() => editorPanelSize));
+let stepHistoryLoader = getStepHistoryLoaderContext();
 function onSelectedIdChange() {
     if (!$flowStateStore?.[$selectedId]?.schema && flowModule) {
         reload(flowModule);
     }
 }
-let debouncedWarning = debounce((argName) => {
-    if ($flowInputsStore) {
-        computeFlowStepWarning(argName, flowModule.value, $flowInputsStore[flowModule.id].flowStepWarnings ?? {}, $flowStateStore[$selectedId]?.schema, dfs($flowStore?.value?.modules ?? [], (fm) => fm.id) ?? []).then((flowStepWarnings) => {
-            $flowInputsStore[flowModule.id].flowStepWarnings = flowStepWarnings;
-        });
-    }
-}, 100);
-function setFlowInput(argName) {
-    if ($flowInputsStore && flowModule.id && $flowInputsStore?.[flowModule.id] === undefined) {
-        $flowInputsStore[flowModule.id] = {};
-    }
-    debouncedWarning(argName);
-}
 async function getLastJob() {
     if (!$flowStateStore ||
         !flowModule.id ||
@@ -196,18 +155,7 @@ async function getLastJob() {
         lastJob = job;
     }
 }
-$: if ($workspaceStore && $pathStore && flowModule?.id && $flowStateStore) {
-    getLastJob();
-}
-$: parentLoop =
-    $flowStore && flowModule ? checkIfParentLoop($flowStore, flowModule.id) : undefined;
-let leftPanelSize = 0;
-$: if (selected === 'test') {
-    leftPanelSize = 50;
-}
-else {
-    leftPanelSize = 100;
-}
+let leftPanelSize = $state(0);
 function showDiffMode() {
     diffMode = true;
     diffEditor?.setOriginal((savedModule?.value).content ?? '');
@@ -220,9 +168,58 @@ function hideDiffMode() {
     diffEditor?.hide();
     editor?.show();
 }
+let lastDeployedCode = $derived(onModulesChange(savedModule, flowModule));
+let stepPropPicker = $derived($executionCount != undefined && failureModule
+    ? getFailureStepPropPicker($flowStateStore, flowStore.val, previewArgs.val)
+    : getStepPropPicker($flowStateStore, parentModule, previousModule, flowModule.id, flowStore.val, previewArgs.val, false));
+$effect(() => {
+    $selectedId && untrack(() => onSelectedIdChange());
+});
+$effect(() => {
+    if ($workspaceStore && $pathStore && flowModule?.id && $flowStateStore) {
+        untrack(() => getLastJob());
+    }
+});
+let parentLoop = $derived(flowStore.val && flowModule ? checkIfParentLoop(flowStore.val, flowModule.id) : undefined);
+$effect(() => {
+    if (selected === 'test') {
+        leftPanelSize = 50;
+    }
+    else {
+        leftPanelSize = 100;
+    }
+});
+$effect(() => {
+    editor &&
+        ($currentEditor = {
+            type: 'script',
+            editor,
+            stepId: flowModule.id,
+            showDiffMode,
+            hideDiffMode,
+            diffMode,
+            lastDeployedCode
+        });
+});
+onDestroy(() => {
+    $currentEditor = undefined;
+});
+// Handle force test tab prop with animation
+$effect(() => {
+    if (forceTestTab) {
+        selected = 'test';
+        // Add a smooth transition to the test tab
+        setTimeout(() => {
+            const testTab = document.querySelector('[value="test"]');
+            if (testTab) {
+                testTab.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+            }
+        }, 100);
+    }
+});
 </script>
 
-<svelte:window on:keydown={onKeyDown} />
+<svelte:window onkeydown={onKeyDown} />
 
 {#if flowModule.value}
 	<div class="h-full" bind:clientWidth={width}>
@@ -240,7 +237,7 @@ function hideDiffMode() {
 			}}
 			bind:summary={flowModule.summary}
 		>
-			<svelte:fragment slot="header">
+			{#snippet header()}
 				<FlowModuleHeader
 					{tag}
 					module={flowModule}
@@ -292,7 +289,7 @@ function hideDiffMode() {
 						$flowStateStore[module.id] = state
 					}}
 				/>
-			</svelte:fragment>
+			{/snippet}
 
 			<div class="h-full flex flex-col">
 				{#if flowModule.value.type === 'rawscript' && !noEditor}
@@ -315,6 +312,7 @@ function hideDiffMode() {
 							on:hideDiffMode={hideDiffMode}
 							{lastDeployedCode}
 							{diffMode}
+							openAiChat
 						/>
 					</div>
 				{/if}
@@ -326,6 +324,13 @@ function hideDiffMode() {
 								{#if !noEditor}
 									{#key flowModule.id}
 										<Editor
+											on:addSelectedLinesToAiChat={(e) => {
+												const { lines, startLine, endLine } = e.detail
+												aiChatManager.addSelectedLinesToContext(lines, startLine, endLine)
+											}}
+											on:toggleAiPanel={() => {
+												aiChatManager.toggleOpen()
+											}}
 											loadAsync
 											folding
 											path={$pathStore + '/' + flowModule.id}
@@ -333,13 +338,13 @@ function hideDiffMode() {
 											bind:this={editor}
 											class="h-full relative"
 											code={flowModule.value.content}
-											lang={scriptLangToEditorLang(flowModule.value.language)}
-											scriptLang={flowModule.value.language}
+											lang={scriptLangToEditorLang(flowModule?.value?.language)}
+											scriptLang={flowModule?.value?.language}
 											automaticLayout={true}
 											cmdEnterAction={async () => {
 												selected = 'test'
 												if ($selectedId == flowModule.id) {
-													if (flowModule.value.type === 'rawscript') {
+													if (flowModule.value.type === 'rawscript' && editor) {
 														flowModule.value.content = editor.getCode()
 													}
 													await reload(flowModule)
@@ -367,6 +372,7 @@ function hideDiffMode() {
 												},
 												{}
 											)}
+											key={`flow-inline-${$workspaceStore}-${$pathStore}-${flowModule.id}`}
 										/>
 										<DiffEditor
 											open={false}
@@ -433,13 +439,23 @@ function hideDiffMode() {
 														pickableProperties={stepPropPicker.pickableProperties}
 														schema={$flowStateStore[$selectedId]?.schema ?? {}}
 														previousModuleId={previousModule?.id}
-														bind:args={flowModule.value.input_transforms}
+														bind:args={
+															() => {
+																// @ts-ignore
+																return flowModule?.value?.input_transforms
+															},
+															(v) => {
+																if (
+																	typeof flowModule?.value === 'object' &&
+																	flowModule?.value !== null
+																) {
+																	// @ts-ignore
+																	flowModule.value.input_transforms = v
+																}
+															}
+														}
 														extraLib={stepPropPicker.extraLib}
 														{enableAi}
-														on:changeArg={(e) => {
-															const { argName } = e.detail
-															setFlowInput(argName)
-														}}
 													/>
 												</PropPickerWrapper>
 											</div>
@@ -453,6 +469,7 @@ function hideDiffMode() {
 												bind:testJob
 												bind:testIsLoading
 												bind:scriptProgress
+												focusArg={highlightArg}
 											/>
 										{:else if selected === 'advanced'}
 											<Tabs bind:selected={advancedSelected}>
@@ -489,14 +506,14 @@ function hideDiffMode() {
 											<div class="h-[calc(100%-32px)] overflow-auto p-4">
 												{#if advancedSelected === 'retries'}
 													<Section label="Retries">
-														<svelte:fragment slot="header">
+														{#snippet header()}
 															<Tooltip
 																documentationLink="https://www.windmill.dev/docs/flows/retries"
 															>
 																If defined, upon error this step will be retried with a delay and a
 																maximum number of attempts as defined below.
 															</Tooltip>
-														</svelte:fragment>
+														{/snippet}
 														<span class="text-2xs"
 															>After all retries attempts have been exhausted:</span
 														>
@@ -520,9 +537,9 @@ function hideDiffMode() {
 													</Section>
 												{:else if advancedSelected === 'runtime' && advancedRuntimeSelected === 'concurrency'}
 													<Section label="Concurrency limits" class="flex flex-col gap-4" eeOnly>
-														<svelte:fragment slot="header">
+														{#snippet header()}
 															<Tooltip>Allowed concurrency within a given timeframe</Tooltip>
-														</svelte:fragment>
+														{/snippet}
 														{#if flowModule.value.type == 'rawscript'}
 															<Label label="Max number of executions within the time window">
 																<div class="flex flex-row gap-2 max-w-sm">
@@ -552,14 +569,14 @@ function hideDiffMode() {
 																/>
 															</Label>
 															<Label label="Custom concurrency key (optional)">
-																<svelte:fragment slot="header">
+																{#snippet header()}
 																	<Tooltip>
 																		Concurrency keys are global, you can have them be workspace
 																		specific using the variable `$workspace`. You can also use an
 																		argument's value using `$args[name_of_arg]`</Tooltip
 																	>
-																</svelte:fragment>
-																<!-- svelte-ignore a11y-autofocus -->
+																{/snippet}
+																<!-- svelte-ignore a11y_autofocus -->
 																<input
 																	type="text"
 																	autofocus
@@ -603,16 +620,16 @@ function hideDiffMode() {
 															}}
 														/>
 														<Label label="Priority number">
-															<svelte:fragment slot="header">
+															{#snippet header()}
 																<Tooltip>The higher the number, the higher the priority.</Tooltip>
-															</svelte:fragment>
+															{/snippet}
 															<input
 																type="number"
 																class="!w-24"
 																disabled={flowModule.priority === undefined}
 																bind:value={flowModule.priority}
-																on:focus
-																on:change={() => {
+																onfocus={bubble('focus')}
+																onchange={() => {
 																	if (flowModule.priority && flowModule.priority > 100) {
 																		flowModule.priority = 100
 																	} else if (flowModule.priority && flowModule.priority < 0) {
@@ -687,26 +704,33 @@ function hideDiffMode() {
 													</div>
 													<div class="flex gap-2 justify-between mb-4 items-center">
 														<div class="flex gap-2">
-															<ToggleButtonGroup bind:selected={s3Kind} class="w-auto" let:item>
-																{#if flowModule.value['language'] === 'deno'}
-																	<ToggleButton
-																		value="s3_client"
-																		size="sm"
-																		label="S3 lite client"
-																		{item}
-																	/>
-																{:else}
-																	<ToggleButton value="s3_client" size="sm" label="Boto3" {item} />
-																	<ToggleButton value="polars" size="sm" label="Polars" {item} />
-																	<ToggleButton value="duckdb" size="sm" label="DuckDB" {item} />
-																{/if}
+															<ToggleButtonGroup bind:selected={s3Kind} class="w-auto">
+																{#snippet children({ item })}
+																	{#if flowModule.value['language'] === 'deno'}
+																		<ToggleButton
+																			value="s3_client"
+																			size="sm"
+																			label="S3 lite client"
+																			{item}
+																		/>
+																	{:else}
+																		<ToggleButton
+																			value="s3_client"
+																			size="sm"
+																			label="Boto3"
+																			{item}
+																		/>
+																		<ToggleButton value="polars" size="sm" label="Polars" {item} />
+																		<ToggleButton value="duckdb" size="sm" label="DuckDB" {item} />
+																	{/if}
+																{/snippet}
 															</ToggleButtonGroup>
 														</div>
 
 														<Button
 															size="xs"
 															on:click={() =>
-																editor.setCode(s3Scripts[flowModule.value['language']][s3Kind])}
+																editor?.setCode(s3Scripts[flowModule.value['language']][s3Kind])}
 														>
 															Apply snippet
 														</Button>
@@ -721,7 +745,23 @@ function hideDiffMode() {
 									</div>
 								</Pane>
 								{#if selected === 'test'}
-									<Pane minSize={20}>
+									<Pane minSize={20} class="relative">
+										{#if stepHistoryLoader?.stepStates[flowModule.id]?.initial && !flowModule.mock?.enabled}
+											<!-- svelte-ignore a11y_no_static_element_interactions -->
+											<!-- svelte-ignore a11y_click_events_have_key_events -->
+											<div
+												onclick={() => {
+													stepHistoryLoader?.resetInitial(flowModule.id)
+												}}
+												class="cursor-pointer h-full hover:bg-gray-500/20 dark:hover:bg-gray-500/20 dark:bg-gray-500/80 bg-gray-500/40 absolute top-0 left-0 w-full z-50"
+											>
+												<div class="text-center text-primary text-sm py-2 pt-20"
+													><span class="font-bold border p-2 bg-surface-secondary rounded-md"
+														>Run loaded from history</span
+													></div
+												>
+											</div>
+										{/if}
 										<ModulePreviewResultViewer
 											lang={flowModule.value['language'] ?? 'deno'}
 											{editor}
@@ -729,6 +769,11 @@ function hideDiffMode() {
 											loopStatus={parentLoop
 												? { type: 'inside', flow: parentLoop.type }
 												: undefined}
+											onUpdateMock={(detail) => {
+												flowModule.mock = detail
+												flowModule = flowModule
+												refreshStateStore(flowStore)
+											}}
 											{lastJob}
 											{scriptProgress}
 											{testJob}
@@ -736,6 +781,7 @@ function hideDiffMode() {
 											{testIsLoading}
 											disableMock={preprocessorModule || failureModule}
 											disableHistory={failureModule}
+											loadingHistory={stepHistoryLoader?.stepStates[flowModule.id]?.loadingJobs}
 										/>
 									</Pane>
 								{/if}

package/package/components/flows/content/FlowModuleComponent.svelte.d.ts

@@ -1,32 +1,18 @@
 import type { FlowModule } from '../../../gen';
-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;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const FlowModuleComponent: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     flowModule: FlowModule;
     failureModule?: boolean;
     preprocessorModule?: boolean;
     parentModule?: FlowModule | undefined;
     previousModule: FlowModule | undefined;
-    scriptKind?: "script" | "trigger" | "approval";
-    scriptTemplate?: "pgsql" | "mysql" | "script" | "docker" | "powershell";
+    scriptKind?: 'script' | 'trigger' | 'approval';
+    scriptTemplate?: 'pgsql' | 'mysql' | 'script' | 'docker' | 'powershell';
     noEditor: boolean;
     enableAi: boolean;
     savedModule?: FlowModule | undefined;
-}, {
-    focus: FocusEvent;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type FlowModuleComponent = InstanceType<typeof FlowModuleComponent>;
+    forceTestTab?: boolean;
+    highlightArg?: string;
+}
+declare const FlowModuleComponent: import("svelte").Component<Props, {}, "flowModule" | "parentModule">;
+type FlowModuleComponent = ReturnType<typeof FlowModuleComponent>;
 export default FlowModuleComponent;

package/package/components/flows/content/FlowModuleEarlyStop.svelte

@@ -8,11 +8,11 @@ import Section from '../../Section.svelte';
 import { getStepPropPicker } from '../previousResults';
 import { dfs } from '../previousResults';
 const { flowStateStore, flowStore, previewArgs } = getContext('FlowEditorContext');
-export let flowModule;
-let editor = undefined;
-$: stepPropPicker = getStepPropPicker($flowStateStore, undefined, undefined, flowModule.id, $flowStore, $previewArgs, false);
-function checkIfParentLoop(flowStore) {
-    const flow = JSON.parse(JSON.stringify(flowStore));
+let { flowModule = $bindable() } = $props();
+let editor = $state(undefined);
+let stepPropPicker = $derived(getStepPropPicker($flowStateStore, undefined, undefined, flowModule.id, flowStore.val, previewArgs.val, false));
+function checkIfParentLoop(flowStoreValue) {
+    const flow = JSON.parse(JSON.stringify(flowStoreValue));
     const parents = dfs(flowModule.id, flow, true);
     for (const parent of parents.slice(1)) {
         if (parent.value.type === 'forloopflow' || parent.value.type === 'whileloopflow') {
@@ -21,17 +21,17 @@ function checkIfParentLoop(flowStore) {
     }
     return null;
 }
-let raise_error_message_stop_after_all_if = flowModule.stop_after_all_iters_if?.error_message !== undefined;
-let raise_error_message_stop_after_if = flowModule.stop_after_if?.error_message !== undefined;
-$: isLoop = flowModule.value.type === 'forloopflow' || flowModule.value.type === 'whileloopflow';
-$: isBranchAll = flowModule.value.type === 'branchall';
-$: isStopAfterIfEnabled = Boolean(flowModule.stop_after_if);
-$: isStopAfterAllIterationsEnabled = Boolean(flowModule.stop_after_all_iters_if);
-$: result = $flowStateStore[flowModule.id]?.previewResult ?? NEVER_TESTED_THIS_FAR;
-$: parentLoopId = checkIfParentLoop($flowStore);
+let raise_error_message_stop_after_all_if = $state(flowModule.stop_after_all_iters_if?.error_message !== undefined);
+let raise_error_message_stop_after_if = $state(flowModule.stop_after_if?.error_message !== undefined);
+let isLoop = $derived(flowModule.value.type === 'forloopflow' || flowModule.value.type === 'whileloopflow');
+let isBranchAll = $derived(flowModule.value.type === 'branchall');
+let isStopAfterIfEnabled = $derived(Boolean(flowModule.stop_after_if));
+let isStopAfterAllIterationsEnabled = $derived(Boolean(flowModule.stop_after_all_iters_if));
+let result = $derived($flowStateStore[flowModule.id]?.previewResult ?? NEVER_TESTED_THIS_FAR);
+let parentLoopId = $derived(checkIfParentLoop(flowStore.val));
 </script>
 
-<div class="flex flex-col items-start space-y-2 {$$props.class}">
+<div class="flex flex-col items-start space-y-2">
 	{#if !isBranchAll}
 		<Section
 			label={(isLoop
@@ -41,12 +41,12 @@ $: parentLoopId = checkIfParentLoop($flowStore);
 					: 'Stop flow early') + (isLoop ? ' (evaluated after each iteration)' : '')}
 			class="w-full"
 		>
-			<svelte:fragment slot="header">
+			{#snippet header()}
 				<Tooltip documentationLink="https://www.windmill.dev/docs/flows/early_stop">
 					If defined, at the end of the step, the predicate expression will be evaluated to decide
 					if the flow should stop early or break if inside a for/while loop.
 				</Tooltip>
-			</svelte:fragment>
+			{/snippet}
 
 			<Toggle
 				checked={isStopAfterIfEnabled}
@@ -171,12 +171,12 @@ $: parentLoopId = checkIfParentLoop($flowStore);
 					: ' (evaluated after all iterations)')}
 			class="w-full"
 		>
-			<svelte:fragment slot="header">
+			{#snippet header()}
 				<Tooltip documentationLink="https://www.windmill.dev/docs/flows/early_stop">
 					If defined, at the end of the step, the predicate expression will be evaluated to decide
 					if the flow should stop early or break if inside a for/while loop.
 				</Tooltip>
-			</svelte:fragment>
+			{/snippet}
 
 			<Toggle
 				checked={isStopAfterAllIterationsEnabled}
@@ -216,7 +216,8 @@ $: parentLoopId = checkIfParentLoop($flowStore);
 								bind:checked={raise_error_message_stop_after_all_if}
 								on:change={(event) => {
 									if (flowModule.stop_after_all_iters_if) {
-										flowModule.stop_after_all_iters_if.error_message = event.detail === false ? undefined : ''
+										flowModule.stop_after_all_iters_if.error_message =
+											event.detail === false ? undefined : ''
 									}
 								}}
 								options={{

package/package/components/flows/content/FlowModuleEarlyStop.svelte.d.ts

@@ -1,22 +1,7 @@
 import type { FlowModule } from '../../../gen';
-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;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const FlowModuleEarlyStop: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: any;
+interface Props {
     flowModule: FlowModule;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type FlowModuleEarlyStop = InstanceType<typeof FlowModuleEarlyStop>;
+}
+declare const FlowModuleEarlyStop: import("svelte").Component<Props, {}, "flowModule">;
+type FlowModuleEarlyStop = ReturnType<typeof FlowModuleEarlyStop>;
 export default FlowModuleEarlyStop;