feat(frontend): improve versions history by adding a diff viewer with… (#4261)

* feat(frontend): improve versions history by adding a diff viewer with the previous version

* feat(frontend): support diff with all previous versions

* feat(frontend): support diff with all previous versions

* feat(frontend): improving version diff

* feat(frontend): improve UI

frontend/src/lib/components/flows/content/FlowModuleScript.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { SupportedLanguage } from '$lib/common'
+	import DiffEditor from '$lib/components/DiffEditor.svelte'
 	import HighlightCode from '$lib/components/HighlightCode.svelte'
 	import TimeAgo from '$lib/components/TimeAgo.svelte'
 	import { ScriptService } from '$lib/gen'
@@ -8,10 +9,12 @@
 
 	export let path: string
 	export let hash: string | undefined = undefined
+	export let previousHash: string | undefined = undefined
 	export let showDate = false
 	export let showAllCode: boolean = true
 
 	let code: string
+	let previousCode: string
 	let language: SupportedLanguage
 	let lock: string | undefined = undefined
 	let date: string | undefined = undefined
@@ -24,6 +27,7 @@
 				? await ScriptService.getScriptByHash({ workspace: $workspaceStore!, hash })
 				: await getScriptByPath(path!)
 			code = script.content
+
 			language = script.language
 			lock = script.lock
 			date = script.created_at
@@ -33,11 +37,26 @@
 		}
 	}
 
+	async function loadPreviousCode(previousHash: string) {
+		try {
+			const previousScript = await ScriptService.getScriptByHash({
+				workspace: $workspaceStore!,
+				hash: previousHash
+			})
+			previousCode = previousScript.content
+		} catch (e) {
+			console.error(e)
+		}
+	}
+
 	$: path && loadCode(path, hash)
+	$: path && previousHash && loadPreviousCode(previousHash)
 
 	function toggleShowAll() {
 		showAllCode = !showAllCode
 	}
+
+	export let showDiff: boolean = false
 </script>
 
 <div class="flex flex-col flex-1 h-full overflow-auto p-2">
@@ -47,7 +66,20 @@
 	{#if notFound}
 		<div class="text-red-400">script not found at {path} in workspace {$workspaceStore}</div>
 	{:else if showAllCode}
-		<HighlightCode {language} {code} />
+		{#if showDiff}
+			{#key previousCode + code}
+				<DiffEditor
+					class="h-80"
+					readOnly
+					automaticLayout
+					defaultLang={language}
+					defaultOriginal={previousCode}
+					defaultModified={code}
+				/>
+			{/key}
+		{:else}
+			<HighlightCode {language} {code} />
+		{/if}
 	{:else}
 		<div class="code-container h-full">
 			<HighlightCode {language} code={code?.split('\n').slice(0, 10).join('\n')} />