windmill-components 1.510.1 → 1.511.0

package/package/components/copilot/autocomplete/Autocompletor.js

@@ -1,8 +1,15 @@
 import { sleep } from '../../../utils';
-import { Position, languages } from 'monaco-editor';
+import { editor as meditor, Position, languages } from 'monaco-editor';
 import { LRUCache } from 'lru-cache';
 import { autocompleteRequest } from './request';
-import { FIM_MAX_TOKENS } from '../lib';
+import { FIM_MAX_TOKENS, getModelContextWindow } from '../lib';
+import { setGlobalCSS } from '../shared';
+import { get } from 'svelte/store';
+import { copilotInfo } from '../../../stores';
+// max ratio of completions to context window
+const COMPLETIONS_MAX_RATIO = 0.1;
+// hard limit to max number of completions to fetch details for, to avoid performance overhead
+const MAX_COMPLETIONS_DETAILS = 50;
 function filterCompletion(completion, suffix, shouldReturnMultiline) {
     const trimmedCompletion = completion.replaceAll('\n', '');
     const trimmedSuffix = suffix.slice(0, FIM_MAX_TOKENS).replaceAll('\n', '');
@@ -12,10 +19,10 @@ function filterCompletion(completion, suffix, shouldReturnMultiline) {
     if (!shouldReturnMultiline) {
         if (completion.startsWith('\n')) {
             // TODO improve cache for this case so that we can use cache when accepting the first line of a multiline completion which starts with \n
-            return completion.split('\n').slice(0, 2).join('\n');
+            return completion.split('\n').slice(0, 2).join('\n') + '\n';
         }
-        else {
-            return completion.split('\n').slice(0, 1).join('\n');
+        else if (completion.includes('\n')) {
+            return completion.split('\n').slice(0, 1).join('\n') + '\n';
         }
     }
     return completion;
@@ -29,50 +36,103 @@ export class Autocompletor {
     #abortController = new AbortController();
     #completionDisposable;
     #cursorDisposable;
+    #lastCompletions = [];
+    #contextWindow = 0;
+    #shouldShowDeletionCue = false;
+    #languageClient = undefined;
     constructor(editor, scriptLang) {
+        setGlobalCSS('ai-chat-autocomplete', `
+			.ai-completion-diff {
+				background: var(--vscode-diffEditor-removedTextBackground);
+			}
+		`);
         this.#scriptLang = scriptLang;
+        const deletionsCues = editor.createDecorationsCollection();
+        const completionModel = get(copilotInfo).codeCompletionModel;
+        this.#contextWindow = getModelContextWindow(completionModel?.model ?? '');
         this.#completionDisposable = languages.registerInlineCompletionsProvider({ pattern: '**' }, {
+            handleItemDidShow: (items) => {
+                const item = items.items[0];
+                const model = editor.getModel();
+                if (!item || !item.range || !model) {
+                    return;
+                }
+                const toEol = {
+                    ...item.range,
+                    endColumn: model.getLineMaxColumn(item.range.startLineNumber)
+                };
+                if (this.#shouldShowDeletionCue) {
+                    deletionsCues.set([
+                        {
+                            range: toEol,
+                            options: {
+                                className: 'ai-completion-diff'
+                            }
+                        }
+                    ]);
+                    this.#shouldShowDeletionCue = false;
+                }
+            },
             provideInlineCompletions: async (model, position, context, token) => {
                 if (token.isCancellationRequested ||
                     model.uri.toString() !== editor.getModel()?.uri.toString()) {
                     return { items: [] };
                 }
+                this.#shouldShowDeletionCue = false;
                 const shouldReturnMultiline = this.#shouldReturnMultiline(model, position);
                 const result = await this.#autocomplete(model, position);
-                if (result) {
-                    const completion = filterCompletion(result.completion, result.suffix, shouldReturnMultiline);
-                    if (!completion) {
-                        return { items: [] };
-                    }
-                    let range = {
-                        startLineNumber: position.lineNumber,
-                        startColumn: position.column,
-                        endLineNumber: position.lineNumber,
-                        endColumn: position.column
-                    };
-                    const multiline = completion.indexOf('\n') !== -1;
-                    if (multiline) {
-                        // if multiline the range should span until the end of the line
-                        range.endColumn = model.getLineMaxColumn(position.lineNumber);
-                    }
-                    return {
-                        items: [
-                            {
-                                insertText: completion,
-                                range
-                            }
-                        ]
-                    };
+                if (!result) {
+                    return { items: [] };
                 }
-                else {
-                    return {
-                        items: []
-                    };
+                const range = {
+                    startLineNumber: position.lineNumber,
+                    startColumn: position.column,
+                    endLineNumber: position.lineNumber,
+                    endColumn: position.column
+                };
+                const toEol = {
+                    ...range,
+                    endColumn: model.getLineMaxColumn(position.lineNumber)
+                };
+                // if shouldReturnMultiline is false, only keep first line of a multiline completion (keeps final new line)
+                let completion = filterCompletion(result.completion, result.suffix, shouldReturnMultiline);
+                if (!completion) {
+                    return { items: [] };
                 }
+                // if completion ends with new line, we want the suggestion to replace the end of the current line
+                const endsWithNewLine = completion.endsWith('\n');
+                if (endsWithNewLine) {
+                    // remove new line
+                    completion = completion.slice(0, -1);
+                    // set deletion cue for content that will be replaced by the suggestion
+                    if (!completion.includes('\n')) {
+                        this.#shouldShowDeletionCue = true;
+                    }
+                }
+                const multiline = completion.indexOf('\n') !== -1;
+                return {
+                    items: [
+                        {
+                            insertText: completion,
+                            range: !endsWithNewLine && multiline ? toEol : range,
+                            // if completion ends with new line, after applying the suggestion, delete the rest of the line
+                            additionalTextEdits: endsWithNewLine && !multiline
+                                ? [
+                                    {
+                                        range: toEol,
+                                        text: ''
+                                    }
+                                ]
+                                : []
+                        }
+                    ]
+                };
             },
             freeInlineCompletions: () => { }
         });
         this.#cursorDisposable = editor.onDidChangeCursorPosition(async (e) => {
+            deletionsCues.clear();
+            this.#shouldShowDeletionCue = false;
             if (e.source === 'mouse') {
                 const model = editor.getModel();
                 if (model) {
@@ -91,6 +151,9 @@ export class Autocompletor {
         this.#completionDisposable.dispose();
         this.#cursorDisposable.dispose();
     }
+    setLanguageClient(client) {
+        this.#languageClient = client;
+    }
     #shouldReturnMultiline(model, position) {
         if (position.column === model.getLineMaxColumn(position.lineNumber)) {
             const cachedCompletion = this.#cache.get(position.lineNumber);
@@ -102,6 +165,146 @@ export class Autocompletor {
         }
         return false;
     }
+    #markersAtCursor(pos, all) {
+        const padding = 1;
+        return all.filter((m) => m.startLineNumber >= pos.lineNumber - padding && m.endLineNumber <= pos.lineNumber + padding);
+    }
+    #partsToText(parts) {
+        return parts.map((p) => p.text).join('');
+    }
+    #formatCompletionEntry(details) {
+        let ret = 'SIGNATURE: ' + this.#partsToText(details.displayParts) + '\n';
+        for (const doc of details.documentation) {
+            ret += 'DOC: ' + doc.text + '\n';
+        }
+        ret += 'TAGS: ' + JSON.stringify(details.tags);
+        return ret;
+    }
+    #formatTsHelp(help) {
+        const signature = this.#partsToText(help.prefixDisplayParts) +
+            help.parameters
+                .map((p) => this.#partsToText(p.displayParts))
+                .join(this.#partsToText(help.separatorDisplayParts)) +
+            this.#partsToText(help.suffixDisplayParts);
+        const doc = this.#partsToText(help.documentation);
+        let ret = 'SIGNATURE: ' + signature + '\n';
+        ret += 'DOC: ' + doc + '\n';
+        return ret;
+    }
+    #formatLanguageClientHelp(help) {
+        return help.signatures
+            .map((s) => 'SIGNATURE: ' + s.label + '\n' + 'DOC: ' + s.documentation.value)
+            .join('\n');
+    }
+    async #getCompletions(model, position) {
+        try {
+            const line = model.getLineContent(position.lineNumber);
+            const word = line.substring(0, position.column);
+            let hasDot = false;
+            let afterDot = '';
+            for (let i = word.length - 1; i >= 0; i--) {
+                if (word[i] === ' ') {
+                    break;
+                }
+                if (word[i] === '.') {
+                    hasDot = true;
+                    afterDot = word.substring(i + 1).split('(')[0];
+                    break;
+                }
+            }
+            if (hasDot) {
+                if (this.#scriptLang === 'bun') {
+                    return await this.#getTsCompletions(model, position, afterDot);
+                }
+                else {
+                    return await this.#getLanguageClientCompletions(model, position, afterDot);
+                }
+            }
+            return [];
+        }
+        catch (e) {
+            console.error('Error getting completions', e);
+            return [];
+        }
+    }
+    async #getTsCompletions(model, position, afterDot) {
+        try {
+            const offs = model.getOffsetAt(position);
+            const workerFactory = await languages.typescript.getTypeScriptWorker();
+            const worker = await workerFactory(model.uri);
+            const info = await worker.getCompletionsAtPosition(model.uri.toString(), offs);
+            let entries = [];
+            const filteredEntries = (info?.entries ?? []).filter((e) => afterDot ? e?.name?.startsWith(afterDot) : true);
+            const detailedEntries = await Promise.all(filteredEntries
+                .slice(0, MAX_COMPLETIONS_DETAILS)
+                .map((e) => worker.getCompletionEntryDetails(model.uri.toString(), offs, e.name)));
+            entries.push(...detailedEntries.map((e) => this.#formatCompletionEntry(e)));
+            // get signature of open parenthesis
+            const help = await worker.getSignatureHelpItems(model.uri.toString(), offs, {
+                triggerReason: { kind: 'invoked' }
+            });
+            if (help && help.items?.length > 0) {
+                entries.push(this.#formatTsHelp(help.items[0]));
+            }
+            return entries;
+        }
+        catch (e) {
+            console.error('Error getting ts completions', e);
+            return [];
+        }
+    }
+    async #getLanguageClientCompletions(model, position, afterDot) {
+        try {
+            if (!this.#languageClient) {
+                return [];
+            }
+            let entries = [];
+            const completions = await this.#languageClient.sendRequest('textDocument/completion', {
+                textDocument: { uri: model.uri.toString() },
+                position: {
+                    line: position.lineNumber - 1,
+                    character: position.column - 1
+                }
+            });
+            // if we failed to resolve a completion, don't try to resolve any more
+            let failedToResolve = false;
+            const detailedEntries = await Promise.all(completions.items
+                .filter((item) => (afterDot ? item.label.startsWith(afterDot) : true))
+                .slice(0, MAX_COMPLETIONS_DETAILS)
+                .map(async (item) => {
+                try {
+                    if (failedToResolve) {
+                        return '';
+                    }
+                    const resolvedItem = await this.#languageClient.sendRequest('completionItem/resolve', item);
+                    return this.#formatLanguageClientHelp({
+                        signatures: [resolvedItem]
+                    });
+                }
+                catch (e) {
+                    console.error('Failed to resolve completion item:', e);
+                    failedToResolve = true;
+                    return '';
+                }
+            }));
+            entries.push(...detailedEntries.filter((e) => e !== ''));
+            const help = await this.#languageClient.sendRequest('textDocument/signatureHelp', {
+                textDocument: { uri: model.uri.toString() },
+                position: {
+                    line: position.lineNumber - 1, // LSP uses 0-based line numbers
+                    character: position.column - 1 // LSP uses 0-based character positions
+                }
+            });
+            if (help && help.signatures.length > 0) {
+                entries.push(this.#formatLanguageClientHelp(help));
+            }
+            return entries;
+        }
+        catch (e) {
+            console.error('Error getting language client completions', e);
+            return [];
+        }
+    }
     async #autocomplete(model, position) {
         const thisTs = Date.now();
         this.#lastTs = thisTs;
@@ -124,6 +327,12 @@ export class Autocompletor {
             endLineNumber: model.getLineCount(),
             endColumn: model.getLineMaxColumn(model.getLineCount())
         });
+        const completions = await this.#getCompletions(model, position);
+        // reset cache for this line if new completions are available
+        if (completions.length > 0 && completions.some((c) => !this.#lastCompletions.includes(c))) {
+            this.#cache.delete(position.lineNumber);
+        }
+        this.#lastCompletions = completions;
         const cachedCompletion = this.#cache.get(position.lineNumber);
         if (cachedCompletion) {
             if (position.column > cachedCompletion.column &&
@@ -148,10 +357,17 @@ export class Autocompletor {
             endLineNumber: position.lineNumber,
             endColumn: position.column
         });
+        const markers = meditor.getModelMarkers({ resource: model.uri });
+        const markersAtCursor = this.#markersAtCursor(position, markers);
+        const librariesCompletions = completions
+            .join('\n')
+            .slice(0, Math.floor(this.#contextWindow * COMPLETIONS_MAX_RATIO));
         const completion = await autocompleteRequest({
             prefix,
             suffix,
-            scriptLang: this.#scriptLang
+            scriptLang: this.#scriptLang,
+            markers: markersAtCursor,
+            libraries: librariesCompletions
         }, this.#abortController);
         if (!completion) {
             return;

package/package/components/copilot/autocomplete/request.d.ts

@@ -1,6 +1,9 @@
 import { type ScriptLang } from '../../../gen/types.gen';
+import type { editor } from 'monaco-editor';
 export declare function autocompleteRequest(context: {
     prefix: string;
     suffix: string;
     scriptLang: ScriptLang | 'bunnative' | 'jsx' | 'tsx' | 'json';
+    markers: editor.IMarker[];
+    libraries: string;
 }, abortController: AbortController): Promise<string | undefined>;

package/package/components/copilot/autocomplete/request.js

@@ -4,14 +4,22 @@ import { getFimCompletion } from '../lib';
 import { getLangContext } from '../chat/script/core';
 import {} from '../../../gen/types.gen';
 import { getCommentSymbol } from '../utils';
+function comment(commentSymbol, text) {
+    return text
+        .split('\n')
+        .map((line) => `${commentSymbol} ${line}`)
+        .join('\n');
+}
 export async function autocompleteRequest(context, abortController) {
-    const langContext = getLangContext(context.scriptLang);
-    const commentSymbol = getCommentSymbol(context.scriptLang);
-    if (langContext) {
-        const contextLines = langContext.split('\n');
-        const commentedContext = contextLines.map((line) => `${commentSymbol} ${line}`).join('\n');
-        context.prefix = commentedContext + '\n' + context.prefix;
-    }
+    let commentSymbol = getCommentSymbol(context.scriptLang);
+    let contextLines = comment(commentSymbol, 'You are a code completion assistant. You are given three important contexts (<LANGUAGE CONTEXT>, <DIAGNOSTICS>, <LIBRARY METHODS>) to help you complete the code.\n');
+    contextLines += comment(commentSymbol, 'LANGUAGE CONTEXT:\n');
+    contextLines += comment(commentSymbol, getLangContext(context.scriptLang) + '\n');
+    contextLines += comment(commentSymbol, 'DIAGNOSTICS:\n');
+    contextLines += comment(commentSymbol, context.markers.map((m) => m.message).join('\n') + '\n');
+    contextLines += comment(commentSymbol, 'LIBRARY METHODS:\n');
+    contextLines += comment(commentSymbol, context.libraries + '\n');
+    context.prefix = contextLines + '\n' + context.prefix;
     const providerModel = get(copilotInfo).codeCompletionModel;
     if (!providerModel) {
         throw new Error('No code completion model selected');

package/package/components/copilot/chat/script/core.js

@@ -54,8 +54,8 @@ const TS_WINDMILL_CLIENT_CONTEXT = `
 The windmill client (wmill) can be used to interact with Windmill from the script. Import it with \`import * as wmill from "windmill-client"\`. Key functions include:
 
 // Resource operations
-wmill.getResource(path?: string): Promise<any> // Get resource value by path
-wmill.setResource(value: any, path?: string): Promise<void> // Set resource value
+wmill.getResource(path?: string, undefinedIfEmpty?: boolean): Promise<any> // Get resource value by path
+wmill.setResource(value: any, path?: string, initializeToTypeIfNotExist?: string): Promise<void> // Set resource value
 
 // State management (persistent across executions)  
 wmill.getState(): Promise<any> // Get shared state
@@ -63,36 +63,39 @@ wmill.setState(state: any): Promise<void> // Set shared state
 
 // Variables
 wmill.getVariable(path: string): Promise<string> // Get variable value
-wmill.setVariable(path: string, value: string): Promise<void> // Set variable value
+wmill.setVariable(path: string, value: string, isSecretIfNotExist?: boolean, descriptionIfNotExist?: string): Promise<void> // Set variable value
 
 // Script execution
-wmill.runScript(path: string, args?: Record<string, any>): Promise<any> // Run script synchronously
-wmill.runScriptAsync(path: string, args?: Record<string, any>): Promise<string> // Run script async, returns job ID
-wmill.waitJob(jobId: string): Promise<any> // Wait for job completion and get result
+wmill.runScript(path?: string | null, hash_?: string | null, args?: Record<string, any> | null, verbose?: boolean): Promise<any> // Run script synchronously
+wmill.runScriptAsync(path: string | null, hash_: string | null, args: Record<string, any> | null, scheduledInSeconds?: number | null): Promise<string> // Run script async, returns job ID
+wmill.waitJob(jobId: string, verbose?: boolean): Promise<any> // Wait for job completion and get result
+wmill.getResult(jobId: string): Promise<any> // Get job result by ID
+wmill.getResultMaybe(jobId: string): Promise<any> // Get job result by ID, returns undefined if not found
+wmill.getRootJobId(jobId?: string): Promise<string> // Get root job ID from job ID
 
 // S3 file operations (if S3 is configured)
-wmill.loadS3File(s3object: S3Object | string): Promise<Uint8Array> // Load file content from S3
-wmill.writeS3File(s3object: S3Object | string, content: string | Blob): Promise<S3Object> // Write file to S3
+wmill.loadS3File(s3object: S3Object, s3ResourcePath?: string | undefined): Promise<Uint8Array | undefined> // Load file content from S3
+wmill.loadS3FileStream(s3object: S3Object, s3ResourcePath?: string | undefined): Promise<Blob | undefined> // Load file content from S3 as stream
+wmill.writeS3File(s3object: S3Object | undefined, fileContent: string | Blob, s3ResourcePath?: string | undefined): Promise<S3Object> // Write file to S3
 
 // Flow operations
-wmill.setFlowUserState(key: string, value: any): Promise<void> // Set flow user state
-wmill.getFlowUserState(key: string): Promise<any> // Get flow user state
-wmill.getResumeUrls(): Promise<{approvalPage: string, resume: string, cancel: string}> // Get approval URLs
+wmill.setFlowUserState(key: string, value: any, errorIfNotPossible?: boolean): Promise<void> // Set flow user state
+wmill.getFlowUserState(key: string, errorIfNotPossible?: boolean): Promise<any> // Get flow user state
+wmill.getResumeUrls(approver?: string): Promise<{approvalPage: string, resume: string, cancel: string}> // Get approval URLs
 
-// Utilities
-wmill.getWorkspace(): string // Get current workspace
-wmill.databaseUrlFromResource(path: string): Promise<string> // Get database URL from resource`;
+`;
 const PYTHON_WINDMILL_CLIENT_CONTEXT = `
 
 The windmill client (wmill) can be used to interact with Windmill from the script. Import it with \`import wmill\`. Key functions include:
 
 // Resource operations
-wmill.get_resource(path: str) -> dict | None  // Get resource value by path
+wmill.get_resource(path: str, none_if_undefined: bool = False) -> dict | None  // Get resource value by path
 wmill.set_resource(path: str, value: Any, resource_type: str = "any") -> None  // Set resource value
 
 // State management (persistent across executions)
 wmill.get_state() -> Any  // Get shared state (deprecated, use flow user state)
 wmill.set_state(value: Any) -> None  // Set shared state
+wmill.get_state_path() -> str  // Get state path
 wmill.get_flow_user_state(key: str) -> Any  // Get flow user state 
 wmill.set_flow_user_state(key: str, value: Any) -> None  // Set flow user state
 
@@ -101,22 +104,27 @@ wmill.get_variable(path: str) -> str  // Get variable value
 wmill.set_variable(path: str, value: str, is_secret: bool = False) -> None  // Set variable value
 
 // Script execution
-wmill.run_script(path: str, args: dict = None, timeout = None) -> Any  // Run script synchronously
-wmill.run_script_async(path: str, args: dict = None, scheduled_in_secs: int = None) -> str  // Run script async, returns job ID
-wmill.wait_job(job_id: str, timeout = None) -> Any  // Wait for job completion and get result
+wmill.run_script(path: str = None, hash_: str = None, args: dict = None, timeout = None, verbose: bool = False, cleanup: bool = True, assert_result_is_not_none: bool = True) -> Any  // Run script synchronously
+wmill.run_script_async(path: str = None, hash_: str = None, args: dict = None, scheduled_in_secs: int = None) -> str  // Run script async, returns job ID
+wmill.wait_job(job_id: str, timeout = None, verbose: bool = False, cleanup: bool = True, assert_result_is_not_none: bool = False) -> Any  // Wait for job completion and get result
+wmill.get_result(job_id: str, assert_result_is_not_none: bool = True) -> Any  // Get job result by ID
+wmill.get_root_job_id(job_id: str | None = None) -> str  // Get root job ID from job ID
 
 // S3 file operations (if S3 is configured)
-wmill.load_s3_file(s3object: S3Object | str, s3_resource_path: str = None) -> bytes  // Load file content from S3
-wmill.write_s3_file(s3object: S3Object | str, file_content: bytes, s3_resource_path: str = None) -> S3Object  // Write file to S3
+wmill.load_s3_file(s3object: S3Object | str, s3_resource_path: str | None = None) -> bytes  // Load file content from S3
+wmill.load_s3_file_reader(s3object: S3Object | str, s3_resource_path: str | None = None) -> BufferedReader  // Load S3 file as stream reader
+wmill.write_s3_file(s3object: S3Object | str | None, file_content: BufferedReader | bytes, s3_resource_path: str | None = None, content_type: str | None = None, content_disposition: str | None = None) -> S3Object  // Write file to S3
 
 // Flow operations  
-wmill.run_flow_async(path: str, args: dict = None) -> str  // Run flow asynchronously
+wmill.run_flow_async(path: str, args: dict = None, scheduled_in_secs: int = None, do_not_track_in_parent: bool = True) -> str  // Run flow asynchronously
 wmill.get_resume_urls(approver: str = None) -> dict  // Get approval URLs for flow steps
 
 // Utilities
+wmill.get_workspace() -> str  // Get current workspace
 wmill.whoami() -> dict  // Get current user information
 wmill.get_job_status(job_id: str) -> str  // Get job status ("RUNNING" | "WAITING" | "COMPLETED")
-wmill.set_progress(value: int) -> None  // Set job progress (0-100)`;
+wmill.set_progress(value: int, job_id: Optional[str] = None) -> None  // Set job progress (0-100)
+wmill.get_progress(job_id: Optional[str] = None) -> Any  // Get job progress`;
 const PYTHON_RESOURCE_TYPE_SYSTEM = `On Windmill, credentials and configuration are stored in resources and passed as parameters to main.
 If you need credentials, you should add a parameter to \`main\` with the corresponding resource type.
 You need to **redefine** the type of the resources that are needed before the main function as TypedDict, but only include them if they are actually needed to achieve the function purpose.

package/package/components/copilot/lib.d.ts

@@ -18,7 +18,7 @@ export interface ModelResponse {
     };
 }
 export declare function fetchAvailableModels(resourcePath: string, workspace: string, provider: AIProvider): Promise<string[]>;
-export declare function getModelContextWindow(model: string): 1000000 | 128000 | 200000;
+export declare function getModelContextWindow(model: string): 1000000 | 128000 | 200000 | 32000;
 export declare const PROVIDER_COMPLETION_CONFIG_MAP: Record<AIProvider, ChatCompletionCreateParams>;
 declare class WorkspacedAIClients {
     private openaiClient;

package/package/components/copilot/lib.js

@@ -76,6 +76,9 @@ export function getModelContextWindow(model) {
     else if (model.startsWith('claude') || model.startsWith('o4-mini') || model.startsWith('o3')) {
         return 200000;
     }
+    else if (model.startsWith('codestral')) {
+        return 32000;
+    }
     else {
         return 128000;
     }

package/package/components/flows/content/FlowModuleCache.svelte

@@ -3,18 +3,18 @@ import Section from '../../Section.svelte';
 import Toggle from '../../Toggle.svelte';
 import Tooltip from '../../Tooltip.svelte';
 import { SecondsInput } from '../../common';
-export let flowModule;
-$: isCacheEnabled = Boolean(flowModule.cache_ttl);
+let { flowModule = $bindable() } = $props();
+let isCacheEnabled = $derived(Boolean(flowModule.cache_ttl));
 </script>
 
 <Section label="Cache" class="flex flex-col gap-4">
-	<svelte:fragment slot="header">
+	{#snippet header()}
 		<Tooltip documentationLink="https://www.windmill.dev/docs/flows/cache">
 			If defined, the result of the step will be cached for the number of seconds defined such that
 			if this step were to be re-triggered with the same input it would retrieve and return its
 			cached value instead of recomputing it.
 		</Tooltip>
-	</svelte:fragment>
+	{/snippet}
 
 	{#if flowModule.value.type != 'rawscript'}
 		<p

package/package/components/flows/content/FlowModuleCache.svelte.d.ts

@@ -1,21 +1,7 @@
 import type { FlowModule } from '../../../gen';
-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> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const FlowModuleCache: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     flowModule: FlowModule;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type FlowModuleCache = InstanceType<typeof FlowModuleCache>;
+}
+declare const FlowModuleCache: import("svelte").Component<Props, {}, "flowModule">;
+type FlowModuleCache = ReturnType<typeof FlowModuleCache>;
 export default FlowModuleCache;

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

@@ -352,7 +352,6 @@ let rawScriptLang = $derived(flowModule.value.type == 'rawscript' ? flowModule.v
 											bind:this={editor}
 											class="h-full relative"
 											code={flowModule.value.content}
-											lang={scriptLangToEditorLang(flowModule?.value?.language)}
 											scriptLang={flowModule?.value?.language}
 											automaticLayout={true}
 											cmdEnterAction={async () => {

package/package/components/flows/content/FlowModuleDeleteAfterUse.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">import Toggle from '../../Toggle.svelte';
 import Tooltip from '../../Tooltip.svelte';
 import Section from '../../Section.svelte';
-export let flowModule;
-export let disabled = false;
+let { flowModule = $bindable(), disabled = false } = $props();
 </script>
 
 <Section label="Delete after use">
-	<svelte:fragment slot="header">
+	{#snippet header()}
 		<Tooltip>
 			The logs, arguments and results of this flow step will be completely deleted from Windmill
 			once the flow is complete. They might be temporarily visible in UI while the flow is running.
@@ -21,7 +20,7 @@ export let disabled = false;
 				This option is only available on Windmill Enterprise Edition.
 			{/if}
 		</Tooltip>
-	</svelte:fragment>
+	{/snippet}
 
 	<Toggle
 		{disabled}

package/package/components/flows/content/FlowModuleDeleteAfterUse.svelte.d.ts

@@ -1,22 +1,8 @@
 import type { FlowModule } from '../../../gen';
-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> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const FlowModuleDeleteAfterUse: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     flowModule: FlowModule;
     disabled?: boolean;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type FlowModuleDeleteAfterUse = InstanceType<typeof FlowModuleDeleteAfterUse>;
+}
+declare const FlowModuleDeleteAfterUse: import("svelte").Component<Props, {}, "flowModule">;
+type FlowModuleDeleteAfterUse = ReturnType<typeof FlowModuleDeleteAfterUse>;
 export default FlowModuleDeleteAfterUse;