windmill-components 1.389.3 → 1.394.3

package/package/components/flows/content/FlowConstants.svelte

@@ -19,8 +19,8 @@ $: resources = Object.fromEntries(scriptModules
         let schema = $flowStateStore[m.id]?.schema;
         let val = undefined;
         const [k, inputTransform] = x;
-        const v = schema.properties[k];
-        if (v.format?.includes('resource') &&
+        const v = schema?.properties[k];
+        if (v?.format?.includes('resource') &&
             inputTransform.type === 'static' &&
             (inputTransform.value === '' ||
                 inputTransform.value === undefined ||
@@ -41,7 +41,7 @@ $: steps = scriptModules
     Object.entries(v.input_transforms)
         .filter((x) => {
         const shouldDisplay = hideOptional
-            ? $flowStateStore[m.id]?.schema.required?.includes(x[0])
+            ? $flowStateStore[m.id]?.schema?.required?.includes(x[0])
             : true;
         return x[1].type == 'static' && shouldDisplay;
     })

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

@@ -28,7 +28,7 @@ async function initWarnings() {
             $flowInputsStore = {};
         }
         $flowInputsStore[module?.id] = {
-            flowStepWarnings: await initFlowStepWarnings(module.value, $flowStateStore?.[module?.id]?.schema ?? {}, dfs($flowStore.value.modules, (fm) => fm.id))
+            flowStepWarnings: await initFlowStepWarnings(module.value, $flowStateStore?.[module?.id]?.schema, dfs($flowStore.value.modules, (fm) => fm.id))
         };
     }
 }

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

@@ -150,7 +150,7 @@ function onSelectedIdChange() {
 }
 let debouncedWarning = debounce((argName) => {
     if ($flowInputsStore) {
-        computeFlowStepWarning(argName, flowModule.value, $flowInputsStore[flowModule.id].flowStepWarnings ?? {}, $flowStateStore[$selectedId]?.schema ?? {}, dfs($flowStore?.value?.modules ?? [], (fm) => fm.id) ?? []).then((flowStepWarnings) => {
+        computeFlowStepWarning(argName, flowModule.value, $flowInputsStore[flowModule.id].flowStepWarnings ?? {}, $flowStateStore[$selectedId]?.schema, dfs($flowStore?.value?.modules ?? [], (fm) => fm.id) ?? []).then((flowStepWarnings) => {
             $flowInputsStore[flowModule.id].flowStepWarnings = flowStepWarnings;
         });
     }
@@ -204,7 +204,6 @@ function setFlowInput(argName) {
 							flowModule,
 							$selectedId,
 							$flowStateStore[flowModule.id].schema,
-							$flowStore,
 							$pathStore
 						)
 						flowModule = module
@@ -450,6 +449,7 @@ function setFlowInput(argName) {
 															using `$args[name_of_arg]`</Tooltip
 														>
 													</svelte:fragment>
+													<!-- svelte-ignore a11y-autofocus -->
 													<input
 														type="text"
 														autofocus

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

@@ -1,21 +1,15 @@
 <script>import Button from '../../common/button/Button.svelte';
-import { WorkerService } from '../../../gen';
+import {} from '../../../gen';
 import { createEventDispatcher, getContext } from 'svelte';
 import { Bed, Database, Gauge, GitFork, Pen, PhoneIncoming, Repeat, Save, Square, Voicemail } from 'lucide-svelte';
 import Popover from '../../Popover.svelte';
 import { sendUserToast } from '../../../utils';
-import { workerTags } from '../../../stores';
 import { getLatestHashForScript } from '../../../scripts';
+import FlowModuleWorkerTagSelect from './FlowModuleWorkerTagSelect.svelte';
 export let module;
-const { scriptEditorDrawer, flowStore, selectedId } = getContext('FlowEditorContext');
+const { scriptEditorDrawer } = getContext('FlowEditorContext');
 const dispatch = createEventDispatcher();
 let customUi = getContext('customUi');
-loadWorkerGroups();
-async function loadWorkerGroups() {
-    if (!$workerTags) {
-        $workerTags = await WorkerService.getCustomTags();
-    }
-}
 $: moduleRetry = module.retry?.constant || module.retry?.exponential;
 </script>
 
@@ -114,6 +108,7 @@ $: moduleRetry = module.retry?.constant || module.retry?.exponential;
 				Edit {#if module.value.hash != undefined} (locked hash){/if}
 			</Button>
 		{/if}
+		<FlowModuleWorkerTagSelect bind:tag={module.value.tag_override} />
 		{#if customUi?.scriptFork != false}
 			<Button
 				size="xs"
@@ -128,42 +123,7 @@ $: moduleRetry = module.retry?.constant || module.retry?.exponential;
 	{/if}
 	<div class="px-0.5" />
 	{#if module.value.type === 'rawscript'}
-		{#if $workerTags}
-			{#if $workerTags?.length > 0}
-				<div class="w-40">
-					{#if $flowStore.tag == undefined}
-						<select
-							placeholder="Tag"
-							bind:value={module.value.tag}
-							on:change={(e) => {
-								if (module.value.type === 'rawscript') {
-									if (module.value.tag == '') {
-										module.value.tag = undefined
-									}
-								}
-							}}
-						>
-							{#if module.value.tag}
-								<option value="">reset to default</option>
-							{:else}
-								<option value="" disabled selected>Tag</option>
-							{/if}
-							{#each $workerTags ?? [] as tag (tag)}
-								<option value={tag}>{tag}</option>
-							{/each}
-						</select>
-					{:else}
-						<button
-							title="Worker Group is defined at the flow level"
-							class="w-full text-left items-center font-normal p-1 border text-xs rounded"
-							on:click={() => ($selectedId = 'settings-worker-group')}
-						>
-							Flow's WG: {$flowStore.tag}
-						</button>
-					{/if}
-				</div>
-			{/if}
-		{/if}
+		<FlowModuleWorkerTagSelect bind:tag={module.value.tag} />
 		<Button
 			size="xs"
 			color="light"

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

@@ -0,0 +1,47 @@
+<script>import { getContext } from 'svelte';
+import { workerTags } from '../../../stores';
+import { WorkerService } from '../../../gen';
+export let tag;
+const { flowStore, selectedId } = getContext('FlowEditorContext');
+loadWorkerGroups();
+async function loadWorkerGroups() {
+    if (!$workerTags) {
+        $workerTags = await WorkerService.getCustomTags();
+    }
+}
+</script>
+
+{#if $workerTags}
+	{#if $workerTags?.length > 0}
+		<div class="w-40">
+			{#if $flowStore.tag == undefined}
+				<select
+					placeholder="Tag"
+					bind:value={tag}
+					on:change={(e) => {
+						if (tag == '') {
+							tag = undefined
+						}
+					}}
+				>
+					{#if tag}
+						<option value="">reset to default</option>
+					{:else}
+						<option value="" disabled selected>Tag</option>
+					{/if}
+					{#each $workerTags ?? [] as tag (tag)}
+						<option value={tag}>{tag}</option>
+					{/each}
+				</select>
+			{:else}
+				<button
+					title="Worker Group is defined at the flow level"
+					class="w-full text-left items-center font-normal p-1 border text-xs rounded"
+					on:click={() => ($selectedId = 'settings-worker-group')}
+				>
+					Flow's WG: {$flowStore.tag}
+				</button>
+			{/if}
+		</div>
+	{/if}
+{/if}

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

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        tag: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FlowModuleWorkerTagSelectProps = typeof __propDef.props;
+export type FlowModuleWorkerTagSelectEvents = typeof __propDef.events;
+export type FlowModuleWorkerTagSelectSlots = typeof __propDef.slots;
+export default class FlowModuleWorkerTagSelect extends SvelteComponent<FlowModuleWorkerTagSelectProps, FlowModuleWorkerTagSelectEvents, FlowModuleWorkerTagSelectSlots> {
+}
+export {};

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

@@ -37,6 +37,7 @@ let dirtyPath = false;
 <div class="h-full overflow-hidden">
 	<FlowCard {noEditor} title="Settings">
 		<div class="h-full flex-1">
+			<!-- svelte-ignore a11y-autofocus -->
 			<Tabs bind:selected={$selectedId}>
 				<Tab value="settings-metadata">Metadata</Tab>
 				{#if !noEditor && customUi?.settingsTabs?.schedule != false}

package/package/components/flows/flowModuleNextId.js

@@ -4,7 +4,7 @@ import { charsToNumber, numberToChars } from './idUtils';
 export function nextId(flowState, fullFlow) {
     const allIds = dfs(fullFlow.value.modules, (fm) => fm.id);
     const max = allIds.concat(Object.keys(flowState)).reduce((acc, key) => {
-        if (key === 'failure' || key.includes('branch') || key.includes('loop')) {
+        if (key.length >= 4) {
             return acc;
         }
         else {

package/package/components/flows/flowState.d.ts

@@ -3,7 +3,7 @@ import type { Schema } from '../../common';
 import type { Flow } from '../../gen';
 import type { Writable } from 'svelte/store';
 export type FlowModuleState = {
-    schema: Schema;
+    schema?: Schema;
     previewResult?: any;
     previewArgs?: any;
 };

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

@@ -20,7 +20,7 @@ export declare function fork(flowModule: FlowModule): Promise<[FlowModule & {
     value: RawScript;
 }, FlowModuleState]>;
 export declare function emptyModule(flowState: FlowState, fullFlow: OpenFlow, flow?: boolean): FlowModule;
-export declare function createScriptFromInlineScript(flowModule: FlowModule, suffix: string, schema: Schema, flow: OpenFlow, flowPath: string): Promise<[FlowModule & {
+export declare function createScriptFromInlineScript(flowModule: FlowModule, suffix: string, schema: Schema | undefined, flowPath: string): Promise<[FlowModule & {
     value: PathScript;
 }, FlowModuleState]>;
 export declare function deleteFlowStateById(id: string, flowStateStore: Writable<FlowState>): void;

package/package/components/flows/flowStateUtils.js

@@ -142,7 +142,7 @@ export function emptyModule(flowState, fullFlow, flow) {
         value: { type: 'identity', flow }
     };
 }
-export async function createScriptFromInlineScript(flowModule, suffix, schema, flow, flowPath) {
+export async function createScriptFromInlineScript(flowModule, suffix, schema, flowPath) {
     const user = get(userStore);
     if (flowModule.value.type != 'rawscript') {
         throw new Error("Can't create script from non-inline script");

package/package/components/flows/flowStore.d.ts

@@ -6,3 +6,4 @@ export type FlowMode = 'push' | 'pull';
 export declare const importFlowStore: Writable<Flow | undefined>;
 export declare function initFlow(flow: Flow, flowStore: Writable<Flow>, flowStateStore: Writable<FlowState>): Promise<void>;
 export declare function copyFirstStepSchema(flowState: FlowState, flowStore: Writable<OpenFlow>): Promise<void>;
+export declare function replaceId(expr: string, id: string, newId: string): string;

package/package/components/flows/flowStore.js

@@ -23,3 +23,8 @@ export async function copyFirstStepSchema(flowState, flowStore) {
         return flow;
     });
 }
+export function replaceId(expr, id, newId) {
+    return expr
+        .replaceAll(`results.${id}`, `results.${newId}`)
+        .replaceAll(`results?.${id}`, `results?.${newId}`);
+}

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

@@ -3,7 +3,6 @@ import { createEventDispatcher } from 'svelte';
 import { ListFilter } from 'lucide-svelte';
 import { MenuItem } from '@rgossiaux/svelte-headlessui';
 const dispatch = createEventDispatcher();
-export let open = undefined;
 export let index;
 export let flowJobs;
 export let flowJobsSuccess;

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

@@ -1,7 +1,6 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        open?: boolean | undefined;
         index: number;
         flowJobs: string[] | undefined;
         flowJobsSuccess: (boolean | undefined)[] | undefined;

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

@@ -1,10 +1,17 @@
 <script>import Badge from '../../common/badge/Badge.svelte';
 import Popover from '../../Popover.svelte';
 import { classNames } from '../../../utils';
-import { AlertTriangle, Bed, Database, Gauge, Move, PhoneIncoming, Repeat, Square, Voicemail, X } from 'lucide-svelte';
+import { AlertTriangle, Bed, Database, Gauge, Move, Pencil, PhoneIncoming, Repeat, Square, Voicemail, X } from 'lucide-svelte';
 import { createEventDispatcher, getContext } from 'svelte';
 import { fade } from 'svelte/transition';
+import { get } from 'svelte/store';
 import { twMerge } from 'tailwind-merge';
+import IdEditorInput from '../../IdEditorInput.svelte';
+import { dfs } from '../dfs';
+import { Drawer } from '../../common';
+import DrawerContent from '../../common/drawer/DrawerContent.svelte';
+import { getDependeeAndDependentComponents } from '../flowExplorer';
+import { replaceId } from '../flowStore';
 export let selected = false;
 export let deletable = false;
 export let retry = false;
@@ -22,20 +29,84 @@ export let concurrency = false;
 export let retries = undefined;
 export let warningMessage = undefined;
 const { flowInputsStore } = getContext('FlowGraphContext');
+const flowEditorContext = getContext('FlowEditorContext');
 const dispatch = createEventDispatcher();
 const { currentStepStore: copilotCurrentStepStore } = getContext('FlowCopilotContext') || {};
+let editId = false;
+let newId = id ?? '';
+let hover = false;
 </script>
 
+{#if deletable && id && editId}
+	{@const flowStore = flowEditorContext?.flowStore ? get(flowEditorContext?.flowStore) : undefined}
+	{@const getDeps = getDependeeAndDependentComponents(
+		id,
+		flowStore?.value.modules ?? [],
+		flowStore?.value.failure_module
+	)}
+	<Drawer bind:open={editId}>
+		<DrawerContent title="Edit Step Id {id}" on:close={() => (editId = false)}>
+			<div>
+				<IdEditorInput
+					buttonText="Edit Id "
+					btnClasses="!ml-1"
+					label=""
+					initialId={id}
+					acceptUnderScores
+					reservedIds={dfs(flowStore?.value.modules ?? [], (x) => x.id)}
+					bind:value={newId}
+					on:save={(e) => {
+						dispatch('changeId', { id, newId: e.detail, deps: getDeps?.dependents ?? {} })
+						editId = false
+					}}
+					on:close={() => {
+						editId = false
+					}}
+				/>
+				<div class="mt-8">
+					<h3>Step Inputs Replacements</h3>
+					<div class="text-2xs text-tertiary pt-0.5">
+						Replace all occurrences of `results.<span class="font-bold">{id}</span>` with{' '}
+						results.<span class="font-bold">{newId}</span> in the step inputs of all steps that depend
+						on it.
+					</div>
+					<div class="pt-8 flex flex-col gap-y-4">
+						{#if Object.keys(getDeps?.dependents ?? {})?.length > 0}
+							{#each Object.entries(getDeps?.dependents ?? {}) as dependents}
+								<div>
+									<h4>{dependents[0]}</h4>
+									<div>
+										{#each dependents?.[1] as d}
+											<div>
+												<span class="font-mono text-sm">{d}</span> &rightarrow;
+												<span class="font-mono text-sm">{replaceId(d, id, newId)}</span>
+											</div>
+										{/each}
+									</div>
+								</div>
+							{/each}
+						{:else}
+							<div class="text-2xs text-tertiary"> No dependents </div>
+						{/if}
+					</div>
+				</div>
+			</div>
+		</DrawerContent>
+	</Drawer>
+{/if}
+
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
 	class={classNames(
 		'w-full module flex rounded-sm cursor-pointer',
-		selected ? 'outline outline-offset-1 outline-2  outline-gray-600 dark:outline-gray-400' : '',
+		selected ? 'outline outline-offset-0  outline-2  outline-slate-500 dark:outline-gray-400' : '',
 		'flex relative',
 		$copilotCurrentStepStore === id ? 'z-[901]' : ''
 	)}
 	style="width: 275px; height: 34px; background-color: {bgColor};"
+	on:mouseenter={() => (hover = true)}
+	on:mouseleave={() => (hover = false)}
 	on:click
 >
 	<div class="absolute text-sm right-12 -bottom-3 flex flex-row gap-1 z-10">
@@ -46,7 +117,7 @@ const { currentStepStore: copilotCurrentStepStore } = getContext('FlowCopilotCon
 					class="center-center rounded border bg-surface border-gray-400 text-secondary px-1 py-0.5"
 				>
 					{#if retries}<span class="text-red-400 mr-2">{retries}</span>{/if}
-					<Repeat size={14} />
+					<Repeat size={12} />
 				</div>
 				<svelte:fragment slot="text">Retries</svelte:fragment>
 			</Popover>
@@ -58,7 +129,7 @@ const { currentStepStore: copilotCurrentStepStore } = getContext('FlowCopilotCon
 					transition:fade|local={{ duration: 200 }}
 					class="center-center rounded border bg-surface border-gray-400 text-secondary px-1 py-0.5"
 				>
-					<Gauge size={14} />
+					<Gauge size={12} />
 				</div>
 				<svelte:fragment slot="text">Concurrency Limits</svelte:fragment>
 			</Popover>
@@ -69,7 +140,7 @@ const { currentStepStore: copilotCurrentStepStore } = getContext('FlowCopilotCon
 					transition:fade|local={{ duration: 200 }}
 					class="center-center rounded border bg-surface border-gray-400 text-secondary px-1 py-0.5"
 				>
-					<Database size={14} />
+					<Database size={12} />
 				</div>
 				<svelte:fragment slot="text">Cached</svelte:fragment>
 			</Popover>
@@ -80,7 +151,7 @@ const { currentStepStore: copilotCurrentStepStore } = getContext('FlowCopilotCon
 					transition:fade|local={{ duration: 200 }}
 					class="center-center bg-surface rounded border border-gray-400 text-secondary px-1 py-0.5"
 				>
-					<Square size={14} />
+					<Square size={12} />
 				</div>
 				<svelte:fragment slot="text">Early stop/break</svelte:fragment>
 			</Popover>
@@ -91,7 +162,7 @@ const { currentStepStore: copilotCurrentStepStore } = getContext('FlowCopilotCon
 					transition:fade|local={{ duration: 200 }}
 					class="center-center bg-surface rounded border border-gray-400 text-secondary px-1 py-0.5"
 				>
-					<PhoneIncoming size={14} />
+					<PhoneIncoming size={12} />
 				</div>
 				<svelte:fragment slot="text">Suspend</svelte:fragment>
 			</Popover>
@@ -102,7 +173,7 @@ const { currentStepStore: copilotCurrentStepStore } = getContext('FlowCopilotCon
 					transition:fade|local={{ duration: 200 }}
 					class="center-center bg-surface rounded border border-gray-400 text-secondary px-1 py-0.5"
 				>
-					<Bed size={14} />
+					<Bed size={12} />
 				</div>
 				<svelte:fragment slot="text">Sleep</svelte:fragment>
 			</Popover>
@@ -113,7 +184,7 @@ const { currentStepStore: copilotCurrentStepStore } = getContext('FlowCopilotCon
 					transition:fade|local={{ duration: 200 }}
 					class="center-center bg-surface rounded border border-gray-400 text-secondary px-1 py-0.5"
 				>
-					<Voicemail size={14} />
+					<Voicemail size={12} />
 				</div>
 				<svelte:fragment slot="text">Mocked</svelte:fragment>
 			</Popover>
@@ -122,36 +193,49 @@ const { currentStepStore: copilotCurrentStepStore } = getContext('FlowCopilotCon
 
 	<div
 		class="flex gap-1 justify-between items-center w-full overflow-hidden rounded-sm
-			border border-gray-400 dark:border-gray-600 p-2 text-2xs module text-primary"
+	 p-2 text-2xs module text-primary"
 	>
 		{#if $$slots.icon}
 			<slot name="icon" />
 		{/if}
 		<div class="truncate" class:font-bold={bold}>{label}</div>
-		<div class="flex items-center space-x-2">
+		<div class="flex items-center relative">
 			{#if id}
 				<Badge color="indigo">{id}</Badge>
+
+				{#if deletable}
+					<button
+						class="absolute -left-[20px] z-10 h-[20px] rounded-l rounded-t rounded-s w-[20px] trash center-center text-secondary bg-surface duration-150 hover:bg-blue-400 {editId
+							? '!bg-blue-400'
+							: ''} hover:text-white
+hover:border-blue-700 hover:!visible {hover ? '' : '!hidden'}"
+						on:click|preventDefault|stopPropagation={(event) => (editId = !editId)}
+						title="Edit Id"><Pencil size={14} /></button
+					>
+				{/if}
 			{/if}
 		</div>
 	</div>
 	{#if deletable}
 		<button
-			class="absolute -top-[10px] -right-[10px] rounded-full h-[20px] w-[20px] trash center-center text-primary
-	border-[1.5px] border-gray-700 bg-surface duration-150 hover:bg-red-400 hover:text-white
-	hover:border-red-700 {selected ? '' : '!hidden'}"
+			class="absolute -top-[10px] -right-[10px] rounded-full h-[20px] w-[20px] trash center-center text-secondary
+	outline-[1px] outline dark:outline-gray-500 outline-gray-300 bg-surface duration-150 hover:bg-red-400 hover:text-white
+	 {hover || selected ? '' : '!hidden'}"
+			title="Delete"
 			on:click|preventDefault|stopPropagation={(event) =>
 				dispatch('delete', { event, id, type: modType })}
 		>
-			<X class="mx-[3px]" size={14} strokeWidth={2} />
+			<X class="mx-[3px]" size={12} strokeWidth={2} />
 		</button>
 
 		<button
-			class="absolute -top-[10px] right-[35px] rounded-full h-[20px] w-[20px] trash center-center text-primary
-border-[1.5px] border-gray-700 bg-surface duration-150 hover:bg-blue-400 hover:text-white
-hover:border-blue-700 {selected ? '' : '!hidden'}"
+			class="absolute -top-[10px] right-[60px] rounded-full h-[20px] w-[20px] trash center-center text-secondary
+outline-[1px] outline dark:outline-gray-500 outline-gray-300 bg-surface duration-150 hover:bg-blue-400 hover:text-white
+ {hover ? '' : '!hidden'}"
 			on:click|preventDefault|stopPropagation={(event) => dispatch('move')}
+			title="Move"
 		>
-			<Move class="mx-[3px]" size={14} strokeWidth={2} />
+			<Move class="mx-[3px]" size={12} strokeWidth={2} />
 		</button>
 
 		{#if (id && Object.values($flowInputsStore?.[id]?.flowStepWarnings || {}).length > 0) || Boolean(warningMessage)}

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

@@ -20,6 +20,7 @@ declare const __propDef: {
     };
     events: {
         click: MouseEvent;
+        changeId: CustomEvent<any>;
         delete: CustomEvent<any>;
         move: CustomEvent<any>;
     } & {

package/package/components/flows/map/FlowModuleSchemaMap.svelte

@@ -15,6 +15,7 @@ import FlowTutorials from '../../FlowTutorials.svelte';
 import { ignoredTutorials } from '../../tutorials/ignoredTutorials';
 import { tutorialInProgress } from '../../../tutorialUtils';
 import FlowGraphV2 from '../../graph/FlowGraphV2.svelte';
+import { replaceId } from '../flowStore';
 export let modules;
 export let sidebarSize = undefined;
 export let disableStaticInputs = false;
@@ -149,7 +150,7 @@ async function updateFlowInputsStore() {
             $flowInputsStore = {};
         }
         $flowInputsStore[module.id] = {
-            flowStepWarnings: await initFlowStepWarnings(module.value, $flowStateStore?.[module.id]?.schema ?? {}, dfs($flowStore.value.modules, (fm) => fm.id))
+            flowStepWarnings: await initFlowStepWarnings(module.value, $flowStateStore?.[module.id]?.schema, dfs($flowStore.value.modules, (fm) => fm.id))
         };
     }
 }
@@ -279,6 +280,35 @@ async function updateFlowInputsStore() {
 					$flowStore = $flowStore
 				}
 			}}
+			on:changeId={({ detail }) => {
+				let { id, newId, deps } = detail
+				dfs($flowStore.value.modules, (mod) => {
+					if (deps[mod.id]) {
+						deps[mod.id].forEach((dep) => {
+							if (
+								mod.value.type == 'rawscript' ||
+								mod.value.type == 'script' ||
+								mod.value.type == 'flow'
+							) {
+								mod.value.input_transforms = Object.fromEntries(
+									Object.entries(mod.value.input_transforms).map(([k, v]) => {
+										if (v.type == 'javascript') {
+											return [k, { ...v, expr: replaceId(v.expr, id, newId) }]
+										} else {
+											return [k, v]
+										}
+									})
+								)
+							}
+						})
+					}
+					if (mod.id == id) {
+						mod.id = newId
+					}
+				})
+				$flowStore = $flowStore
+				$selectedId = newId
+			}}
 			on:deleteBranch={async ({ detail }) => {
 				if (detail.module) {
 					await removeBranch(detail.module, detail.index)

package/package/components/flows/map/InsertModuleButton.svelte

@@ -30,13 +30,13 @@ let customUi = getContext('customUi');
 			id={`flow-editor-add-step-${index}`}
 			type="button"
 			class={twMerge(
-				'w-6 h-6 flex items-center justify-center',
-				'border border-gray-300 dark:border-gray-500',
-				'text-primary text-sm',
-				'bg-surface focus:outline-none hover:bg-surface-hover focus:ring-4 focus:ring-surface-selected rounded-full '
+				'w-5 h-5 flex items-center justify-center',
+				'outline-[1px] outline dark:outline-gray-500 outline-gray-300',
+				'text-secondary',
+				'bg-surface focus:outline-none hover:bg-surface-hover   rounded '
 			)}
 		>
-			<Cross size={14} />
+			<Cross size={12} />
 		</button>
 	</svelte:fragment>
 	<div id="flow-editor-insert-module">

package/package/components/flows/map/InsertTriggerButton.svelte

@@ -23,9 +23,9 @@ $: !open && (funcDesc = '');
 		title="Add a Trigger"
 		slot="trigger"
 		type="button"
-		class="text-primary bg-surface border-[1px] mx-[1px] border-gray-300 dark:border-gray-500 rotate-180 focus:outline-none hover:bg-surface-hover focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-[25px] h-[25px] flex items-center justify-center"
+		class="text-secondary bg-surface outline-[1px] outline dark:outline-gray-500 outline-gray-300 rotate-180 focus:outline-none hover:bg-surface-hover focus:ring-4 focus:ring-gray-200 font-medium rounded text-sm w-[20px] h-[20px] flex items-center justify-center"
 	>
-		<Zap size={14} />
+		<Zap size={12} />
 	</button>
 	{#if !disableAi}
 		<StepGen {index} bind:funcDesc bind:open {close} {modules} trigger on:insert />

package/package/components/flows/map/MapItem.svelte

@@ -79,6 +79,7 @@ function onDelete(event) {
 						mod.value.skip_failures ? '(skip failures)' : ''
 					}`}
 					id={mod.id}
+					on:changeId
 					on:move={() => dispatch('move')}
 					on:delete={onDelete}
 					on:click={() => dispatch('select', mod.id)}
@@ -97,6 +98,7 @@ function onDelete(event) {
 			{:else if mod.value.type === 'branchone'}
 				<FlowModuleSchemaItem
 					deletable={insertable}
+					on:changeId
 					on:delete={onDelete}
 					on:move={() => dispatch('move')}
 					on:click={() => dispatch('select', mod.id)}
@@ -112,6 +114,7 @@ function onDelete(event) {
 			{:else if mod.value.type === 'branchall'}
 				<FlowModuleSchemaItem
 					deletable={insertable}
+					on:changeId
 					on:delete={onDelete}
 					on:move={() => dispatch('move')}
 					on:click={() => dispatch('select', mod.id)}
@@ -127,6 +130,7 @@ function onDelete(event) {
 			{:else}
 				<FlowModuleSchemaItem
 					{retries}
+					on:changeId
 					on:click={() => dispatch('select', mod.id)}
 					on:delete={onDelete}
 					on:move={() => dispatch('move')}

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

@@ -17,6 +17,7 @@ declare const __propDef: {
         } | undefined;
     };
     events: {
+        changeId: CustomEvent<any>;
         delete: CustomEvent<CustomEvent<MouseEvent>>;
         insert: CustomEvent<{
             modules: FlowModule[];