From 226ac4d7cc3157ff7c68f70d24025ed37df72bb5 Mon Sep 17 00:00:00 2001
From: Diego Imbert <70353967+diegoimbert@users.noreply.github.com>
Date: Thu, 3 Apr 2025 13:07:21 +0200
Subject: [PATCH] fix: Remaining svelte 5 bugs (#5563)

* hack fix dnd with tick

* fix: infinite loading in CodeDisplay after update to svelte 5
---
 .../lib/components/EditableSchemaForm.svelte  | 23 +++++------
 .../copilot/chat/CodeDisplay.svelte           | 38 ++++++++++---------
 2 files changed, 33 insertions(+), 28 deletions(-)

diff --git a/frontend/src/lib/components/EditableSchemaForm.svelte b/frontend/src/lib/components/EditableSchemaForm.svelte
index f0fc34bfa3..d472779945 100644
--- a/frontend/src/lib/components/EditableSchemaForm.svelte
+++ b/frontend/src/lib/components/EditableSchemaForm.svelte
@@ -11,7 +11,7 @@
 	import FlowPropertyEditor from './schema/FlowPropertyEditor.svelte'
 	import PropertyEditor from './schema/PropertyEditor.svelte'
 	import SimpleEditor from './SimpleEditor.svelte'
-	import { createEventDispatcher } from 'svelte'
+	import { createEventDispatcher, tick } from 'svelte'
 	import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte'
 	import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte'
 	import Label from './Label.svelte'
@@ -83,7 +83,7 @@
 
 	let keys: string[] = Array.isArray(schema?.order)
 		? [...schema.order]
-		: Object.keys(schema?.properties ?? {}) ?? Object.keys(schema?.properties ?? {})
+		: (Object.keys(schema?.properties ?? {}) ?? Object.keys(schema?.properties ?? {}))
 
 	$: schema && onSchemaChange()
 
@@ -157,10 +157,10 @@
 			? property.type !== 'object'
 				? property.type
 				: property.format === 'resource-s3_object'
-				? 'S3'
-				: property.oneOf && property.oneOf.length >= 2
-				? 'oneOf'
-				: 'object'
+					? 'S3'
+					: property.oneOf && property.oneOf.length >= 2
+						? 'oneOf'
+						: 'object'
 			: ''
 	}
 
@@ -209,7 +209,7 @@
 	let editor: SimpleEditor | undefined = undefined
 
 	const editTabDefaultSize = noPreview ? 100 : 50
-	editPanelSize = editTab ? editPanelInitialSize ?? editTabDefaultSize : 0
+	editPanelSize = editTab ? (editPanelInitialSize ?? editTabDefaultSize) : 0
 	let inputPanelSize = 100 - editPanelSize
 	let editPanelSizeSmooth = tweened(editPanelSize, {
 		duration: 150
@@ -293,11 +293,11 @@
 							on:reorder={(e) => {
 								schema.order = e.detail
 								schema = schema
-								dispatch('change', schema)
+								tick().then(() => dispatch('change', schema))
 							}}
 							on:change={() => {
 								schema = schema
-								dispatch('change', schema)
+								tick().then(() => dispatch('change', schema))
 							}}
 							prettifyHeader={isAppInput}
 							disabled={!!previewSchema}
@@ -447,8 +447,9 @@
 															bind:enum_={schema.properties[argName].enum}
 															bind:format={schema.properties[argName].format}
 															bind:contentEncoding={schema.properties[argName].contentEncoding}
-															bind:customErrorMessage={schema.properties[argName]
-																.customErrorMessage}
+															bind:customErrorMessage={
+																schema.properties[argName].customErrorMessage
+															}
 															bind:itemsType={schema.properties[argName].items}
 															bind:extra={schema.properties[argName]}
 															bind:title={schema.properties[argName].title}
diff --git a/frontend/src/lib/components/copilot/chat/CodeDisplay.svelte b/frontend/src/lib/components/copilot/chat/CodeDisplay.svelte
index 9d968d9bb3..b2bcb8255e 100644
--- a/frontend/src/lib/components/copilot/chat/CodeDisplay.svelte
+++ b/frontend/src/lib/components/copilot/chat/CodeDisplay.svelte
@@ -32,9 +32,11 @@
 
 	const { message } = getContext<{ message: DisplayMessage }>('AssistantMessageContext')
 
-	$: codeContext = message.contextElements?.find((e) => e.type === 'code') as
-		| Extract<ContextElement, { type: 'code' }>
-		| undefined
+	let codeContext = $derived(
+		message.contextElements?.find((e) => e.type === 'code') as
+			| Extract<ContextElement, { type: 'code' }>
+			| undefined
+	)
 
 	function getSmartLang(lang: string) {
 		switch (lang) {
@@ -93,22 +95,22 @@
 		yaml: yaml
 	}
 
-	$: code = astNode.current.children?.[0]?.children?.[0]?.value
+	let code = $derived(astNode.current.children?.[0]?.children?.[0]?.value)
 
-	$: language = (astNode.current.children?.[0]?.properties?.class as string | undefined)?.split(
-		'-'
-	)[1]
+	let language = $derived(
+		(astNode.current.children?.[0]?.properties?.class as string | undefined)?.split('-')[1]
+	)
 
-	let loading = true
+	let loading = $state(true)
 	function shouldStopLoading(astNode: HastNode, replying: boolean) {
 		if (!replying || $currentReply.length > (astNode.position?.end.offset ?? 0)) {
 			loading = false
 		}
 	}
-	$: shouldStopLoading(astNode.current, $loadingContext)
+	$effect(() => shouldStopLoading(astNode.current, $loadingContext))
 
-	let diffEl: HTMLDivElement | undefined
-	let diffEditor: meditor.IStandaloneDiffEditor | undefined
+	let diffEl: HTMLDivElement | undefined = $state()
+	let diffEditor: meditor.IStandaloneDiffEditor | undefined = $state()
 	async function setDiffEditor(diffEl: HTMLDivElement) {
 		if (!codeContext) {
 			return
@@ -165,13 +167,15 @@
 			modifiedModel.setValue(code ?? '')
 		}
 	}
-	$: updateModifiedModel(code ?? '')
+	$effect(() => updateModifiedModel(code ?? ''))
 
-	$: diffEl &&
-		language &&
-		codeContext &&
-		getSmartLang(codeContext.lang) === getSmartLang(language) &&
-		setDiffEditor(diffEl)
+	$effect(() => {
+		diffEl &&
+			language &&
+			codeContext &&
+			getSmartLang(codeContext.lang) === getSmartLang(language) &&
+			setDiffEditor(diffEl)
+	})
 </script>
 
 <div class="flex flex-col gap-0.5 rounded-lg relative not-prose">