windmill-components 1.394.8 → 1.405.5

package/package/components/flows/content/FlowModuleWrapper.svelte

@@ -53,11 +53,11 @@ async function createModuleFromScript(path, summary, kind, hash) {
 	{#if flowModule.value.type === 'forloopflow'}
 		<FlowLoop {noEditor} bind:mod={flowModule} {parentModule} {previousModule} {enableAi} />
 	{:else if flowModule.value.type === 'whileloopflow'}
-		<FlowWhileLoop {noEditor} bind:mod={flowModule} {previousModule} />
+		<FlowWhileLoop {noEditor} bind:mod={flowModule} {previousModule} {parentModule} />
 	{:else if flowModule.value.type === 'branchone'}
-		<FlowBranchesOneWrapper {noEditor} {previousModule} bind:flowModule {enableAi} />
+		<FlowBranchesOneWrapper {noEditor} {previousModule} {parentModule} bind:flowModule {enableAi} />
 	{:else if flowModule.value.type === 'branchall'}
-		<FlowBranchesAllWrapper {noEditor} {previousModule} bind:flowModule />
+		<FlowBranchesAllWrapper {noEditor} {previousModule} {parentModule} bind:flowModule />
 	{:else if flowModule.value.type === 'identity'}
 		{#if $selectedId == 'failure'}
 			<div class="p-4">
@@ -65,6 +65,16 @@ async function createModuleFromScript(path, summary, kind, hash) {
 					If defined, the error handler will take the error as input.
 				</Alert>
 			</div>
+		{:else if $selectedId == 'preprocessor'}
+			<div class="p-4">
+				<Alert
+					type="info"
+					title="Preprocessor is called when the flow is triggered by API or email"
+				>
+					It prepares arguments for the flow. Besides request arguments, the preprocessor receives a
+					`wm_trigger` argument with trigger details.
+				</Alert>
+			</div>
 		{/if}
 
 		{#if flowModule.value.flow}
@@ -83,7 +93,8 @@ async function createModuleFromScript(path, summary, kind, hash) {
 				summary={flowModule.summary}
 				shouldDisableTriggerScripts={parentModule !== undefined ||
 					previousModule !== undefined ||
-					$selectedId == 'failure'}
+					$selectedId == 'failure' ||
+					$selectedId == 'preprocessor'}
 				on:pick={async ({ detail }) => {
 					const { path, summary, kind, hash } = detail
 					createModuleFromScript(path, summary, kind, hash)
@@ -131,6 +142,7 @@ async function createModuleFromScript(path, summary, kind, hash) {
 					}
 				}}
 				failureModule={$selectedId === 'failure'}
+				preprocessorModule={$selectedId === 'preprocessor'}
 			/>
 		{/if}
 	{:else if flowModule.value.type === 'rawscript' || flowModule.value.type === 'script' || flowModule.value.type === 'flow'}
@@ -140,6 +152,7 @@ async function createModuleFromScript(path, summary, kind, hash) {
 			{parentModule}
 			{previousModule}
 			failureModule={$selectedId === 'failure'}
+			preprocessorModule={$selectedId === 'preprocessor'}
 			{scriptKind}
 			{scriptTemplate}
 			{enableAi}

package/package/components/flows/content/FlowPreprocessorModule.svelte

@@ -0,0 +1,16 @@
+<script>import { getContext } from 'svelte';
+import FlowModuleWrapper from './FlowModuleWrapper.svelte';
+export let noEditor = false;
+const { flowStore } = getContext('FlowEditorContext');
+</script>
+
+{#if $flowStore.value.preprocessor_module}
+	<FlowModuleWrapper
+		{noEditor}
+		bind:flowModule={$flowStore.value.preprocessor_module}
+		on:delete={() => {
+			$flowStore.value.preprocessor_module = undefined
+		}}
+		previousModule={undefined}
+	/>
+{/if}

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

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        noEditor?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FlowPreprocessorModuleProps = typeof __propDef.props;
+export type FlowPreprocessorModuleEvents = typeof __propDef.events;
+export type FlowPreprocessorModuleSlots = typeof __propDef.slots;
+export default class FlowPreprocessorModule extends SvelteComponent<FlowPreprocessorModuleProps, FlowPreprocessorModuleEvents, FlowPreprocessorModuleSlots> {
+}
+export {};

package/package/components/flows/content/FlowWhileLoop.svelte

@@ -13,9 +13,11 @@ import FlowModuleMock from './FlowModuleMock.svelte';
 import { Play } from 'lucide-svelte';
 import FlowLoopIterationPreview from '../../FlowLoopIterationPreview.svelte';
 import FlowModuleDeleteAfterUse from './FlowModuleDeleteAfterUse.svelte';
+import FlowModuleSkip from './FlowModuleSkip.svelte';
 const { flowStateStore } = getContext('FlowEditorContext');
 export let mod;
 export let previousModule;
+export let parentModule;
 export let noEditor;
 let selected = 'early-stop';
 let previewOpen = false;
@@ -96,6 +98,7 @@ $: previewIterationArgs = $flowStateStore[mod.id]?.previewArgs ?? {};
 				<Tabs bind:selected>
 					<!-- <Tab value="retries">Retries</Tab> -->
 					<Tab value="early-stop">Early Stop/Break</Tab>
+					<Tab value="skip">Skip</Tab>
 					<Tab value="suspend">Suspend/Approval/Prompt</Tab>
 					<Tab value="sleep">Sleep</Tab>
 					<Tab value="mock">Mock</Tab>
@@ -115,6 +118,12 @@ $: previewIterationArgs = $flowStateStore[mod.id]?.previewArgs ?? {};
 								</div>
 							</TabContent>
 
+							<TabContent value="skip" class="flex flex-col flex-1 h-full">
+								<div class="p-4 overflow-y-auto">
+									<FlowModuleSkip bind:flowModule={mod} {parentModule} {previousModule} />
+								</div>
+							</TabContent>
+
 							<TabContent value="suspend" class="flex flex-col flex-1 h-full">
 								<div class="p-4 overflow-y-auto">
 									<FlowModuleSuspend previousModuleId={previousModule?.id} bind:flowModule={mod} />

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

@@ -4,6 +4,7 @@ declare const __propDef: {
     props: {
         mod: FlowModule;
         previousModule: FlowModule | undefined;
+        parentModule: FlowModule | undefined;
         noEditor: boolean;
     };
     events: {

package/package/components/flows/content/GenAiQuick.svelte

@@ -0,0 +1,30 @@
+<script>import { Wand2 } from 'lucide-svelte';
+import { createEventDispatcher } from 'svelte';
+export let funcDesc;
+export let selected;
+export let lang;
+const dispatch = createEventDispatcher();
+const onKeyDown = (e) => {
+    if (selected && e.key === 'Enter') {
+        e.preventDefault();
+        dispatch('click');
+    }
+};
+</script>
+
+<svelte:window on:keydown={onKeyDown} />
+<button
+	class="px-3 py-2 gap-2 w-full text-left hover:bg-surface-hover flex flex-row items-center transition-all rounded-md {selected
+		? 'bg-surface-hover'
+		: ''}"
+	on:click
+>
+	<Wand2 size={14} class="text-violet-800 dark:text-violet-400" />
+
+	<span class="grow truncate text-left text-2xs text-primary font-normal">
+		Generate "{funcDesc}" in {lang}
+	</span>
+	{#if selected}
+		<kbd class="!text-xs">&crarr;</kbd>
+	{/if}
+</button>

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

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        funcDesc: string;
+        selected: boolean;
+        lang: string;
+    };
+    events: {
+        click: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type GenAiQuickProps = typeof __propDef.props;
+export type GenAiQuickEvents = typeof __propDef.events;
+export type GenAiQuickSlots = typeof __propDef.slots;
+export default class GenAiQuick extends SvelteComponent<GenAiQuickProps, GenAiQuickEvents, GenAiQuickSlots> {
+}
+export {};

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

@@ -29,8 +29,9 @@ async function saveScript() {
         try {
             script.schema = script.schema ?? emptySchema();
             try {
-                const noMainFunc = await inferArgs(script.language, script.content, script.schema);
-                script.no_main_func = noMainFunc || undefined;
+                const result = await inferArgs(script.language, script.content, script.schema);
+                script.no_main_func = result?.no_main_func || undefined;
+                script.has_preprocessor = result?.has_preprocessor || undefined;
             }
             catch (error) {
                 sendUserToast(`Could not parse code, are you sure it is valid?`, true);

package/package/components/flows/flowInfers.js

@@ -7,7 +7,7 @@ export async function loadSchemaFromModule(module) {
         let schema;
         if (mod.type === 'rawscript') {
             schema = emptySchema();
-            await inferArgs(mod.language, mod.content ?? '', schema);
+            await inferArgs(mod.language, mod.content ?? '', schema, module.id === 'preprocessor' ? 'preprocessor' : undefined);
         }
         else if (mod.type == 'script' && mod.path && mod.path != '') {
             schema = await loadSchemaFromPath(mod.path, mod.hash);

package/package/components/flows/header/FlowPreviewButtons.svelte

@@ -35,6 +35,7 @@ $: upToDisabled =
             'inputs',
             'schedules',
             'failure',
+            'preprocessor',
             'constants',
             'Result',
             'Input'

package/package/components/flows/idUtils.js

@@ -10,7 +10,9 @@ export const forbiddenIds = [
     'delete',
     'while',
     'new',
-    'in'
+    'in',
+    'failure',
+    'preprocessor'
 ];
 export function numberToChars(n) {
     if (n < 0) {

package/package/components/flows/map/FlowCopilotButton.svelte

@@ -0,0 +1,55 @@
+<script>import Menu from '../../common/menu/Menu.svelte';
+import Popover from '../../Popover.svelte';
+import { getContext } from 'svelte';
+import { copilotInfo } from '../../../stores';
+import { ExternalLink, Wand2 } from 'lucide-svelte';
+import { base } from '../../../base';
+import { twMerge } from 'tailwind-merge';
+let openNoCopilot = false;
+export let className = '';
+const { drawerStore: copilotDrawerStore } = getContext('FlowCopilotContext') || {};
+</script>
+
+<div class={twMerge('absolute left-1/2 transform -translate-x-1/2 z-10', className)}>
+	<Popover>
+		<div class={openNoCopilot ? 'z-10' : ''}>
+			<Menu pointerDown noMinW placement="bottom-center" let:close bind:show={openNoCopilot}>
+				<button
+					title="AI Flow Builder"
+					on:pointerdown={$copilotInfo.exists_openai_resource_path
+						? (ev) => {
+								ev.preventDefault()
+								ev.stopPropagation()
+								$copilotDrawerStore?.openDrawer()
+						  }
+						: undefined}
+					slot="trigger"
+					type="button"
+					class=" bg-surface text-violet-800 dark:text-violet-400 border mx-0.5 focus:outline-none hover:bg-surface-hover focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-7 h-7 flex items-center justify-center"
+				>
+					<Wand2 size={12} />
+				</button>
+				{#if !$copilotInfo.exists_openai_resource_path}
+					<div class="text-primary p-4">
+						<p class="text-sm w-80">
+							Enable Windmill AI in the
+							<a
+								href="{base}/workspace_settings?tab=openai"
+								target="_blank"
+								class="inline-flex flex-row items-center gap-1"
+								on:click={() => {
+									close()
+								}}
+							>
+								workspace settings
+								<ExternalLink size={16} />
+							</a>
+						</p>
+					</div>
+				{/if}
+			</Menu>
+		</div>
+
+		<svelte:fragment slot="text">AI Flow builder</svelte:fragment>
+	</Popover>
+</div>

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

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        className?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FlowCopilotButtonProps = typeof __propDef.props;
+export type FlowCopilotButtonEvents = typeof __propDef.events;
+export type FlowCopilotButtonSlots = typeof __propDef.slots;
+export default class FlowCopilotButton extends SvelteComponent<FlowCopilotButtonProps, FlowCopilotButtonEvents, FlowCopilotButtonSlots> {
+}
+export {};

package/package/components/flows/map/FlowErrorHandlerItem.svelte

@@ -1,75 +1,105 @@
 <script>import { getContext } from 'svelte';
 import { classNames, emptySchema } from '../../../utils';
-import Toggle from '../../Toggle.svelte';
 import { NEVER_TESTED_THIS_FAR } from '../models';
 import { fade } from 'svelte/transition';
-import { Bug } from 'lucide-svelte';
+import { Bug, X } from 'lucide-svelte';
+import InsertModuleButton from './InsertModuleButton.svelte';
+import { createInlineScriptModule, pickScript } from '../flowStateUtils';
+import { twMerge } from 'tailwind-merge';
 export let small;
 const { selectedId, flowStateStore, flowStore } = getContext('FlowEditorContext');
-function onToggle() {
-    if ($flowStore?.value?.failure_module) {
-        $flowStore.value.failure_module = undefined;
-        // By default, we return to settings when disabling the failure module
-        $selectedId = 'settings-metadata';
+async function insertNewFailureModule(inlineScript, wsScript) {
+    var module = {
+        id: 'failure',
+        value: { type: 'identity' }
+    };
+    var state = {
+        schema: emptySchema(),
+        previewResult: NEVER_TESTED_THIS_FAR
+    };
+    if (inlineScript) {
+        ;
+        [module, state] = await createInlineScriptModule(inlineScript.language, 'failure', inlineScript.subkind, 'failure');
     }
-    else {
-        const failureModule = {
-            schema: emptySchema(),
-            previewResult: NEVER_TESTED_THIS_FAR
-        };
-        $flowStore.value.failure_module = {
-            id: 'failure',
-            value: { type: 'identity' }
-        };
-        $flowStateStore['failure'] = failureModule;
-        $selectedId = 'failure';
-        $flowStore = $flowStore;
+    else if (wsScript) {
+        ;
+        [module, state] = await pickScript(wsScript.path, wsScript.summary, module.id, wsScript.hash);
     }
+    $flowStore.value.failure_module = module;
+    $flowStateStore[module.id] = state;
+    $selectedId = 'failure';
+    $flowStore = $flowStore;
 }
 const { currentStepStore: copilotCurrentStepStore } = getContext('FlowCopilotContext') || {};
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
+
 <div
+	class={classNames(
+		'z-10',
+		$copilotCurrentStepStore !== undefined ? 'border-gray-500/75' : 'cursor-pointer',
+		'border transition-colors duration-[400ms] ease-linear rounded-sm px-2 py-1 gap-2 bg-surface text-sm flex items-center flex-row',
+		$selectedId?.includes('failure')
+			? 'outline outline-offset-1 outline-2 outline-slate-900 dark:outline-slate-900/0 dark:bg-surface-secondary dark:border-gray-400'
+			: ''
+	)}
+	style="min-width: {small ? '200px' : '230px'}; max-width: 275px;"
 	on:click={() => {
 		if ($copilotCurrentStepStore !== undefined) return
 		if ($flowStore?.value?.failure_module) {
 			$selectedId = 'failure'
-		} else {
-			onToggle()
 		}
 	}}
-	class={classNames(
-		'z-10',
-		$copilotCurrentStepStore !== undefined ? 'border-gray-500/75' : 'cursor-pointer',
-		'border transition-colors duration-[400ms] ease-linear rounded-sm px-2 py-1 bg-surface text-sm flex justify-between items-center flex-row overflow-x-hidden relative',
-		$selectedId?.includes('failure') ? 'outline outline-offset-1 outline-2 outline-slate-900 dark:outline-slate-900/0 dark:bg-surface-secondary dark:border-gray-400' : ''
-	)}
-	style={small ? 'min-width: 200px' : 'min-width: 275px'}
 >
 	{#if $copilotCurrentStepStore !== undefined}
 		<div transition:fade class="absolute inset-0 bg-gray-500 bg-opacity-75 z-[900]" />
 	{/if}
-	<div class=" flex justify-between items-center flex-wrap gap-2">
-		<Bug size={16} />
-		<span class="font-bold text-xs">Error Handler</span>
+	<div class="flex items-center grow-0 min-w-0 gap-2">
+		<Bug size={16} color={$flowStore?.value?.failure_module ? '#3b82f6' : '#9CA3AF'} />
 	</div>
 
-	<div class=" items-center truncate flex text-xs">
-		{#if Boolean($flowStore?.value?.failure_module)}
-			<span>
-				{$flowStore.value.failure_module?.summary ||
-					($flowStore.value.failure_module?.value.type === 'rawscript'
-						? `${$flowStore.value.failure_module?.value.language}`
-						: 'TBD')}
-			</span>
-		{/if}
-	</div>
-	<Toggle
-		size={small ? 'xs' : 'sm'}
-		checked={Boolean($flowStore?.value?.failure_module)}
-		on:change={onToggle}
-		id="error-handler-toggle"
-	/>
+	{#if !$flowStore?.value?.failure_module}
+		<div class="grow text-center font-bold text-xs">Error Handler</div>
+	{:else}
+		<div class="truncate grow min-w-0 text-center text-xs">
+			{$flowStore.value.failure_module?.summary ||
+				($flowStore.value.failure_module?.value.type === 'rawscript'
+					? `${$flowStore.value.failure_module?.value.language}`
+					: 'TBD')}
+		</div>
+	{/if}
+
+	{#if !$flowStore?.value?.failure_module}
+		<InsertModuleButton
+			disableAi={false}
+			index={0}
+			placement={'top-center'}
+			on:new={(e) => {
+				insertNewFailureModule(e.detail.inlineScript)
+			}}
+			on:pickScript={(e) => {
+				insertNewFailureModule(undefined, e.detail)
+			}}
+			kind="failure"
+		/>
+	{:else}
+		<button
+			title="Delete failure script"
+			type="button"
+			class={twMerge(
+				'w-5 h-5 flex items-center justify-center grow-0 shrink-0',
+				'outline-[1px] outline dark:outline-gray-500 outline-gray-300',
+				'text-secondary',
+				'bg-surface focus:outline-none hover:bg-surface-hover rounded '
+			)}
+			on:click={() => {
+				$flowStore.value.failure_module = undefined
+				$selectedId = 'settings-metadata'
+			}}
+		>
+			<X size={12} />
+		</button>
+	{/if}
 </div>

package/package/components/flows/map/FlowJobsMenu.svelte

@@ -20,7 +20,7 @@ function onKeydown(event) {
 }
 </script>
 
-<Menu>
+<Menu maxHeight={300}>
 	<div slot="trigger">
 		<button
 			title="Pick an iteration"

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

@@ -1,7 +1,7 @@
 <script>import Badge from '../../common/badge/Badge.svelte';
 import Popover from '../../Popover.svelte';
 import { classNames } from '../../../utils';
-import { AlertTriangle, Bed, Database, Gauge, Move, Pencil, PhoneIncoming, Repeat, Square, Voicemail, X } from 'lucide-svelte';
+import { AlertTriangle, Bed, Database, Gauge, Move, Pencil, PhoneIncoming, Repeat, Square, SkipForward, Voicemail, X } from 'lucide-svelte';
 import { createEventDispatcher, getContext } from 'svelte';
 import { fade } from 'svelte/transition';
 import { get } from 'svelte/store';
@@ -17,6 +17,7 @@ export let deletable = false;
 export let retry = false;
 export let cache = false;
 export let earlyStop = false;
+export let skip = false;
 export let suspend = false;
 export let sleep = false;
 export let mock = false;
@@ -156,6 +157,17 @@ let hover = false;
 				<svelte:fragment slot="text">Early stop/break</svelte:fragment>
 			</Popover>
 		{/if}
+		{#if skip}
+			<Popover notClickable>
+				<div
+					transition:fade|local={{ duration: 200 }}
+					class="center-center bg-surface rounded border border-gray-400 text-secondary px-1 py-0.5"
+				>
+					<SkipForward size={12} />
+				</div>
+				<svelte:fragment slot="text">Skip</svelte:fragment>
+			</Popover>
+		{/if}
 		{#if suspend}
 			<Popover notClickable>
 				<div
@@ -199,13 +211,12 @@ let hover = false;
 			<slot name="icon" />
 		{/if}
 		<div class="truncate" class:font-bold={bold}>{label}</div>
-		<div class="flex items-center relative">
-			{#if id}
+		<div class="flex items-center space-x-2 relative">
+			{#if id && id !== 'preprocessor' && !id.startsWith('failure')}
 				<Badge color="indigo">{id}</Badge>
-
 				{#if deletable}
 					<button
-						class="absolute -left-[20px] z-10 h-[20px] rounded-l rounded-t rounded-s w-[20px] trash center-center text-secondary bg-surface duration-150 hover:bg-blue-400 {editId
+						class="absolute -left-[28px] z-10 h-[20px] rounded-l rounded-t rounded-s w-[20px] trash center-center text-secondary bg-surface duration-150 hover:bg-blue-400 {editId
 							? '!bg-blue-400'
 							: ''} hover:text-white
 hover:border-blue-700 hover:!visible {hover ? '' : '!hidden'}"
@@ -228,15 +239,17 @@ hover:border-blue-700 hover:!visible {hover ? '' : '!hidden'}"
 			<X class="mx-[3px]" size={12} strokeWidth={2} />
 		</button>
 
-		<button
-			class="absolute -top-[10px] right-[60px] rounded-full h-[20px] w-[20px] trash center-center text-secondary
+		{#if id !== 'preprocessor'}
+			<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-150 hover:bg-blue-400 hover:text-white
  {hover ? '' : '!hidden'}"
-			on:click|preventDefault|stopPropagation={(event) => dispatch('move')}
-			title="Move"
-		>
-			<Move class="mx-[3px]" size={12} strokeWidth={2} />
-		</button>
+				on:click|preventDefault|stopPropagation={(event) => dispatch('move')}
+				title="Move"
+			>
+				<Move class="mx-[3px]" size={12} strokeWidth={2} />
+			</button>
+		{/if}
 
 		{#if (id && Object.values($flowInputsStore?.[id]?.flowStepWarnings || {}).length > 0) || Boolean(warningMessage)}
 			<div class="absolute -top-[10px] -left-[10px]">

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

@@ -6,6 +6,7 @@ declare const __propDef: {
         retry?: boolean | undefined;
         cache?: boolean | undefined;
         earlyStop?: boolean | undefined;
+        skip?: boolean | undefined;
         suspend?: boolean | undefined;
         sleep?: boolean | undefined;
         mock?: boolean | undefined;