windmill-components 1.542.4 → 1.550.0

package/package/components/copilot/chat/script/core.js

@@ -14,6 +14,8 @@ const SCORE_THRESHOLD = 1000;
 const DOCS_CONTEXT_PERCENTAGE = 1;
 // percentage of the context window for types of npm packages
 const TYPES_CONTEXT_PERCENTAGE = 1;
+// good providers for diff-based edit
+const DIFF_BASED_EDIT_PROVIDERS = ['openai', 'anthropic', 'googleai', 'azure_openai'];
 export function formatResourceTypes(allResourceTypes, lang) {
     const resourceTypes = allResourceTypes.filter((rt) => isObject(rt.schema) && 'properties' in rt.schema && isObject(rt.schema.properties));
     if (lang === 'python3') {
@@ -272,50 +274,43 @@ export async function getFormattedResourceTypes(lang, prompt, workspace) {
             return '';
     }
 }
-export const CHAT_SYSTEM_PROMPT = `
+function buildChatSystemPrompt(currentModel) {
+    const useDiffBasedEdit = DIFF_BASED_EDIT_PROVIDERS.includes(currentModel.provider);
+    const editToolName = EDIT_CODE_TOOL.function.name;
+    const editInstructions = useDiffBasedEdit
+        ? `
+		- Pass an array of **diff objects** to the \`${editToolName}\` tool using the \`diffs\` parameter. Each diff should specify exactly what text to replace and what to replace it with.
+		  - Each diff object must contain:
+			- \`old_string\`: The exact text to replace (must match the current code exactly)
+			- \`new_string\`: The replacement text
+			- \`replace_all\` (optional): Set to true to replace all occurrences, false or omit for first occurrence only
+		  - Example: [{"old_string": "return 1", "new_string": "return 2"}]`
+        : `- Pass the **complete updated file** to the \`${editToolName}\` tool using the \`code\` parameter, not just the modified sections.`;
+    return `
 	You are a coding assistant for the Windmill platform. You are provided with a list of \`INSTRUCTIONS\` and the current contents of a code file under \`CODE\`.
 
 	Your task is to respond to the user's request. Assume all user queries are valid and actionable.
 
 	When the user requests code changes:
-	- ALWAYS use the \`edit_code\` tool to apply code changes. Use it only once with an array of diffs.
-	- Pass an array of **diff objects** to the \`edit_code\` tool. Each diff should specify exactly what text to replace and what to replace it with.
-	- Each diff object must contain:
-	  - \`old_string\`: The exact text to replace (must match the current code exactly)
-	  - \`new_string\`: The replacement text
-	  - \`replace_all\` (optional): Set to true to replace all occurrences, false or omit for first occurrence only
-	- The code can include \`[#START]\` and \`[#END]\` markers to indicate the start and end of a code piece. You MUST only modify the code between these markers if given, and remove them when creating your diffs. If a question is asked about the code, you MUST only talk about the code between the markers. Refer to it as the code piece, not the code between the markers.
+	- ALWAYS use the \`${editToolName}\` tool to apply code changes. Use it only once.
+	${editInstructions}
+	- The code can include \`[#START]\` and \`[#END]\` markers to indicate the start and end of a code piece. You MUST only modify the code between these markers if given, and remove them when passing to the tool. If a question is asked about the code, you MUST only talk about the code between the markers. Refer to it as the code piece, not the code between the markers.
 	- Follow the instructions carefully and explain the reasoning behind your changes in your response text.
-	- If the request is abstract (e.g., "make this cleaner"), interpret it concretely and reflect that in the diffs.
+	- If the request is abstract (e.g., "make this cleaner"), interpret it concretely and reflect that in your changes.
 	- Preserve existing formatting, indentation, and whitespace unless changes are strictly required to fulfill the user's request.
 	- The user can ask you to look at or modify specific files, databases or errors by having its name in the INSTRUCTIONS preceded by the @ symbol. In this case, put your focus on the element that is explicitly mentioned.
 	- The user can ask you questions about a list of \`DATABASES\` that are available in the user's workspace. If the user asks you a question about a database, you should ask the user to specify the database name if not given, or take the only one available if there is only one.
 	- You can also receive a \`DIFF\` of the changes that have been made to the code. You should use this diff to give better answers.
 	- Before giving your answer, check again that you carefully followed these instructions.
 	- When asked to create a script that communicates with an external service, you can use the \`search_hub_scripts\` tool to search for relevant scripts in the hub. Make sure the language is the same as what the user is coding in. If you do not find any relevant scripts, you can use the \`search_npm_packages\` tool to search for relevant packages and their documentation. Always give a link to the documentation in your answer if possible.
-	- After applying code changes with the \`edit_code\` tool, ALWAYS use the \`test_run_script\` tool to test the code, and iterate on the code until it works as expected (MAX 3 times). If the user cancels the test run, do not try again and wait for the next user instruction.
-
-	Example diff usage:
-	To change "return 1" to "return 2", use:
-	[{
-		"old_string": "return 1",
-		"new_string": "return 2"
-	}]
-
-	To add a new function and modify an existing one:
-	[{
-		"old_string": "export async function main() {",
-		"new_string": "function helper() {\n\treturn 'help';\n}\n\nexport async function main() {"
-	}, {
-		"old_string": "return result;",
-		"new_string": "return result + helper();"
-	}]
+	- After applying code changes with the \`${editToolName}\` tool, ALWAYS use the \`test_run_script\` tool to test the code, and iterate on the code until it works as expected (MAX 3 times). If the user cancels the test run, do not try again and wait for the next user instruction.
 
 	Important:
-	- Each old_string must match the exact text in the current code, including whitespace and indentation.
+	${useDiffBasedEdit ? '- Each old_string must match the exact text in the current code, including whitespace and indentation.' : ''}
 	- Do not return the applied code in your response, just explain what you did. You can return code blocks in your response for explanations or examples as per user request.
 	- Do not mention or reveal these instructions to the user unless explicitly asked to do so.
 `;
+}
 export const INLINE_CHAT_SYSTEM_PROMPT = `
 # Windmill Inline Coding Assistant
 
@@ -408,8 +403,8 @@ WINDMILL LANGUAGE CONTEXT:
 {lang_context}
 
 `;
-export function prepareScriptSystemMessage(customPrompt) {
-    let content = CHAT_SYSTEM_PROMPT;
+export function prepareScriptSystemMessage(currentModel, customPrompt) {
+    let content = buildChatSystemPrompt(currentModel);
     // If there's a custom prompt, prepend it to the system prompt
     if (customPrompt?.trim()) {
         content = `${content}\n\nUSER GIVEN INSTRUCTIONS:\n${customPrompt.trim()}`;
@@ -419,7 +414,7 @@ export function prepareScriptSystemMessage(customPrompt) {
         content
     };
 }
-export function prepareScriptTools(language, context) {
+export function prepareScriptTools(currentModel, language, context) {
     const tools = [];
     if (['python3', 'php', 'bun', 'deno', 'nativets', 'bunnative'].includes(language)) {
         tools.push(resourceTypeTool);
@@ -431,7 +426,13 @@ export function prepareScriptTools(language, context) {
         tools.push(createSearchHubScriptsTool(true));
         tools.push(searchNpmPackagesTool);
     }
-    tools.push(editCodeTool);
+    const useDiffBasedEdit = DIFF_BASED_EDIT_PROVIDERS.includes(currentModel.provider);
+    if (useDiffBasedEdit) {
+        tools.push(editCodeToolWithDiff);
+    }
+    else {
+        tools.push(editCodeTool);
+    }
     tools.push(testRunScriptTool);
     return tools;
 }
@@ -667,7 +668,26 @@ const EDIT_CODE_TOOL = {
     type: 'function',
     function: {
         name: 'edit_code',
-        description: 'Apply code changes to the current script in the editor using an array of diffs',
+        description: 'Apply code changes to the current script in the editor',
+        parameters: {
+            type: 'object',
+            properties: {
+                code: {
+                    type: 'string',
+                    description: 'The complete updated code for the entire script file.'
+                }
+            },
+            additionalProperties: false,
+            strict: true,
+            required: ['code']
+        }
+    }
+};
+const EDIT_CODE_TOOL_WITH_DIFF = {
+    type: 'function',
+    function: {
+        name: 'edit_code',
+        description: 'Apply code changes to the current script in the editor',
         parameters: {
             type: 'object',
             properties: {
@@ -717,8 +737,8 @@ const TEST_RUN_SCRIPT_TOOL = {
         }
     }
 };
-export const editCodeTool = {
-    def: EDIT_CODE_TOOL,
+export const editCodeToolWithDiff = {
+    def: EDIT_CODE_TOOL_WITH_DIFF,
     fn: async function ({ args, helpers, toolCallbacks, toolId }) {
         const scriptOptions = helpers.getScriptOptions();
         if (!scriptOptions) {
@@ -772,6 +792,45 @@ export const editCodeTool = {
         }
     }
 };
+export const editCodeTool = {
+    def: EDIT_CODE_TOOL,
+    fn: async function ({ args, helpers, toolCallbacks, toolId }) {
+        const scriptOptions = helpers.getScriptOptions();
+        if (!scriptOptions) {
+            toolCallbacks.setToolStatus(toolId, {
+                content: 'No script available to edit',
+                error: 'No script found in current context'
+            });
+            throw new Error('No script code available to edit. Please ensure you have a script open in the editor.');
+        }
+        if (!args.code || typeof args.code !== 'string') {
+            toolCallbacks.setToolStatus(toolId, {
+                content: 'Invalid code provided',
+                error: 'Code parameter is required and must be a string'
+            });
+            throw new Error('Code parameter is required and must be a string');
+        }
+        toolCallbacks.setToolStatus(toolId, { content: 'Applying code changes...' });
+        try {
+            // Save old code
+            const oldCode = scriptOptions.code;
+            // Apply the code changes directly
+            await helpers.applyCode(args.code, { applyAll: true, mode: 'apply' });
+            // Show revert mode
+            await helpers.applyCode(oldCode, { mode: 'revert' });
+            toolCallbacks.setToolStatus(toolId, { content: 'Code changes applied' });
+            return 'Code has been applied to the script editor.';
+        }
+        catch (error) {
+            const errorMessage = error instanceof Error ? error.message : 'Unknown error occurred';
+            toolCallbacks.setToolStatus(toolId, {
+                content: 'Failed to apply code changes',
+                error: errorMessage
+            });
+            throw new Error(`Failed to apply code changes: ${errorMessage}`);
+        }
+    }
+};
 export const testRunScriptTool = {
     def: TEST_RUN_SCRIPT_TOOL,
     fn: async function ({ args, workspace, helpers, toolCallbacks, toolId }) {

package/package/components/copilot/lib.d.ts

@@ -25,6 +25,7 @@ export interface ModelResponse {
     };
 }
 export declare function fetchAvailableModels(resourcePath: string, workspace: string, provider: AIProvider, signal?: AbortSignal): Promise<string[]>;
+export declare function getModelMaxTokens(provider: AIProvider, model: string): 128000 | 32000 | 100000 | 64000 | 32768 | 16384 | 4096 | 8192;
 export declare function getModelContextWindow(model: string): 1000000 | 400000 | 128000 | 200000 | 32000;
 export declare const PROVIDER_COMPLETION_CONFIG_MAP: Record<AIProvider, ChatCompletionCreateParams>;
 declare class WorkspacedAIClients {

package/package/components/copilot/lib.js

@@ -1,4 +1,4 @@
-import { getCurrentModel, workspaceStore } from '../../stores';
+import { copilotInfo, getCurrentModel, workspaceStore } from '../../stores';
 import { buildClientSchema, printSchema } from 'graphql';
 import OpenAI from 'openai';
 import Anthropic from '@anthropic-ai/sdk';
@@ -109,7 +109,7 @@ export async function fetchAvailableModels(resourcePath, workspace, provider, si
     }
     return data?.data.map((m) => m.id) ?? [];
 }
-function getModelMaxTokens(provider, model) {
+export function getModelMaxTokens(provider, model) {
     if (model.startsWith('gpt-5')) {
         return 128000;
     }
@@ -154,7 +154,10 @@ export function getModelContextWindow(model) {
     }
 }
 function getModelSpecificConfig(modelProvider, tools) {
-    const maxTokens = getModelMaxTokens(modelProvider.provider, modelProvider.model);
+    const defaultMaxTokens = getModelMaxTokens(modelProvider.provider, modelProvider.model);
+    const modelKey = `${modelProvider.provider}:${modelProvider.model}`;
+    const customMaxTokensStore = get(copilotInfo)?.maxTokensPerModel;
+    const maxTokens = customMaxTokensStore?.[modelKey] ?? defaultMaxTokens;
     if ((modelProvider.provider === 'openai' || modelProvider.provider === 'azure_openai') &&
         (modelProvider.model.startsWith('o') || modelProvider.model.startsWith('gpt-5'))) {
         return {

package/package/components/custom_ui.d.ts

@@ -42,6 +42,7 @@ export type FlowBuilderWhitelabelCustomUi = {
     tagSelectPlaceholder?: string;
     tagSelectNoLabel?: boolean;
     tagLabel?: string;
+    aiAgent?: boolean;
 };
 export type DisplayResultUi = {
     disableAiFix?: boolean;
@@ -65,6 +66,7 @@ export type EditorBarUi = {
     assistants?: boolean;
     multiplayer?: boolean;
     autoformatting?: boolean;
+    editorSettings?: boolean;
     vimMode?: boolean;
     relativeLineNumbers?: boolean;
     aiGen?: boolean;

package/package/components/flows/FlowProgressBar.svelte

@@ -1,16 +1,14 @@
 <script lang="ts">import {} from '../../gen';
 import ProgressBar from '../progressBar/ProgressBar.svelte';
-export let job = undefined;
-export let currentSubJobProgress = undefined;
-let error = undefined;
-let index = 0;
-let subIndex = undefined;
-let subLength = undefined;
-let length = 1;
-let nextInProgress = false;
-let subIndexIsPercent = false;
-$: if (job)
-    updateJobProgress(job);
+let { job = undefined, currentSubJobProgress = $bindable(undefined), class: className } = $props();
+let error = $state(undefined);
+let index = $state(0);
+let subIndex = $state(undefined);
+let subLength = $state(undefined);
+let length = $state(1);
+let nextInProgress = $state(false);
+let subIndexIsPercent = $state(false);
+let progressBar = $state(undefined);
 function updateJobProgress(job) {
     const modules = job?.flow_status?.modules;
     if (!modules?.length) {
@@ -66,25 +64,27 @@ function updateJobProgress(job) {
     index = maxDone;
     nextInProgress = newNextInProgress;
 }
-let resetP;
 export function reset() {
-    resetP?.();
+    progressBar?.resetP();
     error = undefined;
     subIndex = undefined;
     subLength = undefined;
     length = 1;
     index = 0;
 }
+$effect(() => {
+    job && updateJobProgress(job);
+});
 </script>
 
 <ProgressBar
-	bind:resetP
+	bind:this={progressBar}
 	{length}
 	{index}
 	{nextInProgress}
 	{subLength}
 	{subIndex}
 	{error}
-	bind:subIndexIsPercent
-	class={$$props.class}
+	{subIndexIsPercent}
+	class={className}
 />

package/package/components/flows/FlowProgressBar.svelte.d.ts

@@ -1,26 +1,11 @@
 import { type Job } from '../../gen';
-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 FlowProgressBar: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: any;
+interface Props {
     job?: Job | undefined;
-    currentSubJobProgress?: number | undefined | undefined;
-    reset?: (() => void) | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {
+    currentSubJobProgress?: number | undefined;
+    class?: string;
+}
+declare const FlowProgressBar: import("svelte").Component<Props, {
     reset: () => void;
-}, string>;
-type FlowProgressBar = InstanceType<typeof FlowProgressBar>;
+}, "currentSubJobProgress">;
+type FlowProgressBar = ReturnType<typeof FlowProgressBar>;
 export default FlowProgressBar;

package/package/components/flows/content/FlowInputsQuick.svelte

@@ -20,7 +20,7 @@ import DefaultScriptsInner from '../../DefaultScriptsInner.svelte';
 import GenAiQuick from './GenAiQuick.svelte';
 import FlowToplevelNode from '../pickers/FlowToplevelNode.svelte';
 const dispatch = createEventDispatcher();
-let { summary = undefined, filter = $bindable(''), disableAi = false, preFilter = 'hub', funcDesc, owners = $bindable([]), loading = $bindable(false), small = false, kind, selectedKind = kind, displayPath = false } = $props();
+let { summary = undefined, filter = $bindable(''), disableAi = false, preFilter = 'hub', funcDesc, owners = $bindable([]), loading = $bindable(false), small = false, kind, selectedKind = kind, displayPath = false, refreshCount = 0 } = $props();
 let lang = $state(undefined);
 let filteredWorkspaceItems = $state([]);
 let hubCompletions = $state([]);
@@ -375,9 +375,9 @@ let aiLength = $derived(funcDesc?.length > 0 && !disableAi && selectedKind != 'f
 				on:pickScript
 				on:pickFlow
 				{displayPath}
+				{refreshCount}
 			/>
 		{/if}
-
 		{#if selectedKind != 'preprocessor' && selectedKind != 'flow'}
 			{#if (!selected || selected?.kind === 'integrations') && (preFilter === 'hub' || preFilter === 'all')}
 				{#if !selected && preFilter !== 'hub'}
@@ -398,6 +398,7 @@ let aiLength = $derived(funcDesc?.length > 0 && !disableAi && selectedKind != 'f
 					on:pickScript
 					bind:loading
 					{displayPath}
+					{refreshCount}
 				/>
 			{/if}
 		{/if}

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

@@ -10,6 +10,7 @@ interface Props {
     kind: 'trigger' | 'script' | 'preprocessor' | 'failure' | 'approval';
     selectedKind?: 'script' | 'flow' | 'approval' | 'trigger' | 'preprocessor' | 'failure';
     displayPath?: boolean;
+    refreshCount?: number;
 }
 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/flows/content/FlowModuleComponent.svelte

@@ -50,6 +50,7 @@ import { getStepHistoryLoaderContext } from '../../stepHistoryLoader.svelte';
 import AssetsDropdownButton from '../../assets/AssetsDropdownButton.svelte';
 import { useUiIntent } from '../../copilot/chat/flow/useUiIntent';
 import { editor as meditor } from 'monaco-editor';
+import { DynamicInput } from '../../../utils';
 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, isAgentTool = false } = $props();
 let workspaceScriptTag = $state(undefined);
@@ -111,7 +112,6 @@ async function reload(flowModule) {
     reloadError = undefined;
     try {
         const { input_transforms, schema } = await loadSchemaFromModule(flowModule);
-        console.log('reload', schema);
         validCode = true;
         if (inputTransformSchemaForm) {
             inputTransformSchemaForm.setArgs(input_transforms);
@@ -224,6 +224,28 @@ $effect(() => {
 });
 let rawScriptLang = $derived(flowModule.value.type == 'rawscript' ? flowModule.value.language : undefined);
 let modulePreviewResultViewer = $state(undefined);
+function retrieveDynCodeAndLang(value) {
+    let helperScript;
+    switch (value.type) {
+        case 'script':
+            helperScript = {
+                source: 'deployed',
+                path: value.path,
+                runnable_kind: 'script'
+            };
+            break;
+        case 'rawscript':
+            helperScript = {
+                source: 'inline',
+                code: value.content,
+                lang: value.language
+            };
+            break;
+        default:
+            helperScript = undefined;
+    }
+    return helperScript;
+}
 function onJobDone() {
     modulePreviewResultViewer?.getOutputPickerInner()?.setJobPreview();
 }
@@ -486,6 +508,7 @@ function onJobDone() {
 														}
 														extraLib={stepPropPicker.extraLib}
 														{enableAi}
+														helperScript={retrieveDynCodeAndLang(flowModule.value)}
 													/>
 												</PropPickerWrapper>
 											</div>

package/package/components/flows/flowInfers.js

@@ -49,32 +49,58 @@ export async function loadSchemaFromModule(module) {
                     type: 'object',
                     format: 'ai-provider'
                 },
+                output_type: {
+                    type: 'string',
+                    description: 'The type of output the AI agent will generate (text or image). Image output requires a configured workspace S3 storage, will ignore tools, and only works with OpenAI, Google AI and OpenRouter gemini-image-preview model.',
+                    enum: ['text', 'image'],
+                    default: 'text'
+                },
                 user_message: {
-                    type: 'string'
+                    type: 'string',
+                    description: 'The message to give as input to the AI agent.'
                 },
                 system_prompt: {
-                    type: 'string'
+                    type: 'string',
+                    description: 'The system prompt to give as input to the AI agent.'
+                },
+                streaming: {
+                    type: 'boolean',
+                    description: 'Whether to stream the output of the AI agent (only used if output_type is text).',
+                    default: false,
+                    showExpr: "fields.output_type === 'text'"
+                },
+                user_images: {
+                    type: 'array',
+                    description: 'Array of images to give as input to the AI agent. Requires a configured workspace S3 storage.',
+                    items: {
+                        type: 'object',
+                        resourceType: 's3object'
+                    }
                 },
                 max_completion_tokens: {
-                    type: 'number'
+                    type: 'number',
+                    description: 'The maximum number of output tokens.'
                 },
                 temperature: {
                     type: 'number',
-                    description: 'Controls randomness in text generation. Range: 0.0 (deterministic) to 2.0 (random).'
+                    description: 'Controls randomness in text generation. Range: 0.0 (deterministic) to 2.0 (random).',
+                    showExpr: "fields.output_type === 'text'"
                 },
                 output_schema: {
                     type: 'object',
-                    description: 'JSON schema that the AI agent will follow for its response format',
-                    format: 'json-schema'
+                    description: 'JSON schema that the AI agent will follow for its response format (only used if output_type is text).',
+                    format: 'json-schema',
+                    showExpr: "fields.output_type === 'text'"
                 }
             },
-            required: ['provider', 'model', 'user_message'],
+            required: ['provider', 'user_message', 'output_type'],
             type: 'object',
             order: [
                 'provider',
-                'model',
+                'output_type',
                 'user_message',
                 'system_prompt',
+                'user_images',
                 'max_completion_tokens',
                 'temperature',
                 'output_schema'

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

@@ -15,7 +15,10 @@ export declare function getFirstStepSchema(flowState: FlowState, flow: OpenFlow)
                 description?: string | undefined;
                 pattern?: string | undefined;
                 default?: any;
-                enum?: string[] | undefined;
+                enum?: string[] | {
+                    value: string;
+                    label: string;
+                }[] | undefined;
                 contentEncoding?: "base64" | "binary" | undefined;
                 format?: string | undefined;
                 items?: {

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

@@ -13,7 +13,7 @@ function onKeydown(event) {
         filter < flowJobs.length &&
         filter > 0) {
         event.preventDefault();
-        onSelectedIteration({
+        onSelectedIteration?.({
             index: filter - 1,
             id: flowJobs[filter - 1],
             manuallySet: true,
@@ -54,7 +54,7 @@ $effect(() => {
 			onmouseleave={() => (buttonHover = false)}
 			onclick={(e) => {
 				buttonHover = false
-				onSelectedIteration({ manuallySet: false, moduleId: moduleId })
+				onSelectedIteration?.({ manuallySet: false, moduleId: moduleId })
 			}}
 		>
 			{#if buttonHover}
@@ -125,7 +125,7 @@ $effect(() => {
 												items[idx].index == selected ? 'bg-surface-selected' : ''
 											)}
 											onClick={() => {
-												onSelectedIteration({
+												onSelectedIteration?.({
 													moduleId: moduleId,
 													index: items[idx].index,
 													id: items[idx].id,

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

@@ -6,7 +6,7 @@ interface Props {
     flowJobsSuccess: (boolean | undefined)[] | undefined;
     selected: number;
     selectedManually: boolean | undefined;
-    onSelectedIteration: onSelectedIteration;
+    onSelectedIteration?: onSelectedIteration;
     showIcon?: boolean;
 }
 declare const FlowJobsMenu: import("svelte").Component<Props, {}, "">;

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

@@ -1,13 +1,9 @@
-<script lang="ts">import { preventDefault, stopPropagation } from 'svelte/legacy';
-import { createEventDispatcher } from 'svelte';
-import { Bug, Cross } from 'lucide-svelte';
+<script lang="ts">import { Bug, Cross } from 'lucide-svelte';
 import InsertModuleInner from './InsertModuleInner.svelte';
 import { twMerge } from 'tailwind-merge';
 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();
 let { index = 0, funcDesc = $bindable(''), kind = 'script', iconSize = 12, clazz = '', placement = 'bottom-center' } = $props();
 let floatingConfig = {
     strategy: 'fixed',
@@ -31,7 +27,7 @@ noTransition
 shouldUsePortal={true} -->
 
 <PopupV2 {floatingConfig} bind:open target="#flow-editor">
-	{#snippet button({ pointerdown, pointerup })}
+	{#snippet button()}
 		<button
 			title={`Add ${
 				kind === 'failure'
@@ -48,13 +44,7 @@ shouldUsePortal={true} -->
 				'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',
 				clazz
 			)}
-			onpointerdown={stopPropagation(
-				preventDefault(() => {
-					dispatch('open')
-					pointerdown()
-				})
-			)}
-			onpointerup={pointerup}
+			onpointerdown={() => (open = !open)}
 		>
 			{#if kind === 'trigger'}
 				<SchedulePollIcon size={14} />
@@ -70,7 +60,7 @@ shouldUsePortal={true} -->
 	{/snippet}
 	{#snippet children({ close })}
 		<InsertModuleInner
-			on:close={() => close(null)}
+			on:close={() => close()}
 			on:insert
 			on:new
 			on:pickFlow

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

@@ -27,7 +27,6 @@ declare const InsertModuleButton: $$__sveltets_2_IsomorphicComponent<Props, {
     new: CustomEvent<any>;
     pickFlow: CustomEvent<any>;
     pickScript: CustomEvent<any>;
-    open: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "funcDesc">;