windmill-components 1.448.1 → 1.472.1

package/package/components/FlowBuilder.svelte

@@ -1,1314 +0,0 @@
-<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, MoreVertical, 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 FlowTutorials from './FlowTutorials.svelte';
-import { ignoredTutorials } from './tutorials/ignoredTutorials';
-import FlowHistory from './flows/FlowHistory.svelte';
-import ButtonDropdown from './common/button/ButtonDropdown.svelte';
-import { MenuItem } from '@rgossiaux/svelte-headlessui';
-import { twMerge } from 'tailwind-merge';
-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);
-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}
-							<ButtonDropdown hasPadding={false}>
-								<svelte:fragment slot="buttonReplacement">
-									<Button nonCaptureEvent size="xs" color="light">
-										<div class="flex flex-row items-center">
-											<MoreVertical size={14} />
-										</div>
-									</Button>
-								</svelte:fragment>
-								<svelte:fragment slot="items">
-									{#each moreItems as item}
-										<MenuItem
-											on:click={item.action}
-											disabled={item.disabled}
-											class={item.disabled ? 'opacity-50' : ''}
-										>
-											<div
-												class={twMerge(
-													'text-primary flex flex-row items-center text-left px-4 py-2 gap-2 cursor-pointer hover:bg-surface-hover !text-xs font-semibold'
-												)}
-											>
-												<svelte:component this={item.icon} size={14} />
-												{item.displayName}
-											</div>
-										</MenuItem>
-									{/each}
-								</svelte:fragment>
-							</ButtonDropdown>
-						{/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}
-					/>
-					<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
-	}}
-/>