windmill-components 1.309.7 → 1.352.0

package/package/components/EditableSchemaForm.svelte.d.ts

@@ -4,20 +4,28 @@ declare const __propDef: {
     props: {
         schema: Schema | any;
         schemaSkippedValues?: string[] | undefined;
-        schemaFieldTooltip?: Record<string, string> | undefined;
         args?: Record<string, any> | undefined;
-        autofocus?: boolean | undefined;
         shouldHideNoInputs?: boolean | undefined;
-        compact?: boolean | undefined;
         noVariablePicker?: boolean | undefined;
         flexWrap?: boolean | undefined;
-        noDelete?: boolean | undefined;
-        prettifyHeader?: boolean | undefined;
-        disablePortal?: boolean | undefined;
+        uiOnly?: boolean | undefined;
+        isFlowInput?: boolean | undefined;
+        noPreview?: boolean | undefined;
+        offset?: number | undefined;
+        jsonEnabled?: boolean | undefined;
+        isAppInput?: boolean | undefined;
+        lightweightMode?: boolean | undefined;
+        displayWebhookWarning?: boolean | undefined;
+        dndType?: string | undefined;
         class?: string | undefined;
         setDefaults?: (() => void) | undefined;
+        openField?: ((key: string) => void) | undefined;
+        deleteField?: ((key: string) => void) | undefined;
     };
     events: {
+        change: CustomEvent<any>;
+        delete: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
@@ -27,5 +35,7 @@ export type EditableSchemaFormEvents = typeof __propDef.events;
 export type EditableSchemaFormSlots = typeof __propDef.slots;
 export default class EditableSchemaForm extends SvelteComponent<EditableSchemaFormProps, EditableSchemaFormEvents, EditableSchemaFormSlots> {
     get setDefaults(): () => void;
+    get openField(): (key: string) => void;
+    get deleteField(): (key: string) => void;
 }
 export {};

package/package/components/Editor.svelte

@@ -10,10 +10,14 @@ import 'monaco-editor/esm/vs/basic-languages/typescript/typescript.contribution'
 import 'monaco-editor/esm/vs/basic-languages/sql/sql.contribution';
 import 'monaco-editor/esm/vs/basic-languages/graphql/graphql.contribution';
 import 'monaco-editor/esm/vs/basic-languages/powershell/powershell.contribution';
+import 'monaco-editor/esm/vs/basic-languages/php/php.contribution';
 import 'monaco-editor/esm/vs/language/typescript/monaco.contribution';
 import 'monaco-editor/esm/vs/basic-languages/css/css.contribution';
 import libStdContent from '../es6.d.ts.txt?raw';
+import domContent from '../dom.d.ts.txt?raw';
 import denoFetchContent from '../deno_fetch.d.ts.txt?raw';
+import processStdContent from '../process.d.ts.txt?raw';
+import windmillFetchContent from '../windmill_fetch.d.ts.txt?raw';
 import { MonacoLanguageClient } from 'monaco-languageclient';
 import { toSocket, WebSocketMessageReader, WebSocketMessageWriter } from 'vscode-ws-jsonrpc';
 import { CloseAction, ErrorAction, RequestType } from 'vscode-languageclient';
@@ -41,7 +45,6 @@ export let formatAction = undefined;
 export let automaticLayout = true;
 export let websocketAlive = {
     pyright: false,
-    black: false,
     ruff: false,
     deno: false,
     go: false,
@@ -102,6 +105,11 @@ export function arrowDown() {
         }
     }
 }
+export function backspace() {
+    if (editor) {
+        editor.trigger('keyboard', 'deleteLeft', {});
+    }
+}
 export function insertAtBeginning(code) {
     if (editor) {
         const range = { startLineNumber: 1, startColumn: 1, endLineNumber: 1, endColumn: 1 };
@@ -547,7 +555,7 @@ export async function reloadWebsocket() {
         }
     }
     const wsProtocol = BROWSER && window.location.protocol == 'https:' ? 'wss' : 'ws';
-    const hostname = BROWSER ? window.location.protocol + '//' + window.location.host : 'SSR';
+    const hostname = getHostname();
     let encodedImportMap = '';
     // if (lang == 'typescript') {
     // 	let worker = await languages.typescript.getTypeScriptWorker()
@@ -612,82 +620,6 @@ export async function reloadWebsocket() {
                 ];
             });
         }
-        else if (lang === 'typescript') {
-            const stdLib = { content: libStdContent, filePath: 'es6.d.ts' };
-            if (scriptLang == 'bun') {
-                languages.typescript.typescriptDefaults.setExtraLibs([stdLib]);
-            }
-            else {
-                const denoFetch = { content: denoFetchContent, filePath: 'deno_fetch.d.ts' };
-                languages.typescript.typescriptDefaults.setExtraLibs([stdLib, denoFetch]);
-            }
-            if (scriptLang == 'bun' && ata == undefined) {
-                const addLibraryToRuntime = async (code, _path) => {
-                    const path = 'file://' + _path;
-                    let uri = mUri.parse(path);
-                    console.log('adding library to runtime', path);
-                    languages.typescript.typescriptDefaults.addExtraLib(code, path);
-                    try {
-                        await vscode.workspace.fs.writeFile(uri, new TextEncoder().encode(code));
-                    }
-                    catch (e) {
-                        console.log('error writing file', e);
-                    }
-                };
-                const addLocalFile = async (code, _path) => {
-                    let p = new URL(_path, uri).href;
-                    // if (_path?.startsWith('/')) {
-                    // 	p = 'file://' + p
-                    // }
-                    let nuri = mUri.parse(p);
-                    console.log('adding local file', _path, nuri.toString());
-                    if (editor) {
-                        let localModel = meditor.getModel(nuri);
-                        if (localModel) {
-                            localModel.setValue(code);
-                        }
-                        else {
-                            meditor.createModel(code, 'javascript', nuri);
-                        }
-                        try {
-                            if (model) {
-                                model?.setValue(model.getValue());
-                            }
-                        }
-                        catch (e) {
-                            console.log('error resetting model', e);
-                        }
-                    }
-                };
-                await initWasm();
-                const root = await genRoot(hostname);
-                console.log('SETUP TYPE ACQUISITION', { root, path });
-                ata = setupTypeAcquisition({
-                    projectName: 'Windmill',
-                    depsParser: (c) => {
-                        return parseDeps(c);
-                    },
-                    root,
-                    scriptPath: path,
-                    logger: console,
-                    delegate: {
-                        receivedFile: addLibraryToRuntime,
-                        localFile: addLocalFile,
-                        progress: (downloaded, total) => {
-                            // console.log({ dl, ttl })
-                        },
-                        started: () => {
-                            console.log('ATA start');
-                        },
-                        finished: (f) => {
-                            console.log('ATA done');
-                        }
-                    }
-                });
-                ata?.('import "bun-types"');
-                ata?.(code);
-            }
-        }
         else if (lang === 'python') {
             await connectToLanguageServer(`${wsProtocol}://${window.location.host}/ws/pyright`, 'pyright', {}, (params, token, next) => {
                 if (params.items.find((x) => x.section === 'python')) {
@@ -715,17 +647,6 @@ export async function reloadWebsocket() {
                 return next(params, token);
             });
             connectToLanguageServer(`${wsProtocol}://${window.location.host}/ws/ruff`, 'ruff', {}, undefined);
-            connectToLanguageServer(`${wsProtocol}://${window.location.host}/ws/diagnostic`, 'black', {
-                formatters: {
-                    black: {
-                        command: 'black',
-                        args: ['--quiet', '-']
-                    }
-                },
-                formatFiletypes: {
-                    python: 'black'
-                }
-            }, undefined);
         }
         else if (lang === 'go') {
             connectToLanguageServer(`${wsProtocol}://${window.location.host}/ws/go`, 'go', {
@@ -772,8 +693,7 @@ export async function reloadWebsocket() {
             if (document.visibilityState == 'visible') {
                 if (!lastWsAttempt ||
                     (new Date().getTime() - lastWsAttempt.getTime() > 60000 && nbWsAttempt < 2)) {
-                    if (!websocketAlive.black &&
-                        !websocketAlive.deno &&
+                    if (!websocketAlive.deno &&
                         !websocketAlive.pyright &&
                         !websocketAlive.go &&
                         !websocketAlive.shellcheck &&
@@ -796,6 +716,9 @@ export async function reloadWebsocket() {
     }
 }
 let pathTimeout = undefined;
+function getHostname() {
+    return BROWSER ? window.location.protocol + '//' + window.location.host : 'SSR';
+}
 function handlePathChange() {
     console.log('path changed, reloading language server', initialPath, path);
     initialPath = path;
@@ -871,6 +794,7 @@ async function loadMonaco() {
         noUnusedLocals: true,
         strict: true,
         noLib: false,
+        allowImportingTsExtensions: true,
         moduleResolution: languages.typescript.ModuleResolutionKind.NodeJs
     });
     languages.typescript.javascriptDefaults.setModeConfiguration({
@@ -980,8 +904,11 @@ async function loadMonaco() {
             code = getCode();
             shouldBindKey && cmdEnterAction && cmdEnterAction();
         });
-        if (!websocketAlive.black &&
-            !websocketAlive.deno &&
+        editor.addCommand(KeyMod.CtrlCmd | KeyMod.Shift | KeyCode.Digit7, function () {
+            // CMD + slash (toggle comment) on some EU keyboards
+            editor?.trigger('keyboard', 'editor.action.commentLine', {});
+        });
+        if (!websocketAlive.deno &&
             !websocketAlive.pyright &&
             !websocketAlive.ruff &&
             !websocketAlive.shellcheck &&
@@ -993,6 +920,7 @@ async function loadMonaco() {
         }
     });
     reloadWebsocket();
+    setTypescriptExtraLibs();
     return () => {
         console.log('disposing editor');
         ata = undefined;
@@ -1007,6 +935,97 @@ async function loadMonaco() {
         }
     };
 }
+async function setTypescriptExtraLibs() {
+    if (lang === 'typescript' && scriptLang != 'deno') {
+        const hostname = getHostname();
+        const stdLib = { content: libStdContent, filePath: 'es6.d.ts' };
+        if (scriptLang == 'bun') {
+            const processLib = { content: processStdContent, filePath: 'process.d.ts' };
+            const domLib = { content: domContent, filePath: 'dom.d.ts' };
+            languages.typescript.typescriptDefaults.setExtraLibs([stdLib, domLib, processLib]);
+        }
+        else {
+            const denoFetch = { content: denoFetchContent, filePath: 'deno_fetch.d.ts' };
+            languages.typescript.typescriptDefaults.setExtraLibs([stdLib, denoFetch]);
+            let localContent = windmillFetchContent;
+            let p = '/tmp/monaco/windmill.d.ts';
+            let nuri = mUri.parse(p);
+            let localModel = meditor.getModel(nuri);
+            if (localModel) {
+                localModel.setValue(localContent);
+            }
+            else {
+                meditor.createModel(localContent, 'typescript', nuri);
+            }
+        }
+        if (scriptLang == 'bun' && ata == undefined) {
+            const addLibraryToRuntime = async (code, _path) => {
+                const path = 'file://' + _path;
+                let uri = mUri.parse(path);
+                console.log('adding library to runtime', path);
+                languages.typescript.typescriptDefaults.addExtraLib(code, path);
+                try {
+                    await vscode.workspace.fs.writeFile(uri, new TextEncoder().encode(code));
+                }
+                catch (e) {
+                    console.log('error writing file', e);
+                }
+            };
+            const addLocalFile = async (code, _path) => {
+                let p = new URL(_path, uri).href;
+                // if (_path?.startsWith('/')) {
+                // 	p = 'file://' + p
+                // }
+                let nuri = mUri.parse(p);
+                console.log('adding local file', _path, nuri.toString());
+                if (editor) {
+                    let localModel = meditor.getModel(nuri);
+                    if (localModel) {
+                        localModel.setValue(code);
+                    }
+                    else {
+                        meditor.createModel(code, 'typescript', nuri);
+                    }
+                    try {
+                        if (model) {
+                            model?.setValue(model.getValue());
+                        }
+                    }
+                    catch (e) {
+                        console.log('error resetting model', e);
+                    }
+                }
+            };
+            await initWasm();
+            const root = await genRoot(hostname);
+            console.log('SETUP TYPE ACQUISITION', { root, path });
+            ata = setupTypeAcquisition({
+                projectName: 'Windmill',
+                depsParser: (c) => {
+                    return parseDeps(c);
+                },
+                root,
+                scriptPath: path,
+                logger: console,
+                delegate: {
+                    receivedFile: addLibraryToRuntime,
+                    localFile: addLocalFile,
+                    progress: (downloaded, total) => {
+                        // console.log({ dl, ttl })
+                    },
+                    started: () => {
+                        console.log('ATA start');
+                    },
+                    finished: (f) => {
+                        console.log('ATA done');
+                    }
+                }
+            });
+            ata?.('import "bun-types"');
+            ata?.(code);
+        }
+    }
+}
 export function addAction(id, label, callback, keybindings = []) {
     editor?.addAction({
         id,

package/package/components/Editor.svelte.d.ts

@@ -7,6 +7,7 @@ import 'monaco-editor/esm/vs/basic-languages/typescript/typescript.contribution'
 import 'monaco-editor/esm/vs/basic-languages/sql/sql.contribution';
 import 'monaco-editor/esm/vs/basic-languages/graphql/graphql.contribution';
 import 'monaco-editor/esm/vs/basic-languages/powershell/powershell.contribution';
+import 'monaco-editor/esm/vs/basic-languages/php/php.contribution';
 import 'monaco-editor/esm/vs/language/typescript/monaco.contribution';
 import 'monaco-editor/esm/vs/basic-languages/css/css.contribution';
 import { type Preview } from '../gen';
@@ -14,14 +15,13 @@ import type { Text } from 'yjs';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        lang: 'typescript' | 'python' | 'go' | 'shell' | 'sql' | 'graphql' | 'powershell' | 'css' | 'javascript';
+        lang: 'typescript' | 'python' | 'go' | 'shell' | 'sql' | 'graphql' | 'powershell' | 'php' | 'css' | 'javascript';
         code?: string | undefined;
         cmdEnterAction?: (() => void) | undefined;
         formatAction?: (() => void) | undefined;
         automaticLayout?: boolean | undefined;
         websocketAlive?: {
             pyright: boolean;
-            black: boolean;
             ruff: boolean;
             deno: boolean;
             go: boolean;
@@ -42,6 +42,7 @@ declare const __propDef: {
         getCode?: (() => string) | undefined;
         insertAtCursor?: ((code: string) => void) | undefined;
         arrowDown?: (() => void) | undefined;
+        backspace?: (() => void) | undefined;
         insertAtBeginning?: ((code: string) => void) | undefined;
         insertAtLine?: ((code: string, line: number) => void) | undefined;
         getSelectedLines?: (() => string | undefined) | undefined;
@@ -70,6 +71,7 @@ export default class Editor extends SvelteComponent<EditorProps, EditorEvents, E
     get getCode(): () => string;
     get insertAtCursor(): (code: string) => void;
     get arrowDown(): () => void;
+    get backspace(): () => void;
     get insertAtBeginning(): (code: string) => void;
     get insertAtLine(): (code: string, line: number) => void;
     get getSelectedLines(): () => string | undefined;

package/package/components/EditorBar.svelte

@@ -4,7 +4,6 @@
 <script>import { ResourceService, VariableService } from '../gen';
 import { workspaceStore } from '../stores';
 import ItemPicker from './ItemPicker.svelte';
-import ResourceEditor from './ResourceEditor.svelte';
 import VariableEditor from './VariableEditor.svelte';
 import Button from './common/button/Button.svelte';
 import HighlightCode from './HighlightCode.svelte';
@@ -27,6 +26,7 @@ import ScriptGen from './copilot/ScriptGen.svelte';
 import { getResetCode } from '../script_helpers';
 import CodeCompletionStatus from './copilot/CodeCompletionStatus.svelte';
 import Popover from './Popover.svelte';
+import ResourceEditorDrawer from './ResourceEditorDrawer.svelte';
 export let lang;
 export let editor;
 export let websocketAlive;
@@ -52,11 +52,40 @@ let showContextVarPicker = false;
 let showVarPicker = false;
 let showResourcePicker = false;
 let showResourceTypePicker = false;
-$: showContextVarPicker = ['python3', 'bash', 'powershell', 'go', 'deno', 'bun'].includes(lang ?? '');
-$: showVarPicker = ['python3', 'bash', 'powershell', 'go', 'deno', 'bun'].includes(lang ?? '');
-$: showResourcePicker = ['python3', 'bash', 'powershell', 'go', 'deno', 'bun'].includes(lang ?? '');
+$: showContextVarPicker = [
+    'python3',
+    'bash',
+    'powershell',
+    'go',
+    'deno',
+    'bun',
+    'nativets',
+    'php'
+].includes(lang ?? '');
+$: showVarPicker = [
+    'python3',
+    'bash',
+    'powershell',
+    'go',
+    'deno',
+    'bun',
+    'nativets',
+    'php'
+].includes(lang ?? '');
+$: showResourcePicker = [
+    'python3',
+    'bash',
+    'powershell',
+    'go',
+    'deno',
+    'bun',
+    'nativets',
+    'php'
+].includes(lang ?? '');
 $: showResourceTypePicker =
-    ['typescript', 'javascript'].includes(scriptLangToEditorLang(lang)) || lang === 'python3';
+    ['typescript', 'javascript'].includes(scriptLangToEditorLang(lang)) ||
+        lang === 'python3' ||
+        lang === 'php';
 let codeViewer;
 let codeObj = undefined;
 function addEditorActions() {
@@ -134,12 +163,51 @@ async function resourceTypePickCallback(name) {
             editor.insertAtBeginning('from typing import TypedDict\n');
         }
     }
+    else if (lang === 'php') {
+        const phpSchema = phpCompile(resourceType.schema);
+        const rtName = toCamel(capitalize(name));
+        editor.insertAtCursor(`if (!class_exists('${rtName}')) {\nclass ${rtName} {\n${phpSchema}\n`);
+        editor.backspace();
+        editor.insertAtCursor('}');
+    }
     else {
         const tsSchema = compile(resourceType.schema);
-        editor.insertAtCursor(`type ${toCamel(capitalize(name))} = ${tsSchema}\n`);
+        editor.insertAtCursor(`type ${toCamel(capitalize(name))} = ${tsSchema}`);
     }
     sendUserToast(`${name} inserted at cursor`);
 }
+function phpCompile(schema) {
+    let res = '  ';
+    const entries = Object.entries(schema.properties);
+    if (entries.length === 0) {
+        return 'array';
+    }
+    let i = 0;
+    for (let [name, prop] of entries) {
+        let typ = 'array';
+        if (prop.type === 'array') {
+            typ = 'array';
+        }
+        else if (prop.type === 'string') {
+            typ = 'string';
+        }
+        else if (prop.type === 'number') {
+            typ = 'float';
+        }
+        else if (prop.type === 'integer') {
+            typ = 'int';
+        }
+        else if (prop.type === 'boolean') {
+            typ = 'bool';
+        }
+        res += `public ${typ} $${name};`;
+        i++;
+        if (i < entries.length) {
+            res += '\n';
+        }
+    }
+    return res;
+}
 function pythonCompile(schema) {
     let res = '';
     const entries = Object.entries(schema.properties);
@@ -218,8 +286,8 @@ let historyBrowserDrawerOpen = false;
 		if (!editor) return
 		if (lang == 'deno') {
 			editor.insertAtCursor(`Deno.env.get('${name}')`)
-		} else if (lang === 'bun') {
-			editor.insertAtCursor(`Bun.env["${name}"]`)
+		} else if (lang === 'bun' || lang == 'nativets') {
+			editor.insertAtCursor(`process.env["${name}"]`)
 		} else if (lang == 'python3') {
 			if (!editor.getCode().includes('import os')) {
 				editor.insertAtBeginning('import os\n')
@@ -234,6 +302,8 @@ let historyBrowserDrawerOpen = false;
 			editor.insertAtCursor(`$${name}`)
 		} else if (lang == 'powershell') {
 			editor.insertAtCursor(`$Env:${name}`)
+		} else if (lang == 'php') {
+			editor.insertAtCursor(`getenv('${name}');`)
 		}
 		sendUserToast(`${name} inserted at cursor`)
 	}}
@@ -279,6 +349,17 @@ let historyBrowserDrawerOpen = false;
 			editor.insertAtCursor(
 				`\nInvoke-RestMethod -Headers $Headers -Uri "$Env:BASE_INTERNAL_URL/api/w/$Env:WM_WORKSPACE/variables/get_value/${path}"`
 			)
+		} else if (lang == 'nativets') {
+			const code = editor.getCode()
+			if (!code.includes(`import * as wmill from`)) {
+				editor.insertAtBeginning(`import * as wmill from "./windmill.ts"\n`)
+			}
+			editor.insertAtCursor(`(await wmill.getVariable('${path}'))`)
+		} else if (lang == 'php') {
+			editor.insertAtCursor(`$ch = curl_init(getenv('BASE_INTERNAL_URL') . '/api/w/' . getenv('WM_WORKSPACE') . '/variables/get_value/${path}');
+curl_setopt($ch, CURLOPT_HTTPHEADER, array('Authorization: Bearer ' . getenv('WM_TOKEN')));
+curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
+$var = json_decode(curl_exec($ch));`)
 		}
 		sendUserToast(`${name} inserted at cursor`)
 	}}
@@ -338,6 +419,17 @@ let historyBrowserDrawerOpen = false;
 			editor.insertAtCursor(
 				`\nInvoke-RestMethod -Headers $Headers -Uri "$Env:BASE_INTERNAL_URL/api/w/$Env:WM_WORKSPACE/resources/get_value_interpolated/${path}"`
 			)
+		} else if (lang == 'nativets') {
+			const code = editor.getCode()
+			if (!code.includes(`import * as wmill from`)) {
+				editor.insertAtBeginning(`import * as wmill from "./windmill.ts"\n`)
+			}
+			editor.insertAtCursor(`(await wmill.getResource('${path}'))`)
+		} else if (lang == 'php') {
+			editor.insertAtCursor(`$ch = curl_init(getenv('BASE_INTERNAL_URL') . '/api/w/' . getenv('WM_WORKSPACE') . '/resources/get_value_interpolated/${path}');
+curl_setopt($ch, CURLOPT_HTTPHEADER, array('Authorization: Bearer ' . getenv('WM_TOKEN')));
+curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
+$res = json_decode(curl_exec($ch));`)
 		}
 		sendUserToast(`${path} inserted at cursor`)
 	}}
@@ -378,7 +470,7 @@ let historyBrowserDrawerOpen = false;
 			await ResourceService.listResourceType({ workspace: $workspaceStore ?? 'NO_W' })}
 	/>
 {/if}
-<ResourceEditor bind:this={resourceEditor} on:refresh={resourcePicker.openDrawer} />
+<ResourceEditorDrawer bind:this={resourceEditor} on:refresh={resourcePicker.openDrawer} />
 <VariableEditor bind:this={variableEditor} on:create={variablePicker.openDrawer} />
 
 <div class="flex justify-between items-center overflow-y-auto w-full p-0.5">
@@ -482,7 +574,6 @@ let historyBrowserDrawerOpen = false;
 							(<span class={websocketAlive.go ? 'green' : 'text-red-700'}>Go</span>)
 						{:else if lang == 'python3'}
 							(<span class={websocketAlive.pyright ? 'green' : 'text-red-700'}>Pyright</span>
-							<span class={websocketAlive.black ? 'green' : 'text-red-700'}>Black</span>
 							<span class={websocketAlive.ruff ? 'green' : 'text-red-700'}>Ruff</span>)
 						{:else if lang == 'bash'}
 							(<span class={websocketAlive.shellcheck ? 'green' : 'text-red-700'}>Shellcheck</span>)

package/package/components/EditorBar.svelte.d.ts

@@ -9,7 +9,6 @@ declare const __propDef: {
         editor: Editor | undefined;
         websocketAlive: {
             pyright: boolean;
-            black: boolean;
             ruff: boolean;
             deno: boolean;
             go: boolean;

package/package/components/ErrorOrRecoveryHandler.svelte

@@ -75,7 +75,6 @@ async function sendSlackMessage(channel) {
     });
 }
 async function loadHandlerScriptArgs(p, defaultArgs = []) {
-    console.log(p);
     try {
         let schema = emptySchema();
         if (p.startsWith('hub/')) {

package/package/components/FlowBuilder.svelte

@@ -25,11 +25,9 @@ import FlowCopilotStatus from './copilot/FlowCopilotStatus.svelte';
 import { fade } from 'svelte/transition';
 import { loadFlowModuleState, pickScript } from './flows/flowStateUtils';
 import FlowCopilotInputsModal from './copilot/FlowCopilotInputsModal.svelte';
-import { snakeCase } from 'lodash';
 import FlowBuilderTutorials from './FlowBuilderTutorials.svelte';
 import FlowTutorials from './FlowTutorials.svelte';
 import { ignoredTutorials } from './tutorials/ignoredTutorials';
-import { cloneDeep } from 'lodash';
 export let initialPath = '';
 export let pathStoreInit = undefined;
 export let newFlow;
@@ -129,13 +127,13 @@ async function saveDraft(forceSave = false) {
         savedFlow = {
             ...(newFlow || savedFlow?.draft_only
                 ? {
-                    ...cloneDeep($flowStore),
+                    ...structuredClone($flowStore),
                     path: $pathStore,
                     draft_only: true
                 }
                 : savedFlow),
             draft: {
-                ...cloneDeep($flowStore),
+                ...structuredClone($flowStore),
                 path: $pathStore
             }
         };
@@ -252,7 +250,7 @@ async function saveFlow() {
             });
         }
         savedFlow = {
-            ...cloneDeep($flowStore),
+            ...structuredClone($flowStore),
             path: $pathStore
         };
         loadingSave = false;
@@ -317,7 +315,8 @@ setContext('FlowEditorContext', {
     pathStore,
     testStepStore,
     saveDraft,
-    initialPath
+    initialPath,
+    flowInputsStore: writable({})
 });
 async function loadSchedule() {
     loadFlowSchedule(initialPath, $workspaceStore)
@@ -512,6 +511,15 @@ async function finishStepGen() {
     await sleep(3000);
     copilotStatus = '';
 }
+function snakeCase(e) {
+    if (e.toLowerCase() === e) {
+        return e;
+    }
+    return (e
+        .match(/([A-Z])/g)
+        ?.reduce((str, c) => str.replace(new RegExp(c), '_' + c.toLowerCase()), e)
+        ?.substring(e.slice(0, 1).match(/([A-Z])/g) ? 1 : 0) ?? e);
+}
 async function genFlow(idx, flowModules, stepOnly = false) {
     try {
         push(history, $flowStore);

package/package/components/FlowGraphViewer.svelte

@@ -26,6 +26,7 @@ const dispatch = createEventDispatcher();
 					stepDetail = e.detail
 					dispatch('select', stepDetail)
 				}}
+				rebuildOnChange={flow}
 			/>
 		</div>
 	{/if}
@@ -36,7 +37,7 @@ const dispatch = createEventDispatcher();
 				noGraph ? 'border-0 w-max' : ''
 			)}
 		>
-			<FlowGraphViewerStep {flow} {stepDetail} />
+			<FlowGraphViewerStep schema={flow.schema} {stepDetail} />
 		</div>
 	{/if}
 </div>