windmill-components 1.408.2 → 1.430.3

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

@@ -9,6 +9,7 @@ import { Loader2, Save, DiffIcon } from 'lucide-svelte';
 import { cleanValueProperties, emptySchema, orderedJsonStringify, sendUserToast } from '../../../utils';
 import { createEventDispatcher } from 'svelte';
 import { fade } from 'svelte/transition';
+import WorkerTagSelect from '../../WorkerTagSelect.svelte';
 let scriptEditorDrawer;
 const dispatch = createEventDispatcher();
 export async function openDrawer(hash, cb) {
@@ -44,6 +45,7 @@ async function saveScript() {
                     description: script.description ?? '',
                     parent_hash: script.hash != '' ? script.hash : undefined,
                     is_template: false,
+                    tag: script.tag,
                     kind: script.kind,
                     lock: undefined
                 }
@@ -154,11 +156,15 @@ async function checkForUnsavedChanges() {
 					noSyncFromGithub
 					lang={script.language}
 					path={script.path}
+					tag={script.tag}
 					fixedOverflowWidgets={false}
 					bind:code={script.content}
 					bind:schema={script.schema}
-					tag={undefined}
-				/>
+				>
+					<div slot="editor-bar-right">
+						<WorkerTagSelect bind:tag={script.tag} />
+					</div>
+				</ScriptEditor>
 			{/key}
 		{:else}
 			<div

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

@@ -4,7 +4,7 @@ import { type FlowModule, type PathFlow, type PathScript, type RawScript, type O
 import { type Writable } from 'svelte/store';
 import type { FlowModuleState, FlowState } from './flowState';
 export declare function loadFlowModuleState(flowModule: FlowModule): Promise<FlowModuleState>;
-export declare function pickScript(path: string, summary: string, id: string, hash?: string): Promise<[FlowModule & {
+export declare function pickScript(path: string, summary: string, id: string, hash?: string, kind?: string): Promise<[FlowModule & {
     value: PathScript;
 }, FlowModuleState]>;
 export declare function pickFlow(path: string, summary: string, id: string): Promise<[FlowModule & {

package/package/components/flows/flowStateUtils.js

@@ -26,10 +26,10 @@ export async function loadFlowModuleState(flowModule) {
         return emptyFlowModuleState();
     }
 }
-export async function pickScript(path, summary, id, hash) {
+export async function pickScript(path, summary, id, hash, kind) {
     const flowModule = {
         id,
-        value: { type: 'script', path, hash, input_transforms: {} },
+        value: { type: 'script', path, hash, input_transforms: {}, is_trigger: kind === 'trigger' },
         summary
     };
     return [flowModule, await loadFlowModuleState(flowModule)];
@@ -47,7 +47,13 @@ export async function createInlineScriptModule(language, kind, subkind, id, summ
     const flowModule = {
         id,
         summary,
-        value: { type: 'rawscript', content: code, language, input_transforms: {} }
+        value: {
+            type: 'rawscript',
+            content: code,
+            language,
+            input_transforms: {},
+            is_trigger: kind === 'trigger'
+        }
     };
     return [flowModule, await loadFlowModuleState(flowModule)];
 }
@@ -167,7 +173,8 @@ export async function createScriptFromInlineScript(flowModule, suffix, schema, f
             parent_hash: undefined,
             schema,
             is_template: false,
-            language: flowModule.value.language
+            language: flowModule.value.language,
+            kind: flowModule.value.is_trigger ? 'trigger' : 'script'
         }
     });
     return pickScript(availablePath, flowModule.summary ?? '', flowModule.id, hash);

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

@@ -38,7 +38,8 @@ $: upToDisabled =
             'preprocessor',
             'constants',
             'Result',
-            'Input'
+            'Input',
+            'triggers'
         ].includes($selectedId) ||
         $selectedId?.includes('branch');
 </script>

package/package/components/flows/map/FlowConstantsItem.svelte

@@ -2,7 +2,7 @@
 import { classNames } from '../../../utils';
 import { DollarSign } from 'lucide-svelte';
 const { selectedId } = getContext('FlowEditorContext');
-$: settingsClass = classNames('border w-full rounded-sm p-2 bg-surface  text-sm cursor-pointer flex items-center', $selectedId == 'constants' ? 'outline outline-offset-1 outline-2  outline-slate-900 dark:bg-white/5 dark:outline-slate-800/60 dark:border-gray-400' : '');
+$: settingsClass = classNames('border w-full rounded-sm p-2 bg-surface  text-sm cursor-pointer flex items-center', $selectedId == 'constants' ? 'border border-1  border-slate-800 dark:bg-white/5 dark:border-slate-400/60 dark:border-gray-400' : '');
 </script>
 
 <button on:click={() => ($selectedId = 'constants')} class={settingsClass}>

package/package/components/flows/map/FlowCopilotButton.svelte

@@ -4,19 +4,18 @@ import { getContext } from 'svelte';
 import { copilotInfo } from '../../../stores';
 import { ExternalLink, Wand2 } from 'lucide-svelte';
 import { base } from '../../../base';
-import { twMerge } from 'tailwind-merge';
 let openNoCopilot = false;
 export let className = '';
 const { drawerStore: copilotDrawerStore } = getContext('FlowCopilotContext') || {};
 </script>
 
-<div class={twMerge('absolute left-1/2 transform -translate-x-1/2 z-10', className)}>
+<div class={className}>
 	<Popover>
 		<div class={openNoCopilot ? 'z-10' : ''}>
 			<Menu pointerDown noMinW placement="bottom-center" let:close bind:show={openNoCopilot}>
 				<button
 					title="AI Flow Builder"
-					on:pointerdown={$copilotInfo.exists_openai_resource_path
+					on:pointerdown={$copilotInfo.exists_ai_resource
 						? (ev) => {
 								ev.preventDefault()
 								ev.stopPropagation()
@@ -29,12 +28,12 @@ const { drawerStore: copilotDrawerStore } = getContext('FlowCopilotContext') ||
 				>
 					<Wand2 size={12} />
 				</button>
-				{#if !$copilotInfo.exists_openai_resource_path}
+				{#if !$copilotInfo.exists_ai_resource}
 					<div class="text-primary p-4">
 						<p class="text-sm w-80">
 							Enable Windmill AI in the
 							<a
-								href="{base}/workspace_settings?tab=openai"
+								href="{base}/workspace_settings?tab=ai"
 								target="_blank"
 								class="inline-flex flex-row items-center gap-1"
 								on:click={() => {

package/package/components/flows/map/FlowErrorHandlerItem.svelte

@@ -37,6 +37,7 @@ const { currentStepStore: copilotCurrentStepStore } = getContext('FlowCopilotCon
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 
 <div
+	id="flow-editor-error-handler"
 	class={classNames(
 		'z-10',
 		$copilotCurrentStepStore !== undefined ? 'border-gray-500/75' : 'cursor-pointer',

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

@@ -1,12 +1,14 @@
 <script>import Menu from '../../common/menu/MenuV2.svelte';
 import { createEventDispatcher } from 'svelte';
-import { ListFilter } from 'lucide-svelte';
+import { ListFilter, Lock, LockOpen } from 'lucide-svelte';
 import { MenuItem } from '@rgossiaux/svelte-headlessui';
+import Popover from '../../Popover.svelte';
 const dispatch = createEventDispatcher();
-export let index;
+export let id;
 export let flowJobs;
 export let flowJobsSuccess;
 export let selected;
+export let selectedManually;
 let filter = undefined;
 function onKeydown(event) {
     if (event.key === 'Enter' &&
@@ -15,16 +17,37 @@ function onKeydown(event) {
         filter < flowJobs.length &&
         filter > 0) {
         event.preventDefault();
-        dispatch('selectedIteration', { index: filter - 1, id: flowJobs[filter - 1] });
+        dispatch('selectedIteration', { index: filter - 1, id: flowJobs[filter - 1], manuallySet: true });
     }
 }
+let buttonHover = false;
 </script>
 
-<Menu maxHeight={300}>
+{#if selectedManually && flowJobsSuccess?.some((x) => x == undefined || x == null)}
+	<Popover class="absolute top-1.5 right-12 cursor-pointer">
+		<!-- svelte-ignore a11y-click-events-have-key-events -->
+		<!-- svelte-ignore a11y-no-static-element-interactions -->
+		<div on:mouseenter={() => (buttonHover = true)} on:mouseleave={() => (buttonHover = false)} on:click={(e) => {
+				buttonHover = false
+				dispatch('selectedIteration', { manuallySet: false })}
+			}>
+			{#if buttonHover}
+				<LockOpen class="text-primary" size={14} />
+			{:else}
+				<Lock class="text-primary" size={12} />
+			{/if}
+		</div>
+		<span slot="text">
+			The iteration picked is locked. Click to unlock to pick automatically new iterations.
+		</span>
+	</Popover>
+{/if}
+
+<Menu  maxHeight={300}>
 	<div slot="trigger">
 		<button
 			title="Pick an iteration"
-			id={`flow-editor-iteration picker-${index}`}
+			id={`flow-editor-iteration picker-${id}`}
 			type="button"
 			class=" text-xs bg-surface border-[1px] border-gray-300 dark:border-gray-500 focus:outline-none
 		hover:bg-surface-hover focus:ring-4 focus:ring-surface-selected font-medium rounded-sm w-[40px] gap-1 h-[20px]
@@ -36,6 +59,7 @@ function onKeydown(event) {
 			<ListFilter size={15} />
 		</button>
 	</div>
+
 	<MenuItem disabled>
 		<input type="number" bind:value={filter} on:keydown={onKeydown} />
 	</MenuItem>
@@ -50,7 +74,7 @@ function onKeydown(event) {
 						: ''}"
 					on:pointerdown={() => {
 						//close()
-						dispatch('selectedIteration', { index: idx, id })
+						dispatch('selectedIteration', { index: idx, id, manuallySet: true })
 					}}
 					role="menuitem"
 					tabindex="-1"

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

@@ -1,10 +1,11 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        index: number;
+        id: string;
         flowJobs: string[] | undefined;
         flowJobsSuccess: (boolean | undefined)[] | undefined;
         selected: number;
+        selectedManually: boolean | undefined;
     };
     events: {
         selectedIteration: CustomEvent<any>;

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

@@ -12,6 +12,7 @@ import { Drawer } from '../../common';
 import DrawerContent from '../../common/drawer/DrawerContent.svelte';
 import { getDependeeAndDependentComponents } from '../flowExplorer';
 import { replaceId } from '../flowStore';
+import FlowPropPicker from '../propPicker/FlowPropPicker.svelte';
 export let selected = false;
 export let deletable = false;
 export let retry = false;
@@ -24,18 +25,28 @@ export let mock = false;
 export let bold = false;
 export let id = undefined;
 export let label;
+export let path = '';
 export let modType = undefined;
 export let bgColor = '';
 export let concurrency = false;
 export let retries = undefined;
 export let warningMessage = undefined;
+export let isTrigger = false;
+let pickableIds = undefined;
 const { flowInputsStore } = getContext('FlowGraphContext');
 const flowEditorContext = getContext('FlowEditorContext');
 const dispatch = createEventDispatcher();
 const { currentStepStore: copilotCurrentStepStore } = getContext('FlowCopilotContext') || {};
+const propPickerContext = getContext('PropPickerContext');
+const flowPropPickerConfig = propPickerContext?.flowPropPickerConfig;
+const pickablePropertiesFiltered = propPickerContext?.pickablePropertiesFiltered;
+$: pickableIds = $pickablePropertiesFiltered?.priorIds;
 let editId = false;
 let newId = id ?? '';
 let hover = false;
+let idBadgeWidth = undefined;
+let iconWidth = undefined;
+$: marginLeft = Math.max(iconWidth ?? 0, idBadgeWidth ?? 0) * 2 + 32;
 </script>
 
 {#if deletable && id && editId}
@@ -100,7 +111,7 @@ let hover = false;
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
 	class={classNames(
-		'w-full module flex rounded-sm cursor-pointer',
+		'w-full module flex rounded-sm cursor-pointer max-w-full',
 		selected ? 'outline outline-offset-0  outline-2  outline-slate-500 dark:outline-gray-400' : '',
 		'flex relative',
 		$copilotCurrentStepStore === id ? 'z-[901]' : ''
@@ -108,7 +119,7 @@ let hover = false;
 	style="width: 275px; height: 34px; background-color: {bgColor};"
 	on:mouseenter={() => (hover = true)}
 	on:mouseleave={() => (hover = false)}
-	on:click
+	on:click|preventDefault|stopPropagation
 >
 	<div class="absolute text-sm right-12 -bottom-3 flex flex-row gap-1 z-10">
 		{#if retry}
@@ -154,7 +165,11 @@ let hover = false;
 				>
 					<Square size={12} />
 				</div>
-				<svelte:fragment slot="text">Early stop/break</svelte:fragment>
+				<svelte:fragment slot="text"
+					>{isTrigger
+						? 'Stop early if there are no new events'
+						: 'Early stop/break'}</svelte:fragment
+				>
 			</Popover>
 		{/if}
 		{#if skip}
@@ -204,16 +219,40 @@ let hover = false;
 	</div>
 
 	<div
-		class="flex gap-1 justify-between items-center w-full overflow-hidden rounded-sm
+		class="relative flex gap-1 justify-between items-center w-full overflow-hidden rounded-sm
 	 p-2 text-2xs module text-primary"
 	>
 		{#if $$slots.icon}
-			<slot name="icon" />
+			<div class="flex-none" bind:clientWidth={iconWidth}>
+				<slot name="icon" />
+			</div>
 		{/if}
-		<div class="truncate" class:font-bold={bold}>{label}</div>
-		<div class="flex items-center space-x-2 relative">
-			{#if id && id !== 'preprocessor' && !id.startsWith('failure')}
-				<Badge color="indigo">{id}</Badge>
+
+		<Popover
+			class="absolute left-1/2 transform -translate-x-1/2 center-center"
+			style="max-width: calc(100% - {marginLeft}px)"
+		>
+			<div class="text-center truncate {bold ? '!font-bold' : 'font-normal'}">
+				{label}
+			</div>
+			<svelte:fragment slot="text">
+				<div>
+					<div>{label}</div>
+					{#if path != ''}<div>{path}</div>{/if}
+				</div>
+			</svelte:fragment>
+		</Popover>
+
+		<div class="flex items-center space-x-2 relative max-w-[25%]" bind:clientWidth={idBadgeWidth}>
+			{#if id && id !== 'preprocessor' && !id.startsWith('failure') && !id.startsWith('subflow:')}
+				<Badge
+					color="indigo"
+					wrapperClass="max-w-full"
+					baseClass="max-w-full truncate !px-1"
+					title={id}
+				>
+					<span class="max-w-full text-2xs truncate">{id}</span></Badge
+				>
 				{#if deletable}
 					<button
 						class="absolute -left-[28px] 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
@@ -224,9 +263,25 @@ hover:border-blue-700 hover:!visible {hover ? '' : '!hidden'}"
 						title="Edit Id"><Pencil size={14} /></button
 					>
 				{/if}
+			{:else if id?.startsWith('subflow:')}
+				<Badge color="blue" wrapperClass="max-w-full" baseClass="!px-1" title={id}>
+					<span class="max-w-full text-2xs truncate">{id.substring('subflow:'.length)}</span></Badge
+				>
 			{/if}
 		</div>
 	</div>
+
+	{#if id && $flowPropPickerConfig && pickableIds && Object.keys(pickableIds).includes(id)}
+		<div class="absolute -bottom-[14px] right-[21px] translate-x-[50%] center-center">
+			<FlowPropPicker
+				json={{
+					[id]: pickableIds[id]
+				}}
+				prefix={'results'}
+			/>
+		</div>
+	{/if}
+
 	{#if deletable}
 		<button
 			class="absolute -top-[10px] -right-[10px] rounded-full h-[20px] w-[20px] trash center-center text-secondary

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

@@ -13,11 +13,13 @@ declare const __propDef: {
         bold?: boolean | undefined;
         id?: string | undefined;
         label: string;
+        path?: string | undefined;
         modType?: string | undefined;
         bgColor?: string | undefined;
         concurrency?: boolean | undefined;
         retries?: number | undefined;
         warningMessage?: string | undefined;
+        isTrigger?: boolean | undefined;
     };
     events: {
         click: MouseEvent;

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

@@ -10,36 +10,42 @@ import ConfirmationModal from '../../common/confirmationModal/ConfirmationModal.
 import Portal from '../../Portal.svelte';
 import { getDependentComponents } from '../flowExplorer';
 import { fade } from 'svelte/transition';
-import { copilotInfo, tutorialsToDo } from '../../../stores';
+import { copilotInfo, tutorialsToDo, workspaceStore } from '../../../stores';
 import FlowTutorials from '../../FlowTutorials.svelte';
 import { ignoredTutorials } from '../../tutorials/ignoredTutorials';
 import { tutorialInProgress } from '../../../tutorialUtils';
 import FlowGraphV2 from '../../graph/FlowGraphV2.svelte';
 import { replaceId } from '../flowStore';
+import { setScheduledPollSchedule } from '../../triggers';
 export let modules;
 export let sidebarSize = undefined;
 export let disableStaticInputs = false;
 export let disableTutorials = false;
 export let disableAi = false;
 export let disableSettings = false;
+export let newFlow = false;
 export let smallErrorHandler = false;
+export let workspace = $workspaceStore;
 let flowTutorials = undefined;
-const { selectedId, moving, history, flowStateStore, flowStore, flowInputsStore } = getContext('FlowEditorContext');
+const { selectedId, moving, history, flowStateStore, flowStore, flowInputsStore, pathStore } = getContext('FlowEditorContext');
+const { primarySchedule, triggersCount } = getContext('TriggerContext');
+const { flowPropPickerConfig } = getContext('PropPickerContext');
 async function insertNewModuleAtIndex(modules, index, kind, wsScript, wsFlow, inlineScript) {
     push(history, $flowStore);
     var module = emptyModule($flowStateStore, $flowStore, kind == 'flow');
     var state = emptyFlowModuleState();
+    $flowStateStore[module.id] = state;
     if (wsFlow) {
         ;
         [module, state] = await pickFlow(wsFlow.path, wsFlow.summary, module.id);
     }
     else if (wsScript) {
         ;
-        [module, state] = await pickScript(wsScript.path, wsScript.summary, module.id, wsScript.hash);
+        [module, state] = await pickScript(wsScript.path, wsScript.summary, module.id, wsScript.hash, kind);
     }
     else if (kind == 'forloop') {
         ;
-        [module, state] = await createLoop(module.id, !disableAi && $copilotInfo.exists_openai_resource_path);
+        [module, state] = await createLoop(module.id, !disableAi && $copilotInfo.exists_ai_resource);
     }
     else if (kind == 'whileloop') {
         ;
@@ -53,8 +59,7 @@ async function insertNewModuleAtIndex(modules, index, kind, wsScript, wsFlow, in
         ;
         [module, state] = await createBranchAll(module.id);
     }
-    $flowStateStore[module.id] = state;
-    if (inlineScript) {
+    else if (inlineScript) {
         const { language, kind, subkind } = inlineScript;
         [module, state] = await createInlineScriptModule(language, kind, subkind, module.id, module.summary);
         $flowStateStore[module.id] = state;
@@ -65,8 +70,9 @@ async function insertNewModuleAtIndex(modules, index, kind, wsScript, wsFlow, in
             module.summary = 'Approval';
         }
     }
+    $flowStateStore[module.id] = state;
     if (kind == 'approval') {
-        module.suspend = { required_events: 1 };
+        module.suspend = { required_events: 1, timeout: 1800 };
     }
     else if (kind == 'trigger') {
         module.stop_after_if = {
@@ -74,6 +80,10 @@ async function insertNewModuleAtIndex(modules, index, kind, wsScript, wsFlow, in
             skip_if_stopped: true
         };
     }
+    else if (kind == 'end') {
+        module.summary = 'Terminate flow';
+        module.stop_after_if = { skip_if_stopped: false, expr: 'true' };
+    }
     if (!modules)
         return [module];
     modules.splice(index, 0, module);
@@ -242,6 +252,9 @@ function setExpr(module, expr) {
 
 	<div class="z-10 flex-auto grow bg-surface-secondary" bind:clientHeight={minHeight}>
 		<FlowGraphV2
+			triggerNode={true}
+			path={$pathStore}
+			{newFlow}
 			{disableAi}
 			insertable
 			scroll
@@ -252,6 +265,7 @@ function setExpr(module, expr) {
 			preprocessorModule={$flowStore.value?.preprocessor_module}
 			{selectedId}
 			{flowInputsStore}
+			{workspace}
 			on:delete={({ detail }) => {
 				let e = detail.detail
 				dependents = getDependentComponents(e.id, $flowStore)
@@ -322,6 +336,7 @@ function setExpr(module, expr) {
 										undefined
 									)
 									setExpr(detail.modules[index + 1], `results.${id}`)
+									setScheduledPollSchedule(primarySchedule, triggersCount)
 								}
 							}
 						}
@@ -341,6 +356,9 @@ function setExpr(module, expr) {
 					$flowStore = $flowStore
 				}
 			}}
+			on:select={async ({ detail }) => {
+				flowPropPickerConfig.set(undefined)
+			}}
 			on:changeId={({ detail }) => {
 				let { id, newId, deps } = detail
 				dfs($flowStore.value.modules, (mod) => {

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

@@ -8,7 +8,9 @@ declare const __propDef: {
         disableTutorials?: boolean | undefined;
         disableAi?: boolean | undefined;
         disableSettings?: boolean | undefined;
+        newFlow?: boolean | undefined;
         smallErrorHandler?: boolean | undefined;
+        workspace?: string | undefined;
     };
     events: {
         reload: any;

package/package/components/flows/map/FlowSettingsItem.svelte

@@ -3,8 +3,8 @@ import { classNames } from '../../../utils';
 import { Badge } from '../../common';
 import { SlidersHorizontal } from 'lucide-svelte';
 const { selectedId, flowStore } = getContext('FlowEditorContext');
-$: settingsClass = classNames('border w-full rounded-sm p-2 bg-surface text-sm cursor-pointer flex items-center', $selectedId?.startsWith('settings')
-    ? 'outline outline-offset-1 outline-2  outline-slate-900 dark:bg-white/5 dark:outline-slate-800/60 dark:border-gray-400'
+$: settingsClass = classNames('border w-full rounded-sm p-2 bg-surface text-sm cursor-pointer flex items-center h-[32px]', $selectedId?.startsWith('settings')
+    ? 'border border-1  border-slate-800 dark:bg-white/5 dark:border-slate-400/60 dark:border-gray-400'
     : '');
 </script>
 
@@ -13,10 +13,11 @@ $: settingsClass = classNames('border w-full rounded-sm p-2 bg-surface text-sm c
 	<span
 		class="text-xs font-bold flex flex-row justify-between w-full gap-2 items-center truncate ml-1"
 	>
-		Settings
-
-		{#if $flowStore.value.same_worker}
-			<Badge color="blue" baseClass="truncate">./shared</Badge>
-		{/if}
+		<span>Settings</span>
+		<span class="h-[18px] flex items-center">
+			{#if $flowStore.value.same_worker}
+				<Badge color="blue" baseClass="truncate">./shared</Badge>
+			{/if}
+		</span>
 	</span>
 </button>

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

@@ -1,5 +1,5 @@
 <script>import { createEventDispatcher, getContext } from 'svelte';
-import { Cross, Zap } from 'lucide-svelte';
+import { Cross } from 'lucide-svelte';
 import StepGenQuick from '../../copilot/StepGenQuick.svelte';
 import FlowInputsQuick from '../content/FlowInputsQuick.svelte';
 import ToggleHubWorkspaceQuick from '../../ToggleHubWorkspaceQuick.svelte';
@@ -7,6 +7,7 @@ import { twMerge } from 'tailwind-merge';
 import TopLevelNode from '../pickers/TopLevelNode.svelte';
 import PopupV2 from '../../common/popup/PopupV2.svelte';
 import { flip, offset } from 'svelte-floating-ui/dom';
+import { SchedulePollIcon } from '../../icons';
 // import type { Writable } from 'svelte/store'
 const dispatch = createEventDispatcher();
 export let stop = false;
@@ -16,6 +17,7 @@ export let modules = [];
 export let disableAi = false;
 export let kind = 'script';
 export let allowTrigger = true;
+export let iconSize = 12;
 export let placement = 'bottom-center';
 let floatingConfig = {
     strategy: 'fixed',
@@ -31,6 +33,9 @@ let preFilter = 'all';
 let loading = false;
 let small = false;
 let open = false;
+let width = 0;
+let height = 0;
+$: displayPath = width > 650 || height > 400;
 $: small = kind === 'preprocessor' || kind === 'failure';
 </script>
 
@@ -57,29 +62,35 @@ shouldUsePortal={true} -->
 			id={`flow-editor-add-step-${index}`}
 			type="button"
 			class={twMerge(
-				'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 '
+				'w-[17.5px] h-[17.5px] 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',
+				$$props.class
 			)}
-			on:pointerdown|preventDefault|stopPropagation={pointerdown}
+			on:pointerdown|preventDefault|stopPropagation={() => {
+				dispatch('open')
+				pointerdown()
+			}}
 			on:pointerup={pointerup}
 		>
 			{#if kind === 'trigger'}
-				<Zap size={12} />
+				<SchedulePollIcon size={14} />
 			{:else}
-				<Cross size={12} />
+				<Cross size={iconSize} />
 			{/if}
 		</button>
 	</svelte:fragment>
-	<!-- FOO -->
 	<div
 		id="flow-editor-insert-module"
-		class="flex flex-col h-[400px] {small ? 'w-[450px]' : 'w-[650px]'}  pt-1 pr-1 pl-1 gap-1.5"
+		class="flex flex-col h-[400px] {small
+			? 'w-[450px]'
+			: 'w-[650px]'} pt-1 pr-1 pl-1 gap-1.5 resize overflow-auto {small
+			? 'min-w-[450px]'
+			: 'min-w-[650px]'} min-h-[400px]"
 		on:wheel={(e) => {
 			e.stopPropagation()
 		}}
 		role="none"
+		bind:clientWidth={width}
+		bind:clientHeight={height}
 	>
 		<div class="flex flex-row items-center gap-2">
 			<StepGenQuick
@@ -96,7 +107,7 @@ shouldUsePortal={true} -->
 		</div>
 
 		<div class="flex flex-row grow min-h-0">
-			{#if kind === 'script' || kind == 'trigger'}
+			{#if kind === 'script'}
 				<div class="flex-none flex flex-col text-xs text-primary">
 					<TopLevelNode
 						label="Action"
@@ -188,6 +199,7 @@ shouldUsePortal={true} -->
 				on:pickFlow
 				{preFilter}
 				{small}
+				{displayPath}
 			/>
 		</div>
 	</div>

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

@@ -2,6 +2,7 @@ import { SvelteComponent } from "svelte";
 import type { FlowModule } from '../../../gen';
 declare const __propDef: {
     props: {
+        [x: string]: any;
         stop?: boolean | undefined;
         index?: number | undefined;
         funcDesc?: string | undefined;
@@ -9,6 +10,7 @@ declare const __propDef: {
         disableAi?: boolean | undefined;
         kind?: "script" | "failure" | "trigger" | "preprocessor" | undefined;
         allowTrigger?: boolean | undefined;
+        iconSize?: number | undefined;
         placement?: "top-start" | "top-end" | "bottom-start" | "bottom-end" | "top-center" | "bottom-center" | undefined;
     };
     events: {
@@ -16,6 +18,7 @@ declare const __propDef: {
         new: CustomEvent<any>;
         pickScript: CustomEvent<any>;
         pickFlow: CustomEvent<any>;
+        open: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };