windmill-components 1.382.3 → 1.383.1

package/package/components/SimpleEditor.svelte

@@ -6,14 +6,20 @@
 <script>import { BROWSER } from 'esm-env';
 import { createHash, editorConfig, langToExt, updateOptions } from '../editorUtils';
 import { editor as meditor, KeyCode, KeyMod, Uri as mUri, languages } from 'monaco-editor';
-import 'monaco-editor/esm/vs/basic-languages/sql/sql.contribution';
-import 'monaco-editor/esm/vs/basic-languages/yaml/yaml.contribution';
-import 'monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution';
-import 'monaco-editor/esm/vs/basic-languages/typescript/typescript.contribution';
-import 'monaco-editor/esm/vs/language/typescript/monaco.contribution';
-import 'monaco-editor/esm/vs/language/json/monaco.contribution';
-import 'monaco-editor/esm/vs/basic-languages/css/css.contribution';
-import 'monaco-editor/esm/vs/language/css/monaco.contribution';
+// import 'monaco-editor/esm/vs/basic-languages/sql/sql.contribution'
+// import 'monaco-editor/esm/vs/basic-languages/yaml/yaml.contribution'
+// import 'monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution'
+// import 'monaco-editor/esm/vs/basic-languages/typescript/typescript.contribution'
+// import 'monaco-editor/esm/vs/language/typescript/monaco.contribution'
+// import 'monaco-editor/esm/vs/language/json/monaco.contribution'
+// import 'monaco-editor/esm/vs/basic-languages/css/css.contribution'
+// import 'monaco-editor/esm/vs/language/css/monaco.contribution'
+import '@codingame/monaco-vscode-standalone-languages';
+import '@codingame/monaco-vscode-standalone-json-language-features';
+import '@codingame/monaco-vscode-standalone-css-language-features';
+// import '@codingame/monaco-vscode-standalone-yaml-language-features'
+import '@codingame/monaco-vscode-standalone-typescript-language-features';
+import 'vscode/localExtensionHost';
 import { allClasses } from './apps/editor/componentsPanel/cssUtils';
 import { createEventDispatcher, onDestroy, onMount } from 'svelte';
 import libStdContent from '../es6.d.ts.txt?raw';
@@ -43,7 +49,13 @@ export let domLib = false;
 export let autofocus = false;
 const dispatch = createEventDispatcher();
 const uri = `file:///${hash}.${langToExt(lang)}`;
-buildWorkerDefinition('../../../workers', import.meta.url, false);
+buildWorkerDefinition();
+// monaco.languages.register({
+// 	id: 'json',
+// 	extensions: ['.json', '.jsonc'],
+// 	aliases: ['JSON', 'json'],
+// 	mimetypes: ['application/json']
+// })
 export function getCode() {
     return editor?.getValue() ?? '';
 }
@@ -107,25 +119,25 @@ $: disableTabCond?.set(!code && !!suggestion);
 async function loadMonaco() {
     await initializeVscode();
     initialized = true;
-    languages.typescript.javascriptDefaults.setCompilerOptions({
-        target: languages.typescript.ScriptTarget.Latest,
-        allowNonTsExtensions: true,
-        noSemanticValidation: false,
-        noLib: true,
-        moduleResolution: languages.typescript.ModuleResolutionKind.NodeJs
-    });
-    languages.typescript.javascriptDefaults.setDiagnosticsOptions({
-        noSemanticValidation: false,
-        noSyntaxValidation: false,
-        noSuggestionDiagnostics: false,
-        diagnosticCodesToIgnore: [1108]
-    });
-    languages.json.jsonDefaults.setDiagnosticsOptions({
-        validate: true,
-        allowComments: false,
-        schemas: [],
-        enableSchemaRequest: true
-    });
+    // languages.typescript.javascriptDefaults.setCompilerOptions({
+    // 	target: languages.typescript.ScriptTarget.Latest,
+    // 	allowNonTsExtensions: true,
+    // 	noSemanticValidation: false,
+    // 	noLib: true,
+    // 	moduleResolution: languages.typescript.ModuleResolutionKind.NodeJs
+    // })
+    // languages.typescript.javascriptDefaults.setDiagnosticsOptions({
+    // 	noSemanticValidation: false,
+    // 	noSyntaxValidation: false,
+    // 	noSuggestionDiagnostics: false,
+    // 	diagnosticCodesToIgnore: [1108]
+    // })
+    // languages.json.jsonDefaults.setDiagnosticsOptions({
+    // 	validate: true,
+    // 	allowComments: false,
+    // 	schemas: [],
+    // 	enableSchemaRequest: true
+    // })
     try {
         model = meditor.createModel(code, lang, mUri.parse(uri));
     }

package/package/components/SimpleEditor.svelte.d.ts

@@ -1,13 +1,10 @@
 import { SvelteComponent } from "svelte";
 import { editor as meditor } from 'monaco-editor';
-import 'monaco-editor/esm/vs/basic-languages/sql/sql.contribution';
-import 'monaco-editor/esm/vs/basic-languages/yaml/yaml.contribution';
-import 'monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution';
-import 'monaco-editor/esm/vs/basic-languages/typescript/typescript.contribution';
-import 'monaco-editor/esm/vs/language/typescript/monaco.contribution';
-import 'monaco-editor/esm/vs/language/json/monaco.contribution';
-import 'monaco-editor/esm/vs/basic-languages/css/css.contribution';
-import 'monaco-editor/esm/vs/language/css/monaco.contribution';
+import '@codingame/monaco-vscode-standalone-languages';
+import '@codingame/monaco-vscode-standalone-json-language-features';
+import '@codingame/monaco-vscode-standalone-css-language-features';
+import '@codingame/monaco-vscode-standalone-typescript-language-features';
+import 'vscode/localExtensionHost';
 declare const __propDef: {
     props: {
         [x: string]: any;

package/package/components/TemplateEditor.svelte

@@ -5,9 +5,9 @@ import { editor as meditor, Uri as mUri, languages, Range, KeyMod, KeyCode } fro
 import { createEventDispatcher, getContext, onDestroy, onMount } from 'svelte';
 import { writable } from 'svelte/store';
 import { buildWorkerDefinition } from './build_workers';
-import 'monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution';
-import 'monaco-editor/esm/vs/basic-languages/typescript/typescript.contribution';
-import 'monaco-editor/esm/vs/language/typescript/monaco.contribution';
+import '@codingame/monaco-vscode-standalone-languages';
+import '@codingame/monaco-vscode-standalone-typescript-language-features';
+import 'vscode/localExtensionHost';
 import { initializeVscode } from './vscode';
 import EditorTheme from './EditorTheme.svelte';
 export const conf = {
@@ -359,7 +359,9 @@ let width = 0;
 let initialized = false;
 let jsLoader = undefined;
 async function loadMonaco() {
-    await initializeVscode();
+    console.log('init template');
+    await initializeVscode('templateEditor');
+    console.log('initialized');
     initialized = true;
     languages.typescript.javascriptDefaults.setCompilerOptions({
         target: languages.typescript.ScriptTarget.Latest,

package/package/components/TemplateEditor.svelte.d.ts

@@ -1,7 +1,7 @@
 import { SvelteComponent } from "svelte";
-import 'monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution';
-import 'monaco-editor/esm/vs/basic-languages/typescript/typescript.contribution';
-import 'monaco-editor/esm/vs/language/typescript/monaco.contribution';
+import '@codingame/monaco-vscode-standalone-languages';
+import '@codingame/monaco-vscode-standalone-typescript-language-features';
+import 'vscode/localExtensionHost';
 declare const __propDef: {
     props: {
         [x: string]: any;

package/package/components/apps/components/display/AppNavbarItem.svelte

@@ -55,7 +55,7 @@ function getButtonProps(resolvedPath) {
                 const hash = url.hash;
                 replaceStateFn?.(`${window.location.pathname}${queryParams}${hash}`);
                 $worldStore.outputsById['ctx'].query.set(Object.fromEntries(new URLSearchParams(queryParams).entries()));
-                $worldStore.outputsById['ctx'].hash.set(url.hash);
+                $worldStore.outputsById['ctx'].hash.set(hash.substring(1));
                 $selected = resolvedPath === extractPathDetails() ? resolvedPath : undefined;
             },
             href: undefined,

package/package/components/apps/editor/AppEditor.svelte

@@ -20,7 +20,7 @@ import ItemPicker from '../../ItemPicker.svelte';
 import VariableEditor from '../../VariableEditor.svelte';
 import { VariableService } from '../../../gen';
 import { initHistory } from '../../../history';
-import { Component, Minus, Paintbrush, Plus } from 'lucide-svelte';
+import { Component, Minus, Paintbrush, Plus, Smartphone } from 'lucide-svelte';
 import { findGridItem, findGridItemParentGrid } from './appUtils';
 import ComponentNavigation from './component/ComponentNavigation.svelte';
 import CssSettings from './componentsPanel/CssSettings.svelte';
@@ -69,7 +69,7 @@ let context = {
     groups: $userStore?.groups,
     username: $userStore?.username,
     query: Object.fromEntries($page.url.searchParams.entries()),
-    hash: $page.url.hash,
+    hash: $page.url.hash.substring(1),
     workspace: $workspaceStore,
     mode: 'editor',
     summary: $summaryStore,
@@ -159,7 +159,10 @@ function hashchange(e) {
     context = context;
 }
 $: context.mode = $mode == 'dnd' ? 'editor' : 'viewer';
-$: width = $breakpoint === 'sm' ? 'min-w-[400px] max-w-[656px]' : 'min-w-[710px] w-full';
+$: width =
+    $breakpoint === 'sm' && $appStore?.mobileViewOnSmallerScreens !== false
+        ? 'min-w-[400px] max-w-[656px]'
+        : 'min-w-[710px] w-full';
 let selectedTab = 'insert';
 let befSelected = undefined;
 $: if ($selectedComponent?.[0] != befSelected) {
@@ -537,6 +540,34 @@ let stillInJobEnter = false;
 												<GridEditor {policy} />
 											</div>
 										{/if}
+										{#if !$appStore?.mobileViewOnSmallerScreens && $breakpoint === 'sm'}
+											<div
+												class="absolute inset-0 flex bg-surface center-center z-10000 bg-opacity-60"
+											>
+												<div
+													class="bg-surface shadow-md rounded-md p-4 max-w-sm flex flex-col gap-2"
+												>
+													<div class="text-sm font-semibold"> Mobile View </div>
+													<div class="text-xs">
+														Enabling mobile view allows you to adjust component placement for
+														smaller screens.
+													</div>
+													<Button
+														color="light"
+														variant="border"
+														size="xs"
+														on:click={() => {
+															$appStore.mobileViewOnSmallerScreens = true
+														}}
+														startIcon={{
+															icon: Smartphone
+														}}
+													>
+														Add mobile view on smaller screens
+													</Button>
+												</div>
+											</div>
+										{/if}
 									</div>
 								</div>
 							</Pane>

package/package/components/apps/editor/AppEditorHeader.svelte

@@ -46,6 +46,7 @@ import { getUpdateInput } from '../components/display/dbtable/queries/update';
 import { getDeleteInput } from '../components/display/dbtable/queries/delete';
 import { collectOneOfFields } from './appUtils';
 import Summary from '../../Summary.svelte';
+import ToggleEnable from '../../common/toggleButton-v2/ToggleEnable.svelte';
 async function hash(message) {
     try {
         const msgUint8 = new TextEncoder().encode(message); // encode as (utf-8) Uint8Array
@@ -1162,20 +1163,29 @@ export function openTroubleshootPanel() {
 					/>
 				</ToggleButtonGroup>
 			{/if}
-			<div>
+			<div class="flex flex-row gap-2">
 				<ToggleButtonGroup class="h-[30px]" bind:selected={$breakpoint}>
 					<ToggleButton
-						tooltip="Mobile View"
-						icon={Smartphone}
-						value="sm"
+						tooltip="Computer View"
+						icon={Laptop2}
+						value={'lg'}
 						iconProps={{ size: 16 }}
 					/>
 					<ToggleButton
-						tooltip="Computer View"
-						icon={Laptop2}
-						value="lg"
+						tooltip="Mobile View"
+						icon={Smartphone}
+						value={'sm'}
 						iconProps={{ size: 16 }}
 					/>
+					{#if $breakpoint === 'sm'}
+						<ToggleEnable
+							tooltip="Desktop view is enabled by default. Enable this to customize the layout of the components for the mobile view"
+							label="Enable mobile view for smaller screens"
+							bind:checked={$app.mobileViewOnSmallerScreens}
+							iconProps={{ size: 16 }}
+							iconOnly={false}
+						/>
+					{/if}
 				</ToggleButtonGroup>
 			</div>
 		</div>

package/package/components/apps/editor/AppPreview.svelte

@@ -122,7 +122,10 @@ $: if (!deepEqual(previousSelectedIds, $selectedComponent)) {
         .flatMap((id) => dfs(app.grid, id, app.subgrids ?? {}))
         .filter((x) => x != undefined);
 }
-$: width = $breakpoint === 'sm' ? 'max-w-[640px]' : 'w-full min-w-[768px]';
+$: width =
+    $breakpoint === 'sm' && $appStore?.mobileViewOnSmallerScreens !== false
+        ? 'max-w-[640px]'
+        : 'w-full min-w-[768px]';
 $: lockedClasses = isLocked ? '!max-h-[400px] overflow-hidden pointer-events-none' : '';
 function onThemeChange() {
     $darkMode = document.documentElement.classList.contains('dark');

package/package/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte

@@ -327,8 +327,9 @@ async function inferSuggestions(code) {
 				{/if}
 
 				<DiffEditor
+					open={false}
 					bind:this={diffEditor}
-					class="hidden h-full"
+					class="h-full"
 					automaticLayout
 					fixedOverflowWidgets
 				/>

package/package/components/apps/types.d.ts

@@ -107,6 +107,7 @@ export type App = {
     subgrids?: Record<string, GridItem[]>;
     theme: AppTheme | undefined;
     hideLegacyTopBar?: boolean | undefined;
+    mobileViewOnSmallerScreens?: boolean | undefined;
 };
 export type ConnectingInput = {
     opened: boolean;

package/package/components/build_workers.d.ts

@@ -1 +1 @@
-export declare function buildWorkerDefinition(workerPath: string, basePath: string, useModuleWorker: boolean): void;
+export declare function buildWorkerDefinition(...args: any[]): void;

package/package/components/build_workers.js

@@ -4,57 +4,152 @@
 // import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker&inline'
 // import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker&inline'
 // import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker&inline'
-import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
-import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';
-import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
-import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
-import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
-export function buildWorkerDefinition(workerPath, basePath, useModuleWorker) {
-    const monWin = self;
-    const workerOverrideGlobals = {
-        basePath: basePath,
-        workerPath: workerPath,
-        workerOptions: {
-            type: useModuleWorker ? 'module' : 'classic'
-        }
-    };
-    if (!monWin.MonacoEnvironment) {
-        monWin.MonacoEnvironment = {
-            workerOverrideGlobals: workerOverrideGlobals,
-            createTrustedTypesPolicy: (_policyName) => {
-                return undefined;
-            }
-        };
-    }
-    const monEnv = monWin.MonacoEnvironment;
-    monEnv.workerOverrideGlobals = workerOverrideGlobals;
-    const getWorker = (_, label) => {
-        console.log('getWorker: workerId: ' + _ + ' label: ' + label);
-        switch (label) {
-            case 'template':
-            case 'typescript':
-            case 'javascript':
-                return new tsWorker();
-            case 'html':
-            case 'handlebars':
-            case 'razor':
-                return new htmlWorker();
-            case 'css':
-            case 'scss':
-            case 'less':
-                return new cssWorker();
-            case 'json':
-                return new jsonWorker();
-            case 'graphql':
-                const workerFilename = `graphql.worker.bundle.js`;
-                const workerPathLocal = `${workerOverrideGlobals.workerPath}/${workerFilename}`;
-                const workerUrl = new URL(workerPathLocal, workerOverrideGlobals.basePath);
-                return new Worker(workerUrl.href, {
-                    name: label
+// import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker'
+// import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker'
+// import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'
+// import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
+// import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
+// import type { Environment } from 'monaco-editor/esm/vs/editor/editor.api.js'
+// interface MonacoEnvironmentEnhanced extends Environment {
+// 	workerOverrideGlobals: WorkerOverrideGlobals
+// }
+// type WorkerOverrideGlobals = {
+// 	basePath: string
+// 	workerPath: string
+// 	workerOptions: WorkerOptions
+// }
+// export function buildWorkerDefinition(
+// 	workerPath: string,
+// 	basePath: string,
+// 	useModuleWorker: boolean
+// ) {
+// 	const monWin = self as Window
+// 	const workerOverrideGlobals: WorkerOverrideGlobals = {
+// 		basePath: basePath,
+// 		workerPath: workerPath,
+// 		workerOptions: {
+// 			type: useModuleWorker ? 'module' : 'classic'
+// 		}
+// 	}
+// 	if (!monWin.MonacoEnvironment) {
+// 		monWin.MonacoEnvironment = {
+// 			workerOverrideGlobals: workerOverrideGlobals,
+// 			createTrustedTypesPolicy: (_policyName: string) => {
+// 				return undefined
+// 			}
+// 		} as MonacoEnvironmentEnhanced
+// 	}
+// 	const monEnv = monWin.MonacoEnvironment as MonacoEnvironmentEnhanced
+// 	monEnv.workerOverrideGlobals = workerOverrideGlobals
+// 	const getWorker = (_: string, label: string) => {
+// 		console.log('getWorker: workerId: ' + _ + ' label: ' + label)
+// 		switch (label) {
+// 			case 'template':
+// 			case 'typescript':
+// 			case 'javascript':
+// 				return new tsWorker()
+// 			case 'html':
+// 			case 'handlebars':
+// 			case 'razor':
+// 				return new htmlWorker()
+// 			case 'css':
+// 			case 'scss':
+// 			case 'less':
+// 				return new cssWorker()
+// 			case 'json':
+// 				return new jsonWorker()
+// 			case 'graphql':
+// 				const workerFilename = `graphql.worker.bundle.js`
+// 				const workerPathLocal = `${workerOverrideGlobals.workerPath}/${workerFilename}`
+// 				const workerUrl = new URL(workerPathLocal, workerOverrideGlobals.basePath)
+// 				return new Worker(workerUrl.href, {
+// 					name: label
+// 				})
+// 			default:
+// 				return new editorWorker()
+// 		}
+// 	}
+// 	monWin.MonacoEnvironment.getWorker = getWorker
+// }
+// //
+// export type WorkerLoader = () => Worker
+// const workerLoaders: Partial<Record<string, WorkerLoader>> = {
+// 	editorWorkerService: () =>
+// 		new Worker(new URL('monaco-editor/esm/vs/editor/editor.worker.js', import.meta.url), {
+// 			type: 'module'
+// 		}),
+// 	textMateWorker: () =>
+// 		new Worker(
+// 			new URL('@codingame/monaco-vscode-textmate-service-override/worker', import.meta.url),
+// 			{ type: 'module' }
+// 		),
+// 	languageDetectionWorkerService: () =>
+// 		new Worker(
+// 			new URL(
+// 				'@codingame/monaco-vscode-language-detection-worker-service-override/worker',
+// 				import.meta.url
+// 			),
+// 			{ type: 'module' }
+// 		)
+// }
+// export function registerWorkerLoader(label: string, workerLoader: WorkerLoader): void {
+// 	workerLoaders[label] = workerLoader
+// }
+// export function buildWorkerDefinition() {
+// 	// Do not use monaco-editor-webpack-plugin because it doesn't handle properly cross origin workers
+// 	window.MonacoEnvironment = {
+// 		getWorker: function (moduleId, label) {
+// 			console.log('LOAD')
+// 			const workerFactory = workerLoaders[label]
+// 			if (workerFactory != null) {
+// 				return workerFactory()
+// 			}
+// 			throw new Error(`Unimplemented worker ${label} (${moduleId})`)
+// 		}
+// 	}
+// }
+import { graphql } from 'graphql';
+import { useWorkerFactory } from 'monaco-editor-wrapper/workerFactory';
+export function buildWorkerDefinition(...args) {
+    useWorkerFactory({
+        ignoreMapping: true,
+        workerLoaders: {
+            editorWorkerService: () => {
+                console.log('editorWorkerService');
+                return new Worker(new URL('monaco-editor/esm/vs/editor/editor.worker.js', import.meta.url), {
+                    type: 'module'
+                });
+            },
+            javascript: () => {
+                console.log('javascript');
+                return new Worker(new URL('monaco-editor-wrapper/workers/module/ts', import.meta.url), {
+                    type: 'module'
+                });
+            },
+            typescript: () => {
+                console.log('typescript');
+                return new Worker(new URL('monaco-editor-wrapper/workers/module/ts', import.meta.url), {
+                    type: 'module'
                 });
-            default:
-                return new editorWorker();
+            },
+            json: () => {
+                console.log('json');
+                return new Worker(new URL('monaco-editor-wrapper/workers/module/json', import.meta.url), {
+                    type: 'module'
+                });
+            },
+            html: () => {
+                console.log('html');
+                return new Worker(new URL('monaco-editor-wrapper/workers/module/html', import.meta.url), {
+                    type: 'module'
+                });
+            },
+            css: () => {
+                console.log('html');
+                return new Worker(new URL('monaco-editor-wrapper/workers/module/css', import.meta.url), {
+                    type: 'module'
+                });
+            }
         }
-    };
-    monWin.MonacoEnvironment.getWorker = getWorker;
+    });
 }

package/package/components/common/toggleButton-v2/ToggleEnable.svelte

@@ -0,0 +1,34 @@
+<script>import { Tab } from '@rgossiaux/svelte-headlessui';
+import { twMerge } from 'tailwind-merge';
+import Toggle from '../../Toggle.svelte';
+export let label = undefined;
+export let tooltip = undefined;
+export let disabled = false;
+export let small = false;
+export let light = false;
+export let checked = false;
+export let id = undefined;
+</script>
+
+<div {id} class="flex">
+	<Tab
+		{disabled}
+		class={twMerge(
+			' rounded-md transition-all text-xs flex gap-1 flex-row items-center',
+			small ? 'px-1.5 py-0.5 text-2xs' : 'px-2 py-1',
+			light ? 'font-medium' : '',
+			'bg-surface-secondary ',
+			$$props.class
+		)}
+	>
+		<Toggle
+			size="xs"
+			options={{
+				right: label,
+				rightTooltip: tooltip
+			}}
+			textClass="text-2xs whitespace-nowrap white !w-full"
+			bind:checked
+		/>
+	</Tab>
+</div>

package/package/components/common/toggleButton-v2/ToggleEnable.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        label?: string | undefined;
+        tooltip?: string | undefined;
+        disabled?: boolean | undefined;
+        small?: boolean | undefined;
+        light?: boolean | undefined;
+        checked?: boolean | undefined;
+        id?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ToggleEnableProps = typeof __propDef.props;
+export type ToggleEnableEvents = typeof __propDef.events;
+export type ToggleEnableSlots = typeof __propDef.slots;
+export default class ToggleEnable extends SvelteComponent<ToggleEnableProps, ToggleEnableEvents, ToggleEnableSlots> {
+}
+export {};

package/package/components/details/DetailPageDetailPanel.svelte

@@ -1,18 +1,13 @@
-<script>import { Tabs, Tab, TabContent, Button } from '../common';
-import { copyToClipboard } from '../../utils';
-import { CalendarCheck2, Clipboard, MailIcon, Terminal, Webhook } from 'lucide-svelte';
-import { Highlight } from 'svelte-highlight';
-import { yaml } from 'svelte-highlight/languages';
-import json from 'svelte-highlight/languages/json';
+<script>import { Tabs, Tab, TabContent } from '../common';
+import { CalendarCheck2, MailIcon, Terminal, Webhook } from 'lucide-svelte';
 import { Pane, Splitpanes } from 'svelte-splitpanes';
-import YAML from 'yaml';
 import HighlightTheme from '../HighlightTheme.svelte';
+import FlowViewerInner from '../FlowViewerInner.svelte';
 export let triggerSelected = 'webhooks';
 export let flow_json = undefined;
 export let hasStepDetails = false;
 export let isOperator = false;
 export let selected;
-let rawType = 'yaml';
 $: if (hasStepDetails) {
     selected = 'flow_step';
 }
@@ -90,36 +85,7 @@ $: !hasStepDetails && selected === 'flow_step' && (selected = 'saved_inputs');
 						</Splitpanes>
 					</TabContent>
 					<TabContent value="raw" class="flex flex-col flex-1 h-full overflow-auto">
-						<Tabs bind:selected={rawType} wrapperClass="mt-4">
-							<Tab value="yaml">YAML</Tab>
-							<Tab value="json">JSON</Tab>
-							<svelte:fragment slot="content">
-								<div class="relative pt-2">
-									<Button
-										on:click={() =>
-											copyToClipboard(
-												rawType === 'yaml'
-													? YAML.stringify(flow_json)
-													: JSON.stringify(flow_json, null, 4)
-											)}
-										color="light"
-										variant="border"
-										size="xs"
-										startIcon={{ icon: Clipboard }}
-										btnClasses="absolute top-2 right-2 w-min"
-									>
-										Copy content
-									</Button>
-									<Highlight
-										class="overflow-auto px-1"
-										language={rawType === 'yaml' ? yaml : json}
-										code={rawType === 'yaml'
-											? YAML.stringify(flow_json)
-											: JSON.stringify(flow_json, null, 4)}
-									/>
-								</div>
-							</svelte:fragment>
-						</Tabs>
+						<FlowViewerInner flow={flow_json} />
 					</TabContent>
 					<TabContent value="flow_step" class="flex flex-col flex-1 h-full">
 						<slot name="flow_step" />

package/package/components/flows/content/FlowModuleComponent.svelte

@@ -284,10 +284,11 @@ function setFlowInput(argName) {
 										)}
 									/>
 									<DiffEditor
+										open={false}
 										bind:this={diffEditor}
 										automaticLayout
 										fixedOverflowWidgets
-										class="hidden h-full"
+										class="h-full"
 									/>
 								{/key}
 							{/if}