windmill-components 1.558.4 → 1.596.0

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

@@ -16,8 +16,12 @@ import ErrorHandlerToggleButtonV2 from '../../details/ErrorHandlerToggleButtonV2
 import WorkerTagPicker from '../../WorkerTagPicker.svelte';
 import MetadataGen from '../../copilot/MetadataGen.svelte';
 import Badge from '../../Badge.svelte';
-import { AlertTriangle } from 'lucide-svelte';
 import AIFormSettings from '../../copilot/AIFormSettings.svelte';
+import { twMerge } from 'tailwind-merge';
+import { inputBaseClass, inputBorderClass } from '../../text_input/TextInput.svelte';
+import { slide } from 'svelte/transition';
+import DebounceLimit from '../DebounceLimit.svelte';
+import EEOnly from '../../EEOnly.svelte';
 let { noEditor, enableAi } = $props();
 const { flowStore, initialPathStore, previewArgs, pathStore, customUi } = getContext('FlowEditorContext');
 function asSchema(x) {
@@ -30,6 +34,10 @@ run(() => {
     flowStore.val.tag ? (displayWorkerTagPicker = true) : null;
 });
 let activeAdvancedOptions = $derived([
+    {
+        name: 'Fill flow inputs with AI',
+        active: typeof flowStore.val.schema?.prompt_for_ai == 'string'
+    },
     {
         name: 'High Priority',
         active: flowStore.val.value.priority !== undefined && flowStore.val.value.priority > 0
@@ -45,21 +53,21 @@ let activeAdvancedOptions = $derived([
     { name: 'Run on Behalf of Last Editor', active: Boolean(flowStore.val.on_behalf_of_email) },
     { name: 'Worker Tag', active: displayWorkerTagPicker }
 ]);
-let numberOfAdvancedOptionsOn = $derived(activeAdvancedOptions.filter((option) => option.active).length);
 let activeAdvancedOptionNames = $derived(activeAdvancedOptions.filter((option) => option.active).map((option) => option.name));
+let numberOfAdvancedOptionsOn = $derived(activeAdvancedOptionNames.length);
 </script>
 
-<div class="h-full overflow-y-auto flex flex-col">
+<div class="h-full flex flex-col">
 	<FlowCard {noEditor} title="Settings">
-		<div class="grow min-h-0 p-4 h-full flex flex-col gap-8">
+		<div class="grow min-h-0 p-4 h-full flex flex-col gap-6">
 			<!-- Metadata Section -->
-			<div class="gap-8 flex flex-col">
+			<div class="gap-6 flex flex-col">
 				<Label label="Summary">
 					<MetadataGen
 						bind:content={flowStore.val.summary}
 						promptConfigName="flowSummary"
 						flow={flowStore.val.value}
-						on:change={() => {
+						onChange={() => {
 							if ($initialPathStore == '' && flowStore.val.summary?.length > 0 && !dirtyPath) {
 								path?.setName(
 									flowStore.val.summary
@@ -105,13 +113,6 @@ let activeAdvancedOptionNames = $derived(activeAdvancedOptions.filter((option) =
 						}}
 					/>
 				</Label>
-
-				{#if flowStore.val.schema && enableAi}
-					<AIFormSettings
-						bind:prompt={flowStore.val.schema.prompt_for_ai as string | undefined}
-						type="flow"
-					/>
-				{/if}
 			</div>
 
 			<!-- Deployable Section -->
@@ -119,14 +120,13 @@ let activeAdvancedOptionNames = $derived(activeAdvancedOptions.filter((option) =
 				label="Advanced"
 				collapsable={true}
 				small={true}
-				class="h-full grow  min-h-0 flex flex-col gap-4"
+				class="h-full grow mt-2 min-h-0 flex flex-col gap-6"
 			>
 				<!-- Worker Group Section -->
 				{#if customUi?.settingsTabs?.workerGroup != false}
 					<div>
 						<Toggle
-							textClass="font-normal text-sm"
-							color="nord"
+							textClass="font-medium"
 							size="xs"
 							checked={displayWorkerTagPicker}
 							on:change={() => {
@@ -141,11 +141,12 @@ let activeAdvancedOptionNames = $derived(activeAdvancedOptions.filter((option) =
 									"When a worker group tag is defined at the flow level, any steps inside the flow will run on any worker group that listen to that tag, regardless of the steps tag. If no worker group tags is defined, the flow controls will be executed with the default tag 'flow' and the steps will be executed with their respective tag",
 								rightDocumentationLink: 'https://www.windmill.dev/docs/core_concepts/worker_groups'
 							}}
-							class="py-1"
 						/>
 
 						{#if displayWorkerTagPicker}
-							<WorkerTagPicker bind:tag={flowStore.val.tag} popupPlacement="top-end" />
+							<div transition:slide={{ duration: 120 }} class="mt-2">
+								<WorkerTagPicker bind:tag={flowStore.val.tag} popupPlacement="top-end" />
+							</div>
 						{/if}
 					</div>
 
@@ -161,9 +162,7 @@ let activeAdvancedOptionNames = $derived(activeAdvancedOptions.filter((option) =
 					{#if numberOfAdvancedOptionsOn > 0}
 						<div class="flex grow min-w-0 w-full flex-wrap gap-1 ps-2">
 							{#each activeAdvancedOptionNames as optionName}
-								<Badge twBgColor="bg-nord-950 dark:bg-nord-400" twTextColor="text-primary-inverse"
-									>{optionName}</Badge
-								>
+								<Badge twBgColor="bg-surface-sunken" twTextColor="text-primary">{optionName}</Badge>
 							{/each}
 						</div>
 					{/if}
@@ -173,8 +172,7 @@ let activeAdvancedOptionNames = $derived(activeAdvancedOptions.filter((option) =
 				{#if customUi?.settingsTabs?.cache != false}
 					<div>
 						<Toggle
-							textClass="font-normal text-sm"
-							color="nord"
+							textClass="font-medium"
 							size="xs"
 							checked={Boolean(flowStore.val.value.cache_ttl)}
 							on:change={() => {
@@ -190,18 +188,25 @@ let activeAdvancedOptionNames = $derived(activeAdvancedOptions.filter((option) =
 									'When enabled, the flow will cache the results of the flow for each possible set of inputs.',
 								rightDocumentationLink: 'https://www.windmill.dev/docs/flows/cache#cache-flows'
 							}}
-							class="py-1"
 						/>
 						{#if flowStore.val.value.cache_ttl}
-							<div class="flex gap-x-4 flex-col gap-1">
-								<div class="text-sm text-secondary">How long to keep the cache valid</div>
-								<div>
-									{#if flowStore.val.value.cache_ttl}
-										<SecondsInput bind:seconds={flowStore.val.value.cache_ttl} />
-									{:else}
-										<SecondsInput disabled />
-									{/if}
+							<div class="flex gap-x-4 flex-col gap-1 mt-2" transition:slide={{ duration: 120 }}>
+								<div class="text-2xs text-secondary">How long to keep the cache valid</div>
+								<div class="-mt-5">
+									<SecondsInput bind:seconds={flowStore.val.value.cache_ttl} />
 								</div>
+								<Toggle
+									size="2xs"
+									bind:checked={
+										() => flowStore.val.value.cache_ignore_s3_path,
+										(v) => (flowStore.val.value.cache_ignore_s3_path = v || undefined)
+									}
+									options={{
+										right: 'Ignore S3 Object paths for caching purposes',
+										rightTooltip:
+											'If two S3 objects passed as input have the same content, they will hit the same cache entry, regardless of their path.'
+									}}
+								/>
 							</div>
 						{/if}
 					</div>
@@ -212,8 +217,7 @@ let activeAdvancedOptionNames = $derived(activeAdvancedOptions.filter((option) =
 					<div>
 						<!-- documentationLink="https://www.windmill.dev/docs/flows/early_stop -->
 						<Toggle
-							textClass="font-normal text-sm"
-							color="nord"
+							textClass="font-medium"
 							size="xs"
 							checked={Boolean(flowStore.val.value.skip_expr)}
 							on:change={() => {
@@ -231,17 +235,17 @@ let activeAdvancedOptionNames = $derived(activeAdvancedOptions.filter((option) =
 								rightDocumentationLink:
 									'https://www.windmill.dev/docs/flows/early_stop#early-stop-for-flow'
 							}}
-							class="py-1"
 						/>
 						{#if flowStore.val.value.skip_expr}
 							<div
-								class="w-full border flex flex-col {flowStore.val.value.skip_expr
+								class="w-full border rounded-md flex flex-col mt-2 {flowStore.val.value.skip_expr
 									? ''
 									: 'bg-surface-secondary'}"
 							>
-								<div class="border w-full">
+								<div class="w-full rounded-md overflow-auto">
 									<SimpleEditor
 										lang="javascript"
+										small
 										bind:code={flowStore.val.value.skip_expr}
 										class="small-editor"
 										extraLib={`declare const flow_input = ${JSON.stringify(
@@ -249,7 +253,7 @@ let activeAdvancedOptionNames = $derived(activeAdvancedOptions.filter((option) =
 										)};
 									declare const WM_SCHEDULED_FOR: string;`}
 									/>
-									<div class="text-xs text-tertiary mt-2">
+									<div class="text-xs text-hint p-2">
 										You can use the variable `flow_input` to access the inputs of the flow. <br
 										/>The variable `WM_SCHEDULED_FOR` contains the time the flow was scheduled for
 										which you can use to stop early non fresh jobs:
@@ -265,8 +269,7 @@ let activeAdvancedOptionNames = $derived(activeAdvancedOptions.filter((option) =
 				{#if customUi?.settingsTabs?.earlyReturn != false}
 					<div>
 						<Toggle
-							textClass="font-normal text-sm"
-							color="nord"
+							textClass="font-medium"
 							size="xs"
 							checked={Boolean(flowStore.val.value.early_return)}
 							on:change={() => {
@@ -282,13 +285,13 @@ let activeAdvancedOptionNames = $derived(activeAdvancedOptions.filter((option) =
 									'If defined, sync endpoints will return early at the node defined here while the rest of the flow continue asynchronously.',
 								rightDocumentationLink: 'https://www.windmill.dev/docs/flows/early_return'
 							}}
-							class="py-1"
 						/>
 						{#if flowStore.val.value.early_return}
 							<div
-								class="max-w-[120px] flex flex-col {flowStore.val.value.early_return
+								class="max-w-[120px] flex flex-col mt-2 {flowStore.val.value.early_return
 									? ''
 									: 'bg-surface-secondary'}"
+								transition:slide={{ duration: 120 }}
 							>
 								<select
 									name="oauth_name"
@@ -309,8 +312,7 @@ let activeAdvancedOptionNames = $derived(activeAdvancedOptions.filter((option) =
 				<!-- Shared Directory Section -->
 				{#if customUi?.settingsTabs?.sharedDiretory != false}
 					<Toggle
-						textClass="font-normal text-sm"
-						color="nord"
+						textClass="font-medium"
 						size="xs"
 						bind:checked={flowStore.val.value.same_worker}
 						options={{
@@ -322,14 +324,12 @@ let activeAdvancedOptionNames = $derived(activeAdvancedOptions.filter((option) =
 							rightDocumentationLink:
 								'https://www.windmill.dev/docs/core_concepts/persistent_storage/within_windmill#shared-directory'
 						}}
-						class="py-1"
 					/>
 				{/if}
 
 				<!-- Visibility Section -->
 				<Toggle
-					textClass="font-normal text-sm"
-					color="nord"
+					textClass="font-medium"
 					size="xs"
 					checked={Boolean(flowStore.val.visible_to_runner_only)}
 					on:change={() => {
@@ -346,13 +346,11 @@ let activeAdvancedOptionNames = $derived(activeAdvancedOptions.filter((option) =
 						rightDocumentationLink:
 							'https://www.windmill.dev/docs/core_concepts/monitor_past_and_future_runs#invisible-runs'
 					}}
-					class="py-1"
 				/>
 
 				<!-- On behalf of last editor section -->
 				<Toggle
-					textClass="font-normal text-sm"
-					color="nord"
+					textClass="font-medium"
 					size="xs"
 					checked={Boolean(flowStore.val.on_behalf_of_email)}
 					on:change={() => {
@@ -367,58 +365,47 @@ let activeAdvancedOptionNames = $derived(activeAdvancedOptions.filter((option) =
 						rightTooltip:
 							'When this option is enabled, the flow will be run with the permissions of the last editor.'
 					}}
-					class="py-1"
 				/>
 
 				<!-- Error Handler Section -->
 				<div class="flex flex-row items-center py-1">
 					<ErrorHandlerToggleButtonV2
-						color="nord"
 						kind="flow"
 						scriptOrFlowPath={$pathStore}
 						bind:errorHandlerMuted={flowStore.val.ws_error_handler_muted}
 					/>
 					{#if !$enterpriseLicense}
-						<span
-							class="inline-flex text-xs items-center gap-1 !text-yellow-500 whitespace-nowrap ml-8"
-						>
-							<AlertTriangle size={16} />
-							EE only <Tooltip>Enterprise Edition only feature</Tooltip>
-						</span>
+						<EEOnly />
 					{/if}
 				</div>
 
 				<!-- Concurrency Section -->
 				{#if customUi?.settingsTabs?.concurrency != false}
 					<div>
-						<div class="flex flex-row items-center gap-2">
-							<Toggle
-								textClass="font-normal text-sm"
-								color="nord"
-								size="xs"
-								disabled={!$enterpriseLicense}
-								checked={Boolean(flowStore.val.value.concurrent_limit)}
-								on:change={() => {
-									if (flowStore.val.value.concurrent_limit) {
-										flowStore.val.value.concurrent_limit = undefined
-									} else {
-										flowStore.val.value.concurrent_limit = 1
-									}
-								}}
-								options={{
-									right: 'Concurrency limits',
-									rightTooltip: 'Allowed concurrency within a given timeframe',
-									rightDocumentationLink: 'https://www.windmill.dev/docs/flows/concurrency_limit'
-								}}
-								class="py-1"
-								eeOnly={true}
-							/>
-						</div>
+						<Toggle
+							textClass="font-medium"
+							size="xs"
+							disabled={!$enterpriseLicense}
+							checked={Boolean(flowStore.val.value.concurrent_limit)}
+							on:change={() => {
+								if (flowStore.val.value.concurrent_limit) {
+									flowStore.val.value.concurrent_limit = undefined
+								} else {
+									flowStore.val.value.concurrent_limit = 1
+								}
+							}}
+							options={{
+								right: 'Concurrency limits',
+								rightTooltip: 'Allowed concurrency within a given timeframe',
+								rightDocumentationLink: 'https://www.windmill.dev/docs/flows/concurrency_limit'
+							}}
+							eeOnly={true}
+						/>
 
 						{#if flowStore.val.value.concurrent_limit}
-							<div class="flex flex-col gap-4">
+							<div class="flex flex-col gap-6 mt-6" transition:slide={{ duration: 120 }}>
 								<Label label="Max number of executions within the time window">
-									<div class="flex flex-row gap-2 max-w-sm">
+									<div class="flex flex-row gap-2 max-w-sm whitespace-nowrap">
 										<input
 											disabled={!$enterpriseLicense}
 											bind:value={flowStore.val.value.concurrent_limit}
@@ -435,10 +422,12 @@ let activeAdvancedOptionNames = $derived(activeAdvancedOptions.filter((option) =
 									</div>
 								</Label>
 								<Label label="Time window in seconds">
-									<SecondsInput
-										disabled={!$enterpriseLicense}
-										bind:seconds={flowStore.val.value.concurrency_time_window_s}
-									/>
+									<div class="-mt-5">
+										<SecondsInput
+											disabled={!$enterpriseLicense}
+											bind:seconds={flowStore.val.value.concurrency_time_window_s}
+										/>
+									</div>
 								</Label>
 								<Label label="Custom concurrency key (optional)">
 									{#snippet header()}
@@ -462,10 +451,20 @@ let activeAdvancedOptionNames = $derived(activeAdvancedOptions.filter((option) =
 					</div>
 				{/if}
 
+				<!-- Debouncing Section -->
+				{#if customUi?.settingsTabs?.debouncing != false}
+					<DebounceLimit
+						size="xs"
+						fontClass="font-medium"
+						bind:debounce_delay_s={flowStore.val.value.debounce_delay_s}
+						bind:debounce_key={flowStore.val.value.debounce_key}
+						placeholder={`$workspace/flow/${$pathStore}-$args[foo]`}
+					/>
+				{/if}
+
 				<!-- Priority Section -->
 				<Toggle
-					textClass="font-normal text-sm"
-					color="nord"
+					textClass="font-medium"
 					size="xs"
 					disabled={!$enterpriseLicense || isCloudHosted()}
 					checked={flowStore.val.value.priority !== undefined && flowStore.val.value.priority > 0}
@@ -483,12 +482,15 @@ let activeAdvancedOptionNames = $derived(activeAdvancedOptions.filter((option) =
 						}`,
 						rightDocumentationLink: 'https://www.windmill.dev/docs/flows/priority'
 					}}
-					class="py-1 relative"
 				>
 					{#snippet right()}
 						<input
 							type="number"
-							class="!w-16 text-xs ml-4 absolute left-52"
+							class={twMerge(
+								inputBaseClass,
+								inputBorderClass(),
+								'!w-16 text-xs ml-4 absolute left-52'
+							)}
 							disabled={flowStore.val.value.priority === undefined}
 							bind:value={flowStore.val.value.priority}
 							onfocus={bubble('focus')}
@@ -501,44 +503,35 @@ let activeAdvancedOptionNames = $derived(activeAdvancedOptions.filter((option) =
 							}}
 						/>
 						{#if !$enterpriseLicense || isCloudHosted()}
-							<span
-								class="inline-flex absolute top-0 left-72 text-xs items-center gap-1 !text-yellow-500 whitespace-nowrap ml-8"
-							>
-								<AlertTriangle size={16} />
-								EE only <Tooltip>Enterprise Edition only feature</Tooltip>
-							</span>
+							<EEOnly />
 						{/if}
 					{/snippet}
 				</Toggle>
 
 				<div>
-					<div class="flex flex-row items-center gap-2">
-						<Toggle
-							textClass="font-normal text-sm"
-							color="nord"
-							size="xs"
-							disabled={!$enterpriseLicense || isCloudHosted()}
-							checked={Boolean(flowStore.val.dedicated_worker)}
-							on:change={() => {
-								if (flowStore.val.dedicated_worker) {
-									flowStore.val.dedicated_worker = undefined
-								} else {
-									flowStore.val.dedicated_worker = true
-								}
-							}}
-							options={{
-								right: 'Flow is run on dedicated workers',
-								rightTooltip: 'When enabled, the flow will be executed on a dedicated worker.',
-								rightDocumentationLink:
-									'https://www.windmill.dev/docs/core_concepts/jobs#high-priority-jobs'
-							}}
-							class="py-1"
-							eeOnly={true}
-						/>
-					</div>
+					<Toggle
+						textClass="font-medium"
+						size="xs"
+						disabled={!$enterpriseLicense || isCloudHosted()}
+						checked={Boolean(flowStore.val.dedicated_worker)}
+						on:change={() => {
+							if (flowStore.val.dedicated_worker) {
+								flowStore.val.dedicated_worker = undefined
+							} else {
+								flowStore.val.dedicated_worker = true
+							}
+						}}
+						options={{
+							right: 'Flow is run on dedicated workers',
+							rightTooltip: 'When enabled, the flow will be executed on a dedicated worker.',
+							rightDocumentationLink:
+								'https://www.windmill.dev/docs/core_concepts/jobs#high-priority-jobs'
+						}}
+						eeOnly={true}
+					/>
 
 					{#if flowStore.val.dedicated_worker}
-						<div>
+						<div class="mt-2">
 							<Alert type="info" title="Require dedicated workers">
 								One worker in a worker group needs to be configured with dedicated worker set to: <pre
 									>{$workspaceStore}:flow/{$pathStore}</pre
@@ -547,6 +540,12 @@ let activeAdvancedOptionNames = $derived(activeAdvancedOptions.filter((option) =
 						</div>
 					{/if}
 				</div>
+				{#if flowStore.val.schema && enableAi}
+					<AIFormSettings
+						bind:prompt={flowStore.val.schema.prompt_for_ai as string | undefined}
+						type="flow"
+					/>
+				{/if}
 			</Section>
 		</div>
 	</FlowCard>

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

@@ -16,6 +16,7 @@ import FlowModuleDeleteAfterUse from './FlowModuleDeleteAfterUse.svelte';
 import FlowModuleSkip from './FlowModuleSkip.svelte';
 import TabsV2 from '../../common/tabs/TabsV2.svelte';
 import { useUiIntent } from '../../copilot/chat/flow/useUiIntent';
+import Badge from '../../common/badge/Badge.svelte';
 const { flowStateStore } = getContext('FlowEditorContext');
 let { mod = $bindable(), previousModule, parentModule, noEditor } = $props();
 let selected = $state('early-stop');
@@ -69,7 +70,7 @@ useUiIntent(`whileloopflow-${mod.id}`, {
 
 			{#if mod.value.type === 'whileloopflow'}
 				<div class="flex flex-row gap-8 mt-2 mb-6">
-					<div>
+					<div class="flex-shrink-0">
 						<div class="mb-2 text-sm font-bold"
 							>Skip failures <Tooltip
 								documentationLink="https://www.windmill.dev/docs/flows/while_loops"
@@ -85,6 +86,32 @@ useUiIntent(`whileloopflow-${mod.id}`, {
 							}}
 						/>
 					</div>
+					<div class="flex-shrink-0">
+						<div class="mb-2 text-sm font-bold"
+							>Squash
+
+							<Badge
+								>Beta <Tooltip documentationLink="https://www.windmill.dev/docs/flows/while_loops">
+									<span class="font-semibold"
+										>This can result in unexpected behavior, use at your own risk for now.</span
+									><br />
+									Squashing a for loop runs all iterations on the same worker, using a single runner
+									per step for the entire loop. This eliminates cold starts between iterations for supported
+									languages (Bun, Deno, and Python).
+								</Tooltip>
+							</Badge>
+						</div>
+						<Toggle
+							bind:checked={mod.value.squash}
+							on:change={({ detail }) => {
+								;(mod.value as WhileloopFlow).squash = detail
+							}}
+							options={{
+								right: 'Squash'
+							}}
+							class="whitespace-nowrap"
+						/>
+					</div>
 				</div>
 
 				<div class="my-2 flex flex-row gap-2 items-center">
@@ -92,7 +119,7 @@ useUiIntent(`whileloopflow-${mod.id}`, {
 						<Button
 							on:click={() => (previewOpen = true)}
 							startIcon={{ icon: Play }}
-							color="dark"
+							variant="accent"
 							size="sm">Test an iteration</Button
 						>
 					</div>
@@ -102,12 +129,12 @@ useUiIntent(`whileloopflow-${mod.id}`, {
 		<Pane size={40} minSize={20} class="flex flex-col flex-1">
 			<TabsV2 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>
-				<Tab value="lifetime">Lifetime</Tab>
+				<Tab value="early-stop" label="Early Stop/Break" />
+				<Tab value="skip" label="Skip" />
+				<Tab value="suspend" label="Suspend/Approval/Prompt" />
+				<Tab value="sleep" label="Sleep" />
+				<Tab value="mock" label="Mock" />
+				<Tab value="lifetime" label="Lifetime" />
 
 				{#snippet content()}
 					<div class="overflow-hidden bg-surface" style="height:calc(100% - 32px);">

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

@@ -19,7 +19,7 @@ const onKeyDown = (e) => {
 		: ''}"
 	on:click
 >
-	<Wand2 size={14} class="text-violet-800 dark:text-violet-400" />
+	<Wand2 size={14} class="text-ai" />
 
 	<span class="grow truncate text-left text-2xs text-primary font-normal">
 		Generate "{funcDesc}" in {lang}