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 @@