windmill-components 1.642.0 → 1.655.0

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

@@ -1,22 +1,8 @@
 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 FlowPreprocessorModule: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     noEditor?: boolean;
     savedModule?: FlowModule | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type FlowPreprocessorModule = InstanceType<typeof FlowPreprocessorModule>;
+}
+declare const FlowPreprocessorModule: import("svelte").Component<Props, {}, "">;
+type FlowPreprocessorModule = ReturnType<typeof FlowPreprocessorModule>;
 export default FlowPreprocessorModule;

package/package/components/flows/content/FlowSelectionPanel.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">import FlowCard from '../common/FlowCard.svelte';
 import { Button } from '../../common';
+import DropdownV2 from '../../DropdownV2.svelte';
 import { getNoteEditorContext } from '../../graph/noteEditor.svelte';
-import { StickyNote } from 'lucide-svelte';
-let { selectionManager, noEditor } = $props();
+import { StickyNote, Move, Copy, Trash2 } from 'lucide-svelte';
+let { selectionManager, noEditor, onDeleteSelected, onDuplicateSelected, onMoveSelected, canMoveSelected = false, resolvedCount = 0 } = $props();
 const noteEditorContext = getNoteEditorContext();
 function addGroupNote() {
     if (selectionManager.selectedIds.length > 0 && noteEditorContext?.noteEditor) {
@@ -10,20 +11,43 @@ function addGroupNote() {
         noteEditorContext.noteEditor.createGroupNote(selectionManager.selectedIds);
     }
 }
+let menuItems = $derived([
+    {
+        displayName: 'Move',
+        icon: Move,
+        action: () => onMoveSelected?.(),
+        disabled: !canMoveSelected
+    },
+    {
+        displayName: 'Duplicate',
+        icon: Copy,
+        action: () => onDuplicateSelected?.()
+    },
+    {
+        displayName: `Delete (${resolvedCount})`,
+        icon: Trash2,
+        type: 'delete',
+        action: () => onDeleteSelected?.()
+    }
+]);
 </script>
 
 <FlowCard {noEditor} title="Multiple Selection">
 	{#snippet action()}
-		<Button
-			onClick={addGroupNote}
-			disabled={!noteEditorContext?.noteEditor || selectionManager.selectedIds.length === 0}
-			startIcon={{ icon: StickyNote }}
-		>
-			Create group note
-		</Button>
+		<div class="flex gap-1 items-center">
+			<Button
+				onClick={addGroupNote}
+				disabled={!noteEditorContext?.noteEditor || selectionManager.selectedIds.length === 0}
+				startIcon={{ icon: StickyNote }}
+			>
+				Create group note
+			</Button>
+			{#if resolvedCount > 0}
+				<DropdownV2 items={menuItems} />
+			{/if}
+		</div>
 	{/snippet}
 	<div class="px-4">
-		<p class="text-xs text-secondary mb-4">{selectionManager.selectedIds.length} nodes selected</p>
 		<div class="space-y-2 mb-4">
 			{#each selectionManager.selectedIds as nodeId}
 				<div class="text-sm px-2 py-1 bg-surface rounded border">

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

@@ -2,6 +2,11 @@ import type { SelectionManager } from '../../graph/selectionUtils.svelte';
 interface Props {
     selectionManager: SelectionManager;
     noEditor: boolean;
+    onDeleteSelected?: () => void;
+    onDuplicateSelected?: () => void;
+    onMoveSelected?: () => void;
+    canMoveSelected?: boolean;
+    resolvedCount?: number;
 }
 declare const FlowSelectionPanel: import("svelte").Component<Props, {}, "">;
 type FlowSelectionPanel = ReturnType<typeof FlowSelectionPanel>;

package/package/components/flows/content/FlowSettings.svelte

@@ -5,7 +5,7 @@ import FlowCard from '../common/FlowCard.svelte';
 import Toggle from '../../Toggle.svelte';
 import { Alert, Button, SecondsInput } from '../../common';
 import { getContext } from 'svelte';
-import { enterpriseLicense, userStore } from '../../../stores';
+import { enterpriseLicense, userStore, workspaceStore } from '../../../stores';
 import { isCloudHosted } from '../../../cloud';
 import Tooltip from '../../Tooltip.svelte';
 import SimpleEditor from '../../SimpleEditor.svelte';
@@ -22,8 +22,14 @@ import { inputBaseClass, inputBorderClass } from '../../text_input/TextInput.sve
 import { slide } from 'svelte/transition';
 import DebounceLimit from '../DebounceLimit.svelte';
 import EEOnly from '../../EEOnly.svelte';
+import OnBehalfOfSelector, {} from '../../OnBehalfOfSelector.svelte';
 let { noEditor, enableAi } = $props();
-const { flowStore, initialPathStore, previewArgs, pathStore, customUi } = getContext('FlowEditorContext');
+const { flowStore, initialPathStore, previewArgs, pathStore, customUi, preserveOnBehalfOf, savedOnBehalfOfEmail } = getContext('FlowEditorContext');
+const WM_DEPLOYERS_GROUP = 'wm_deployers';
+let isDeployer = $derived($userStore?.groups?.includes(WM_DEPLOYERS_GROUP) ?? false);
+let canPreserve = $derived(!!$userStore?.is_admin || !!$userStore?.is_super_admin || isDeployer);
+let onBehalfOfChoice = $state(undefined);
+let customOnBehalfOfEmail = $state('');
 function asSchema(x) {
     return x;
 }
@@ -50,7 +56,11 @@ let activeAdvancedOptions = $derived([
     { name: 'Early Return', active: Boolean(flowStore.val.value.early_return) },
     { name: 'Dedicated Worker', active: Boolean(flowStore.val.dedicated_worker) },
     { name: 'Concurrent Limit', active: Boolean(flowStore.val.value.concurrent_limit) },
-    { name: 'Run on Behalf of Last Editor', active: Boolean(flowStore.val.on_behalf_of_email) },
+    { name: 'Debouncing', active: Boolean(flowStore.val.value.debounce_delay_s) },
+    {
+        name: `Run on Behalf of ${flowStore.val.on_behalf_of_email ?? 'Last Editor'}`,
+        active: Boolean(flowStore.val.on_behalf_of_email)
+    },
     { name: 'Worker Tag', active: displayWorkerTagPicker }
 ]);
 let activeAdvancedOptionNames = $derived(activeAdvancedOptions.filter((option) => option.active).map((option) => option.name));
@@ -347,23 +357,61 @@ let numberOfAdvancedOptionsOn = $derived(activeAdvancedOptionNames.length);
 				/>
 
 				<!-- On behalf of last editor section -->
-				<Toggle
-					textClass="font-medium"
-					size="xs"
-					checked={Boolean(flowStore.val.on_behalf_of_email)}
-					on:change={() => {
-						if (flowStore.val.on_behalf_of_email) {
-							flowStore.val.on_behalf_of_email = undefined
-						} else {
-							flowStore.val.on_behalf_of_email = $userStore?.email
-						}
-					}}
-					options={{
-						right: 'Run on behalf of last editor',
-						rightTooltip:
-							'When this option is enabled, the flow will be run with the permissions of the last editor.'
-					}}
-				/>
+				<span class="inline-flex gap-2">
+					<Toggle
+						textClass="font-medium"
+						size="xs"
+						checked={Boolean(flowStore.val.on_behalf_of_email)}
+						on:change={() => {
+							if (flowStore.val.on_behalf_of_email) {
+								flowStore.val.on_behalf_of_email = undefined
+								$preserveOnBehalfOf = false
+								onBehalfOfChoice = undefined
+							} else {
+								flowStore.val.on_behalf_of_email = $userStore?.email
+							}
+						}}
+						options={{
+							right: `Run on behalf of ${canPreserve ? 'a specified user' : 'last editor'}`,
+							rightTooltip:
+								'When this option is enabled, the flow will be run with the permissions of the corresponding user.'
+						}}
+					/>
+					{#if flowStore.val.on_behalf_of_email && canPreserve}
+						&rarr; <OnBehalfOfSelector
+							targetWorkspace={$workspaceStore ?? ''}
+							targetEmail={$savedOnBehalfOfEmail}
+							selected={onBehalfOfChoice}
+							onSelect={(choice, email) => {
+								onBehalfOfChoice = choice
+								if (choice === 'me') {
+									flowStore.val.on_behalf_of_email = $userStore?.email
+									customOnBehalfOfEmail = ''
+									$preserveOnBehalfOf = false
+								} else if (choice === 'target') {
+									flowStore.val.on_behalf_of_email = $savedOnBehalfOfEmail
+									customOnBehalfOfEmail = ''
+									$preserveOnBehalfOf = true
+								} else if (choice === 'custom' && email) {
+									flowStore.val.on_behalf_of_email = email
+									customOnBehalfOfEmail = email
+									$preserveOnBehalfOf = true
+								}
+							}}
+							kind="flow"
+							{canPreserve}
+							customEmail={customOnBehalfOfEmail}
+							isDeployment={false}
+						/>
+					{:else if flowStore.val.on_behalf_of_email && !canPreserve}
+						<span class="text-xs text-tertiary">
+							Currently: <span class="font-medium"
+								>{$savedOnBehalfOfEmail ?? flowStore.val.on_behalf_of_email}</span
+							>. Will be set to <span class="font-medium">{$userStore?.email}</span> on deploy (requires
+							admin or wm_deployers group to override)
+						</span>
+					{/if}
+				</span>
 
 				<!-- Error Handler Section -->
 				<div class="flex flex-row items-center py-1">
@@ -535,8 +583,8 @@ let numberOfAdvancedOptionsOn = $derived(activeAdvancedOptionNames.length);
 					{#if flowStore.val.dedicated_worker}
 						<div class="mt-2">
 							<Alert type="info" title="Require dedicated workers">
-								A worker group needs to be configured to listen to this flow. Select it in the dedicated
-								workers section of the worker group configuration.
+								A worker group needs to be configured to listen to this flow. Select it in the
+								dedicated workers section of the worker group configuration.
 							</Alert>
 						</div>
 					{/if}

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

@@ -76,7 +76,8 @@ useUiIntent(`whileloopflow-${mod.id}`, {
 								documentationLink="https://www.windmill.dev/docs/flows/while_loops"
 								>If disabled, the flow will fail as soon as one of the iteration fail. Otherwise,
 								the error will be collected as the result of the iteration. Regardless of this
-								setting, if an error handler is defined, it will process the error.</Tooltip
+								setting, if a flow level error handler is defined, it will process the error.
+								(Workspace error handlers will NOT be used to process errors if enabled.)</Tooltip
 							></div
 						>
 						<Toggle

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

@@ -1,8 +1,8 @@
-<script lang="ts">import { Wand2 } from 'lucide-svelte';
+<script lang="ts">import { createBubbler } from 'svelte/legacy';
+const bubble = createBubbler();
+import { Wand2 } from 'lucide-svelte';
 import { createEventDispatcher } from 'svelte';
-export let funcDesc;
-export let selected;
-export let lang;
+let { funcDesc, selected, lang } = $props();
 const dispatch = createEventDispatcher();
 const onKeyDown = (e) => {
     if (selected && e.key === 'Enter') {
@@ -12,12 +12,12 @@ const onKeyDown = (e) => {
 };
 </script>
 
-<svelte:window on:keydown={onKeyDown} />
+<svelte:window onkeydown={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
+	onclick={bubble('click')}
 >
 	<Wand2 size={14} class="text-ai" />
 

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

@@ -1,3 +1,8 @@
+interface Props {
+    funcDesc: string;
+    selected: boolean;
+    lang: string;
+}
 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 +16,10 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const GenAiQuick: $$__sveltets_2_IsomorphicComponent<{
-    funcDesc: string;
-    selected: boolean;
-    lang: string;
-}, {
+declare const GenAiQuick: $$__sveltets_2_IsomorphicComponent<Props, {
     click: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "">;
 type GenAiQuick = InstanceType<typeof GenAiQuick>;
 export default GenAiQuick;

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

@@ -163,10 +163,11 @@ let displayEditor = $state(true);
 					bind:schema={script.schema}
 					{args}
 				>
-					<!-- @migration-task: migrate this slot by hand, `editor_bar_right` is an invalid identifier -->
-					<div slot="editor_bar_right">
-						<WorkerTagSelect bind:tag={script.tag} />
-					</div>
+					{#snippet editorBarRight()}
+						<div>
+							<WorkerTagSelect bind:tag={() => script?.tag, (v) => script && (script.tag = v)} />
+						</div>
+					{/snippet}
 				</ScriptEditor>
 			{/key}
 		{:else}

package/package/components/flows/content/SuspendDrawer.svelte

@@ -4,21 +4,21 @@ import { HelpCircle } from 'lucide-svelte';
 import { Button, Drawer, Tab, Tabs } from '../../common';
 import DrawerContent from '../../common/drawer/DrawerContent.svelte';
 import TabContent from '../../common/tabs/TabContent.svelte';
-let drawer;
-export let text = 'Approval Help';
+let drawer = $state();
+let { text = 'Approval Help' } = $props();
 </script>
 
 <Button
 	size="xs"
 	variant="default"
 	on:click={() => {
-		drawer.openDrawer()
+		drawer?.openDrawer()
 	}}
 	>{text} <HelpCircle size={12} />
 </Button>
 
 <Drawer bind:this={drawer}>
-	<DrawerContent title="Suspend/Approval/Prompt help" on:close={drawer.closeDrawer}>
+	<DrawerContent title="Suspend/Approval/Prompt help" on:close={drawer?.closeDrawer}>
 		<div class="flex flex-col gap-y-6 text-xs text-primary font-normal">
 			<Section label="Form/Payload">
 				To add a form, go to the <b>Form</b> tab, inside the Advanced {'->'} Suspend tab, and add a form.

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

@@ -1,20 +1,6 @@
-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 SuspendDrawer: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     text?: string;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type SuspendDrawer = InstanceType<typeof SuspendDrawer>;
+}
+declare const SuspendDrawer: import("svelte").Component<Props, {}, "">;
+type SuspendDrawer = ReturnType<typeof SuspendDrawer>;
 export default SuspendDrawer;

package/package/components/flows/flowModuleNextId.d.ts

@@ -1,3 +1,4 @@
 import type { OpenFlow } from '../../gen';
 import type { FlowState } from './flowState';
 export declare function nextId(flowState: FlowState, fullFlow: OpenFlow): string;
+export declare function copyId(originalId: string, flowState: FlowState, fullFlow: OpenFlow): string;

package/package/components/flows/flowModuleNextId.js

@@ -14,3 +14,14 @@ export function nextId(flowState, fullFlow) {
     }, 0);
     return numberToChars(max);
 }
+// Computes a copy id like "a2", "a3", etc. based on the original id
+export function copyId(originalId, flowState, fullFlow) {
+    const allIds = new Set(dfs(fullFlow.value.modules, (fm) => fm.id).concat(Object.keys(flowState)));
+    for (let n = 2; n < 10000; n++) {
+        const candidate = `${originalId}${n}`;
+        if (!allIds.has(candidate)) {
+            return candidate;
+        }
+    }
+    return `${originalId}10000`;
+}

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

@@ -10,7 +10,7 @@ export declare function pickScript(path: string, summary: string, id: string, ha
 export declare function pickFlow(path: string, summary: string, id: string): Promise<[FlowModule & {
     value: PathFlow;
 }, FlowModuleState]>;
-export declare function createInlineScriptModule(language: RawScript['language'], kind: Script['kind'], subkind: 'pgsql' | 'flow' | undefined, id: string, summary?: string): Promise<[FlowModule, FlowModuleState]>;
+export declare function createInlineScriptModule(language: RawScript['language'], kind: Script['kind'], subkind: 'pgsql' | 'flow' | 'claudesandbox' | undefined, id: string, summary?: string): Promise<[FlowModule, FlowModuleState]>;
 export declare function createLoop(id: string, enabledAi: boolean): Promise<[FlowModule, FlowModuleState]>;
 export declare function createWhileLoop(id: string): Promise<[FlowModule, FlowModuleState]>;
 export declare function createBranches(id: string): Promise<[FlowModule, FlowModuleState]>;

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

@@ -28,6 +28,15 @@ export async function openPreview(test = false) {
     previewMode = 'whole';
     flowPreviewContent?.test();
 }
+export async function openRecordingPreview() {
+    if (!previewOpen) {
+        previewOpen = true;
+        await tick();
+        flowPreviewContent?.refresh();
+    }
+    previewMode = 'whole';
+    flowPreviewContent?.setRecordingMode(true);
+}
 export async function runPreview(conversationId) {
     if (!previewOpen) {
         deferContent = true;
@@ -138,6 +147,7 @@ export function getFlowPreviewContent() {
 				// keep the data in the preview content
 				deferContent = true
 				previewOpen = false
+				flowPreviewContent?.setRecordingMode(false)
 			}}
 			on:openTriggers={(e) => {
 				previewOpen = false

package/package/components/flows/header/FlowYamlEditor.svelte

@@ -11,9 +11,12 @@ import SimpleEditor from '../../SimpleEditor.svelte';
 const { flowStore } = $state(getContext('FlowEditorContext'));
 let { drawer = $bindable() } = $props();
 let code = $state('');
+let initialCode = $state('');
 let editor = $state(undefined);
+let hasChanges = $derived(code !== initialCode);
 function reload() {
     code = YAML.stringify(filteredContentForExport(flowStore.val));
+    initialCode = code;
     editor?.setCode(code);
 }
 function apply() {
@@ -41,6 +44,7 @@ function apply() {
         flowStore.val.schema = parsed.schema;
         flowStore.val.tag = parsed.tag;
         refreshStateStore(flowStore);
+        initialCode = code;
         sendUserToast('Changes applied');
     }
     catch (e) {
@@ -54,8 +58,8 @@ let editorHeight = $state(0);
 <Drawer on:open={reload} bind:this={drawer} size="800px">
 	<DrawerContent title="OpenFlow" on:close={() => drawer?.toggleDrawer()}>
 		{#snippet actions()}
-			<Button variant="default" unifiedSize="md" on:click={reload}>Reset code</Button>
-			<Button variant="accent" unifiedSize="md" on:click={apply}>Apply changes</Button>
+			<Button variant="default" unifiedSize="md" disabled={!hasChanges} on:click={reload}>Reset code</Button>
+			<Button variant="accent" unifiedSize="md" disabled={!hasChanges} on:click={apply}>Apply changes</Button>
 		{/snippet}
 
 		{#if flowStore.val}

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

@@ -112,6 +112,7 @@ $effect(() => {
 
 					<div class="max-h-[300px]">
 						{#key items}
+							{#if items.length > 0}
 							<VirtualList height={300} width="100%" itemCount={items.length} itemSize={24}>
 								{#snippet header()}{/snippet}
 								{#snippet footer()}{/snippet}
@@ -140,6 +141,9 @@ $effect(() => {
 									</div>
 								{/snippet}
 							</VirtualList>
+							{:else}
+								<div class="text-xs text-tertiary py-2 px-2">No iterations</div>
+							{/if}
 						{/key}
 
 						<!-- {#each flowJobs ?? [] as id, idx (id)}

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

@@ -1,4 +1,4 @@
-import type { onSelectedIteration } from '../../graph/graphBuilder.svelte';
+import type { OnSelectedIteration } from '../../graph/graphBuilder.svelte';
 interface Props {
     id: string;
     moduleId: string;
@@ -6,7 +6,7 @@ interface Props {
     flowJobsSuccess: (boolean | undefined)[] | undefined;
     selected: number;
     selectedManually: boolean | undefined;
-    onSelectedIteration?: onSelectedIteration;
+    onSelectedIteration?: OnSelectedIteration;
     showIcon?: boolean;
 }
 declare const FlowJobsMenu: import("svelte").Component<Props, {}, "">;