diff --git a/frontend/src/lib/components/FlowBuilder.svelte b/frontend/src/lib/components/FlowBuilder.svelte index 39594c5b70..c9d0dcf257 100644 --- a/frontend/src/lib/components/FlowBuilder.svelte +++ b/frontend/src/lib/components/FlowBuilder.svelte @@ -1529,6 +1529,7 @@ $previewArgsStore = JSON.parse(JSON.stringify(e.detail)) flowPreviewButtons?.openPreview(true) }} + {savedFlow} /> {:else} Loading... diff --git a/frontend/src/lib/components/flows/FlowEditor.svelte b/frontend/src/lib/components/flows/FlowEditor.svelte index 3250fc9ee6..411a5e9311 100644 --- a/frontend/src/lib/components/flows/FlowEditor.svelte +++ b/frontend/src/lib/components/flows/FlowEditor.svelte @@ -12,6 +12,7 @@ import { writable } from 'svelte/store' import type { PropPickerContext, FlowPropPickerConfig } from '$lib/components/prop_picker' import type { PickableProperties } from '$lib/components/flows/previousResults' + import type { Flow } from '$lib/gen' const { flowStore } = getContext('FlowEditorContext') export let loading: boolean @@ -22,7 +23,11 @@ export let disabledFlowInputs = false export let smallErrorHandler = false export let newFlow: boolean = false - + export let savedFlow: + | (Flow & { + draft?: Flow | undefined + }) + | undefined = undefined let size = 50 const { currentStepStore: copilotCurrentStepStore } = @@ -75,6 +80,7 @@ {/each} {/key} diff --git a/frontend/src/lib/components/flows/content/FlowModuleComponent.svelte b/frontend/src/lib/components/flows/content/FlowModuleComponent.svelte index f52c113457..b977e061a7 100644 --- a/frontend/src/lib/components/flows/content/FlowModuleComponent.svelte +++ b/frontend/src/lib/components/flows/content/FlowModuleComponent.svelte @@ -8,7 +8,7 @@ import Toggle from '$lib/components/Toggle.svelte' import { createScriptFromInlineScript, fork } from '$lib/components/flows/flowStateUtils' - import type { FlowModule } from '$lib/gen' + import type { FlowModule, RawScript } from '$lib/gen' import FlowCard from '../common/FlowCard.svelte' import FlowModuleHeader from './FlowModuleHeader.svelte' import { getLatestHashForScript, scriptLangToEditorLang } from '$lib/scripts' @@ -74,8 +74,10 @@ export let scriptTemplate: 'pgsql' | 'mysql' | 'script' | 'docker' | 'powershell' = 'script' export let noEditor: boolean export let enableAi: boolean + export let savedModule: FlowModule | undefined = undefined let tag: string | undefined = undefined + let diffMode = false let editor: Editor let diffEditor: DiffEditor @@ -98,6 +100,15 @@ let testIsLoading = false let scriptProgress = undefined + $: lastDeployedCode = onModulesChange(savedModule, flowModule) + function onModulesChange(savedModule: FlowModule | undefined, flowModule: FlowModule) { + return savedModule?.value?.type === 'rawscript' && + flowModule.value.type === 'rawscript' && + savedModule.value.content !== flowModule.value.content + ? savedModule.value.content + : undefined + } + const { modulesStore: copilotModulesStore } = getContext('FlowCopilotContext') || {} @@ -246,6 +257,20 @@ } else { leftPanelSize = 100 } + + function showDiffMode() { + diffMode = true + diffEditor?.setOriginal((savedModule?.value as RawScript).content ?? '') + diffEditor?.setModified(editor?.getCode() ?? '') + diffEditor?.show() + editor?.hide() + } + + function hideDiffMode() { + diffMode = false + diffEditor?.hide() + editor?.show() + } @@ -323,6 +348,10 @@ acc[key] = obj.type === 'static' ? obj.value : undefined return acc }, {})} + on:showDiffMode={showDiffMode} + on:hideDiffMode={hideDiffMode} + {lastDeployedCode} + {diffMode} /> {/if} diff --git a/frontend/src/lib/components/flows/content/FlowModuleWrapper.svelte b/frontend/src/lib/components/flows/content/FlowModuleWrapper.svelte index 12e506ed48..09261baf7d 100644 --- a/frontend/src/lib/components/flows/content/FlowModuleWrapper.svelte +++ b/frontend/src/lib/components/flows/content/FlowModuleWrapper.svelte @@ -1,5 +1,11 @@