windmill-components 1.501.22 → 1.501.24

package/package/components/FlowWrapper.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">import AiChatLayout from './copilot/chat/AiChatLayout.svelte';
 import FlowBuilder from './FlowBuilder.svelte';
-let { flowStore: oldFlowStore, ...props } = $props();
+let { flowStore: oldFlowStore, disableAi, ...props } = $props();
 let flowStore = $state(oldFlowStore);
 </script>
 
-<AiChatLayout noPadding={true}>
-	<FlowBuilder {flowStore} {...props} />
+<AiChatLayout noPadding={true} {disableAi}>
+	<FlowBuilder {flowStore} {disableAi} {...props} />
 </AiChatLayout>

package/package/components/ScriptBuilder.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">import { createBubbler } from 'svelte/legacy';
 const bubble = createBubbler();
-import { DraftService, ScriptService, PostgresTriggerService, CaptureService } from '../gen';
+import { DraftService, ScriptService, PostgresTriggerService, CaptureService, WorkerService } from '../gen';
 import { inferArgs } from '../infer';
 import { initialCode } from '../script_helpers';
 import AIFormSettings from './copilot/AIFormSettings.svelte';
-import { defaultScripts, enterpriseLicense, usedTriggerKinds, userStore, workspaceStore } from '../stores';
+import { defaultScripts, enterpriseLicense, usedTriggerKinds, userStore, workerTags, workspaceStore } from '../stores';
 import { cleanValueProperties, emptySchema, emptyString, encodeState, generateRandomString, orderedJsonStringify, replaceFalseWithUndefined } from '../utils';
 import Path from './Path.svelte';
 import ScriptEditor from './ScriptEditor.svelte';
@@ -40,7 +40,8 @@ import DeployButton from './DeployButton.svelte';
 import { deployTriggers, filterDraftTriggers, handleSelectTriggerFromKind } from './triggers/utils';
 import DraftTriggersConfirmationModal from './common/confirmationModal/DraftTriggersConfirmationModal.svelte';
 import { Triggers } from './triggers/triggers.svelte';
-let { script, fullyLoaded = true, initialPath = $bindable(''), template = $bindable('script'), initialArgs = {}, lockedLanguage = false, showMeta = false, neverShowMeta = false, diffDrawer = undefined, savedScript = $bindable(undefined), searchParams = new URLSearchParams(), disableHistoryChange = false, replaceStateFn = (url) => window.history.replaceState(null, '', url), customUi = {}, savedPrimarySchedule = undefined, functionExports = undefined, children, onDeploy, onDeployError, onSaveInitial, onSeeDetails, onSaveDraftError, onSaveDraft } = $props();
+import WorkerTagSelect from './WorkerTagSelect.svelte';
+let { script, fullyLoaded = true, initialPath = $bindable(''), template = $bindable('script'), initialArgs = {}, lockedLanguage = false, showMeta = false, neverShowMeta = false, diffDrawer = undefined, savedScript = $bindable(undefined), searchParams = new URLSearchParams(), disableHistoryChange = false, replaceStateFn = (url) => window.history.replaceState(null, '', url), customUi = {}, savedPrimarySchedule = undefined, functionExports = undefined, children, onDeploy, onDeployError, onSaveInitial, onSeeDetails, onSaveDraftError, onSaveDraft, disableAi } = $props();
 export function getInitialAndModifiedValues() {
     return {
         savedValue: savedScript,
@@ -714,6 +715,12 @@ $effect(() => {
 $effect(() => {
     !disableHistoryChange && untrack(() => encodeScriptState(script));
 });
+loadWorkerTags();
+async function loadWorkerTags() {
+    if (!$workerTags) {
+        $workerTags = await WorkerService.getCustomTags({ workspace: $workspaceStore });
+    }
+}
 </script>
 
 <svelte:window onkeydown={onKeyDown} />
@@ -850,7 +857,7 @@ $effect(() => {
 													}}
 												/>
 											</Label>
-											{#if script.schema}
+											{#if script.schema && !disableAi && !customUi?.settingsPanel?.metadata?.disableAiFilling}
 												<div class="mt-3">
 													<AIFormSettings
 														bind:prompt={script.schema.prompt_for_ai as string | undefined}
@@ -860,52 +867,52 @@ $effect(() => {
 											{/if}
 										</div>
 									</Section>
-
-									<Section label="Language">
-										{#snippet action()}
-											<DefaultScripts />
-										{/snippet}
-										{#if lockedLanguage}
-											<div class="text-sm text-tertiary italic mb-2">
-												As a forked script, the language '{script.language}' cannot be modified.
-											</div>
-										{/if}
-										<div class=" grid grid-cols-3 gap-2">
-											{#each langs as [label, lang] (lang)}
-												{@const isPicked =
-													(lang == script.language && template == 'script') ||
-													(template == 'bunnative' && lang == 'bunnative') ||
-													(template == 'docker' && lang == 'docker')}
-												<Popover
-													disablePopup={!enterpriseLangs.includes(lang) || !!$enterpriseLicense}
-												>
-													<Button
-														aiId={`create-script-language-button-${lang}`}
-														aiDescription={`Choose ${lang} as the language of the script`}
-														size="sm"
-														variant="border"
-														color={isPicked ? 'blue' : 'light'}
-														btnClasses={isPicked
-															? '!border-2 !bg-blue-50/75 dark:!bg-frost-900/75'
-															: 'm-[1px]'}
-														on:click={() => onScriptLanguageTrigger(lang)}
-														disabled={lockedLanguage ||
-															(enterpriseLangs.includes(lang) && !$enterpriseLicense)}
+									{#if !customUi?.settingsPanel?.metadata?.languages || customUi?.settingsPanel?.metadata?.languages?.length > 1}
+										<Section label="Language">
+											{#snippet action()}
+												<DefaultScripts />
+											{/snippet}
+											{#if lockedLanguage}
+												<div class="text-sm text-tertiary italic mb-2">
+													As a forked script, the language '{script.language}' cannot be modified.
+												</div>
+											{/if}
+											<div class=" grid grid-cols-3 gap-2">
+												{#each langs as [label, lang] (lang)}
+													{@const isPicked =
+														(lang == script.language && template == 'script') ||
+														(template == 'bunnative' && lang == 'bunnative') ||
+														(template == 'docker' && lang == 'docker')}
+													<Popover
+														disablePopup={!enterpriseLangs.includes(lang) || !!$enterpriseLicense}
 													>
-														<LanguageIcon {lang} />
-														<span class="ml-2 py-2 truncate">{label}</span>
-														{#if lang === 'nu'}
-															<span class="text-tertiary !text-xs"> BETA </span>
-														{/if}
-													</Button>
-													{#snippet text()}
-														{label} is only available with an enterprise license
-													{/snippet}
-												</Popover>
-											{/each}
-										</div>
-									</Section>
-
+														<Button
+															aiId={`create-script-language-button-${lang}`}
+															aiDescription={`Choose ${lang} as the language of the script`}
+															size="sm"
+															variant="border"
+															color={isPicked ? 'blue' : 'light'}
+															btnClasses={isPicked
+																? '!border-2 !bg-blue-50/75 dark:!bg-frost-900/75'
+																: 'm-[1px]'}
+															on:click={() => onScriptLanguageTrigger(lang)}
+															disabled={lockedLanguage ||
+																(enterpriseLangs.includes(lang) && !$enterpriseLicense)}
+														>
+															<LanguageIcon {lang} />
+															<span class="ml-2 py-2 truncate">{label}</span>
+															{#if lang === 'nu'}
+																<span class="text-tertiary !text-xs"> BETA </span>
+															{/if}
+														</Button>
+														{#snippet text()}
+															{label} is only available with an enterprise license
+														{/snippet}
+													</Popover>
+												{/each}
+											</div>
+										</Section>
+									{/if}
 									{#if customUi?.settingsPanel?.metadata?.disableScriptKind !== true}
 										<Section label="Script kind">
 											{#snippet header()}
@@ -941,6 +948,14 @@ $effect(() => {
 											</ToggleButtonGroup>
 										</Section>
 									{/if}
+									{#if customUi?.settingsPanel?.disableRuntime}
+										<Section label="Worker group tag (queue)">
+											<WorkerTagPicker
+												bind:tag={script.tag}
+												placeholder={customUi?.tagSelectPlaceholder}
+											/>
+										</Section>
+									{/if}
 								</div>
 							</TabContent>
 							<TabContent value="runtime">
@@ -1008,7 +1023,10 @@ $effect(() => {
 												group tag (queue). For instance, you could setup an "highmem", or "gpu" tag.
 											</Tooltip>
 										{/snippet}
-										<WorkerTagPicker bind:tag={script.tag} />
+										<WorkerTagPicker
+											bind:tag={script.tag}
+											placeholder={customUi?.tagSelectPlaceholder}
+										/>
 									</Section>
 									<Section label="Cache">
 										{#snippet header()}
@@ -1462,6 +1480,18 @@ $effect(() => {
 				{/if}
 
 				<div class="flex flex-row gap-x-1 lg:gap-x-2">
+					{#if $workerTags}
+						{#if $workerTags?.length ?? 0 > 0}
+							<div class="max-w-[200px] pr-8">
+								<WorkerTagSelect
+									inputClass="text-sm text-secondary !placeholder-secondary"
+									nullTag={script.language}
+									placeholder={customUi?.tagSelectPlaceholder}
+									bind:tag={script.tag}
+								/>
+							</div>
+						{/if}
+					{/if}
 					{#if customUi?.topBar?.settings != false}
 						<Button
 							aiId="script-builder-settings"
@@ -1502,6 +1532,7 @@ $effect(() => {
 		</div>
 
 		<ScriptEditor
+			{disableAi}
 			bind:selectedTab={selectedInputTab}
 			{customUi}
 			collabMode

package/package/components/ScriptEditor.svelte

@@ -33,7 +33,7 @@ import { SUPPORTED_CHAT_SCRIPT_LANGUAGES } from './copilot/chat/script/core';
 import { getStringError } from './copilot/chat/utils';
 import { aiChatManager, AIMode } from './copilot/chat/AIChatManager.svelte';
 import { triggerableByAI } from '../actions/triggerableByAI.svelte';
-let { schema = $bindable(), code = $bindable(), path, lang, kind = undefined, template = 'script', tag, fixedOverflowWidgets = true, noSyncFromGithub = false, editor = $bindable(undefined), diffEditor = $bindable(undefined), collabMode = false, edit = true, noHistory = false, saveToWorkspace = false, watchChanges = false, customUi = undefined, args = $bindable(), selectedTab = $bindable('main'), hasPreprocessor = $bindable(false), captureTable = $bindable(undefined), showCaptures = true, stablePathForCaptures = '', lastSavedCode = undefined, lastDeployedCode = undefined, editor_bar_right } = $props();
+let { schema = $bindable(), code = $bindable(), path, lang, kind = undefined, template = 'script', tag, fixedOverflowWidgets = true, noSyncFromGithub = false, editor = $bindable(undefined), diffEditor = $bindable(undefined), collabMode = false, edit = true, noHistory = false, saveToWorkspace = false, watchChanges = false, customUi = undefined, args = $bindable(), selectedTab = $bindable('main'), hasPreprocessor = $bindable(false), captureTable = $bindable(undefined), showCaptures = true, stablePathForCaptures = '', lastSavedCode = undefined, lastDeployedCode = undefined, disableAi = false, editor_bar_right } = $props();
 $effect.pre(() => {
     if (schema == undefined) {
         schema = emptySchema();
@@ -394,7 +394,7 @@ $effect(() => {
 							color="marine"
 						/>
 					{/if}
-					{#if !aiChatManager.open}
+					{#if !aiChatManager.open && !disableAi}
 						{#if customUi?.editorBar?.aiGen != false && SUPPORTED_CHAT_SCRIPT_LANGUAGES.includes(lang ?? '')}
 							<HideButton
 								hidden={true}

package/package/components/ScriptEditor.svelte.d.ts

@@ -31,6 +31,7 @@ interface Props {
     stablePathForCaptures?: string;
     lastSavedCode?: string | undefined;
     lastDeployedCode?: string | undefined;
+    disableAi?: boolean;
     editor_bar_right?: import('svelte').Snippet;
 }
 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> {

package/package/components/ScriptWrapper.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">import ScriptBuilder from './ScriptBuilder.svelte';
 import AiChatLayout from './copilot/chat/AiChatLayout.svelte';
-let { script: oldScript, ...props } = $props();
+let { script: oldScript, disableAi, ...props } = $props();
 let script = $state(oldScript);
 </script>
 
-<AiChatLayout noPadding>
-	<ScriptBuilder {script} {...props} />
+<AiChatLayout noPadding {disableAi}>
+	<ScriptBuilder {script} {disableAi} {...props} />
 </AiChatLayout>

package/package/components/WorkerTagPicker.svelte

@@ -4,11 +4,9 @@ import { workerTags, workspaceStore } from '../stores';
 import AssignableTags from './AssignableTags.svelte';
 import { WorkerService } from '../gen';
 import WorkerTagSelect from './WorkerTagSelect.svelte';
-export let tag;
-export let popupPlacement = 'bottom-end';
-export let disabled = false;
-loadWorkerGroups();
-async function loadWorkerGroups() {
+let { tag = $bindable(), popupPlacement = 'bottom-end', disabled = false, placeholder } = $props();
+loadWorkerTags();
+async function loadWorkerTags() {
     if (!$workerTags) {
         $workerTags = await WorkerService.getCustomTags({ workspace: $workspaceStore });
     }
@@ -19,7 +17,7 @@ async function loadWorkerGroups() {
 	<div class="max-w-sm grow">
 		{#if $workerTags}
 			{#if $workerTags?.length ?? 0 > 0}
-				<WorkerTagSelect noLabel bind:tag {disabled} />
+				<WorkerTagSelect {placeholder} noLabel bind:tag {disabled} />
 			{:else}
 				<div class="text-sm text-secondary flex flex-row gap-2">
 					No custom worker group tag defined on this instance in "Workers {'->'} Custom tags"
@@ -45,7 +43,7 @@ async function loadWorkerGroups() {
 		color="light"
 		on:click={() => {
 			$workerTags = undefined
-			loadWorkerGroups()
+			loadWorkerTags()
 		}}
 		startIcon={{ icon: RotateCw }}
 		{disabled}

package/package/components/WorkerTagPicker.svelte.d.ts

@@ -1,22 +1,9 @@
-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 WorkerTagPicker: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     tag: string | undefined;
-    popupPlacement?: "bottom-end" | "top-end";
+    popupPlacement?: 'bottom-end' | 'top-end';
     disabled?: boolean;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type WorkerTagPicker = InstanceType<typeof WorkerTagPicker>;
+    placeholder?: string;
+}
+declare const WorkerTagPicker: import("svelte").Component<Props, {}, "tag">;
+type WorkerTagPicker = ReturnType<typeof WorkerTagPicker>;
 export default WorkerTagPicker;

package/package/components/WorkerTagSelect.svelte

@@ -3,7 +3,7 @@ import { WorkerService } from '../gen';
 import { createEventDispatcher } from 'svelte';
 import Select from './select/Select.svelte';
 import { safeSelectItems } from './select/utils.svelte';
-let { tag = $bindable(), noLabel = false, nullTag = undefined, disabled = false } = $props();
+let { tag = $bindable(), noLabel = false, nullTag = undefined, disabled = false, placeholder, inputClass } = $props();
 loadWorkerGroups();
 const dispatch = createEventDispatcher();
 async function loadWorkerGroups() {
@@ -20,13 +20,14 @@ let items = $derived([
 
 <div class="flex gap-1 items-center">
 	{#if !noLabel}
-		<div class="text-tertiary text-2xs">tag</div>
+		<div class="text-tertiary text-2xs">{placeholder ?? 'tag'}</div>
 	{/if}
 	<Select
 		clearable
 		class="w-full"
+		{inputClass}
 		{disabled}
-		placeholder={nullTag ? `default: ${nullTag}` : 'lang default'}
+		placeholder={nullTag ? nullTag : (placeholder ?? 'lang default')}
 		items={safeSelectItems(items)}
 		bind:value={() => tag, (value) => ((tag = value), dispatch('change', value))}
 	/>

package/package/components/WorkerTagSelect.svelte.d.ts

@@ -3,6 +3,10 @@ type $$ComponentProps = {
     noLabel?: boolean;
     nullTag?: string | undefined;
     disabled?: boolean;
+    placeholder?: string;
+    language?: string;
+    class?: string;
+    inputClass?: 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> & {

package/package/components/copilot/chat/AiChatLayout.svelte

@@ -4,65 +4,78 @@ import AiChat from './AIChat.svelte';
 import { zIndexes } from '../../../zIndexes';
 import { loadCopilot, userStore, workspaceStore } from '../../../stores';
 import { chatState } from './sharedChatState.svelte';
-let { noPadding: noBorder = false, isCollapsed = false, children, onMenuOpen } = $props();
-workspaceStore.subscribe(async (workspace) => {
-    if (workspace) {
-        loadCopilot(workspace);
+let { noPadding: noBorder = false, isCollapsed = false, children, onMenuOpen, disableAi } = $props();
+$effect(() => {
+    if (disableAi) {
+        chatState.size = 0;
+    }
+});
+$effect(() => {
+    if ($workspaceStore && !disableAi) {
+        loadCopilot($workspaceStore);
     }
 });
 </script>
 
-<Splitpanes horizontal={false} class="flex-1 min-h-0">
-	<Pane size={99.8 - chatState.size} minSize={50} class="flex flex-col min-h-0">
-		<div
-			id="content"
-			class={classNames(
-				'w-full flex-1 flex flex-col overflow-y-auto',
-				noBorder || $userStore?.operator ? '!pl-0' : isCollapsed ? 'md:pl-12' : 'md:pl-40',
-				'transition-all ease-in-out duration-200'
-			)}
-		>
-			<main class="flex-1 flex flex-col">
-				<div class="relative w-full flex-1 flex flex-col">
-					<div
-						class={classNames(
-							'pt-2 px-4 sm:px-4 flex flex-row justify-between items-center shadow-sm max-w-7xl md:hidden',
-							noBorder || $userStore?.operator ? 'hidden' : ''
-						)}
-					>
-						<button
-							aria-label="Menu"
-							type="button"
-							onclick={() => {
-								onMenuOpen?.()
-							}}
-							class="h-8 w-8 inline-flex items-center justify-center rounded-md text-tertiary hover:text-primary focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500"
+{#if !disableAi}
+	<Splitpanes horizontal={false} class="flex-1 min-h-0">
+		<Pane size={99.8 - chatState.size} minSize={50} class="flex flex-col min-h-0">
+			<div
+				id="content"
+				class={classNames(
+					'w-full flex-1 flex flex-col overflow-y-auto',
+					noBorder || $userStore?.operator ? '!pl-0' : isCollapsed ? 'md:pl-12' : 'md:pl-40',
+					'transition-all ease-in-out duration-200'
+				)}
+			>
+				<main class="flex-1 flex flex-col">
+					<div class="relative w-full flex-1 flex flex-col">
+						<div
+							class={classNames(
+								'pt-2 px-4 sm:px-4 flex flex-row justify-between items-center shadow-sm max-w-7xl md:hidden',
+								noBorder || $userStore?.operator ? 'hidden' : ''
+							)}
 						>
-							<svg
-								class="h-6 w-6"
-								xmlns="http://www.w3.org/2000/svg"
-								fill="none"
-								viewBox="0 0 24 24"
-								stroke-width="2"
-								stroke="currentColor"
-								aria-hidden="true"
+							<button
+								aria-label="Menu"
+								type="button"
+								onclick={() => {
+									onMenuOpen?.()
+								}}
+								class="h-8 w-8 inline-flex items-center justify-center rounded-md text-tertiary hover:text-primary focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500"
 							>
-								<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
-							</svg>
-						</button>
+								<svg
+									class="h-6 w-6"
+									xmlns="http://www.w3.org/2000/svg"
+									fill="none"
+									viewBox="0 0 24 24"
+									stroke-width="2"
+									stroke="currentColor"
+									aria-hidden="true"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										d="M4 6h16M4 12h16M4 18h16"
+									/>
+								</svg>
+							</button>
+						</div>
+						<div class="flex-1">
+							{@render children?.()}
+						</div>
 					</div>
-					<div class="flex-1">
-						{@render children?.()}
-					</div>
-				</div>
-			</main>
-		</div>
-	</Pane>
-	<Pane
-		bind:size={chatState.size}
-		minSize={15}
-		class={`flex flex-col min-h-0 z-[${zIndexes.aiChat}]`}
-	>
-		<AiChat />
-	</Pane>
-</Splitpanes>
+				</main>
+			</div>
+		</Pane>
+		<Pane
+			bind:size={chatState.size}
+			minSize={15}
+			class={`flex flex-col min-h-0 z-[${zIndexes.aiChat}]`}
+		>
+			<AiChat />
+		</Pane>
+	</Splitpanes>
+{:else}
+	{@render children?.()}
+{/if}

package/package/components/copilot/chat/AiChatLayout.svelte.d.ts

@@ -3,6 +3,7 @@ interface Props {
     isCollapsed?: boolean;
     children: any;
     onMenuOpen?: () => void;
+    disableAi?: boolean;
 }
 declare const AiChatLayout: import("svelte").Component<Props, {}, "">;
 type AiChatLayout = ReturnType<typeof AiChatLayout>;

package/package/components/custom_ui.d.ts

@@ -39,6 +39,8 @@ export type FlowBuilderWhitelabelCustomUi = {
     tagEdit?: boolean;
     editorBar?: EditorBarUi;
     downloadLogs?: boolean;
+    tagSelectPlaceholder?: string;
+    tagSelectNoLabel?: boolean;
 };
 export type DisplayResultUi = {
     disableAiFix?: boolean;
@@ -77,6 +79,7 @@ export type SettingsPanelMetadataUi = {
     disableScriptKind?: boolean;
     editableSchemaForm?: EditableSchemaFormUi;
     disableMute?: boolean;
+    disableAiFilling?: boolean;
 };
 export type SettingsPanelUi = {
     metadata?: SettingsPanelMetadataUi;
@@ -103,4 +106,5 @@ export type ScriptBuilderWhitelabelCustomUi = {
     disableTooltips?: boolean;
     editorBar?: EditorBarUi;
     previewPanel?: PreviewPanelUi;
+    tagSelectPlaceholder?: string;
 };

package/package/components/flows/common/FlowCardHeader.svelte

@@ -1,3 +1,7 @@
+<script lang="ts" module>"use strict";
+let cachedValues = {};
+</script>
+
 <script lang="ts">import Badge from '../../common/badge/Badge.svelte';
 import Button from '../../common/button/Button.svelte';
 import LanguageIcon from '../../common/languageIcons/LanguageIcon.svelte';
@@ -6,24 +10,38 @@ import IconedPath from '../../IconedPath.svelte';
 import { ScriptService } from '../../../gen';
 import { workspaceStore } from '../../../stores';
 import { Lock, RefreshCw, Unlock } from 'lucide-svelte';
-import { createEventDispatcher } from 'svelte';
-export let flowModuleValue = undefined;
-export let title = undefined;
-export let summary = undefined;
-let latestHash = undefined;
+import { createEventDispatcher, untrack } from 'svelte';
+let { flowModuleValue = undefined, title = undefined, summary = $bindable(undefined), children } = $props();
+let latestHash = $state(undefined);
+function getCachedKey(path) {
+    return `${$workspaceStore}-${path}`;
+}
+function getCachedValues(path) {
+    const key = getCachedKey(path);
+    latestHash = cachedValues[key]?.latestHash;
+}
+if (flowModuleValue?.type === 'script' && flowModuleValue.path) {
+    getCachedValues(flowModuleValue.path);
+}
 async function loadLatestHash(value) {
     let script = await ScriptService.getScriptByPath({
         workspace: $workspaceStore,
         path: value.path
     });
+    const key = getCachedKey(value.path);
+    cachedValues[key] = {
+        latestHash: script.hash
+    };
     latestHash = script.hash;
 }
 const dispatch = createEventDispatcher();
-$: $workspaceStore &&
-    flowModuleValue?.type === 'script' &&
-    flowModuleValue.path &&
-    !flowModuleValue.path.startsWith('hub/') &&
-    loadLatestHash(flowModuleValue);
+$effect.pre(() => {
+    $workspaceStore &&
+        flowModuleValue?.type === 'script' &&
+        flowModuleValue.path &&
+        !flowModuleValue.path.startsWith('hub/') &&
+        untrack(() => loadLatestHash(flowModuleValue));
+});
 </script>
 
 <div
@@ -109,5 +127,5 @@ $: $workspaceStore &&
 	{#if title}
 		<div class="text-sm font-bold text-primary pr-2">{title}</div>
 	{/if}
-	<slot />
+	{@render children?.()}
 </div>

package/package/components/flows/common/FlowCardHeader.svelte.d.ts

@@ -1,4 +1,10 @@
 import { type FlowModuleValue } from '../../../gen';
+interface Props {
+    flowModuleValue?: FlowModuleValue | undefined;
+    title?: string | undefined;
+    summary?: string | undefined;
+    children?: import('svelte').Snippet;
+}
 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;
@@ -12,24 +18,11 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const FlowCardHeader: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    flowModuleValue?: FlowModuleValue | undefined;
-    title?: string | undefined;
-    summary?: string | undefined;
-}, {
-    default: {};
-}>, {
+declare const FlowCardHeader: $$__sveltets_2_IsomorphicComponent<Props, {
     setHash: CustomEvent<any>;
     reload: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
+}, {}, {}, "summary">;
 type FlowCardHeader = InstanceType<typeof FlowCardHeader>;
 export default FlowCardHeader;

package/package/components/flows/content/FlowEditorPanel.svelte

@@ -28,7 +28,7 @@ $effect(() => {
 </script>
 
 {#if $selectedId?.startsWith('settings')}
-	<FlowSettings {noEditor} />
+	<FlowSettings {enableAi} {noEditor} />
 {:else if $selectedId === 'Input'}
 	<FlowInput
 		{noEditor}

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

@@ -50,7 +50,8 @@ 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 workspaceScriptTag = $state(undefined);
+let workspaceScriptLang = $state(undefined);
 let diffMode = $state(false);
 let editor = $state();
 let diffEditor = $state();
@@ -172,7 +173,7 @@ 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(() => {
+$effect.pre(() => {
     $selectedId && untrack(() => onSelectedIdChange());
 });
 $effect(() => {
@@ -220,6 +221,7 @@ $effect(() => {
         }, 100);
     }
 });
+let rawScriptLang = $derived(flowModule.value.type == 'rawscript' ? flowModule.value.language : undefined);
 </script>
 
 <svelte:window onkeydown={onKeyDown} />
@@ -242,7 +244,7 @@ $effect(() => {
 		>
 			{#snippet header()}
 				<FlowModuleHeader
-					{tag}
+					tag={workspaceScriptTag ?? rawScriptLang ?? workspaceScriptLang}
 					module={flowModule}
 					on:tagChange={(e) => {
 						console.log('tagChange', e.detail)
@@ -392,7 +394,8 @@ $effect(() => {
 									<div class="border-t">
 										{#key forceReload}
 											<FlowModuleScript
-												bind:tag
+												bind:tag={workspaceScriptTag}
+												bind:language={workspaceScriptLang}
 												showAllCode={false}
 												path={flowModule.value.path}
 												hash={flowModule.value.hash}

package/package/components/flows/content/FlowModuleHeader.svelte

@@ -124,6 +124,8 @@ let customUi = getContext('customUi');
 		{/if}
 		{#if customUi?.tagEdit != false}
 			<FlowModuleWorkerTagSelect
+				placeholder={customUi?.tagSelectPlaceholder}
+				noLabel={customUi?.tagSelectNoLabel}
 				nullTag={tag}
 				tag={module.value.tag_override}
 				on:change={(e) => dispatch('tagChange', e.detail)}
@@ -169,6 +171,9 @@ let customUi = getContext('customUi');
 	<div class="px-0.5"></div>
 	{#if module.value.type === 'rawscript'}
 		<FlowModuleWorkerTagSelect
+			placeholder={customUi?.tagSelectPlaceholder}
+			noLabel={customUi?.tagSelectNoLabel}
+			nullTag={tag}
 			tag={module.value.tag}
 			on:change={(e) => dispatch('tagChange', e.detail)}
 		/>

package/package/components/flows/content/FlowModuleScript.svelte

@@ -1,21 +1,55 @@
+<script lang="ts" module>"use strict";
+let cachedValues = {};
+</script>
+
 <script lang="ts">import HighlightCode from '../../HighlightCode.svelte';
 import TimeAgo from '../../TimeAgo.svelte';
 import { ScriptService } from '../../../gen';
 import { getScriptByPath, scriptLangToEditorLang } from '../../../scripts';
 import { workspaceStore } from '../../../stores';
 import { Loader2 } from 'lucide-svelte';
-export let path;
-export let hash = undefined;
-export let previousHash = undefined;
-export let showDate = false;
-export let showAllCode = true;
-export let tag = undefined;
-let code;
-let previousCode;
-let language;
-let lock = undefined;
-let date = undefined;
-let notFound = false;
+import { untrack } from 'svelte';
+let { path, hash = undefined, previousHash = undefined, showDate = false, showAllCode = $bindable(true), tag = $bindable(undefined), showDiff = false, language = $bindable(undefined) } = $props();
+let code = $state();
+let previousCode = $state();
+let lock = $state(undefined);
+let date = $state(undefined);
+let notFound = $state(false);
+function getCachedKey(path, hash) {
+    return `${$workspaceStore}-${path}-${hash ?? ''}`;
+}
+function getCachedValues(path, hash) {
+    const key = getCachedKey(path, hash);
+    code = cachedValues[key]?.code;
+    language = cachedValues[key]?.language;
+    lock = cachedValues[key]?.lock;
+    date = cachedValues[key]?.date;
+    previousCode = cachedValues[key]?.previousCode;
+    tag = cachedValues[key]?.tag;
+    notFound = cachedValues[key]?.notFound ?? false;
+    console.log('cachedValues', cachedValues, code);
+}
+getCachedValues(path, hash);
+async function loadPreviousCode(previousHash) {
+    try {
+        const previousScript = await ScriptService.getScriptByHash({
+            workspace: $workspaceStore,
+            hash: previousHash
+        });
+        previousCode = previousScript.content;
+        const key = getCachedKey(path, previousHash);
+        cachedValues[key] = {
+            ...(cachedValues[key] ?? {}),
+            previousCode: previousScript.content
+        };
+    }
+    catch (e) {
+        console.error(e);
+    }
+}
+function toggleShowAll() {
+    showAllCode = !showAllCode;
+}
 async function loadCode(path, hash) {
     try {
         notFound = false;
@@ -27,30 +61,28 @@ async function loadCode(path, hash) {
         lock = script.lock;
         date = script.created_at;
         tag = script.tag;
+        const key = getCachedKey(path, hash);
+        cachedValues[key] = {
+            ...(cachedValues[key] ?? {}),
+            code: script.content,
+            language: script.language,
+            lock: script.lock,
+            date: script.created_at,
+            tag: script.tag
+        };
     }
     catch (e) {
         notFound = true;
         console.error(e);
     }
 }
-async function loadPreviousCode(previousHash) {
-    try {
-        const previousScript = await ScriptService.getScriptByHash({
-            workspace: $workspaceStore,
-            hash: previousHash
-        });
-        previousCode = previousScript.content;
-    }
-    catch (e) {
-        console.error(e);
-    }
-}
-$: path && loadCode(path, hash);
-$: path && previousHash && loadPreviousCode(previousHash);
-function toggleShowAll() {
-    showAllCode = !showAllCode;
-}
-export let showDiff = false;
+$effect.pre(() => {
+    hash;
+    path && untrack(() => loadCode(path, hash));
+});
+$effect.pre(() => {
+    path && previousHash && untrack(() => loadPreviousCode(previousHash));
+});
 </script>
 
 <div class="flex flex-col flex-1 h-full overflow-auto p-2">
@@ -64,7 +96,7 @@ export let showDiff = false;
 		<div class="text-red-400">script not found at {path} in workspace {$workspaceStore}</div>
 	{:else if showAllCode}
 		{#if showDiff}
-			{#key previousCode + code}
+			{#key (previousCode ?? '') + (code ?? '')}
 				{#await import('../../DiffEditor.svelte')}
 					<Loader2 class="animate-spin" />
 				{:then Module}
@@ -86,7 +118,7 @@ export let showDiff = false;
 		<div class="code-container h-full">
 			<HighlightCode {language} code={code?.split('\n').slice(0, 10).join('\n')} />
 		</div>
-		<button on:click={toggleShowAll}>Show all</button>
+		<button onclick={toggleShowAll}>Show all</button>
 	{/if}
 
 	{#if lock}

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

@@ -1,26 +1,14 @@
-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 FlowModuleScript: $$__sveltets_2_IsomorphicComponent<{
+import { type ScriptLang } from '../../../gen';
+interface Props {
     path: string;
     hash?: string | undefined;
     previousHash?: string | undefined;
     showDate?: boolean;
     showAllCode?: boolean;
     tag?: string | undefined;
+    language?: ScriptLang | undefined;
     showDiff?: boolean;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type FlowModuleScript = InstanceType<typeof FlowModuleScript>;
+}
+declare const FlowModuleScript: import("svelte").Component<Props, {}, "language" | "tag" | "showAllCode">;
+type FlowModuleScript = ReturnType<typeof FlowModuleScript>;
 export default FlowModuleScript;

package/package/components/flows/content/FlowModuleWorkerTagSelect.svelte

@@ -2,7 +2,7 @@
 import { workerTags, workspaceStore } from '../../../stores';
 import { WorkerService } from '../../../gen';
 import WorkerTagSelect from '../../WorkerTagSelect.svelte';
-let { tag = $bindable(), nullTag = $bindable() } = $props();
+let { tag = $bindable(), nullTag, placeholder, noLabel } = $props();
 const { flowStore, selectedId } = getContext('FlowEditorContext');
 const dispatch = createEventDispatcher();
 loadWorkerGroups();
@@ -17,7 +17,13 @@ async function loadWorkerGroups() {
 	{#if $workerTags?.length > 0}
 		<div class="w-40">
 			{#if flowStore.val.tag == undefined}
-				<WorkerTagSelect {nullTag} bind:tag on:change={(e) => dispatch('change', e.detail)} />
+				<WorkerTagSelect
+					{noLabel}
+					{placeholder}
+					{nullTag}
+					bind:tag
+					on:change={(e) => dispatch('change', e.detail)}
+				/>
 			{:else}
 				<button
 					title="Worker Group is defined at the flow level"

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

@@ -1,6 +1,8 @@
 type $$ComponentProps = {
     tag: string | undefined;
     nullTag?: string | undefined;
+    placeholder?: string;
+    noLabel?: boolean;
 };
 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> & {
@@ -19,6 +21,6 @@ declare const FlowModuleWorkerTagSelect: $$__sveltets_2_IsomorphicComponent<$$Co
     change: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "tag" | "nullTag">;
+}, {}, {}, "tag">;
 type FlowModuleWorkerTagSelect = InstanceType<typeof FlowModuleWorkerTagSelect>;
 export default FlowModuleWorkerTagSelect;

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

@@ -18,7 +18,7 @@ import MetadataGen from '../../copilot/MetadataGen.svelte';
 import Badge from '../../Badge.svelte';
 import { AlertTriangle } from 'lucide-svelte';
 import AIFormSettings from '../../copilot/AIFormSettings.svelte';
-let { noEditor } = $props();
+let { noEditor, enableAi } = $props();
 const { flowStore, initialPathStore, previewArgs, pathStore, customUi } = getContext('FlowEditorContext');
 function asSchema(x) {
     return x;
@@ -106,7 +106,7 @@ let activeAdvancedOptionNames = $derived(activeAdvancedOptions.filter((option) =
 					/>
 				</Label>
 
-				{#if flowStore.val.schema}
+				{#if flowStore.val.schema && enableAi}
 					<AIFormSettings
 						bind:prompt={flowStore.val.schema.prompt_for_ai as string | undefined}
 						type="flow"

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

@@ -1,5 +1,6 @@
 interface Props {
     noEditor: boolean;
+    enableAi?: boolean;
 }
 declare const FlowSettings: import("svelte").Component<Props, {}, "">;
 type FlowSettings = ReturnType<typeof FlowSettings>;

package/package/components/graph/FlowGraphV2.svelte

@@ -185,8 +185,7 @@ let lastModules = structuredClone($state.snapshot(modules));
 let moduleCounter = $state(0);
 function onModulesChange2(modules) {
     if (!deepEqual(modules, lastModules)) {
-        console.log('modules changed', modules);
-        lastModules = structuredClone($state.snapshot(modules));
+        lastModules = $state.snapshot(modules);
         moduleCounter++;
     }
 }

package/package/components/schema/EditableSchemaSdkWrapper.svelte.d.ts

@@ -1,3 +1,4 @@
+import type { EditableSchemaWrapperProps } from './editable_schema_wrapper';
 declare const EditableSchemaSdkWrapper: import("svelte").Component<EditableSchemaWrapperProps, {}, "">;
 type EditableSchemaSdkWrapper = ReturnType<typeof EditableSchemaSdkWrapper>;
 export default EditableSchemaSdkWrapper;

package/package/components/schema/EditableSchemaWrapper.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">import { twMerge } from 'tailwind-merge';
 import EditableSchemaForm from '../EditableSchemaForm.svelte';
-import { createEventDispatcher } from 'svelte';
 import Toggle from '../Toggle.svelte';
 import { emptySchema, validateFileExtension } from '../../utils';
 import { Alert } from '../common';
@@ -8,11 +7,10 @@ import AddPropertyV2 from './AddPropertyV2.svelte';
 import { Plus } from 'lucide-svelte';
 import Select from '../select/Select.svelte';
 import { safeSelectItems } from '../select/utils.svelte';
-let { schema = $bindable(), uiOnly = false, noPreview = false, fullHeight = true, formatExtension = $bindable(undefined) } = $props();
+let { schema = $bindable(), uiOnly = false, noPreview = false, fullHeight = true, formatExtension = $bindable(undefined), onSchemaChange } = $props();
 let resourceIsTextFile = $state(false);
 let addPropertyComponent = $state(undefined);
 let editableSchemaForm = $state(undefined);
-const dispatch = createEventDispatcher();
 $effect(() => {
     if (!resourceIsTextFile && formatExtension !== undefined) {
         formatExtension = undefined;
@@ -37,7 +35,7 @@ function switchResourceIsFile() {
             }
         };
     }
-    dispatch('change', schema);
+    onSchemaChange?.({ schema: $state.snapshot(schema) });
 }
 let suggestedFileExtensions = $state([
     'json',
@@ -65,7 +63,7 @@ let suggestedFileExtensions = $state([
 			<AddPropertyV2
 				bind:schema
 				bind:this={addPropertyComponent}
-				on:change={() => dispatch('change', schema)}
+				on:change={() => onSchemaChange?.({ schema: $state.snapshot(schema) })}
 				on:addNew={(e) => {
 					editableSchemaForm?.openField(e.detail)
 				}}
@@ -83,7 +81,7 @@ let suggestedFileExtensions = $state([
 			onlyMaskPassword
 			bind:this={editableSchemaForm}
 			bind:schema
-			on:change={() => dispatch('change', schema)}
+			on:change={() => onSchemaChange?.({ schema: $state.snapshot(schema) })}
 			isFlowInput
 			on:edit={(e) => {
 				addPropertyComponent?.openDrawer(e.detail)
@@ -100,7 +98,7 @@ let suggestedFileExtensions = $state([
 					<AddPropertyV2
 						bind:schema
 						bind:this={addPropertyComponent}
-						on:change={() => dispatch('change', schema)}
+						on:change={() => onSchemaChange?.({ schema })}
 					>
 						{#snippet trigger()}
 							<div

package/package/components/schema/EditableSchemaWrapper.svelte.d.ts

@@ -1,28 +1,4 @@
-import type { Schema } from '../../common';
-interface Props {
-    schema: Schema | undefined | any;
-    uiOnly?: boolean;
-    noPreview?: boolean;
-    fullHeight?: boolean;
-    formatExtension?: string | undefined;
-}
-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 EditableSchemaWrapper: $$__sveltets_2_IsomorphicComponent<Props, {
-    change: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "schema" | "formatExtension">;
-type EditableSchemaWrapper = InstanceType<typeof EditableSchemaWrapper>;
+import type { EditableSchemaWrapperProps } from './editable_schema_wrapper';
+declare const EditableSchemaWrapper: import("svelte").Component<EditableSchemaWrapperProps, {}, "schema" | "formatExtension">;
+type EditableSchemaWrapper = ReturnType<typeof EditableSchemaWrapper>;
 export default EditableSchemaWrapper;

package/package/components/schema/editable_schema_wrapper.d.ts

@@ -0,0 +1,11 @@
+import type { Schema } from '../../common';
+export type EditableSchemaWrapperProps = {
+    schema: Schema | undefined | any;
+    uiOnly?: boolean;
+    noPreview?: boolean;
+    fullHeight?: boolean;
+    formatExtension?: string | undefined;
+    onSchemaChange?: ({ schema }: {
+        schema: Schema;
+    }) => void;
+};

package/package/components/schema/editable_schema_wrapper.js

@@ -1 +1 @@
-"use strict";
+export {};

package/package/components/script_builder.d.ts

@@ -1,7 +1,14 @@
+import type { NewScript } from '../gen';
+import type { ScriptBuilderWhitelabelCustomUi } from './custom_ui';
+import type { DiffDrawerI } from './diff_drawer';
+import type { ScriptBuilderFunctionExports } from './scriptBuilder';
+import type { ScheduleTrigger } from './triggers';
+import type { NewScriptWithDraftAndDraftTriggers, Trigger } from './triggers/utils';
 export interface ScriptBuilderProps {
     script: NewScript & {
         draft_triggers?: Trigger[];
     };
+    disableAi?: boolean;
     fullyLoaded?: boolean;
     initialPath?: string;
     template?: 'docker' | 'bunnative' | 'script';
@@ -9,7 +16,7 @@ export interface ScriptBuilderProps {
     lockedLanguage?: boolean;
     showMeta?: boolean;
     neverShowMeta?: boolean;
-    diffDrawer?: DiffDrawer | undefined;
+    diffDrawer?: DiffDrawerI | undefined;
     savedScript?: NewScriptWithDraftAndDraftTriggers | undefined;
     searchParams?: URLSearchParams;
     disableHistoryChange?: boolean;

package/package/components/select/Select.svelte

@@ -54,7 +54,7 @@ function clearValue() {
 		</div>
 	{:else if clearable && !disabled && value}
 		<div class="absolute z-10 right-2 h-full flex items-center">
-			<CloseButton noBg small on:close={clearValue} />
+			<CloseButton class="text-secondary" noBg small on:close={clearValue} />
 		</div>
 	{:else if RightIcon}
 		<div class="absolute z-10 right-2 h-full flex items-center">

package/package/components/select/utils.svelte.d.ts

@@ -19,7 +19,7 @@ export type ProcessedItem<T> = {
 export declare function getLabel<T>(item: {
     label?: string;
     value: T;
-} | undefined): string;
+} | undefined): string | undefined;
 export declare function safeSelectItems<T>(list: (T | {
     value: T;
     label?: string;

package/package/components/select/utils.svelte.js

@@ -1,7 +1,7 @@
 export function processItems({ items, filterText, groupBy, sortBy, onCreateItem, createText }) {
     let items2 = items?.map((item) => ({
         ...item,
-        label: getLabel(item)
+        label: getLabel(item) ?? ''
     })) ?? [];
     if (groupBy) {
         items2 =
@@ -31,6 +31,9 @@ export function getLabel(item) {
         return item.value;
     if (typeof item.value == 'number' || typeof item.value == 'boolean')
         return item.value.toString();
+    if (item.value == null) {
+        return undefined;
+    }
     return JSON.stringify(item.value);
 }
 export function safeSelectItems(list) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "windmill-components",
-	"version": "1.501.22",
+	"version": "1.501.24",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build",