windmill-components 1.531.1 → 1.537.1

package/package/components/schema/FlowPropertyEditor.svelte

@@ -13,8 +13,10 @@ import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte';
 import Button from '../common/button/Button.svelte';
 import { Pen, Plus, Trash2 } from 'lucide-svelte';
 import Popover from '../meltComponents/Popover.svelte';
-let { format = $bindable(undefined), contentEncoding = undefined, type = undefined, oneOf = $bindable(undefined), required = false, pattern = undefined, password = undefined, variableEditor = undefined, itemPicker = undefined, nullable = $bindable(undefined), disabled = $bindable(undefined), defaultValue = $bindable(undefined), propsNames = [], showExpr = $bindable(undefined), extra = {}, customErrorMessage = undefined, itemsType = undefined, properties = $bindable(undefined), order = $bindable(undefined), requiredProperty = $bindable(undefined), displayWebhookWarning = true } = $props();
-let oneOfSelected = $state(undefined);
+import ResourcePicker from '../ResourcePicker.svelte';
+import Tooltip from '../Tooltip.svelte';
+let { format = $bindable(undefined), contentEncoding = undefined, type = undefined, oneOf = $bindable(undefined), required = false, pattern = undefined, password = undefined, variableEditor = undefined, itemPicker = undefined, nullable = $bindable(undefined), disabled = $bindable(undefined), defaultValue = $bindable(undefined), propsNames = [], showExpr = $bindable(undefined), extra = {}, customErrorMessage = undefined, itemsType = undefined, properties = $bindable(undefined), order = $bindable(undefined), requiredProperty = $bindable(undefined), displayWebhookWarning = true, onDrawerClose = undefined } = $props();
+let oneOfSelected = $state(oneOf?.[0]?.title);
 const dispatch = createEventDispatcher();
 function getResourceTypesFromFormat(format) {
     if (format?.startsWith('resource-')) {
@@ -56,8 +58,15 @@ function renameVariant(name, selected) {
         variantName = '';
     }
 }
-let initialObjectSelected = $state(Object.keys(properties ?? {}).length == 0 ? 'resource' : 'custom-object');
+let initialObjectSelected = $state(format === 'json-schema'
+    ? 'json-schema'
+    : format?.startsWith('jsonschema-')
+        ? 'custom-object'
+        : Object.keys(properties ?? {}).length == 0
+            ? 'resource'
+            : 'custom-object');
 let isDynSelect = $derived(format?.startsWith('dynselect-') ?? false);
+let customObjectSelected = $state(format?.startsWith('jsonschema-') ? 'json-schema-resource' : 'editor');
 </script>
 
 <div class="flex flex-col gap-2">
@@ -180,81 +189,98 @@ let isDynSelect = $derived(format?.startsWith('dynselect-') ?? false);
 		{#if oneOfSelected && oneOf}
 			{@const idx = oneOf.findIndex((obj) => obj.title === oneOfSelected)}
 			<EditableSchemaDrawer
-				bind:schema={
-					() => {
-						if (oneOf?.[idx]) {
-							let properties = Object.fromEntries(
-								Object.entries(oneOf[idx].properties ?? {}).filter(
-									([k]) => k !== 'label' && k !== 'kind'
-								)
-							)
-							return {
-								...oneOf[idx],
-								properties: properties,
-								order: Object.keys(properties),
-								required: oneOf[idx].required ?? []
-							}
-						}
-					},
-					(v) => {
-						if (oneOf?.[idx]) {
-							const tagKey = oneOf?.find((o) => Object.keys(o.properties ?? {}).includes('kind'))
-								? 'kind'
-								: 'label'
-							oneOf[idx] = {
-								...(v ?? {}),
-								type: 'object',
-								properties: {
-									...(v?.properties ?? {}),
-									[tagKey]: {
-										type: 'string',
-										enum: [v?.title ?? '']
-									}
-								}
-							}
-						}
-					}
-				}
-				on:change={() => {
-					dispatch('schemaChange')
+				onClose={() => {
+					onDrawerClose?.()
 				}}
+				bind:schema={oneOf[idx]}
+				hiddenArgs={[
+					oneOf?.find((o) => Object.keys(o.properties ?? {}).includes('kind')) ? 'kind' : 'label'
+				]}
 			/>
 		{/if}
 	{:else if type === 'object' && format !== 'resource-s3_object' && !isDynSelect}
 		<Tabs
 			bind:selected={initialObjectSelected}
 			on:selected={(e) => {
-				if (e.detail === 'custom-object') {
+				if (e.detail === 'json-schema') {
+					format = 'json-schema'
+				} else {
 					format = ''
 				}
 			}}
 		>
 			<Tab value="resource">Resource</Tab>
 			<Tab value="custom-object">Custom Object</Tab>
+			<Tab value="json-schema">
+				JSON Schema
+				<Tooltip>
+					This displays a JSON schema editor, useful when a JSON schema input is expected.
+				</Tooltip>
+			</Tab>
 			{#snippet content()}
 				<div class="pt-2">
 					<TabContent value="custom-object">
-						<EditableSchemaDrawer
-							bind:schema={
-								() => {
-									return {
-										properties: properties,
-										order: order,
-										required: requiredProperty
+						<ToggleButtonGroup
+							bind:selected={customObjectSelected}
+							class="mb-2"
+							on:selected={(e) => {
+								if (e.detail === 'editor') {
+									format = undefined
+								} else {
+									properties = undefined
+									order = undefined
+									requiredProperty = undefined
+								}
+							}}
+						>
+							{#snippet children({ item })}
+								<ToggleButton value="editor" label="Editor" {item} />
+								<ToggleButton
+									value="json-schema-resource"
+									label="JSON Schema Resource"
+									{item}
+									tooltip="Select a JSON schema resource to specify the object's properties"
+									showTooltipIcon
+								/>
+							{/snippet}
+						</ToggleButtonGroup>
+						{#if customObjectSelected === 'editor'}
+							<EditableSchemaDrawer
+								bind:schema={
+									() => {
+										return {
+											properties: properties,
+											order: order,
+											required: requiredProperty
+										}
+									},
+									(v) => {
+										properties = v.properties
+										order = v.order
+										requiredProperty = v.required
 									}
-								},
-								(v) => {
-									properties = v.properties
-									order = v.order
-									requiredProperty = v.required
-									dispatch('schemaChange')
 								}
-							}
-						/>
+							/>
+						{:else if customObjectSelected === 'json-schema-resource'}
+							<ResourcePicker
+								resourceType="json_schema"
+								bind:value={
+									() => {
+										if (format?.startsWith('jsonschema-')) {
+											return format.substring('jsonschema-'.length)
+										}
+										return undefined
+									},
+									(v) => {
+										format = 'jsonschema-' + v
+									}
+								}
+							/>
+						{/if}
 					</TabContent>
 
 					<TabContent value="resource">
-						<ObjectTypeNarrowing on:change={() => dispatch('schemaChange')} bind:format />
+						<ObjectTypeNarrowing bind:format />
 					</TabContent>
 				</div>
 			{/snippet}

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

@@ -28,6 +28,7 @@ interface Props {
     order?: string[] | undefined;
     requiredProperty?: string[] | undefined;
     displayWebhookWarning?: boolean;
+    onDrawerClose?: () => void;
 }
 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> & {
@@ -43,7 +44,6 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     z_$$bindings?: Bindings;
 }
 declare const FlowPropertyEditor: $$__sveltets_2_IsomorphicComponent<Props, {
-    schemaChange: CustomEvent<any>;
     requiredChange: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;

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

@@ -46,6 +46,6 @@ declare const PropertyEditor: $$__sveltets_2_IsomorphicComponent<Props, {
     [evt: string]: CustomEvent<any>;
 }, {}, {
     focus: () => void;
-}, "description" | "title" | "properties" | "placeholder" | "pattern" | "extra" | "oneOf" | "format" | "order" | "enum_" | "contentEncoding" | "itemsType" | "customErrorMessage">;
+}, "description" | "title" | "properties" | "placeholder" | "pattern" | "extra" | "oneOf" | "format" | "order" | "enum_" | "contentEncoding" | "customErrorMessage" | "itemsType">;
 type PropertyEditor = InstanceType<typeof PropertyEditor>;
 export default PropertyEditor;

package/package/components/schema/SchemaFormDND.svelte

@@ -3,7 +3,8 @@ import { dragHandle } from '@windmill-labs/svelte-dnd-action';
 import SchemaForm from '../SchemaForm.svelte';
 import { GripVertical } from 'lucide-svelte';
 import { deepEqual } from 'fast-equals';
-let { dndType = undefined, schema = $bindable(), args = $bindable(undefined), prettifyHeader = false, onlyMaskPassword = false, disablePortal = false, disabled = false, hiddenArgs = [], nestedParent = undefined, disableDnd = false, shouldDispatchChanges = false, helperScript = undefined, diff = {}, nestedClasses = '', isValid = $bindable(true), noVariablePicker = false } = $props();
+import { generateRandomString } from '../../utils';
+let { schema = $bindable(), args = $bindable(undefined), prettifyHeader = false, onlyMaskPassword = false, disablePortal = false, disabled = false, hiddenArgs = [], nestedParent = undefined, disableDnd = false, shouldDispatchChanges = false, helperScript = undefined, diff = {}, nestedClasses = '', isValid = $bindable(true), noVariablePicker = false, className = '', dndType = generateRandomString() } = $props();
 $effect.pre(() => {
     if (args == undefined) {
         args = {};
@@ -12,9 +13,9 @@ $effect.pre(() => {
 const dispatch = createEventDispatcher();
 const flipDurationMs = 200;
 let items = $state(computeItems());
-let dragDisabled = $state(true);
+let dragDisabledState = $state(true);
 function computeItems() {
-    return ((schema?.order ?? Object.keys(schema?.properties ?? {}) ?? []).map((key) => ({
+    return (($state.snapshot(schema?.order) ?? Object.keys(schema?.properties ?? {}) ?? []).map((key) => ({
         id: key,
         value: key
     })) ?? []);
@@ -26,20 +27,19 @@ function updateItems() {
     }
 }
 function handleConsider(e) {
-    dragDisabled = false;
+    dragDisabledState = false;
     const { items: newItems } = e.detail;
-    items = newItems;
+    items = $state.snapshot(newItems);
 }
 function handleFinalize(e) {
     const { items: newItems } = e.detail;
-    dragDisabled = true;
-    items = newItems;
+    dragDisabledState = true;
+    items = $state.snapshot(newItems);
     const newOrder = items.map((item) => item.value);
-    // console.log('handleFinalize', newOrder, e.detail)
     dispatch('reorder', newOrder);
 }
 $effect(() => {
-    schema && dragDisabled && untrack(() => updateItems());
+    schema && dragDisabledState && untrack(() => updateItems());
 });
 </script>
 
@@ -67,6 +67,7 @@ $effect(() => {
 	{disablePortal}
 	{disabled}
 	{helperScript}
+	{className}
 	bind:schema
 	dndConfig={disableDnd
 		? undefined
@@ -74,7 +75,7 @@ $effect(() => {
 				items,
 				flipDurationMs,
 				dropTargetStyle: {},
-				type: dndType ?? 'top-level'
+				type: dndType
 			}}
 	{items}
 	{diff}

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

@@ -1,8 +1,7 @@
 import type { Schema } from '../../common';
 import type { SchemaDiff } from './schemaUtils.svelte';
-import type { DynamicSelect } from '../../utils';
+import { type DynamicSelect } from '../../utils';
 interface Props {
-    dndType?: string | undefined;
     schema: Schema;
     args?: Record<string, any>;
     prettifyHeader?: boolean;
@@ -21,6 +20,8 @@ interface Props {
     isValid?: boolean;
     noVariablePicker?: boolean;
     helperScript?: DynamicSelect.HelperScript;
+    className?: string;
+    dndType?: 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/schema/editable_schema_wrapper.d.ts

@@ -8,7 +8,4 @@ export type EditableSchemaWrapperProps = {
     customUi?: {
         noAddPopover?: boolean;
     };
-    onSchemaChange?: ({ schema }: {
-        schema: Schema;
-    }) => void;
 };

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

@@ -0,0 +1,2 @@
+export declare function getJsonSchemaFromResource(path: string, workspace: string): Promise<any>;
+export declare function clearJsonSchemaResourceCache(path: string, workspace: string): Promise<void>;

package/package/components/schema/jsonSchemaResource.svelte.js

@@ -0,0 +1,40 @@
+import { z } from 'zod';
+import { AppService } from '../../gen';
+import { sendUserToast } from '../../utils';
+let loadedJsonSchemaResources = $state({});
+const jsonSchemaResourceSchema = z.object({
+    schema: z.record(z.string(), z.any())
+});
+export async function getJsonSchemaFromResource(path, workspace) {
+    if (loadedJsonSchemaResources[workspace]?.[path]) {
+        return loadedJsonSchemaResources[workspace][path];
+    }
+    try {
+        const resourceValue = await AppService.getPublicResource({
+            path,
+            workspace
+        });
+        const parsedResource = jsonSchemaResourceSchema.safeParse(resourceValue);
+        if (parsedResource.success) {
+            const workspaceResources = loadedJsonSchemaResources[workspace];
+            if (!workspaceResources) {
+                loadedJsonSchemaResources[workspace] = {};
+            }
+            loadedJsonSchemaResources[workspace][path] = parsedResource.data.schema;
+            return parsedResource.data.schema;
+        }
+        else {
+            console.error('Invalid JSON schema resource:', parsedResource.error);
+            sendUserToast('Invalid JSON schema resource: ' + parsedResource.error, true);
+        }
+    }
+    catch (err) {
+        console.error(err);
+        sendUserToast('Could not load JSON schema resource: ' + err, true);
+    }
+}
+export async function clearJsonSchemaResourceCache(path, workspace) {
+    if (loadedJsonSchemaResources[workspace]?.[path]) {
+        delete loadedJsonSchemaResources[workspace][path];
+    }
+}

package/package/components/settings/PremiumInfo.svelte

@@ -126,8 +126,13 @@ $: estimatedSeats && updateExecs();
 		</div>
 		{#if premiumInfo?.status === 'past_due'}
 			<p class="text-red-500 text-base">
-				Your last invoice is unpaid. Please update your payment method in the customer portal to
-				prevent account downgrade and the interruption of your job executions.
+				{#if premiumInfo.max_tolerated_executions === undefined || premiumInfo.usage > premiumInfo.max_tolerated_executions}
+					Your last invoice is unpaid, you cannot run any more jobs. Please update your payment
+					method in the customer portal to continue running jobs.
+				{:else}
+					Your last invoice is unpaid. Please update your payment method in the customer portal to
+					prevent the interruption of your job executions.
+				{/if}
 			</p>
 		{/if}
 	</div>

package/package/components/triggers/CaptureWrapper.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">import { workspaceStore } from '../../stores';
 import { CaptureService } from '../../gen';
 import { onDestroy, untrack } from 'svelte';
-import { isObject, sendUserToast, sleep } from '../../utils';
+import { sendUserToast, sleep } from '../../utils';
 import RouteCapture from './http/RouteCapture.svelte';
 import WebhooksCapture from './webhook/WebhooksCapture.svelte';
 import EmailTriggerCaptures from '../details/EmailTriggerCaptures.svelte';
@@ -12,7 +12,7 @@ import NatsCapture from './nats/NatsCapture.svelte';
 import MqttCapture from './mqtt/MqttCapture.svelte';
 import SqsCapture from './sqs/SqsCapture.svelte';
 import GcpCapture from './gcp/GcpCapture.svelte';
-let { isFlow, path, hasPreprocessor, canHavePreprocessor, captureType = 'webhook', data = {}, connectionInfo = $bindable(undefined), args = $bindable({}), isValid = false, triggerDeployed = false } = $props();
+let { isFlow, path, hasPreprocessor, canHavePreprocessor, captureType = 'webhook', data = {}, connectionInfo = $bindable(undefined), args = {}, isValid = false, triggerDeployed = false } = $props();
 let captureLoading = $state(false);
 let captureActive = $state(false);
 let captureConfigs = $state({});
@@ -64,7 +64,6 @@ async function getCaptureConfigs() {
     }
     return captureConfigs;
 }
-getCaptureConfigs().then((captureConfigs) => setDefaultArgs(captureConfigs));
 async function capture() {
     let i = 0;
     captureActive = true;
@@ -82,16 +81,6 @@ async function capture() {
         await sleep(1000);
     }
 }
-function setDefaultArgs(captureConfigs) {
-    if (captureType in captureConfigs) {
-        const triggerConfig = captureConfigs[captureType].trigger_config;
-        args = isObject(triggerConfig) ? triggerConfig : {};
-    }
-    else {
-        args = {};
-    }
-    ready = true;
-}
 onDestroy(() => {
     captureActive = false;
 });

package/package/components/triggers/CaptureWrapper.svelte.d.ts

@@ -37,6 +37,6 @@ declare const CaptureWrapper: $$__sveltets_2_IsomorphicComponent<Props, {
     handleCapture: (e: CustomEvent<{
         disableOnly?: boolean;
     }>) => Promise<void>;
-}, "args" | "connectionInfo">;
+}, "connectionInfo">;
 type CaptureWrapper = InstanceType<typeof CaptureWrapper>;
 export default CaptureWrapper;

package/package/components/triggers/TriggersWrapper.svelte

@@ -43,6 +43,7 @@ let { selectedTrigger, isFlow = false, initialPath, fakeInitialPath, currentPath
 		scopes={isFlow ? [`jobs:run:flows:${currentPath}`] : [`jobs:run:scripts:${currentPath}`]}
 		path={initialPath || fakeInitialPath}
 		{isFlow}
+		{hash}
 		on:email-domain
 	/>
 {:else if selectedTrigger.type === 'schedule'}

package/package/components/triggers/http/RouteEditorInner.svelte

@@ -527,7 +527,7 @@ $effect(() => {
 				{can_write}
 				bind:static_asset_config
 				showTestingBadge={isEditor}
-				isDraftOnly={trigger?.isDraft}
+				isDraftOnly={trigger ? trigger.isDraft : false}
 			/>
 
 			{#if !is_static_website}

package/package/components/triggers/nats/NatsTriggerEditorInner.svelte

@@ -36,11 +36,11 @@ let drawerLoading = $state(true);
 let showLoading = $state(false);
 let defaultValues = $state(undefined);
 let natsResourcePath = $state('');
-let subjects = $state(['']);
-let useJetstream = $state(false);
-let streamName = $state('');
-let consumerName = $state('');
 let initialConfig = undefined;
+let natsCfg = $state({
+    subjects: [],
+    use_jetstream: false
+});
 let deploymentLoading = $state(false);
 let isValid = $state(false);
 let optionTabSelected = $state('error_handler');
@@ -90,10 +90,13 @@ export async function openNew(nis_flow, fixedScriptPath_, nDefaultValues) {
         edit = false;
         itemKind = nis_flow ? 'flow' : 'script';
         natsResourcePath = nDefaultValues?.nats_resource_path ?? '';
-        subjects = nDefaultValues?.subjects ?? [''];
-        useJetstream = nDefaultValues?.use_jetstream ?? false;
-        streamName = useJetstream ? (nDefaultValues?.stream_name ?? '') : undefined;
-        consumerName = useJetstream ? (nDefaultValues?.consumer_name ?? '') : undefined;
+        const useJetstream = nDefaultValues?.use_jetstream ?? false;
+        natsCfg = {
+            subjects: nDefaultValues?.subjects ?? [''],
+            use_jetstream: useJetstream,
+            stream_name: useJetstream ? (nDefaultValues?.stream_name ?? '') : undefined,
+            consumer_name: useJetstream ? (nDefaultValues?.consumer_name ?? '') : undefined
+        };
         initialScriptPath = '';
         fixedScriptPath = fixedScriptPath_ ?? '';
         script_path = fixedScriptPath;
@@ -119,10 +122,13 @@ async function loadTriggerConfig(cfg) {
     is_flow = cfg?.is_flow;
     path = cfg?.path;
     natsResourcePath = cfg?.nats_resource_path;
-    streamName = cfg?.stream_name;
-    consumerName = cfg?.consumer_name;
-    subjects = cfg?.subjects || [''];
-    useJetstream = cfg?.use_jetstream || false;
+    const useJetstream = cfg?.use_jetstream || false;
+    natsCfg = {
+        subjects: cfg?.subjects || [''],
+        use_jetstream: useJetstream,
+        stream_name: useJetstream ? cfg?.stream_name || '' : undefined,
+        consumer_name: useJetstream ? cfg?.consumer_name || '' : undefined
+    };
     enabled = cfg?.enabled;
     can_write = canWrite(cfg?.path, cfg?.extra_perms, $userStore);
     error_handler_path = cfg?.error_handler_path;
@@ -150,10 +156,10 @@ function getSaveCfg() {
         is_flow,
         enabled,
         nats_resource_path: natsResourcePath,
-        stream_name: streamName,
-        consumer_name: consumerName,
-        subjects,
-        use_jetstream: useJetstream,
+        stream_name: natsCfg.stream_name,
+        consumer_name: natsCfg.consumer_name,
+        subjects: natsCfg.subjects,
+        use_jetstream: natsCfg.use_jetstream,
         error_handler_path,
         error_handler_args,
         retry
@@ -325,10 +331,7 @@ $effect(() => {
 			<NatsTriggersConfigSection
 				{path}
 				bind:natsResourcePath
-				bind:subjects
-				bind:useJetstream
-				bind:streamName
-				bind:consumerName
+				bind:natsCfg
 				on:valid-config={({ detail }) => {
 					isValid = detail
 				}}

package/package/components/triggers/nats/NatsTriggersConfigSection.svelte

@@ -5,11 +5,11 @@ import ResourcePicker from '../../ResourcePicker.svelte';
 import SchemaForm from '../../SchemaForm.svelte';
 import TestTriggerConnection from '../TestTriggerConnection.svelte';
 import TestingBadge from '../testingBadge.svelte';
-import { createEventDispatcher } from 'svelte';
+import { createEventDispatcher, untrack } from 'svelte';
 const dispatch = createEventDispatcher();
-let { defaultValues = undefined, headless = false, natsResourcePath = $bindable(), subjects = $bindable(), useJetstream = $bindable(), streamName = $bindable(), consumerName = $bindable(), path, can_write = true, showTestingBadge = false } = $props();
+let { defaultValues = undefined, headless = false, natsResourcePath = $bindable(), natsCfg = $bindable(), path, can_write = true, showTestingBadge = false } = $props();
 let otherArgsValid = $state(false);
-let globalError = $derived(!useJetstream && subjects && subjects.length > 1
+let globalError = $derived(!natsCfg.use_jetstream && natsCfg.subjects && natsCfg.subjects.length > 1
     ? 'Only one subject is supported if not using JetStream.'
     : '');
 let isConnectionValid = $derived(!!natsResourcePath);
@@ -55,37 +55,25 @@ const argsSchema = {
 $effect(() => {
     const valid = isConnectionValid &&
         otherArgsValid &&
-        !!subjects &&
-        subjects.length > 0 &&
-        subjects.every((b) => /^[a-zA-Z0-9-_.*>]+$/.test(b)) &&
+        !!natsCfg.subjects &&
+        natsCfg.subjects.length > 0 &&
+        natsCfg.subjects.every((b) => /^[a-zA-Z0-9-_.*>]+$/.test(b)) &&
         globalError === '';
     dispatch('valid-config', valid);
 });
 function setStreamAndConsumerNames() {
-    if (!streamName) {
-        streamName = `windmill_stream-${$workspaceStore}-${path.replaceAll('/', '__')}`;
+    if (!natsCfg.stream_name) {
+        natsCfg.stream_name = `windmill_stream-${$workspaceStore}-${path.replaceAll('/', '__')}`;
     }
-    if (!consumerName) {
-        consumerName = `windmill_consumer-${$workspaceStore}-${path.replaceAll('/', '__')}`;
+    if (!natsCfg.consumer_name) {
+        natsCfg.consumer_name = `windmill_consumer-${$workspaceStore}-${path.replaceAll('/', '__')}`;
     }
 }
-function setNewArgs(args) {
-    subjects = args.subjects;
-    useJetstream = args.use_jetstream;
-    streamName = args.stream_name;
-    consumerName = args.consumer_name;
-    if (args.use_jetstream) {
-        setStreamAndConsumerNames();
+$effect(() => {
+    if (natsCfg.use_jetstream) {
+        untrack(() => setStreamAndConsumerNames());
     }
-}
-function getNatsArgsCfg() {
-    return {
-        subjects,
-        use_jetstream: useJetstream,
-        stream_name: streamName,
-        consumer_name: consumerName
-    };
-}
+});
 </script>
 
 <div>
@@ -121,7 +109,7 @@ function getNatsArgsCfg() {
 				<Subsection headless={true}>
 					<SchemaForm
 						schema={argsSchema}
-						bind:args={getNatsArgsCfg, (args) => setNewArgs(args)}
+						bind:args={natsCfg}
 						bind:isValid={otherArgsValid}
 						lightHeader={true}
 						disabled={!can_write}

package/package/components/triggers/nats/NatsTriggersConfigSection.svelte.d.ts

@@ -2,10 +2,12 @@ interface Props {
     defaultValues?: Record<string, any> | undefined;
     headless?: boolean;
     natsResourcePath: string;
-    subjects: string[];
-    useJetstream: boolean;
-    streamName: string;
-    consumerName: string;
+    natsCfg: {
+        subjects: string[];
+        use_jetstream: boolean;
+        stream_name?: string;
+        consumer_name?: string;
+    };
     path: string;
     can_write?: boolean;
     showTestingBadge?: boolean;
@@ -27,6 +29,6 @@ declare const NatsTriggersConfigSection: $$__sveltets_2_IsomorphicComponent<Prop
     'valid-config': CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "subjects" | "natsResourcePath" | "useJetstream" | "streamName" | "consumerName">;
+}, {}, {}, "natsResourcePath" | "natsCfg">;
 type NatsTriggersConfigSection = InstanceType<typeof NatsTriggersConfigSection>;
 export default NatsTriggersConfigSection;

package/package/components/triggers/websocket/WebsocketTriggerEditorInner.svelte

@@ -331,8 +331,8 @@ $effect(() => {
 				</Label>
 			</div>
 
-			{#if !hideTarget}
-				<Section label="Runnable" class="flex flex-col gap-4">
+			<Section label={hideTarget ? 'Runnable options' : 'Runnable'} class="flex flex-col gap-4">
+				{#if !hideTarget}
 					<div>
 						<p class="text-xs mb-1 text-tertiary">
 							Pick a script or flow to be triggered<Required required={true} />
@@ -363,21 +363,21 @@ $effect(() => {
 							{/if}
 						</div>
 					</div>
+				{/if}
 
-					<Toggle
-						checked={can_return_message}
-						on:change={() => {
-							can_return_message = !can_return_message
-						}}
-						options={{
-							right: 'Send runnable result',
-							rightTooltip:
-								'Whether the runnable result should be sent as a message to the websocket server when not null.'
-						}}
-						disabled={!can_write}
-					/>
-				</Section>
-			{/if}
+				<Toggle
+					checked={can_return_message}
+					on:change={() => {
+						can_return_message = !can_return_message
+					}}
+					options={{
+						right: 'Send runnable result',
+						rightTooltip:
+							'Whether the runnable result should be sent as a message to the websocket server when not null.'
+					}}
+					disabled={!can_write}
+				/>
+			</Section>
 
 			<WebsocketEditorConfigSection
 				bind:url