windmill-components 1.504.6 → 1.511.0

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

@@ -1,15 +1,30 @@
 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';
-function filterCompletion(completion, suffix) {
+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', '');
     if (trimmedSuffix.startsWith(trimmedCompletion)) {
-        console.log('suffix starts with completion', suffix, completion);
         return;
     }
+    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') + '\n';
+        }
+        else if (completion.includes('\n')) {
+            return completion.split('\n').slice(0, 1).join('\n') + '\n';
+        }
+    }
     return completion;
 }
 export class Autocompletor {
@@ -21,49 +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);
-                    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) {
@@ -82,6 +151,160 @@ 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);
+            if (cachedCompletion) {
+                const firstCachedLine = cachedCompletion.linePrefix + cachedCompletion.completion.split('\n')[0];
+                const lineContent = model.getLineContent(position.lineNumber);
+                return firstCachedLine === lineContent;
+            }
+        }
+        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;
@@ -104,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 &&
@@ -112,13 +341,11 @@ export class Autocompletor {
                 const newLinePrefix = completeLine.substring(0, position.column - 1);
                 if (newLinePrefix === linePrefix) {
                     const modifiedCompletion = cachedCompletion.completion.slice(position.column - cachedCompletion.column);
-                    console.debug('autocomplete partial cache hit', modifiedCompletion);
                     return { completion: modifiedCompletion, suffix };
                 }
             }
             else if (position.column === cachedCompletion.column &&
                 cachedCompletion.linePrefix === linePrefix) {
-                console.debug('autocomplete exact cache hit', cachedCompletion.completion);
                 return { completion: cachedCompletion.completion, suffix };
             }
         }
@@ -130,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/AIChatDisplay.svelte

@@ -10,6 +10,7 @@ import ChatMode from './ChatMode.svelte';
 import Markdown from 'svelte-exmarkdown';
 import { aiChatManager, AIMode } from './AIChatManager.svelte';
 import AIChatInput from './AIChatInput.svelte';
+import { getModifierKey } from '../../../utils';
 let { messages, pastChats, hasDiff, diffMode = false, // todo: remove default
 selectedContext = $bindable([]), // todo: remove default
 availableContext = [], // todo: remove default
@@ -120,6 +121,13 @@ $effect(() => {
 			{@render headerRight?.()}
 		</div>
 	</div>
+	{#if messages.length === 0}
+		<span class="text-2xs text-gray-500 dark:text-gray-400 text-center px-2 my-2"
+			>You can use {getModifierKey()}L to open or close this chat, and {getModifierKey()}K in the
+			script editor to modify selected lines.</span
+		>
+	{/if}
+
 	{#if messages.length > 0}
 		<div
 			class="h-full overflow-y-scroll pt-2 pb-12"

package/package/components/copilot/chat/AIChatManager.svelte.js

@@ -59,16 +59,18 @@ class AIChatManager {
         ask: true
     });
     open = $derived(chatState.size > 0);
-    constructor() {
-        loadApiTools()
-            .then((tools) => {
-            this.apiTools = tools;
-        })
-            .catch((err) => {
+    loadApiTools = async () => {
+        try {
+            this.apiTools = await loadApiTools();
+            if (this.mode === AIMode.NAVIGATOR) {
+                this.tools = [this.changeModeTool, ...navigatorTools, ...this.apiTools];
+            }
+        }
+        catch (err) {
             console.error('Error loading api tools', err);
             this.apiTools = [];
-        });
-    }
+        }
+    };
     setAiChatInput(aiChatInput) {
         this.aiChatInput = aiChatInput;
     }
@@ -482,6 +484,9 @@ class AIChatManager {
                     }
                 }
             };
+            if (this.mode === AIMode.NAVIGATOR && this.apiTools.length === 0) {
+                await this.loadApiTools();
+            }
             await this.chatRequest({
                 ...params
             });

package/package/components/copilot/chat/flow/ModuleAcceptReject.svelte

@@ -1,8 +1,8 @@
-<script module>
-	export const getAiModuleAction = (id: string | undefined) => {
-		if (!id) return undefined
-		return aiChatManager.flowAiChatHelpers?.getModuleAction(id)
-	}
+<script module lang="ts">export const getAiModuleAction = (id) => {
+    if (!id)
+        return undefined;
+    return aiChatManager.flowAiChatHelpers?.getModuleAction(id);
+};
 </script>
 
 <script lang="ts">import { twMerge } from 'tailwind-merge';

package/package/components/copilot/chat/flow/core.d.ts

@@ -1,7 +1,7 @@
 import { type FlowModule } from '../../../../gen';
 import type { ChatCompletionSystemMessageParam, ChatCompletionUserMessageParam } from 'openai/resources/chat/completions.mjs';
 import { z } from 'zod';
-import type { Tool } from '../shared';
+import { type Tool } from '../shared';
 import type { ExtendedOpenFlow } from '../../../flows/types';
 export type AIModuleAction = 'added' | 'modified' | 'removed';
 export interface FlowAIChatHelpers {

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

@@ -1,17 +1,16 @@
 import { ScriptService } from '../../../../gen';
 import YAML from 'yaml';
 import { z } from 'zod';
-import { zodToJsonSchema } from 'zod-to-json-schema';
 import uFuzzy from '@leeoniya/ufuzzy';
 import { emptySchema, emptyString } from '../../../../utils';
 import { getFormattedResourceTypes, getLangContext, SUPPORTED_CHAT_SCRIPT_LANGUAGES } from '../script/core';
+import { createSearchHubScriptsTool, createToolDef } from '../shared';
 const searchScriptsSchema = z.object({
     query: z
         .string()
         .describe('The query to search for, e.g. send email, list stripe invoices, etc..')
 });
 const searchScriptsToolDef = createToolDef(searchScriptsSchema, 'search_scripts', 'Search for scripts in the workspace');
-const searchHubScriptsToolDef = createToolDef(searchScriptsSchema, 'search_hub_scripts', 'Search for scripts in the hub');
 const langSchema = z.enum(SUPPORTED_CHAT_SCRIPT_LANGUAGES);
 const newStepSchema = z.union([
     z
@@ -189,6 +188,7 @@ const getInstructionsForCodeGenerationToolSchema = z.object({
 const getInstructionsForCodeGenerationToolDef = createToolDef(getInstructionsForCodeGenerationToolSchema, 'get_instructions_for_code_generation', 'Get instructions for code generation for a raw script step');
 const workspaceScriptsSearch = new WorkspaceScriptsSearch();
 export const flowTools = [
+    createSearchHubScriptsTool(false),
     {
         def: searchScriptsToolDef,
         fn: async ({ args, workspace, toolId, toolCallbacks }) => {
@@ -203,22 +203,6 @@ export const flowTools = [
             return JSON.stringify(scriptResults);
         }
     },
-    {
-        def: searchHubScriptsToolDef,
-        fn: async ({ args, toolId, toolCallbacks }) => {
-            toolCallbacks.setToolStatus(toolId, 'Searching for hub scripts related to "' + args.query + '"...');
-            const parsedArgs = searchScriptsSchema.parse(args);
-            const scripts = await ScriptService.queryHubScripts({
-                text: parsedArgs.query,
-                kind: 'script'
-            });
-            toolCallbacks.setToolStatus(toolId, 'Found ' + scripts.length + ' scripts in the hub related to "' + args.query + '"');
-            return JSON.stringify(scripts.map((s) => ({
-                path: `hub/${s.version_id}/${s.app}/${s.summary.toLowerCase().replaceAll(/\s+/g, '_')}`,
-                summary: s.summary
-            })));
-        }
-    },
     {
         def: addStepToolDef,
         fn: async ({ args, helpers, toolId, toolCallbacks }) => {
@@ -370,26 +354,6 @@ export const flowTools = [
         }
     }
 ];
-function createToolDef(zodSchema, name, description) {
-    const schema = zodToJsonSchema(zodSchema, {
-        name,
-        target: 'openAi'
-    });
-    let parameters = schema.definitions[name];
-    parameters = {
-        ...parameters,
-        required: parameters.required ?? []
-    };
-    return {
-        type: 'function',
-        function: {
-            strict: true,
-            name,
-            description,
-            parameters
-        }
-    };
-}
 export function prepareFlowSystemMessage() {
     const content = `You are a helpful assistant that creates and edits workflows on the Windmill platform. You're provided with a bunch of tools to help you edit the flow.
 Follow the user instructions carefully.

package/package/components/copilot/chat/navigator/apiTools.d.ts

@@ -46,6 +46,14 @@ interface OpenAPISpec {
     paths: {
         [path: string]: OpenAPIPathItem;
     };
+    components?: {
+        parameters?: {
+            [name: string]: OpenAPIParameter;
+        };
+        schemas?: {
+            [name: string]: any;
+        };
+    };
 }
 export declare function buildToolsFromOpenApi(openApiSpec: OpenAPISpec, options?: {
     pathFilter?: (path: string) => boolean;