windmill-components 1.472.1 → 1.472.3

package/package/components/FlowBuilder.svelte

@@ -0,0 +1,1293 @@
+<script>import { FlowService, ScheduleService, DraftService, ScriptService } from '../gen';
+import { initHistory, push, redo, undo } from '../history';
+import { copilotInfo, enterpriseLicense, tutorialsToDo, userStore, workspaceStore } from '../stores';
+import { cleanValueProperties, encodeState, formatCron, orderedJsonStringify, replaceFalseWithUndefined, sleep } from '../utils';
+import { sendUserToast } from '../toast';
+import { Drawer } from './common';
+import DeployOverrideConfirmationModal from './common/confirmationModal/DeployOverrideConfirmationModal.svelte';
+import { onMount, setContext, tick } from 'svelte';
+import { writable } from 'svelte/store';
+import CenteredPage from './CenteredPage.svelte';
+import { Badge, Button, UndoRedo } from './common';
+import FlowEditor from './flows/FlowEditor.svelte';
+import ScriptEditorDrawer from './flows/content/ScriptEditorDrawer.svelte';
+import { dfs as dfsApply } from './flows/dfs';
+import { dfs, getPreviousIds } from './flows/previousResults';
+import FlowImportExportMenu from './flows/header/FlowImportExportMenu.svelte';
+import FlowPreviewButtons from './flows/header/FlowPreviewButtons.svelte';
+import { cleanInputs, emptyFlowModuleState } from './flows/utils';
+import { Calendar, Pen, Save, DiffIcon, HistoryIcon, FileJson, CornerDownLeft } from 'lucide-svelte';
+import { createEventDispatcher } from 'svelte';
+import Awareness from './Awareness.svelte';
+import { getAllModules } from './flows/flowExplorer';
+import { stepCopilot, glueCopilot } from './copilot/flow';
+import FlowCopilotDrawer from './copilot/FlowCopilotDrawer.svelte';
+import FlowCopilotStatus from './copilot/FlowCopilotStatus.svelte';
+import { fade } from 'svelte/transition';
+import { loadFlowModuleState, pickScript } from './flows/flowStateUtils';
+import FlowCopilotInputsModal from './copilot/FlowCopilotInputsModal.svelte';
+import FlowBuilderTutorials from './FlowBuilderTutorials.svelte';
+import Dropdown from './DropdownV2.svelte';
+import FlowTutorials from './FlowTutorials.svelte';
+import { ignoredTutorials } from './tutorials/ignoredTutorials';
+import FlowHistory from './flows/FlowHistory.svelte';
+import CustomPopover from './CustomPopover.svelte';
+import Summary from './Summary.svelte';
+import FlowYamlEditor from './flows/header/FlowYamlEditor.svelte';
+import {} from './triggers';
+export let initialPath = '';
+export let pathStoreInit = undefined;
+export let newFlow;
+export let selectedId;
+export let initialArgs = {};
+export let loading = false;
+export let flowStore;
+export let flowStateStore;
+export let savedFlow = undefined;
+export let diffDrawer = undefined;
+export let customUi = {};
+export let disableAi = false;
+export let disabledFlowInputs = false;
+export let savedPrimarySchedule = undefined;
+export let version = undefined;
+export let setSavedraftCb = undefined;
+// Used by multiplayer deploy collision warning
+let deployedValue = undefined; // Value to diff against
+let deployedBy = undefined; // Author
+let confirmCallback = () => { }; // What happens when user clicks `override` in warning
+let open = false; // Is confirmation modal open
+$: setContext('customUi', customUi);
+export function getInitialAndModifiedValues() {
+    return {
+        savedValue: savedFlow,
+        modifiedValue: $flowStore
+    };
+}
+let onLatest = true;
+async function compareVersions() {
+    if (version === undefined) {
+        return;
+    }
+    try {
+        if (initialPath && initialPath != '') {
+            const flowVersion = await FlowService.getFlowLatestVersion({
+                workspace: $workspaceStore,
+                path: initialPath
+            });
+            onLatest = version === flowVersion?.id;
+        }
+        else {
+            onLatest = true;
+        }
+    }
+    catch (err) {
+        console.error('Error comparing versions', err);
+        onLatest = true;
+    }
+}
+const dispatch = createEventDispatcher();
+const primaryScheduleStore = writable(savedPrimarySchedule);
+const triggersCount = writable(savedPrimarySchedule
+    ? { schedule_count: 1, primary_schedule: { schedule: savedPrimarySchedule.cron } }
+    : undefined);
+const simplifiedPoll = writable(false);
+export function setPrimarySchedule(schedule) {
+    primaryScheduleStore.set(schedule);
+    loadTriggers();
+}
+async function createSchedule(path) {
+    if ($primaryScheduleStore) {
+        const { cron, timezone, args, enabled, summary } = $primaryScheduleStore;
+        try {
+            await ScheduleService.createSchedule({
+                workspace: $workspaceStore,
+                requestBody: {
+                    path: path,
+                    schedule: formatCron(cron),
+                    timezone,
+                    script_path: path,
+                    is_flow: true,
+                    args,
+                    enabled,
+                    summary
+                }
+            });
+        }
+        catch (err) {
+            sendUserToast(`The primary schedule could not be created: ${err}`, true);
+        }
+    }
+    else {
+        sendUserToast('The primary schedule could not be created: no schedule data', true);
+    }
+}
+let loadingSave = false;
+let loadingDraft = false;
+export async function saveDraft(forceSave = false) {
+    if (!newFlow && !savedFlow) {
+        return;
+    }
+    if (savedFlow) {
+        const draftOrDeployed = cleanValueProperties(savedFlow.draft || savedFlow);
+        const current = cleanValueProperties({ ...$flowStore, path: $pathStore });
+        if (!forceSave && orderedJsonStringify(draftOrDeployed) === orderedJsonStringify(current)) {
+            sendUserToast('No changes detected, ignoring', false, [
+                {
+                    label: 'Save anyway',
+                    callback: () => {
+                        saveDraft(true);
+                    }
+                }
+            ]);
+            return;
+        }
+    }
+    loadingDraft = true;
+    try {
+        const flow = cleanInputs($flowStore);
+        try {
+            localStorage.removeItem('flow');
+            localStorage.removeItem(`flow-${$pathStore}`);
+        }
+        catch (e) {
+            console.error('error interacting with local storage', e);
+        }
+        if (newFlow || savedFlow?.draft_only) {
+            if (savedFlow?.draft_only) {
+                await FlowService.deleteFlowByPath({
+                    workspace: $workspaceStore,
+                    path: initialPath
+                });
+            }
+            await FlowService.createFlow({
+                workspace: $workspaceStore,
+                requestBody: {
+                    path: $pathStore,
+                    summary: flow.summary,
+                    description: flow.description ?? '',
+                    value: flow.value,
+                    schema: flow.schema,
+                    tag: flow.tag,
+                    draft_only: true,
+                    ws_error_handler_muted: flow.ws_error_handler_muted,
+                    visible_to_runner_only: flow.visible_to_runner_only,
+                    on_behalf_of_email: flow.on_behalf_of_email
+                }
+            });
+        }
+        await DraftService.createDraft({
+            workspace: $workspaceStore,
+            requestBody: {
+                path: newFlow || savedFlow?.draft_only ? $pathStore : initialPath,
+                typ: 'flow',
+                value: {
+                    ...flow,
+                    path: $pathStore,
+                    primary_schedule: $primaryScheduleStore
+                }
+            }
+        });
+        savedFlow = {
+            ...(newFlow || savedFlow?.draft_only
+                ? {
+                    ...structuredClone($flowStore),
+                    path: $pathStore,
+                    draft_only: true
+                }
+                : savedFlow),
+            draft: {
+                ...structuredClone($flowStore),
+                path: $pathStore
+            }
+        };
+        let savedAtNewPath = false;
+        if (newFlow) {
+            dispatch('saveInitial', $pathStore);
+        }
+        else if (savedFlow?.draft_only && $pathStore !== initialPath) {
+            savedAtNewPath = true;
+            initialPath = $pathStore;
+            // this is so we can use the flow builder outside of sveltekit
+            dispatch('saveDraftOnlyAtNewPath', { path: $pathStore, selectedId: getSelectedId() });
+        }
+        dispatch('saveDraft', { path: $pathStore, savedAtNewPath, newFlow });
+        sendUserToast('Saved as draft');
+    }
+    catch (error) {
+        sendUserToast(`Error while saving the flow as a draft: ${error.body || error.message}`, true);
+        dispatch('saveDraftError', error);
+    }
+    loadingDraft = false;
+}
+onMount(() => {
+    setSavedraftCb?.(() => saveDraft());
+});
+export function computeUnlockedSteps(flow) {
+    return Object.fromEntries(getAllModules(flow.value.modules, flow.value.failure_module)
+        .filter((m) => m.value.type == 'script' && m.value.hash == null)
+        .map((m) => [m.id, m.value.path]));
+}
+async function handleSaveFlow(deploymentMsg) {
+    await compareVersions();
+    if (onLatest || initialPath == '' || savedFlow?.draft_only) {
+        // Handle directly
+        await saveFlow(deploymentMsg);
+    }
+    else {
+        // We need it for diff
+        await syncWithDeployed();
+        if (deployedValue &&
+            $flowStore &&
+            orderedJsonStringify(deployedValue) ===
+                orderedJsonStringify(replaceFalseWithUndefined({ ...$flowStore, path: $pathStore }))) {
+            await saveFlow(deploymentMsg);
+        }
+        else {
+            // Handle through confirmation modal
+            confirmCallback = async () => {
+                await saveFlow(deploymentMsg);
+            };
+            // Open confirmation modal
+            open = true;
+        }
+    }
+}
+async function syncWithDeployed() {
+    const flow = await FlowService.getFlowByPath({
+        workspace: $workspaceStore,
+        path: initialPath,
+        withStarredInfo: true
+    });
+    deployedValue = replaceFalseWithUndefined({
+        ...flow,
+        edited_at: undefined,
+        edited_by: undefined,
+        workspace_id: undefined
+    });
+    deployedBy = flow.edited_by;
+}
+async function saveFlow(deploymentMsg) {
+    loadingSave = true;
+    try {
+        const flow = cleanInputs($flowStore);
+        // console.log('flow', computeUnlockedSteps(flow)) // del
+        // loadingSave = false // del
+        // return
+        if (newFlow) {
+            try {
+                localStorage.removeItem('flow');
+                localStorage.removeItem(`flow-${$pathStore}`);
+            }
+            catch (e) {
+                console.error('error interacting with local storage', e);
+            }
+            await FlowService.createFlow({
+                workspace: $workspaceStore,
+                requestBody: {
+                    path: $pathStore,
+                    summary: flow.summary,
+                    description: flow.description ?? '',
+                    value: flow.value,
+                    schema: flow.schema,
+                    ws_error_handler_muted: flow.ws_error_handler_muted,
+                    tag: flow.tag,
+                    dedicated_worker: flow.dedicated_worker,
+                    visible_to_runner_only: flow.visible_to_runner_only,
+                    on_behalf_of_email: flow.on_behalf_of_email,
+                    deployment_message: deploymentMsg || undefined
+                }
+            });
+            if ($primaryScheduleStore && $primaryScheduleStore.enabled) {
+                await createSchedule($pathStore);
+            }
+        }
+        else {
+            try {
+                localStorage.removeItem(`flow-${initialPath}`);
+            }
+            catch (e) {
+                console.error('error interacting with local storage', e);
+            }
+            const scheduleExists = await ScheduleService.existsSchedule({
+                workspace: $workspaceStore ?? '',
+                path: initialPath
+            });
+            if (scheduleExists) {
+                const schedule = await ScheduleService.getSchedule({
+                    workspace: $workspaceStore ?? '',
+                    path: initialPath
+                });
+                if ($primaryScheduleStore) {
+                    const { cron, timezone, args, enabled, summary } = $primaryScheduleStore;
+                    if (JSON.stringify(schedule.args) != JSON.stringify(args) ||
+                        schedule.schedule != cron ||
+                        schedule.timezone != timezone ||
+                        schedule.summary != summary) {
+                        await ScheduleService.updateSchedule({
+                            workspace: $workspaceStore ?? '',
+                            path: initialPath,
+                            requestBody: {
+                                schedule: formatCron(cron),
+                                timezone,
+                                args,
+                                summary
+                            }
+                        });
+                    }
+                    if (enabled != schedule.enabled) {
+                        await ScheduleService.setScheduleEnabled({
+                            workspace: $workspaceStore ?? '',
+                            path: initialPath,
+                            requestBody: { enabled }
+                        });
+                    }
+                }
+                else if (scheduleExists && !$triggersCount?.primary_schedule) {
+                    await ScheduleService.deleteSchedule({
+                        workspace: $workspaceStore ?? '',
+                        path: $pathStore
+                    });
+                }
+            }
+            else if ($primaryScheduleStore && $primaryScheduleStore.enabled) {
+                await createSchedule(initialPath);
+            }
+            await FlowService.updateFlow({
+                workspace: $workspaceStore,
+                path: initialPath,
+                requestBody: {
+                    path: $pathStore,
+                    summary: flow.summary,
+                    description: flow.description ?? '',
+                    value: flow.value,
+                    schema: flow.schema,
+                    tag: flow.tag,
+                    dedicated_worker: flow.dedicated_worker,
+                    ws_error_handler_muted: flow.ws_error_handler_muted,
+                    visible_to_runner_only: flow.visible_to_runner_only,
+                    on_behalf_of_email: flow.on_behalf_of_email,
+                    deployment_message: deploymentMsg || undefined
+                }
+            });
+        }
+        savedFlow = {
+            ...structuredClone($flowStore),
+            path: $pathStore
+        };
+        loadingSave = false;
+        dispatch('deploy', $pathStore);
+    }
+    catch (err) {
+        dispatch('deployError', err);
+        sendUserToast(`The flow could not be saved: ${err.body}`, true);
+        loadingSave = false;
+    }
+}
+let timeout = undefined;
+$: {
+    if ($flowStore || $selectedIdStore) {
+        saveSessionDraft();
+    }
+}
+function saveSessionDraft() {
+    timeout && clearTimeout(timeout);
+    timeout = setTimeout(() => {
+        try {
+            localStorage.setItem(initialPath && initialPath != '' ? `flow-${initialPath}` : 'flow', encodeState({
+                flow: $flowStore,
+                path: $pathStore,
+                selectedId: $selectedIdStore,
+                primarySchedule: $primaryScheduleStore
+            }));
+        }
+        catch (err) {
+            console.error(err);
+        }
+    }, 500);
+}
+const selectedIdStore = writable(selectedId ?? 'settings-metadata');
+const selectedTriggerStore = writable('webhooks');
+export function getSelectedId() {
+    return $selectedIdStore;
+}
+const previewArgsStore = writable(initialArgs);
+const scriptEditorDrawer = writable(undefined);
+const moving = writable(undefined);
+const history = initHistory($flowStore);
+const pathStore = writable(pathStoreInit ?? initialPath);
+const captureOn = writable(false);
+const showCaptureHint = writable(undefined);
+const flowInputEditorStateStore = writable({
+    selectedTab: undefined,
+    editPanelSize: 0,
+    payloadData: undefined
+});
+$: initialPath && ($pathStore = initialPath);
+const testStepStore = writable({});
+function select(selectedId) {
+    selectedIdStore.set(selectedId);
+}
+function selectTrigger(selectedTrigger) {
+    selectedTriggerStore.set(selectedTrigger);
+}
+let insertButtonOpen = writable(false);
+setContext('FlowEditorContext', {
+    selectedId: selectedIdStore,
+    previewArgs: previewArgsStore,
+    scriptEditorDrawer,
+    moving,
+    history,
+    flowStateStore,
+    flowStore,
+    pathStore,
+    testStepStore,
+    saveDraft,
+    initialPath,
+    flowInputsStore: writable({}),
+    customUi,
+    insertButtonOpen,
+    executionCount: writable(0),
+    flowInputEditorState: flowInputEditorStateStore
+});
+setContext('TriggerContext', {
+    selectedTrigger: selectedTriggerStore,
+    primarySchedule: primaryScheduleStore,
+    triggersCount,
+    simplifiedPoll,
+    defaultValues: writable(undefined),
+    captureOn,
+    showCaptureHint
+});
+async function loadTriggers() {
+    $triggersCount = await FlowService.getTriggersCountOfFlow({
+        workspace: $workspaceStore,
+        path: initialPath
+    });
+    if ($primaryScheduleStore && $triggersCount.primary_schedule == undefined) {
+        $triggersCount = {
+            ...($triggersCount ?? {}),
+            schedule_count: ($triggersCount.schedule_count ?? 0) + 1,
+            primary_schedule: {
+                schedule: $primaryScheduleStore.cron
+            }
+        };
+    }
+}
+$: selectedId && select(selectedId);
+$: initialPath && initialPath != '' && $workspaceStore && loadTriggers();
+function onKeyDown(event) {
+    let classes = event.target?.['className'];
+    if ((typeof classes === 'string' && classes.includes('inputarea')) ||
+        ['INPUT', 'TEXTAREA'].includes(document.activeElement?.tagName)) {
+        return;
+    }
+    switch (event.key) {
+        case 'Z':
+            if (event.ctrlKey || event.metaKey) {
+                $flowStore = redo(history);
+                event.preventDefault();
+            }
+            break;
+        case 'z':
+            if (event.ctrlKey || event.metaKey) {
+                $flowStore = undo(history, $flowStore);
+                $selectedIdStore = 'Input';
+                event.preventDefault();
+            }
+            break;
+        case 's':
+            if (event.ctrlKey || event.metaKey) {
+                saveDraft();
+                event.preventDefault();
+            }
+            break;
+        case 'ArrowDown': {
+            if (!$insertButtonOpen) {
+                let ids = generateIds();
+                let idx = ids.indexOf($selectedIdStore);
+                if (idx > -1 && idx < ids.length - 1) {
+                    $selectedIdStore = ids[idx + 1];
+                    event.preventDefault();
+                }
+            }
+            break;
+        }
+        case 'ArrowUp': {
+            if (!$insertButtonOpen) {
+                let ids = generateIds();
+                let idx = ids.indexOf($selectedIdStore);
+                if (idx > 0 && idx < ids.length) {
+                    $selectedIdStore = ids[idx - 1];
+                    event.preventDefault();
+                }
+            }
+            break;
+        }
+    }
+}
+function generateIds() {
+    return [
+        'settings-metadata',
+        'constants',
+        'preprocessor',
+        ...dfsApply($flowStore.value.modules, (module) => module.id)
+    ];
+}
+const dropdownItems = [];
+if (customUi.topBar?.extraDeployOptions != false) {
+    if (savedFlow?.draft_only === false || savedFlow?.draft_only === undefined) {
+        dropdownItems.push({
+            label: 'Exit & see details',
+            onClick: () => dispatch('details', $pathStore)
+        });
+    }
+    if (!newFlow) {
+        dropdownItems.push({
+            label: 'Fork',
+            onClick: () => window.open(`/flows/add?template=${initialPath}`)
+        });
+    }
+}
+let flowCopilotContext = {
+    drawerStore: writable(undefined),
+    modulesStore: writable([]),
+    currentStepStore: writable(undefined),
+    genFlow: undefined,
+    shouldUpdatePropertyType: writable({}),
+    exprsToSet: writable({}),
+    generatedExprs: writable({}),
+    stepInputsLoading: writable(false)
+};
+setContext('FlowCopilotContext', flowCopilotContext);
+const { drawerStore: copilotDrawerStore, modulesStore: copilotModulesStore, currentStepStore: copilotCurrentStepStore, shouldUpdatePropertyType } = flowCopilotContext;
+let doneTs = 0;
+async function getHubCompletions(text, idx, type) {
+    try {
+        // make sure we display the results of the last request last
+        const ts = Date.now();
+        const scripts = (await ScriptService.queryHubScripts({
+            text: `${text}`,
+            limit: 3,
+            kind: type
+        })).map((s) => ({
+            ...s,
+            path: `hub/${s.version_id}/${s.app}/${s.summary.toLowerCase().replaceAll(/\s+/g, '_')}`
+        }));
+        if (ts < doneTs)
+            return;
+        doneTs = ts;
+        $copilotModulesStore[idx].hubCompletions = scripts;
+    }
+    catch (err) {
+        if (err.name !== 'CancelError')
+            throw err;
+    }
+}
+let abortController = undefined;
+let copilotLoading = false;
+let flowCopilotMode = 'sequence';
+let copilotStatus = '';
+let copilotFlowInputs = {};
+let copilotFlowRequiredInputs = [];
+let openCopilotInputsModal = false;
+function setInitCopilotModules(mode) {
+    $copilotModulesStore = [
+        {
+            id: 'a',
+            type: mode === 'trigger' ? 'trigger' : 'script',
+            description: '',
+            code: '',
+            hubCompletions: [],
+            selectedCompletion: undefined,
+            source: undefined,
+            lang: undefined
+        },
+        {
+            id: 'b',
+            type: 'script',
+            description: '',
+            code: '',
+            hubCompletions: [],
+            selectedCompletion: undefined,
+            source: undefined,
+            lang: undefined
+        }
+    ];
+}
+$: setInitCopilotModules(flowCopilotMode);
+function applyCopilotFlowInputs() {
+    const properties = {
+        ...$flowStore.schema?.properties,
+        ...copilotFlowInputs
+    };
+    const required = [
+        ...($flowStore.schema?.required ?? []),
+        ...copilotFlowRequiredInputs
+    ];
+    $flowStore.schema = {
+        $schema: 'https://json-schema.org/draft/2020-12/schema',
+        properties,
+        required,
+        type: 'object'
+    };
+}
+function clearFlowInputsFromStep(id) {
+    const module = dfs(id, $flowStore)[0];
+    if (module?.value.type === 'rawscript' || module?.value.type === 'script') {
+        // clear step inputs that start with flow_input. but not flow_input.iter
+        for (const key in module.value.input_transforms) {
+            const input = module.value.input_transforms[key];
+            if (input.type === 'javascript' &&
+                input.expr.includes('flow_input.') &&
+                !input.expr.includes('flow_input.iter')) {
+                module.value.input_transforms[key] = {
+                    type: 'static',
+                    value: undefined
+                };
+                $shouldUpdatePropertyType[key] = 'static';
+            }
+        }
+    }
+    $flowStore = $flowStore;
+}
+async function finishStepGen() {
+    copilotFlowInputs = {};
+    copilotFlowRequiredInputs = [];
+    setInitCopilotModules(flowCopilotMode);
+    copilotStatus = "Done! Just check the step's inputs and you're good to go!";
+    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);
+        let module = stepOnly ? $copilotModulesStore[0] : $copilotModulesStore[idx];
+        const aiProvider = $copilotInfo.ai_provider;
+        copilotLoading = true;
+        copilotStatus = "Generating code for step '" + module.id + "'...";
+        $copilotCurrentStepStore = module.id;
+        focusCopilot();
+        if (!stepOnly && flowModules.length > idx) {
+            select('');
+            await tick();
+            flowModules.splice(idx, flowModules.length - idx);
+            $flowStore = $flowStore;
+            focusCopilot();
+        }
+        if (idx === 0 && !stepOnly) {
+            $flowStore.schema = {
+                $schema: 'https://json-schema.org/draft/2020-12/schema',
+                properties: {},
+                required: [],
+                type: 'object'
+            };
+        }
+        if (module.type === 'trigger') {
+            $primaryScheduleStore = {
+                summary: 'Scheduled poll of flow',
+                args: {},
+                cron: '0 */15 * * *',
+                timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+                enabled: true
+            };
+        }
+        const flowModule = {
+            id: module.id,
+            stop_after_if: module.type === 'trigger'
+                ? {
+                    expr: 'result == undefined || Array.isArray(result) && result.length == 0',
+                    skip_if_stopped: true
+                }
+                : undefined,
+            value: {
+                input_transforms: {},
+                content: '',
+                language: module.lang ?? 'bun',
+                type: 'rawscript'
+            },
+            summary: module.description
+        };
+        let isHubStep = false;
+        if (module.source === 'hub' && module.selectedCompletion) {
+            isHubStep = true;
+            const [hubScriptModule, hubScriptState] = await pickScript(module.selectedCompletion.path, `${module.selectedCompletion.summary} (${module.selectedCompletion.app})`, module.id, undefined);
+            flowModule.value = hubScriptModule.value;
+            flowModule.summary = hubScriptModule.summary;
+            $flowStateStore[module.id] = hubScriptState;
+        }
+        else {
+            $flowStateStore[module.id] = emptyFlowModuleState();
+        }
+        if (stepOnly) {
+            flowModules.splice(idx, 0, flowModule);
+        }
+        else if (idx === 1 && $copilotModulesStore[idx - 1].type === 'trigger') {
+            const loopModule = {
+                id: module.id + '_loop',
+                value: {
+                    type: 'forloopflow',
+                    iterator: {
+                        type: 'javascript',
+                        expr: 'results.a'
+                    },
+                    skip_failures: true,
+                    modules: [flowModule]
+                }
+            };
+            const loopState = await loadFlowModuleState(loopModule);
+            $flowStateStore[loopModule.id] = loopState;
+            flowModules.push(loopModule);
+        }
+        else {
+            flowModules.push(flowModule);
+        }
+        $copilotDrawerStore?.closeDrawer();
+        await tick();
+        select(module.id);
+        await tick();
+        focusCopilot();
+        let isFirstInLoop = false;
+        const parents = dfs(module.id, $flowStore).slice(1);
+        if (parents[0]?.value.type === 'forloopflow' &&
+            parents[0].value.modules[0].id === module.id) {
+            isFirstInLoop = true;
+        }
+        const prevNodeId = getPreviousIds(module.id, $flowStore, false)[0];
+        const pastModule = dfs(prevNodeId, $flowStore, false)[0];
+        if (!module.source) {
+            throw new Error('Invalid copilot module source');
+        }
+        if (module.source === 'custom') {
+            const deltaStore = writable('');
+            const unsubscribe = deltaStore.subscribe(async (delta) => {
+                module.editor?.append(delta);
+            });
+            abortController = new AbortController();
+            await stepCopilot(module, deltaStore, $workspaceStore, pastModule?.value.type === 'rawscript' || pastModule?.value.type === 'script'
+                ? pastModule
+                : undefined, isFirstInLoop, abortController, aiProvider);
+            unsubscribe();
+        }
+        copilotStatus = "Generating inputs for step '" + module.id + "'...";
+        await sleep(500); // make sure code was parsed
+        try {
+            if ((flowModule.value.type === 'rawscript' || flowModule.value.type === 'script') &&
+                (pastModule === undefined ||
+                    pastModule.value.type === 'rawscript' ||
+                    pastModule.value.type === 'script')) {
+                const stepSchema = JSON.parse(JSON.stringify($flowStateStore[module.id].schema)); // deep copy
+                if (isHubStep && pastModule !== undefined && $copilotInfo.exists_ai_resource) {
+                    // ask AI to set step inputs
+                    abortController = new AbortController();
+                    const { inputs, allExprs } = await glueCopilot(flowModule.value.input_transforms, $workspaceStore, pastModule, isFirstInLoop, abortController, aiProvider);
+                    // create flow inputs used by AI for autocompletion
+                    copilotFlowInputs = {};
+                    copilotFlowRequiredInputs = [];
+                    Object.entries(allExprs).forEach(([key, expr]) => {
+                        if (expr.includes('flow_input.') && !expr.includes('flow_input.iter.')) {
+                            const flowInputKey = expr.match(/flow_input\.([A-Za-z0-9_]+)/)?.[1];
+                            if (flowInputKey !== undefined &&
+                                (!$flowStore.schema ||
+                                    !(flowInputKey in ($flowStore.schema.properties ?? {}))) // prevent overriding flow inputs
+                            ) {
+                                if (key in stepSchema.properties) {
+                                    copilotFlowInputs[flowInputKey] = stepSchema.properties[key];
+                                    if (stepSchema.required.includes(key)) {
+                                        copilotFlowRequiredInputs.push(flowInputKey);
+                                    }
+                                }
+                                else {
+                                    // when the key is nested (e.g. body.content)
+                                    const [firstKey, ...rest] = key.split('.');
+                                    const restKey = rest.join('.');
+                                    const firstKeyProperties = stepSchema.properties[firstKey]?.properties;
+                                    if (firstKeyProperties !== undefined && restKey in firstKeyProperties) {
+                                        copilotFlowInputs[flowInputKey] = firstKeyProperties[restKey];
+                                        if (firstKeyProperties[restKey].required?.includes(flowInputKey)) {
+                                            copilotFlowRequiredInputs.push(flowInputKey);
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    });
+                    if (!stepOnly) {
+                        applyCopilotFlowInputs();
+                    }
+                    // set step inputs
+                    Object.entries(inputs).forEach(([key, expr]) => {
+                        flowModule.value.input_transforms[key] = {
+                            type: 'javascript',
+                            expr
+                        };
+                        $shouldUpdatePropertyType[key] = 'javascript';
+                    });
+                }
+                else {
+                    if (isHubStep && pastModule !== undefined && !$copilotInfo.exists_ai_resource) {
+                        sendUserToast('For better input generation, enable Windmill AI in the workspace settings', true);
+                    }
+                    // create possible flow inputs for autocompletion
+                    copilotFlowInputs = {};
+                    copilotFlowRequiredInputs = [];
+                    Object.keys(flowModule.value.input_transforms).forEach((key) => {
+                        if (key !== 'prev_output') {
+                            const schema = $flowStateStore[module.id].schema;
+                            const schemaProperty = Object.entries(schema?.properties ?? {}).find((x) => x[0] === key)?.[1];
+                            const snakeKey = snakeCase(key);
+                            if (schemaProperty &&
+                                (!$flowStore.schema ||
+                                    !(snakeKey in ($flowStore?.schema?.properties ?? {}))) // prevent overriding flow inputs
+                            ) {
+                                copilotFlowInputs[snakeKey] = schemaProperty;
+                                if (schema?.required.includes(snakeKey)) {
+                                    copilotFlowRequiredInputs.push(snakeKey);
+                                }
+                            }
+                        }
+                    });
+                    if (!stepOnly) {
+                        applyCopilotFlowInputs();
+                    }
+                    // programatically set step inputs
+                    for (const key of Object.keys(flowModule.value.input_transforms)) {
+                        const snakeKey = snakeCase(key);
+                        flowModule.value.input_transforms[key] = {
+                            type: 'javascript',
+                            expr: key === 'prev_output'
+                                ? isFirstInLoop
+                                    ? 'flow_input.iter.value'
+                                    : pastModule
+                                        ? 'results.' + pastModule.id
+                                        : 'flow_input.' + snakeKey
+                                : 'flow_input.' + snakeKey
+                        };
+                        $shouldUpdatePropertyType[key] = 'javascript';
+                    }
+                }
+                $flowStore = $flowStore; // force rerendering
+            }
+            else {
+                if (pastModule !== undefined &&
+                    pastModule.value.type !== 'rawscript' &&
+                    pastModule.value.type !== 'script') {
+                    sendUserToast(`Linking to previous step ${pastModule.id} of type ${pastModule.value.type} is not yet supported`, true);
+                }
+                else {
+                    sendUserToast('Something went wrong, could not generate step inputs', true);
+                }
+            }
+        }
+        catch (err) {
+            console.error(err);
+        }
+        if (stepOnly) {
+            $copilotCurrentStepStore = undefined;
+            copilotLoading = false;
+            copilotStatus = '';
+            if (Object.keys(copilotFlowInputs).length > 0) {
+                openCopilotInputsModal = true;
+            }
+            else {
+                finishStepGen();
+            }
+        }
+        else {
+            copilotStatus =
+                "Waiting for the user to validate code and inputs of step '" + module.id + "'";
+        }
+    }
+    catch (err) {
+        if (stepOnly) {
+            copilotStatus = '';
+            $copilotCurrentStepStore = undefined;
+            setInitCopilotModules(flowCopilotMode);
+        }
+        if (err?.message) {
+            sendUserToast('Failed to generate code: ' + err.message, true);
+        }
+        else {
+            sendUserToast('Failed to generate code', true);
+            console.error(err);
+        }
+    }
+    finally {
+        copilotLoading = false;
+    }
+}
+flowCopilotContext.genFlow = genFlow;
+async function finishCopilotFlowBuilder() {
+    copilotLoading = true;
+    select('Input');
+    $copilotCurrentStepStore = 'Input';
+    copilotStatus = "Done! Just check the flow's inputs and you're good to go!";
+    $copilotCurrentStepStore = undefined;
+    copilotLoading = false;
+    await sleep(3000);
+    copilotStatus = '';
+}
+function focusCopilot() {
+    document.querySelectorAll('.splitpanes__splitter').forEach((el) => {
+        el.classList.add('hidden');
+    });
+    document.querySelectorAll('#flow-graph *').forEach((el) => {
+        if (el instanceof HTMLElement) {
+            el.style.pointerEvents = 'none';
+        }
+    });
+}
+function blurCopilot() {
+    document.querySelectorAll('.splitpanes__splitter').forEach((el) => {
+        el.classList.remove('hidden');
+    });
+    document.querySelectorAll('#flow-graph *').forEach((el) => {
+        if (el instanceof HTMLElement) {
+            el.style.pointerEvents = '';
+        }
+    });
+}
+$: $copilotCurrentStepStore === undefined && blurCopilot();
+let renderCount = 0;
+let flowTutorials = undefined;
+let jsonViewerDrawer = undefined;
+let yamlEditorDrawer = undefined;
+let flowHistory = undefined;
+export function triggerTutorial() {
+    const urlParams = new URLSearchParams(window.location.search);
+    const tutorial = urlParams.get('tutorial');
+    if (tutorial) {
+        flowTutorials?.runTutorialById(tutorial);
+    }
+    else if ($tutorialsToDo.includes(0) && !$ignoredTutorials.includes(0)) {
+        flowTutorials?.runTutorialById('action');
+    }
+}
+let moreItems = [];
+$: onCustomUiChange(customUi);
+function onCustomUiChange(customUi) {
+    moreItems = [
+        ...(customUi?.topBar?.history != false
+            ? [
+                {
+                    displayName: 'Deployment History',
+                    icon: HistoryIcon,
+                    action: () => {
+                        flowHistory?.open();
+                    },
+                    disabled: newFlow
+                }
+            ]
+            : []),
+        ...(customUi?.topBar?.history != false
+            ? [
+                {
+                    displayName: 'Export',
+                    icon: FileJson,
+                    action: () => jsonViewerDrawer?.openDrawer()
+                },
+                {
+                    displayName: 'Edit in YAML',
+                    icon: FileJson,
+                    action: () => yamlEditorDrawer?.openDrawer()
+                }
+            ]
+            : [])
+    ];
+}
+let deploymentMsg = '';
+let msgInput = undefined;
+let flowPreviewButtons;
+</script>
+
+<svelte:window on:keydown={onKeyDown} />
+
+<slot />
+
+<DeployOverrideConfirmationModal
+	bind:deployedBy
+	bind:confirmCallback
+	bind:open
+	{diffDrawer}
+	bind:deployedValue
+	currentValue={$flowStore}
+/>
+
+{#key renderCount}
+	{#if !$userStore?.operator}
+		<FlowCopilotDrawer {getHubCompletions} {genFlow} bind:flowCopilotMode />
+		{#if $pathStore}
+			<FlowHistory bind:this={flowHistory} path={$pathStore} on:historyRestore />
+		{/if}
+		<FlowYamlEditor bind:drawer={yamlEditorDrawer} />
+		<FlowImportExportMenu bind:drawer={jsonViewerDrawer} />
+		<FlowCopilotInputsModal
+			on:confirmed={async () => {
+				applyCopilotFlowInputs()
+				finishStepGen()
+			}}
+			on:canceled={async () => {
+				clearFlowInputsFromStep($copilotModulesStore[0]?.id)
+				finishStepGen()
+			}}
+			bind:open={openCopilotInputsModal}
+			inputs={Object.keys(copilotFlowInputs)}
+		/>
+		<ScriptEditorDrawer bind:this={$scriptEditorDrawer} />
+
+		<div class="flex flex-col flex-1 h-screen">
+			<!-- Nav between steps-->
+			<div
+				class="justify-between flex flex-row items-center pl-2.5 pr-6 space-x-4 scrollbar-hidden overflow-x-auto max-h-12 h-full relative"
+			>
+				{#if $copilotCurrentStepStore !== undefined}
+					<div transition:fade class="absolute inset-0 bg-gray-500 bg-opacity-75 z-[900] !m-0" />
+				{/if}
+				<div class="flex w-full max-w-md gap-4 items-center">
+					<Summary
+						disabled={customUi?.topBar?.editableSummary == false}
+						bind:value={$flowStore.summary}
+					/>
+
+					<UndoRedo
+						undoProps={{ disabled: $history.index === 0 }}
+						redoProps={{ disabled: $history.index === $history.history.length - 1 }}
+						on:undo={() => {
+							const currentModules = $flowStore?.value?.modules
+
+							$flowStore = undo(history, $flowStore)
+
+							const newModules = $flowStore?.value?.modules
+							const restoredModules = newModules?.filter(
+								(node) => !currentModules?.some((currentNode) => currentNode?.id === node?.id)
+							)
+
+							for (const mod of restoredModules) {
+								if (mod) {
+									try {
+										loadFlowModuleState(mod).then((state) => ($flowStateStore[mod.id] = state))
+									} catch (e) {
+										console.error('Error loading state for restored node', e)
+									}
+								}
+							}
+
+							$selectedIdStore = 'Input'
+						}}
+						on:redo={() => {
+							$flowStore = redo(history)
+						}}
+					/>
+				</div>
+
+				<div class="gap-4 flex-row hidden md:flex w-full max-w-md">
+					{#if $primaryScheduleStore != undefined ? $primaryScheduleStore && $primaryScheduleStore?.enabled : $triggersCount?.primary_schedule}
+						<Button
+							btnClasses="hidden lg:inline-flex"
+							startIcon={{ icon: Calendar }}
+							variant="contained"
+							color="light"
+							size="xs"
+							on:click={async () => {
+								select('triggers')
+								selectTrigger('schedules')
+							}}
+						>
+							{$primaryScheduleStore != undefined
+								? $primaryScheduleStore
+									? $primaryScheduleStore?.cron
+									: ''
+								: $triggersCount?.primary_schedule?.schedule}
+						</Button>
+					{/if}
+
+					{#if customUi?.topBar?.path != false}
+						<div class="flex justify-start w-full">
+							<div>
+								<button
+									on:click={async () => {
+										select('settings-metadata')
+										document.getElementById('path')?.focus()
+									}}
+								>
+									<Badge
+										color="gray"
+										class="center-center !bg-gray-300 !text-tertiary dark:!bg-gray-700 dark:!text-gray-300 !h-[28px]  !w-[70px] rounded-r-none"
+									>
+										<Pen size={12} class="mr-2" /> Path
+									</Badge>
+								</button>
+							</div>
+							<input
+								type="text"
+								readonly
+								value={$pathStore && $pathStore != '' ? $pathStore : 'Choose a path'}
+								class="font-mono !text-xs !min-w-[96px] !max-w-[300px] !w-full !h-[28px] !my-0 !py-0 !border-l-0 !rounded-l-none"
+								on:focus={({ currentTarget }) => {
+									currentTarget.select()
+								}}
+							/>
+						</div>
+					{/if}
+				</div>
+				<div class="flex flex-row gap-2 items-center">
+					{#if $enterpriseLicense && !newFlow}
+						<Awareness />
+					{/if}
+					<div>
+						{#if moreItems?.length > 0}
+							<Dropdown items={moreItems} />
+						{/if}
+					</div>
+					{#if customUi?.topBar?.tutorials != false}
+						<FlowBuilderTutorials
+							on:reload={() => {
+								renderCount += 1
+							}}
+						/>
+					{/if}
+					{#if customUi?.topBar?.diff != false}
+						<Button
+							color="light"
+							variant="border"
+							size="xs"
+							on:click={async () => {
+								if (!savedFlow) {
+									return
+								}
+
+								await syncWithDeployed()
+
+								diffDrawer?.openDrawer()
+								diffDrawer?.setDiff({
+									mode: 'normal',
+									deployed: deployedValue ?? savedFlow,
+									draft: savedFlow['draft'],
+									current: { ...$flowStore, path: $pathStore }
+								})
+							}}
+							disabled={!savedFlow}
+						>
+							<div class="flex flex-row gap-2 items-center">
+								<DiffIcon size={14} />
+								Diff
+							</div>
+						</Button>
+					{/if}
+					{#if !disableAi && customUi?.topBar?.aiBuilder != false}
+						<FlowCopilotStatus
+							{copilotLoading}
+							bind:copilotStatus
+							{genFlow}
+							{finishCopilotFlowBuilder}
+							{abortController}
+						/>
+					{/if}
+					<FlowPreviewButtons
+						on:openTriggers={(e) => {
+							select('triggers')
+							selectTrigger(e.detail.kind)
+							captureOn.set(true)
+							showCaptureHint.set(true)
+						}}
+						bind:this={flowPreviewButtons}
+						{loading}
+					/>
+					<Button
+						loading={loadingDraft}
+						size="xs"
+						startIcon={{ icon: Save }}
+						on:click={() => saveDraft()}
+						disabled={(!newFlow && !savedFlow) || loading}
+						shortCut={{
+							key: 'S'
+						}}
+					>
+						Draft
+					</Button>
+
+					<CustomPopover appearTimeout={0} focusEl={msgInput}>
+						<Button
+							disabled={loading}
+							loading={loadingSave}
+							size="xs"
+							startIcon={{ icon: Save }}
+							on:click={async () => {
+								await handleSaveFlow()
+							}}
+							dropdownItems={!newFlow ? dropdownItems : undefined}
+						>
+							Deploy
+						</Button>
+						<svelte:fragment slot="overlay">
+							<div class="flex flex-row gap-2 w-80">
+								<input
+									type="text"
+									placeholder="Deployment message"
+									bind:value={deploymentMsg}
+									on:keydown={async (e) => {
+										if (e.key === 'Enter') {
+											await handleSaveFlow(deploymentMsg)
+										}
+									}}
+									bind:this={msgInput}
+								/>
+								<Button
+									size="xs"
+									on:click={async () => await handleSaveFlow(deploymentMsg)}
+									endIcon={{ icon: CornerDownLeft }}
+									loading={loadingSave}
+								>
+									Deploy
+								</Button>
+							</div>
+						</svelte:fragment>
+					</CustomPopover>
+				</div>
+			</div>
+
+			<!-- metadata -->
+			{#if $flowStateStore}
+				<FlowEditor
+					{disabledFlowInputs}
+					disableAi={disableAi || customUi?.stepInputs?.ai == false}
+					disableSettings={customUi?.settingsPanel === false}
+					{loading}
+					on:reload={() => {
+						renderCount += 1
+					}}
+					{newFlow}
+					on:applyArgs={(ev) => {
+						if (ev.detail.kind === 'preprocessor') {
+							$testStepStore['preprocessor'] = ev.detail.args ?? {}
+							$selectedIdStore = 'preprocessor'
+						}
+					}}
+					on:testWithArgs={(e) => {
+						$previewArgsStore = JSON.parse(JSON.stringify(e.detail))
+						flowPreviewButtons?.openPreview(true)
+					}}
+				/>
+			{:else}
+				<CenteredPage>Loading...</CenteredPage>
+			{/if}
+		</div>
+	{:else}
+		Flow Builder not available to operators
+	{/if}
+{/key}
+
+<FlowTutorials
+	bind:this={flowTutorials}
+	on:reload={() => {
+		renderCount += 1
+	}}
+/>