windmill-components 1.504.6 → 1.511.0

package/package/components/Dev.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">import SchemaForm from './SchemaForm.svelte';
-import TestJobLoader from './TestJobLoader.svelte';
+import JobLoader from './JobLoader.svelte';
 import { Button } from './common';
 import { WindmillIcon } from './icons';
 import LogPanel from './scriptEditor/LogPanel.svelte';
 import { JobService, OpenAPI, WorkspaceService } from '../gen';
 import { inferArgs } from '../infer';
 import { setCopilotInfo, userStore, workspaceStore } from '../stores';
-import { emptySchema, sendUserToast } from '../utils';
+import { emptySchema, readFieldsRecursively, sendUserToast } from '../utils';
 import { Pane, Splitpanes } from 'svelte-splitpanes';
 import { onDestroy, onMount, setContext, untrack } from 'svelte';
 import DarkModeToggle from './sidebar/DarkModeToggle.svelte';
@@ -66,7 +66,7 @@ function initializeMode() {
     modeInitialized = true;
     darkModeToggle?.toggle();
 }
-let testJobLoader = $state();
+let jobLoader = $state();
 let socket = undefined;
 // Test args input
 let args = $state({});
@@ -78,7 +78,8 @@ let pastPreviews = $state([]);
 let validCode = $state(true);
 // Flow preview
 let flowPreviewButtons = $state();
-const job = $derived(flowPreviewButtons?.getJob());
+const flowPreviewContent = $derived(flowPreviewButtons?.getFlowPreviewContent());
+const job = $derived(flowPreviewContent?.getJob());
 let showJobStatus = $state(false);
 let testModuleId = $state(undefined);
 let currentScript = $state(undefined);
@@ -113,7 +114,11 @@ const el = (event) => {
     }
     else if (event.data.type == 'testPreviewBundle') {
         if (event.data.id == lastCommandId && currentScript) {
-            testJobLoader?.runPreview(currentScript.path, event.data.file, currentScript.language, args, currentScript.tag, useLock ? currentScript.lock : undefined);
+            jobLoader?.runPreview(currentScript.path, event.data.file, currentScript.language, args, currentScript.tag, useLock ? currentScript.lock : undefined, undefined, {
+                done(x) {
+                    loadPastTests();
+                }
+            });
         }
         else {
             sendUserToast(`Bundle received ${lastCommandId} was obsolete, ignoring`, true);
@@ -164,7 +169,7 @@ onMount(() => {
     window.parent?.postMessage({ type: 'refresh' }, '*');
 });
 async function testBundle(file, isTar) {
-    testJobLoader?.abstractRun(async () => {
+    jobLoader?.abstractRun(async () => {
         try {
             const form = new FormData();
             form.append('preview', JSON.stringify({
@@ -205,6 +210,10 @@ async function testBundle(file, isTar) {
             sendUserToast(`Failed to send bundle ${e}`, true);
             throw Error(e);
         }
+    }, {
+        done(x) {
+            loadPastTests();
+        }
     });
     loadingCodebaseButton = false;
 }
@@ -273,7 +282,7 @@ function runTest() {
             }
             else {
                 //@ts-ignore
-                testJobLoader.runPreview(currentScript.path, currentScript.content, currentScript.language, args, currentScript.tag, useLock ? currentScript.lock : undefined);
+                jobLoader.runPreview(currentScript.path, currentScript.content, currentScript.language, args, currentScript.tag, useLock ? currentScript.lock : undefined);
             }
         }
     }
@@ -419,8 +428,8 @@ function updateFlow(flow) {
         return;
     }
     if (!deepEqual(flow, lastSent)) {
-        lastSent = JSON.parse(JSON.stringify(flow));
-        window?.parent.postMessage({ type: 'flow', flow, uriPath: lastUriPath }, '*');
+        lastSent = $state.snapshot(flow);
+        window?.parent.postMessage({ type: 'flow', flow: lastSent, uriPath: lastUriPath }, '*');
     }
 }
 let reload = $state(0);
@@ -429,7 +438,7 @@ async function inferModuleArgs(selectedIdStore) {
         return;
     }
     //@ts-ignore
-    dfs(flowStore.value.modules, async (mod) => {
+    dfs(flowStore.val.value.modules, async (mod) => {
         if (mod.id == selectedIdStore) {
             if (mod.value.type == 'rawscript' ||
                 mod.value.type === 'script' ||
@@ -481,14 +490,15 @@ $effect(() => {
         untrack(() => initializeMode());
 });
 $effect(() => {
+    readFieldsRecursively(flowStore.val);
     flowStore.val && untrack(() => updateFlow(flowStore.val));
 });
 $effect(() => {
     $selectedIdStore && untrack(() => inferModuleArgs($selectedIdStore));
 });
-const localModuleStates = $derived(flowPreviewButtons?.getLocalModuleStates() ?? writable({}));
-const localDurationStatuses = $derived(flowPreviewButtons?.getLocalDurationStatuses() ?? writable({}));
-const suspendStatus = $derived(flowPreviewButtons?.getSuspendStatus() ?? writable({}));
+const localModuleStates = $derived(flowPreviewContent?.getLocalModuleStates() ?? writable({}));
+const localDurationStatuses = $derived(flowPreviewContent?.getLocalDurationStatuses() ?? writable({}));
+const suspendStatus = $derived(flowPreviewContent?.getSuspendStatus() ?? writable({}));
 // Create a derived store that only shows the module states when showModuleStatus is true
 // this store can also be updated
 let derivedModuleStates = writable({});
@@ -533,16 +543,12 @@ function resetModulesStates() {
     showJobStatus = false;
 }
 const individualStepTests = $derived(!(showJobStatus && job) && Object.keys($derivedModuleStates).length > 0);
+const flowHasChanged = $derived(flowPreviewContent?.flowHasChanged());
 </script>
 
 <svelte:window onkeydown={onKeyDown} />
 
-<TestJobLoader
-	on:done={loadPastTests}
-	bind:this={testJobLoader}
-	bind:isLoading={testIsLoading}
-	bind:job={testJob}
-/>
+<JobLoader noCode={true} bind:this={jobLoader} bind:isLoading={testIsLoading} bind:job={testJob} />
 
 <main class="h-screen w-full">
 	{#if mode == 'script'}
@@ -603,7 +609,7 @@ const individualStepTests = $derived(!(showJobStatus && job) && Object.keys($der
 			{/if}
 			<div class="flex justify-center pt-1">
 				{#if testIsLoading}
-					<Button on:click={testJobLoader?.cancelJob} btnClasses="w-full" color="red" size="xs">
+					<Button on:click={jobLoader?.cancelJob} btnClasses="w-full" color="red" size="xs">
 						<WindmillIcon
 							white={true}
 							class="mr-2 text-white"
@@ -692,10 +698,10 @@ const individualStepTests = $derived(!(showJobStatus && job) && Object.keys($der
 								disableStaticInputs
 								localModuleStates={derivedModuleStates}
 								onTestUpTo={flowPreviewButtons?.testUpTo}
-								isOwner={flowPreviewButtons?.getIsOwner()}
+								isOwner={flowPreviewContent?.getIsOwner?.()}
 								onTestFlow={flowPreviewButtons?.runPreview}
-								isRunning={flowPreviewButtons?.getIsRunning()}
-								onCancelTestFlow={flowPreviewButtons?.cancelTest}
+								isRunning={flowPreviewContent?.getIsRunning?.()}
+								onCancelTestFlow={flowPreviewContent?.cancelTest}
 								onOpenPreview={flowPreviewButtons?.openPreview}
 								onHideJobStatus={resetModulesStates}
 								{individualStepTests}
@@ -704,6 +710,7 @@ const individualStepTests = $derived(!(showJobStatus && job) && Object.keys($der
 								onDelete={(id) => {
 									delete $derivedModuleStates[id]
 								}}
+								{flowHasChanged}
 							/>
 						{:else}
 							<div class="text-red-400 mt-20">Missing flow modules</div>
@@ -725,7 +732,7 @@ const individualStepTests = $derived(!(showJobStatus && job) && Object.keys($der
 								}}
 								onTestFlow={flowPreviewButtons?.runPreview}
 								{job}
-								isOwner={flowPreviewButtons?.getIsOwner()}
+								isOwner={flowPreviewContent?.getIsOwner()}
 								{localDurationStatuses}
 								{suspendStatus}
 								onOpenDetails={flowPreviewButtons?.openPreview}

package/package/components/DisplayResult.svelte

@@ -24,6 +24,7 @@ import Tooltip from './Tooltip.svelte';
 import HighlightTheme from './HighlightTheme.svelte';
 import { getContext, hasContext, createEventDispatcher, onDestroy } from 'svelte';
 import { toJsonStr } from '../utils';
+import { userStore } from '../stores';
 const IMG_MAX_SIZE = 10000000;
 const TABLE_MAX_SIZE = 5000000;
 const DISPLAY_MAX_SIZE = 100000;
@@ -183,6 +184,28 @@ function inferResultKind(result) {
                 else if (isTableCol(result, keys)) {
                     return 'table-col';
                 }
+                else if (keys.length < 1000 && keys.includes('wm_renderer')) {
+                    const renderer = result['wm_renderer'];
+                    if (typeof renderer === 'string') {
+                        if ([
+                            'json',
+                            'html',
+                            'png',
+                            'file',
+                            'jpeg',
+                            'gif',
+                            'svg',
+                            'filename',
+                            's3object',
+                            'plain',
+                            'markdown',
+                            'map',
+                            'pdf'
+                        ].includes(renderer)) {
+                            return renderer;
+                        }
+                    }
+                }
             }
         }
         catch (err) { }
@@ -624,34 +647,38 @@ $effect(() => {
 									language={json}
 									code={toJsonStr(result).replace(/\\n/g, '\n')}
 								/>
-								<button
-									class="text-secondary underline text-2xs whitespace-nowrap"
-									onclick={() => {
-										s3FileViewer?.open?.(result)
-									}}
-									><span class="flex items-center gap-1"
-										><PanelRightOpen size={12} />object store explorer<Tooltip
-											>Require admin privilege or "S3 resource details and content can be accessed
-											by all users of this workspace" of S3 Storage to be set in the workspace
-											settings</Tooltip
-										></span
-									>
-								</button>
+								{#if $userStore}
+									<button
+										class="text-secondary underline text-2xs whitespace-nowrap"
+										onclick={() => {
+											s3FileViewer?.open?.(result)
+										}}
+										><span class="flex items-center gap-1"
+											><PanelRightOpen size={12} />object store explorer<Tooltip
+												>Require admin privilege or "S3 resource details and content can be accessed
+												by all users of this workspace" of S3 Storage to be set in the workspace
+												settings</Tooltip
+											></span
+										>
+									</button>
+								{/if}
 							{:else if !result?.disable_download}
 								<FileDownload {workspaceId} s3object={result} {appPath} />
-								<button
-									class="text-secondary underline text-2xs whitespace-nowrap"
-									onclick={() => {
-										s3FileViewer?.open?.(result)
-									}}
-									><span class="flex items-center gap-1"
-										><PanelRightOpen size={12} />object store explorer<Tooltip
-											>Require admin privilege or "S3 resource details and content can be accessed
-											by all users of this workspace" of S3 Storage to be set in the workspace
-											settings</Tooltip
-										></span
-									>
-								</button>
+								{#if $userStore}
+									<button
+										class="text-secondary underline text-2xs whitespace-nowrap"
+										onclick={() => {
+											s3FileViewer?.open?.(result)
+										}}
+										><span class="flex items-center gap-1"
+											><PanelRightOpen size={12} />object store explorer<Tooltip
+												>Require admin privilege or "S3 resource details and content can be accessed
+												by all users of this workspace" of S3 Storage to be set in the workspace
+												settings</Tooltip
+											></span
+										>
+									</button>
+								{/if}
 							{/if}
 						</div>
 						{#if typeof result?.s3 === 'string'}

package/package/components/DisplayResult.svelte.d.ts

@@ -40,6 +40,6 @@ declare const DisplayResult: $$__sveltets_2_IsomorphicComponent<Props, {
 }, {}, {
     openDrawer: () => void;
     getToolbarLocation: () => "external" | "self" | undefined;
-}, "forceJson" | "drawerOpen">;
+}, "drawerOpen" | "forceJson">;
 type DisplayResult = InstanceType<typeof DisplayResult>;
 export default DisplayResult;

package/package/components/DynSelect.svelte

@@ -16,7 +16,7 @@ function validSelectObject(x) {
 
 <script lang="ts">import { usePromise } from '../svelte5Utils.svelte';
 import { deepEqual } from 'fast-equals';
-import ResultJobLoader from './ResultJobLoader.svelte';
+import JobLoader from './JobLoader.svelte';
 import Select from './select/Select.svelte';
 import Tooltip from './Tooltip.svelte';
 import { Loader2 } from 'lucide-svelte';
@@ -54,7 +54,7 @@ async function getItemsFromOptions() {
             error: (err) => reject(err)
         };
         helperScript?.type == 'inline'
-            ? resultJobLoader?.runPreview(helperScript?.path ?? 'NO_PATH', helperScript.code, helperScript.lang, { ...args, filterText, _ENTRYPOINT_OVERRIDE: entrypoint }, undefined, cb)
+            ? resultJobLoader?.runPreview(helperScript?.path ?? 'NO_PATH', helperScript.code, helperScript.lang, { ...args, filterText, _ENTRYPOINT_OVERRIDE: entrypoint }, undefined, undefined, undefined, cb)
             : resultJobLoader?.runScriptByHash(helperScript?.hash ?? 'NO_HASH', { ...args, filterText, _ENTRYPOINT_OVERRIDE: entrypoint }, cb);
     });
 }
@@ -71,7 +71,7 @@ let open = $state(false);
 </script>
 
 {#if helperScript}
-	<ResultJobLoader bind:this={resultJobLoader} />
+	<JobLoader bind:this={resultJobLoader} />
 
 	<div class="w-full flex-col flex">
 		<Select

package/package/components/Editor.svelte

@@ -1,6 +1,4 @@
-<!-- <script lang="ts"></script> -->
-
-<script context="module">
+<script module>
 	import '@codingame/monaco-vscode-standalone-languages'
 	import '@codingame/monaco-vscode-standalone-typescript-language-features'
 	import processStdContent from '../process.d.ts.txt?raw'
@@ -73,7 +71,7 @@
 
 <script lang="ts">import { BROWSER } from 'esm-env';
 import { sendUserToast } from '../toast';
-import { createEventDispatcher, onDestroy, onMount } from 'svelte';
+import { createEventDispatcher, onDestroy, onMount, untrack } from 'svelte';
 // import libStdContent from '../es6.d.ts.txt?raw'
 // import domContent from '../dom.d.ts.txt?raw'
 // import denoFetchContent from '../deno_fetch.d.ts.txt?raw'
@@ -113,45 +111,23 @@ import { editorPositionMap } from '../utils';
 import { extToLang, langToExt } from '../editorLangUtils';
 import { aiChatManager } from './copilot/chat/AIChatManager.svelte';
 // import EditorTheme from './EditorTheme.svelte'
-let divEl = null;
-let editor = null;
-// for related places search: ADD_NEW_LANG
-export let code = '';
-export let cmdEnterAction = undefined;
-export let formatAction = undefined;
-export let automaticLayout = true;
-export let websocketAlive = {
-    pyright: false,
-    ruff: false,
-    deno: false,
-    go: false,
-    shellcheck: false
-};
-export let shouldBindKey = true;
-export let fixedOverflowWidgets = true;
-export let path = undefined;
-export let yContent = undefined;
-export let awareness = undefined;
-export let folding = false;
-export let args = undefined;
-export let useWebsockets = true;
-export let small = false;
-export let scriptLang;
-export let disabled = false;
-export let lineNumbersMinChars = 3;
-export let files = {};
-export let extraLib = undefined;
-export let changeTimeout = 500;
-export let loadAsync = false;
-export let key = undefined;
-let lang = scriptLangToEditorLang(scriptLang);
-$: lang = scriptLangToEditorLang(scriptLang);
-let filePath = computePath(path);
-$: filePath = computePath(path);
-let initialPath = path;
-$: path != initialPath &&
-    (scriptLang == 'deno' || scriptLang == 'bun' || scriptLang == 'bunnative') &&
-    handlePathChange();
+let divEl = $state(null);
+let editor = $state(null);
+let { code = $bindable(), cmdEnterAction = undefined, formatAction = undefined, automaticLayout = true, websocketAlive = $bindable(), shouldBindKey = true, fixedOverflowWidgets = true, path = undefined, yContent = undefined, awareness = undefined, folding = false, args = undefined, useWebsockets = true, small = false, scriptLang, disabled = false, lineNumbersMinChars = 3, files = {}, extraLib = undefined, changeTimeout = 500, loadAsync = false, key = undefined, class: clazz = undefined } = $props();
+$effect.pre(() => {
+    if (websocketAlive == undefined) {
+        websocketAlive = {
+            pyright: false,
+            ruff: false,
+            deno: false,
+            go: false,
+            shellcheck: false
+        };
+    }
+});
+let lang = $state(scriptLangToEditorLang(scriptLang));
+let filePath = $state(computePath(path));
+let initialPath = $state(path);
 let websockets = [];
 let languageClients = [];
 let websocketInterval;
@@ -160,7 +136,7 @@ let nbWsAttempt = 0;
 let disposeMethod;
 const dispatch = createEventDispatcher();
 let graphqlService = undefined;
-let dbSchema = undefined;
+let dbSchema = $state(undefined);
 let destroyed = false;
 const uri = computeUri(filePath, scriptLang);
 console.log('uri', uri);
@@ -375,10 +351,7 @@ export function getScriptLang() {
     return scriptLang;
 }
 let command = undefined;
-let sqlTypeCompletor = undefined;
-$: initialized && lang === 'sql' && scriptLang
-    ? addSqlTypeCompletions()
-    : sqlTypeCompletor?.dispose();
+let sqlTypeCompletor = $state(undefined);
 function addSqlTypeCompletions() {
     if (sqlTypeCompletor) {
         sqlTypeCompletor.dispose();
@@ -441,16 +414,12 @@ function updateSchema() {
         dbSchema = undefined;
     }
 }
-$: lang && args && $dbSchemas && updateSchema();
-$: initialized && dbSchema && ['sql', 'graphql'].includes(lang) && addDBSchemaCompletions();
 function disposeSqlSchemaCompletor() {
     sqlSchemaCompletor?.dispose();
 }
-$: (!dbSchema || lang !== 'sql') && disposeSqlSchemaCompletor();
 function disposeGaphqlService() {
     graphqlService = undefined;
 }
-$: (!dbSchema || lang !== 'graphql') && disposeGaphqlService();
 function addDBSchemaCompletions() {
     const { lang: schemaLang, schema } = dbSchema || {};
     if (!schemaLang || !schema) {
@@ -544,12 +513,12 @@ function addDBSchemaCompletions() {
         });
     }
 }
-let reviewingChanges = writable(false);
-let aiChatEditorHandler = undefined;
+let reviewingChanges = $state(writable(false));
+let aiChatEditorHandler = $state(undefined);
 // Inline ai chat widget
-let showInlineAIChat = false;
-let inlineAIChatSelection = null;
-let selectedCode = '';
+let showInlineAIChat = $state(false);
+let inlineAIChatSelection = $state(null);
+let selectedCode = $state('');
 export function reviewAndApplyCode(code) {
     aiChatEditorHandler?.reviewAndApply(code);
 }
@@ -562,22 +531,13 @@ function addChatHandler(editor) {
         console.error('Could not add chat handler', err);
     }
 }
-let autocompletor = undefined;
+let autocompletor = $state(undefined);
 function addAutoCompletor(editor, scriptLang) {
     if (autocompletor) {
         autocompletor.dispose();
     }
     autocompletor = new Autocompletor(editor, scriptLang);
 }
-$: $copilotInfo.enabled &&
-    $codeCompletionSessionEnabled &&
-    Autocompletor.isProviderModelSupported($copilotInfo.codeCompletionModel) &&
-    initialized &&
-    editor &&
-    scriptLang &&
-    addAutoCompletor(editor, scriptLang);
-$: $copilotInfo.enabled && initialized && editor && addChatHandler(editor);
-$: !$codeCompletionSessionEnabled && autocompletor?.dispose();
 const outputChannel = {
     name: 'Language Server Client',
     appendLine: (msg) => {
@@ -688,6 +648,10 @@ export async function reloadWebsocket() {
                 try {
                     console.log('starting client');
                     await languageClient.start();
+                    // for python we want to use the pyright client for signature help, not ruff
+                    if (lang !== 'python' || (lang === 'python' && name == 'pyright')) {
+                        autocompletor?.setLanguageClient(languageClient);
+                    }
                     console.log('started client');
                 }
                 catch (err) {
@@ -914,21 +878,15 @@ async function closeWebsockets() {
     websocketInterval && clearInterval(websocketInterval);
 }
 // let widgets: HTMLElement | undefined = document.getElementById('monaco-widgets-root') ?? undefined
-let model = undefined;
-let monacoBinding = undefined;
-$: if (yContent && awareness && model && editor) {
-    monacoBinding && monacoBinding.destroy();
-    monacoBinding = new MonacoBinding(yContent, model, new Set([editor]), awareness);
-}
-let initialized = false;
+let model = $state(undefined);
+let monacoBinding = $state(undefined);
+let initialized = $state(false);
 let ata = undefined;
-let statusDiv = null;
+let statusDiv = $state(null);
 function saveDraft() {
     dispatch('saveDraft', code);
 }
-let vimDisposable = undefined;
-$: editor && $vimMode && statusDiv && onVimMode();
-$: !$vimMode && vimDisposable && onVimDisable();
+let vimDisposable = $state(undefined);
 function onVimDisable() {
     vimDisposable?.dispose();
 }
@@ -937,7 +895,6 @@ function onVimMode() {
         vimDisposable = initVim(editor, statusDiv, saveDraft);
     }
 }
-$: files && model && onFileChanges();
 let svelteRegistered = false;
 let vueRegistered = false;
 function onFileChanges() {
@@ -1019,7 +976,7 @@ async function loadMonaco() {
     // console.log('af ready')
     initialized = true;
     try {
-        model = meditor.createModel(code, lang == 'nu' ? 'python' : lang, mUri.parse(uri));
+        model = meditor.createModel(code ?? '', lang == 'nu' ? 'python' : lang, mUri.parse(uri));
     }
     catch (err) {
         console.log('model already existed', err);
@@ -1033,7 +990,7 @@ async function loadMonaco() {
     onFileChanges();
     try {
         editor = meditor.create(divEl, {
-            ...editorConfig(code, lang, automaticLayout, fixedOverflowWidgets),
+            ...editorConfig(code ?? '', lang, automaticLayout, fixedOverflowWidgets),
             model,
             fontSize: !small ? 14 : 12,
             lineNumbersMinChars,
@@ -1074,11 +1031,14 @@ async function loadMonaco() {
     });
     editor?.onDidFocusEditorText(() => {
         dispatch('focus');
-        editor?.addCommand(KeyCode.Escape, function () {
-            if (showInlineAIChat) {
-                closeAIInlineWidget();
+        // for escape we use onkeydown instead of addCommand because addCommand on escape specifically prevents default behavior (like autocomplete cancellation)
+        editor?.onKeyDown((e) => {
+            if (e.keyCode === KeyCode.Escape) {
+                if (showInlineAIChat) {
+                    closeAIInlineWidget();
+                }
+                aiChatEditorHandler?.rejectAll();
             }
-            aiChatEditorHandler?.rejectAll();
         });
         editor?.addCommand(KeyMod.CtrlCmd | KeyCode.DownArrow, function () {
             if (aiChatManager.pendingNewCode) {
@@ -1244,7 +1204,7 @@ async function setTypescriptExtraLibs() {
         });
         if (scriptLang == 'bun') {
             ata?.('import "bun-types"');
-            ata?.(code);
+            ata?.(code ?? '');
         }
         dispatch('ataReady');
     }
@@ -1280,7 +1240,7 @@ function closeAIInlineWidget() {
     inlineAIChatSelection = null;
     selectedCode = '';
 }
-let aiChatInlineWidget = null;
+let aiChatInlineWidget = $state(null);
 let loadTimeout = undefined;
 onMount(async () => {
     if (BROWSER) {
@@ -1334,6 +1294,73 @@ function onKeyDown(e) {
         }
     }
 }
+$effect(() => {
+    lang = scriptLangToEditorLang(scriptLang);
+});
+$effect(() => {
+    filePath = computePath(path);
+});
+$effect(() => {
+    path != initialPath &&
+        (scriptLang == 'deno' || scriptLang == 'bun' || scriptLang == 'bunnative') &&
+        untrack(() => {
+            handlePathChange();
+        });
+});
+$effect(() => {
+    initialized && lang === 'sql' && scriptLang
+        ? untrack(() => addSqlTypeCompletions())
+        : sqlTypeCompletor?.dispose();
+});
+$effect(() => {
+    lang && args && $dbSchemas && untrack(() => updateSchema());
+});
+$effect(() => {
+    initialized &&
+        dbSchema &&
+        ['sql', 'graphql'].includes(lang) &&
+        untrack(() => addDBSchemaCompletions());
+});
+$effect(() => {
+    ;
+    (!dbSchema || lang !== 'sql') && untrack(() => disposeSqlSchemaCompletor());
+});
+$effect(() => {
+    ;
+    (!dbSchema || lang !== 'graphql') && untrack(() => disposeGaphqlService());
+});
+$effect(() => {
+    $copilotInfo.enabled &&
+        $codeCompletionSessionEnabled &&
+        Autocompletor.isProviderModelSupported($copilotInfo.codeCompletionModel) &&
+        initialized &&
+        editor &&
+        scriptLang &&
+        untrack(() => editor && addAutoCompletor(editor, scriptLang));
+});
+$effect(() => {
+    $copilotInfo.enabled && initialized && editor && untrack(() => editor && addChatHandler(editor));
+});
+$effect(() => {
+    !$codeCompletionSessionEnabled && autocompletor?.dispose();
+});
+$effect(() => {
+    if (yContent && awareness && model && editor) {
+        monacoBinding && monacoBinding.destroy();
+        untrack(() => {
+            monacoBinding = new MonacoBinding(yContent, model, new Set([editor]), awareness);
+        });
+    }
+});
+$effect(() => {
+    editor && $vimMode && statusDiv && untrack(() => onVimMode());
+});
+$effect(() => {
+    !$vimMode && vimDisposable && untrack(() => onVimDisable());
+});
+$effect(() => {
+    files && model && untrack(() => onFileChanges());
+});
 </script>
 
 <svelte:window onkeydown={onKeyDown} />
@@ -1343,7 +1370,7 @@ function onKeyDown(e) {
 		<FakeMonacoPlaceHolder {code} />
 	</div>
 {/if}
-<div bind:this={divEl} class="{$$props.class} editor {disabled ? 'disabled' : ''}"></div>
+<div bind:this={divEl} class="{clazz} editor {disabled ? 'disabled' : ''}"></div>
 {#if $vimMode}
 	<div class="fixed bottom-0 z-30" bind:this={statusDiv}></div>
 {/if}