From f71ddb75ec093cdad04c3e4e0c2f80b348dbaba1 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@windmill.dev>
Date: Wed, 9 Jul 2025 01:41:02 +0200
Subject: [PATCH] whitelabel sdk light (#6147)

* all

* all
---
 .../src/lib/components/FlowWrapper.svelte     | 30 ++++++++++++++++---
 .../flows/header/FlowYamlEditor.svelte        | 16 +++++++---
 .../src/routes/test_dev/sdk_flow/+page.svelte |  1 +
 3 files changed, 39 insertions(+), 8 deletions(-)

diff --git a/frontend/src/lib/components/FlowWrapper.svelte b/frontend/src/lib/components/FlowWrapper.svelte
index 5fd9251286..c93e9bb381 100644
--- a/frontend/src/lib/components/FlowWrapper.svelte
+++ b/frontend/src/lib/components/FlowWrapper.svelte
@@ -3,11 +3,33 @@
 	import type { FlowBuilderProps } from './flow_builder'
 	import FlowBuilder from './FlowBuilder.svelte'
 
-	let { flowStore: oldFlowStore, disableAi, ...props }: FlowBuilderProps = $props()
+	let {
+		flowStore: oldFlowStore,
+		disableAi,
+		light,
+		...props
+	}: FlowBuilderProps & { light?: boolean } = $props()
 
 	let flowStore = $state(oldFlowStore)
+
+	let trialRender = $state(true)
+
+	if (light) {
+		setTimeout(() => {
+			trialRender = false
+		}, 1000 * 300)
+	}
 </script>
 
-<AiChatLayout noPadding={true} {disableAi}>
-	<FlowBuilder {flowStore} {disableAi} {...props} />
-</AiChatLayout>
+{#if trialRender}
+	<AiChatLayout noPadding={true} {disableAi}>
+		{#if light}<div class="bg-red-500 absolute z-10">Trial version</div>{/if}
+		<FlowBuilder {flowStore} {disableAi} {...props} />
+	</AiChatLayout>
+{:else}
+	<div class="flex flex-col items-center justify-center h-screen">
+		<div class="text-2xl font-bold"
+			>Windmill Whitelabel SDK is in trial mode and disabled itself after 5 minutes</div
+		>
+	</div>
+{/if}
diff --git a/frontend/src/lib/components/flows/header/FlowYamlEditor.svelte b/frontend/src/lib/components/flows/header/FlowYamlEditor.svelte
index f96429af6e..843479ba67 100644
--- a/frontend/src/lib/components/flows/header/FlowYamlEditor.svelte
+++ b/frontend/src/lib/components/flows/header/FlowYamlEditor.svelte
@@ -10,15 +10,22 @@
 	import { sendUserToast } from '$lib/toast'
 	import { Loader2 } from 'lucide-svelte'
 	import { refreshStateStore } from '$lib/svelte5Utils.svelte'
+	import SimpleEditor from '../../SimpleEditor.svelte'
 
-	const { flowStore } = getContext<FlowEditorContext>('FlowEditorContext')
+	const { flowStore } = $state(getContext<FlowEditorContext>('FlowEditorContext'))
 
-	export let drawer: Drawer | undefined
+	interface Props {
+		drawer: Drawer | undefined
+	}
 
-	let code = ''
+	let { drawer = $bindable() }: Props = $props()
+
+	let code = $state('')
+	let editor = $state(undefined) as SimpleEditor | undefined
 
 	function reload() {
 		code = YAML.stringify(filteredContentForExport(flowStore.val))
+		editor?.setCode(code)
 	}
 
 	function apply() {
@@ -46,6 +53,7 @@
 			flowStore.val.schema = parsed.schema
 			flowStore.val.tag = parsed.tag
 			refreshStateStore(flowStore)
+			sendUserToast('Changes applied')
 		} catch (e) {
 			sendUserToast('Error parsing yaml: ' + e), true
 		}
@@ -63,7 +71,7 @@
 			{#await import('../../SimpleEditor.svelte')}
 				<Loader2 class="animate-spin" />
 			{:then Module}
-				<Module.default autoHeight bind:code lang="yaml" />
+				<Module.default bind:this={editor} autoHeight bind:code lang="yaml" />
 			{/await}
 		{/if}
 	</DrawerContent>
diff --git a/frontend/src/routes/test_dev/sdk_flow/+page.svelte b/frontend/src/routes/test_dev/sdk_flow/+page.svelte
index f1ff418cc9..bc8e4cba65 100644
--- a/frontend/src/routes/test_dev/sdk_flow/+page.svelte
+++ b/frontend/src/routes/test_dev/sdk_flow/+page.svelte
@@ -41,6 +41,7 @@
 <!-- <ScriptWrapper {script} neverShowMeta={true} {customUi} /> -->
 
 <FlowWrapper
+	light
 	disableAi
 	pathStoreInit="u/foo/bar"
 	{customUi}