fix: tag select in script builder top bar (#6136)

* all

* update

* react 18

* update

* update

* update

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

@@ -1,25 +1,92 @@
+<script lang="ts" module>
+	let cachedValues: Record<
+		string,
+		{
+			code: string | undefined
+			previousCode: string | undefined
+			language: ScriptLang | undefined
+			lock: string | undefined
+			date: string | undefined
+			notFound: boolean
+			tag: string | undefined
+		}
+	> = {}
+</script>
+
 <script lang="ts">
-	import type { SupportedLanguage } from '$lib/common'
 	import HighlightCode from '$lib/components/HighlightCode.svelte'
 	import TimeAgo from '$lib/components/TimeAgo.svelte'
-	import { ScriptService } from '$lib/gen'
+	import { ScriptService, type ScriptLang } from '$lib/gen'
 	import { getScriptByPath, scriptLangToEditorLang } from '$lib/scripts'
 	import { workspaceStore } from '$lib/stores'
 	import { Loader2 } from 'lucide-svelte'
+	import { untrack } from 'svelte'
 
-	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
-	export let tag: string | undefined = undefined
+	interface Props {
+		path: string
+		hash?: string | undefined
+		previousHash?: string | undefined
+		showDate?: boolean
+		showAllCode?: boolean
+		tag?: string | undefined
+		language?: ScriptLang | undefined
+		showDiff?: boolean
+	}
 
-	let code: string
-	let previousCode: string
-	let language: SupportedLanguage
-	let lock: string | undefined = undefined
-	let date: string | undefined = undefined
-	let notFound = false
+	let {
+		path,
+		hash = undefined,
+		previousHash = undefined,
+		showDate = false,
+		showAllCode = $bindable(true),
+		tag = $bindable(undefined),
+		showDiff = false,
+		language = $bindable(undefined)
+	}: Props = $props()
+
+	let code: string | undefined = $state()
+	let previousCode: string | undefined = $state()
+	let lock: string | undefined = $state(undefined)
+	let date: string | undefined = $state(undefined)
+	let notFound = $state(false)
+
+	function getCachedKey(path: string, hash: string | undefined) {
+		return `${$workspaceStore}-${path}-${hash ?? ''}`
+	}
+	function getCachedValues(path: string, hash: string | undefined) {
+		const key = getCachedKey(path, hash)
+		code = cachedValues[key]?.code
+		language = cachedValues[key]?.language
+		lock = cachedValues[key]?.lock
+		date = cachedValues[key]?.date
+		previousCode = cachedValues[key]?.previousCode
+		tag = cachedValues[key]?.tag
+		notFound = cachedValues[key]?.notFound ?? false
+		console.log('cachedValues', cachedValues, code)
+	}
+
+	getCachedValues(path, hash)
+
+	async function loadPreviousCode(previousHash: string) {
+		try {
+			const previousScript = await ScriptService.getScriptByHash({
+				workspace: $workspaceStore!,
+				hash: previousHash
+			})
+			previousCode = previousScript.content
+			const key = getCachedKey(path, previousHash)
+			cachedValues[key] = {
+				...(cachedValues[key] ?? {}),
+				previousCode: previousScript.content
+			}
+		} catch (e) {
+			console.error(e)
+		}
+	}
+
+	function toggleShowAll() {
+		showAllCode = !showAllCode
+	}
 
 	async function loadCode(path: string, hash: string | undefined) {
 		try {
@@ -33,32 +100,28 @@
 			lock = script.lock
 			date = script.created_at
 			tag = script.tag
+			const key = getCachedKey(path, hash)
+			cachedValues[key] = {
+				...(cachedValues[key] ?? {}),
+				code: script.content,
+				language: script.language,
+				lock: script.lock,
+				date: script.created_at,
+				tag: script.tag
+			}
 		} catch (e) {
 			notFound = true
 			console.error(e)
 		}
 	}
 
-	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
+	$effect.pre(() => {
+		hash
+		path && untrack(() => loadCode(path, hash))
+	})
+	$effect.pre(() => {
+		path && previousHash && untrack(() => loadPreviousCode(previousHash))
+	})
 </script>
 
 <div class="flex flex-col flex-1 h-full overflow-auto p-2">
@@ -72,7 +135,7 @@
 		<div class="text-red-400">script not found at {path} in workspace {$workspaceStore}</div>
 	{:else if showAllCode}
 		{#if showDiff}
-			{#key previousCode + code}
+			{#key (previousCode ?? '') + (code ?? '')}
 				{#await import('$lib/components/DiffEditor.svelte')}
 					<Loader2 class="animate-spin" />
 				{:then Module}
@@ -94,7 +157,7 @@
 		<div class="code-container h-full">
 			<HighlightCode {language} code={code?.split('\n').slice(0, 10).join('\n')} />
 		</div>
-		<button on:click={toggleShowAll}>Show all</button>
+		<button onclick={toggleShowAll}>Show all</button>
 	{/if}
 
 	{#if lock}