windmill-components 1.532.0 → 1.542.4

package/package/components/Editor.svelte

@@ -1,72 +1,6 @@
 <script module>
 	import '@codingame/monaco-vscode-standalone-languages'
 	import '@codingame/monaco-vscode-standalone-typescript-language-features'
-	import processStdContent from '../process.d.ts.txt?raw'
-
-	languages.typescript.typescriptDefaults.addExtraLib(processStdContent, 'process.d.ts')
-
-	languages.typescript.typescriptDefaults.setModeConfiguration({
-		completionItems: true,
-		hovers: true,
-		documentSymbols: true,
-		definitions: true,
-		references: true,
-		documentHighlights: true,
-		rename: true,
-		diagnostics: true,
-		documentRangeFormattingEdits: true,
-		signatureHelp: true,
-		onTypeFormattingEdits: true,
-		codeActions: true,
-		inlayHints: true
-	})
-
-	// languages.typescript.javascriptDefaults.setEagerModelSync(true)
-	languages.typescript.typescriptDefaults.setEagerModelSync(true)
-
-	// languages.typescript.javascriptDefaults.setDiagnosticsOptions({
-	// 	noSemanticValidation: false,
-	// 	noSyntaxValidation: false,
-	// 	noSuggestionDiagnostics: false,
-	// 	diagnosticCodesToIgnore: [1108]
-	// })
-
-	languages.typescript.typescriptDefaults.setDiagnosticsOptions({
-		noSemanticValidation: false,
-		noSyntaxValidation: false,
-
-		noSuggestionDiagnostics: false,
-		diagnosticCodesToIgnore: [1108, 7006, 7034, 7019, 7005]
-	})
-
-	languages.typescript.typescriptDefaults.setCompilerOptions({
-		target: languages.typescript.ScriptTarget.Latest,
-		allowNonTsExtensions: true,
-		noSemanticValidation: false,
-		noSyntaxValidation: false,
-		completionItems: true,
-		hovers: true,
-		documentSymbols: true,
-		definitions: true,
-		references: true,
-		documentHighlights: true,
-		rename: true,
-		diagnostics: true,
-		documentRangeFormattingEdits: true,
-		signatureHelp: true,
-		onTypeFormattingEdits: true,
-		codeActions: true,
-		inlayHints: true,
-		checkJs: true,
-		allowJs: true,
-		noUnusedLocals: true,
-		strict: true,
-		noLib: false,
-		allowImportingTsExtensions: true,
-		allowSyntheticDefaultImports: true,
-		moduleResolution: languages.typescript.ModuleResolutionKind.NodeJs,
-		jsx: languages.typescript.JsxEmit.React
-	})
 </script>
 
 <script lang="ts">import { BROWSER } from 'esm-env';
@@ -107,14 +41,16 @@ import AIChatInlineWidget from './copilot/chat/AIChatInlineWidget.svelte';
 import { writable } from 'svelte/store';
 import { formatResourceTypes } from './copilot/chat/script/core';
 import FakeMonacoPlaceHolder from './FakeMonacoPlaceHolder.svelte';
-import { editorPositionMap, readFieldsRecursively } from '../utils';
+import { editorPositionMap } from '../utils';
 import { extToLang, langToExt } from '../editorLangUtils';
 import { aiChatManager } from './copilot/chat/AIChatManager.svelte';
 import { getDbSchemas } from './apps/components/display/dbtable/utils';
+import { PYTHON_PREPROCESSOR_MODULE_CODE, TS_PREPROCESSOR_MODULE_CODE } from '../script_helpers';
+import { setMonacoTypescriptOptions } from './monacoLanguagesOptions';
 // import EditorTheme from './EditorTheme.svelte'
 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, moduleId = undefined } = $props();
+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, moduleId = undefined, enablePreprocessorSnippet = false } = $props();
 $effect.pre(() => {
     if (websocketAlive == undefined) {
         websocketAlive = {
@@ -406,8 +342,7 @@ function addSqlTypeCompletions() {
     });
 }
 let sqlSchemaCompletor = undefined;
-async function updateSchema() {
-    const newSchemaRes = lang === 'graphql' ? args?.api : args?.database;
+async function updateSchema(newSchemaRes) {
     if (typeof newSchemaRes === 'string') {
         const resourcePath = newSchemaRes.replace('$res:', '');
         dbSchema = $dbSchemas[resourcePath];
@@ -523,14 +458,68 @@ function addDBSchemaCompletions() {
         });
     }
 }
+let preprocessorCompletor = undefined;
+function addPreprocessorCompletions(lang) {
+    if (preprocessorCompletor) {
+        preprocessorCompletor.dispose();
+    }
+    const preprocessorCode = lang === 'typescript' ? TS_PREPROCESSOR_MODULE_CODE : PYTHON_PREPROCESSOR_MODULE_CODE;
+    preprocessorCompletor = languages.registerCompletionItemProvider(lang, {
+        provideCompletionItems: function (model, position) {
+            const word = model.getWordUntilPosition(position);
+            if (word.word.length >= 3 && 'preprocessor'.startsWith(word.word)) {
+                const range = {
+                    startLineNumber: position.lineNumber,
+                    endLineNumber: position.lineNumber,
+                    startColumn: word.startColumn,
+                    endColumn: word.endColumn
+                };
+                return {
+                    suggestions: [
+                        {
+                            label: 'preprocessor (windmill)',
+                            kind: languages.CompletionItemKind.Function,
+                            insertTextRules: languages.CompletionItemInsertTextRule.InsertAsSnippet,
+                            insertText: preprocessorCode,
+                            range,
+                            additionalTextEdits: [
+                                {
+                                    range: {
+                                        startLineNumber: position.lineNumber,
+                                        endLineNumber: position.lineNumber,
+                                        startColumn: 0,
+                                        endColumn: word.startColumn
+                                    },
+                                    text: ''
+                                }
+                            ]
+                        }
+                    ]
+                };
+            }
+            return {
+                suggestions: []
+            };
+        }
+    });
+}
 let reviewingChanges = $state(writable(false));
 let aiChatEditorHandler = $state(undefined);
 // Inline ai chat widget
 let showInlineAIChat = $state(false);
 let inlineAIChatSelection = $state(null);
 let selectedCode = $state('');
-export function reviewAndApplyCode(code, applyAll = false) {
-    aiChatEditorHandler?.reviewAndApply(code, applyAll);
+export async function reviewAndApplyCode(code, opts) {
+    await aiChatEditorHandler?.reviewChanges(code, opts);
+}
+export async function reviewAppliedCode(originalCode, opts) {
+    await aiChatEditorHandler?.reviewChanges(originalCode, {
+        mode: 'revert',
+        onFinishedReview: opts?.onFinishedReview
+    });
+}
+export function getAiChatEditorHandler() {
+    return aiChatEditorHandler;
 }
 function addChatHandler(editor) {
     try {
@@ -962,6 +951,7 @@ function onFileChanges() {
 }
 let timeoutModel = undefined;
 async function loadMonaco() {
+    setMonacoTypescriptOptions();
     console.log('path', uri);
     try {
         console.log("Loading Monaco's language client");
@@ -1027,7 +1017,7 @@ async function loadMonaco() {
         }, changeTimeout);
         ataModel && clearTimeout(ataModel);
         ataModel = setTimeout(() => {
-            if (scriptLang == 'bun') {
+            if (scriptLang == 'bun' || scriptLang == 'bunnative') {
                 ata?.(getCode());
             }
         }, 1000);
@@ -1148,7 +1138,9 @@ async function setTypescriptExtraLibs() {
         const uri = mUri.parse('file:///extraLib.d.ts');
         languages.typescript.typescriptDefaults.addExtraLib(extraLib, uri.toString());
     }
-    if (lang === 'typescript' && (scriptLang == 'bun' || scriptLang == 'tsx') && ata == undefined) {
+    if (lang === 'typescript' &&
+        (scriptLang == 'bun' || scriptLang == 'tsx' || scriptLang == 'bunnative') &&
+        ata == undefined) {
         const hostname = getHostname();
         const addLibraryToRuntime = async (code, _path) => {
             const path = 'file://' + _path;
@@ -1214,6 +1206,8 @@ async function setTypescriptExtraLibs() {
         });
         if (scriptLang == 'bun') {
             ata?.('import "bun-types"');
+        }
+        if (scriptLang == 'bunnative' || scriptLang == 'bun') {
             ata?.(code ?? '');
         }
         dispatch('ataReady');
@@ -1272,6 +1266,7 @@ onDestroy(() => {
     sqlSchemaCompletor && sqlSchemaCompletor.dispose();
     autocompletor && autocompletor.dispose();
     sqlTypeCompletor && sqlTypeCompletor.dispose();
+    preprocessorCompletor && preprocessorCompletor.dispose();
     timeoutModel && clearTimeout(timeoutModel);
     loadTimeout && clearTimeout(loadTimeout);
     aiChatEditorHandler?.clear();
@@ -1290,15 +1285,33 @@ async function genRoot(hostname) {
     let root = hostname + '/api/scripts_u/tokened_raw/' + $workspaceStore + '/' + token;
     return root;
 }
+function acceptCodeChanges() {
+    const mode = aiChatEditorHandler?.getReviewMode?.();
+    if (mode === 'revert') {
+        aiChatEditorHandler?.keepAll();
+    }
+    else {
+        aiChatEditorHandler?.acceptAll();
+    }
+}
+function rejectCodeChanges() {
+    const mode = aiChatEditorHandler?.getReviewMode?.();
+    if (mode === 'revert') {
+        aiChatEditorHandler?.revertAll();
+    }
+    else {
+        aiChatEditorHandler?.rejectAll();
+    }
+}
 function onKeyDown(e) {
     if (e.key === 'Escape') {
         if (showInlineAIChat) {
             closeAIInlineWidget();
         }
-        aiChatEditorHandler?.rejectAll();
+        rejectCodeChanges();
     }
     else if ((e.ctrlKey || e.metaKey) && e.key === 'ArrowDown' && aiChatManager.pendingNewCode) {
-        aiChatManager.scriptEditorApplyCode?.(aiChatManager.pendingNewCode);
+        acceptCodeChanges();
         if (showInlineAIChat) {
             closeAIInlineWidget();
         }
@@ -1323,9 +1336,17 @@ $effect(() => {
         : sqlTypeCompletor?.dispose();
 });
 $effect(() => {
-    console.log('updating schema', lang, $dbSchemas);
-    readFieldsRecursively(args);
-    lang && $dbSchemas && untrack(() => updateSchema());
+    initialized && (lang === 'typescript' || lang === 'python') && enablePreprocessorSnippet
+        ? untrack(() => addPreprocessorCompletions(lang))
+        : preprocessorCompletor?.dispose();
+});
+let lastArg = undefined;
+$effect(() => {
+    let newArg = lang === 'graphql' ? args?.api : args?.database;
+    if (newArg !== lastArg) {
+        lastArg = newArg;
+        $dbSchemas && untrack(() => updateSchema(newArg));
+    }
 });
 $effect(() => {
     console.log('updating db schema completions', dbSchema, lang);
@@ -1394,14 +1415,7 @@ $effect(() => {
 {/if}
 
 {#if $reviewingChanges}
-	<GlobalReviewButtons
-		onAcceptAll={() => {
-			aiChatEditorHandler?.acceptAll()
-		}}
-		onRejectAll={() => {
-			aiChatEditorHandler?.rejectAll()
-		}}
-	/>
+	<GlobalReviewButtons onAcceptAll={acceptCodeChanges} onRejectAll={rejectCodeChanges} />
 {/if}
 
 {#if editor && $copilotInfo.enabled && aiChatEditorHandler}

package/package/components/Editor.svelte.d.ts

@@ -4,6 +4,7 @@ import { type Preview } from '../gen';
 import type { Text } from 'yjs';
 import { editor as meditor, type IDisposable } from 'monaco-editor';
 import { type DepsToGet } from '../ata/index';
+import { AIChatEditorHandler, type ReviewChangesOpts } from './copilot/chat/monaco-adapter';
 interface Props {
     code?: string;
     cmdEnterAction?: (() => void) | undefined;
@@ -32,6 +33,7 @@ interface Props {
     key?: string | undefined;
     class?: string | undefined;
     moduleId?: string;
+    enablePreprocessorSnippet?: boolean;
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
@@ -72,7 +74,11 @@ declare const Editor: $$__sveltets_2_IsomorphicComponent<Props, {
     append: (code: string) => void;
     format: () => Promise<void>;
     getScriptLang: () => string | undefined;
-    reviewAndApplyCode: (code: string, applyAll?: boolean) => void;
+    reviewAndApplyCode: (code: string, opts?: ReviewChangesOpts) => Promise<void>;
+    reviewAppliedCode: (originalCode: string, opts?: {
+        onFinishedReview?: () => void;
+    }) => Promise<void>;
+    getAiChatEditorHandler: () => AIChatEditorHandler | undefined;
     reloadWebsocket: () => Promise<void>;
     fetchPackageDeps: (deps: DepsToGet) => Promise<void>;
     addAction: (id: string, label: string, callback: (editor: meditor.IStandaloneCodeEditor) => void, keybindings?: number[]) => void;

package/package/components/EditorBar.svelte

@@ -89,7 +89,7 @@ let showResourcePicker = $derived([
     'csharp',
     'nu',
     'java',
-    'ruby',
+    'ruby'
     // for related places search: ADD_NEW_LANG
 ].includes(lang ?? ''));
 let showS3Picker = $derived(['duckdb', 'python3'].includes(lang ?? '') ||
@@ -619,10 +619,7 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 	on:selectAndClose={(s3obj) => {
 		let s = `'${formatS3Object(s3obj.detail)}'`
 		if (lang === 'duckdb') {
-			if (s3obj.detail?.s3.endsWith('.json')) s = `read_json(${s})`
-			if (s3obj.detail?.s3.endsWith('.csv')) s = `read_csv(${s})`
-			if (s3obj.detail?.s3.endsWith('.parquet')) s = `read_parquet(${s})`
-			editor?.insertAtCursor(s)
+			editor?.insertAtCursor(`SELECT * FROM ${s}`)
 		} else if (lang === 'python3') {
 			if (!editor?.getCode().includes('import wmill')) {
 				editor?.insertAtBeginning('import wmill\n')

package/package/components/FlowBuilder.svelte

@@ -33,7 +33,7 @@ import DeployButton from './DeployButton.svelte';
 import { deployTriggers, filterDraftTriggers, handleSelectTriggerFromKind } from './triggers/utils';
 import DraftTriggersConfirmationModal from './common/confirmationModal/DraftTriggersConfirmationModal.svelte';
 import { Triggers } from './triggers/triggers.svelte';
-import { TestSteps } from './flows/testSteps.svelte';
+import { StepsInputArgs } from './flows/stepsInputArgs.svelte';
 import { aiChatManager } from './copilot/chat/AIChatManager.svelte';
 import { setStepHistoryLoaderContext, StepHistoryLoader } from './stepHistoryLoader.svelte';
 import { ModulesTestStates } from './modulesTest.svelte';
@@ -440,7 +440,7 @@ const flowInputEditorStateStore = writable({
     editPanelSize: 0,
     payloadData: undefined
 });
-const testSteps = new TestSteps();
+const stepsInputArgs = new StepsInputArgs();
 function select(selectedId) {
     selectedIdStore.set(selectedId);
 }
@@ -458,7 +458,7 @@ setContext('FlowEditorContext', {
     flowStateStore,
     flowStore,
     pathStore,
-    testSteps,
+    stepsInputArgs,
     saveDraft,
     initialPathStore,
     fakeInitialPath,
@@ -474,7 +474,7 @@ setContext('FlowGraphAssetContext', initFlowGraphAssetsCtx({ getModules: () => f
 // Add triggers context store
 const triggersState = $state(new Triggers([
     { type: 'webhook', path: '', isDraft: false },
-    { type: 'email', path: '', isDraft: false },
+    { type: 'default_email', path: '', isDraft: false },
     ...(draftTriggersFromUrl ?? savedFlow?.draft?.draft_triggers ?? [])
 ], selectedTriggerIndexFromUrl, saveSessionDraft));
 setContext('TriggerContext', {
@@ -523,7 +523,7 @@ function onKeyDown(event) {
             }
             break;
         case 'ArrowDown': {
-            if (!$insertButtonOpen) {
+            if (!$insertButtonOpen && !flowPreviewButtons?.getPreviewOpen()) {
                 let ids = generateIds();
                 let idx = ids.indexOf($selectedIdStore);
                 if (idx > -1 && idx < ids.length - 1) {
@@ -534,7 +534,7 @@ function onKeyDown(event) {
             break;
         }
         case 'ArrowUp': {
-            if (!$insertButtonOpen) {
+            if (!$insertButtonOpen && !flowPreviewButtons?.getPreviewOpen()) {
                 let ids = generateIds();
                 let idx = ids.indexOf($selectedIdStore);
                 if (idx > 0 && idx < ids.length) {
@@ -909,6 +909,8 @@ const flowHasChanged = $derived(flowPreviewContent?.flowHasChanged());
 						bind:this={flowPreviewButtons}
 						{loading}
 						onRunPreview={() => {
+							// Reset manually edited args inputs when running a preview
+							stepsInputArgs.resetManuallyEditedArgs()
 							modulesTestStates.hideJobsInGraph()
 							localModuleStates = {}
 							showJobStatus = true
@@ -950,7 +952,7 @@ const flowHasChanged = $derived(flowPreviewContent?.flowHasChanged());
 					{newFlow}
 					on:applyArgs={(ev) => {
 						if (ev.detail.kind === 'preprocessor') {
-							testSteps.setStepArgs('preprocessor', ev.detail.args ?? {})
+							stepsInputArgs.setStepArgs('preprocessor', ev.detail.args ?? {})
 							$selectedIdStore = 'preprocessor'
 						}
 					}}
@@ -998,6 +1000,7 @@ const flowHasChanged = $derived(flowPreviewContent?.flowHasChanged());
 						delete modulesTestStates.states[id]
 					}}
 					{flowHasChanged}
+					previewOpen={flowPreviewButtons?.getPreviewOpen()}
 				/>
 			{:else}
 				<CenteredPage>Loading...</CenteredPage>

package/package/components/FlowLogRow.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">import { twMerge } from 'tailwind-merge';
+import { ChevronDown, ChevronRight } from 'lucide-svelte';
+let { id, isCollapsible, isRunning, isCurrent, isExpanded, toggleExpanded, children, label, class: className = '', select } = $props();
+function handleClick() {
+    if (isCollapsible) {
+        toggleExpanded(id);
+    }
+    select(id);
+}
+</script>
+
+<li
+	class={twMerge(
+		'border-b flex flex-col',
+		isCurrent(id) ? 'border-l-2 !border-l-gray-400 -ml-[2px]' : ''
+	)}
+>
+	<button
+		class={twMerge(
+			'py-1 leading-tight w-full flex items-center justify-left text-xs text-tertiary hover:text-primary ',
+			isCurrent(id) ? 'bg-surface-hover text-primary' : '',
+			className
+		)}
+		tabindex="-1"
+		onclick={handleClick}
+		data-nav-id={id}
+	>
+		<div class="px-1">
+			{#if isCollapsible}
+				{#if isExpanded(id, isRunning) || id === 'root-flow'}
+					<ChevronDown size={8} strokeWidth={isCurrent(id) ? 4 : 2} />
+				{:else}
+					<ChevronRight size={8} strokeWidth={isCurrent(id) ? 4 : 2} />
+				{/if}
+			{:else}
+				<!-- Empty subflow - no collapse button, just spacing -->
+				<div class="w-2"></div>
+			{/if}
+		</div>
+		<div class="w-full leading-tight">
+			<div class={twMerge('w-full pr-2 cursor-pointer', isCurrent(id) ? 'bg-surface-hover' : '')}>
+				{@render label()}
+			</div>
+		</div>
+	</button>
+
+	{#if isExpanded(id) || !isCollapsible}
+		<div class="my-1 transition-all duration-200 ease-in-out">
+			<div class="pl-4">
+				{@render children()}
+			</div>
+		</div>
+	{/if}
+</li>
+
+<style>
+	.transition-all {
+		transition: all 0.2s ease-in-out;
+	}
+
+	[data-nav-id]:focus-visible {
+		outline: none;
+		outline-offset: 0;
+	}</style>

package/package/components/FlowLogRow.svelte.d.ts

@@ -0,0 +1,15 @@
+interface Props {
+    id: string;
+    isCollapsible: boolean;
+    isRunning?: boolean;
+    isCurrent: (id: string) => boolean;
+    isExpanded: (id: string, isRunning?: boolean) => boolean;
+    toggleExpanded: (id: string) => void;
+    children: import('svelte').Snippet;
+    label: import('svelte').Snippet;
+    class?: string;
+    select: (id: string) => void;
+}
+declare const FlowLogRow: import("svelte").Component<Props, {}, "">;
+type FlowLogRow = ReturnType<typeof FlowLogRow>;
+export default FlowLogRow;