windmill-components 1.522.0 → 1.531.1

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

@@ -1,10 +1,10 @@
 import { flowTools, prepareFlowSystemMessage, prepareFlowUserMessage } from './flow/core';
 import ContextManager from './ContextManager.svelte';
 import HistoryManager from './HistoryManager.svelte';
-import { processToolCall } from './shared';
+import { extractCodeFromMarkdown, getLatestAssistantMessage, processToolCall } from './shared';
 import { INLINE_CHAT_SYSTEM_PROMPT, prepareScriptSystemMessage, prepareScriptTools } from './script/core';
 import { navigatorTools, prepareNavigatorSystemMessage } from './navigator/core';
-import { loadApiTools } from './navigator/apiTools';
+import { loadApiTools } from './api/apiTools';
 import { prepareScriptUserMessage } from './script/core';
 import { prepareNavigatorUserMessage } from './navigator/core';
 import { sendUserToast } from '../../../toast';
@@ -13,9 +13,10 @@ import { dfs } from '../../flows/previousResults';
 import { getStringError } from './utils';
 import { untrack } from 'svelte';
 import { copilotSessionModel } from '../../../stores';
-import { askTools, prepareAskSystemMessage } from './ask/core';
+import { askTools, prepareAskSystemMessage, prepareAskUserMessage } from './ask/core';
 import { chatState, DEFAULT_SIZE, triggerablesByAi } from './sharedChatState.svelte';
 import { get } from 'svelte/store';
+import { prepareApiSystemMessage, prepareApiUserMessage } from './api/core';
 // If the estimated token usage is greater than the model context window - the threshold, we delete the oldest message
 const MAX_TOKENS_THRESHOLD_PERCENTAGE = 0.05;
 const MAX_TOKENS_HARD_LIMIT = 5000;
@@ -24,6 +25,7 @@ export var AIMode;
     AIMode["SCRIPT"] = "script";
     AIMode["FLOW"] = "flow";
     AIMode["NAVIGATOR"] = "navigator";
+    AIMode["API"] = "API";
     AIMode["ASK"] = "ask";
 })(AIMode || (AIMode = {}));
 class AIChatManager {
@@ -57,11 +59,13 @@ class AIChatManager {
     pendingNewCode = $state(undefined);
     apiTools = $state([]);
     aiChatInput = $state(null);
+    confirmationCallback = $state(undefined);
     allowedModes = $derived({
         script: this.scriptEditorOptions !== undefined,
         flow: this.flowAiChatHelpers !== undefined,
         navigator: true,
-        ask: true
+        ask: true,
+        API: true
     });
     open = $derived(chatState.size > 0);
     checkTokenUsageOverLimit = (messages) => {
@@ -103,8 +107,8 @@ class AIChatManager {
     loadApiTools = async () => {
         try {
             this.apiTools = await loadApiTools();
-            if (this.mode === AIMode.NAVIGATOR) {
-                this.tools = [this.changeModeTool, ...navigatorTools, ...this.apiTools];
+            if (this.mode === AIMode.API) {
+                this.tools = [...this.apiTools];
             }
         }
         catch (err) {
@@ -112,6 +116,20 @@ class AIChatManager {
             this.apiTools = [];
         }
     };
+    // Request confirmation from user for a tool call
+    requestConfirmation = (toolId) => {
+        return new Promise((resolve) => {
+            // Store the callback for this specific tool
+            this.confirmationCallback = resolve;
+        });
+    };
+    // Handle confirmation response for a specific tool
+    handleToolConfirmation = (toolId, confirmed) => {
+        if (this.confirmationCallback) {
+            this.confirmationCallback(confirmed);
+            this.confirmationCallback = undefined;
+        }
+    };
     setAiChatInput(aiChatInput) {
         this.aiChatInput = aiChatInput;
     }
@@ -137,7 +155,27 @@ class AIChatManager {
             const lang = this.scriptEditorOptions?.lang ?? 'bun';
             this.tools = [this.changeModeTool, ...prepareScriptTools(lang, context)];
             this.helpers = {
-                getLang: () => lang
+                getScriptOptions: () => {
+                    return {
+                        code: this.scriptEditorOptions?.code ?? '',
+                        lang: lang,
+                        path: this.scriptEditorOptions?.path ?? '',
+                        args: this.scriptEditorOptions?.args ?? {}
+                    };
+                },
+                getLastSuggestedCode: () => {
+                    const latestMessage = getLatestAssistantMessage(this.displayMessages);
+                    if (latestMessage) {
+                        const codeBlocks = extractCodeFromMarkdown(latestMessage);
+                        if (codeBlocks.length > 0) {
+                            return codeBlocks[codeBlocks.length - 1];
+                        }
+                    }
+                    return undefined;
+                },
+                applyCode: (code, applyAll) => {
+                    this.scriptEditorApplyCode?.(code, applyAll);
+                }
             };
             if (options?.closeScriptSettings) {
                 const closeComponent = triggerablesByAi['close-script-builder-settings'];
@@ -154,7 +192,7 @@ class AIChatManager {
         }
         else if (mode === AIMode.NAVIGATOR) {
             this.systemMessage = prepareNavigatorSystemMessage();
-            this.tools = [this.changeModeTool, ...navigatorTools, ...this.apiTools];
+            this.tools = [this.changeModeTool, ...navigatorTools];
             this.helpers = {};
         }
         else if (mode === AIMode.ASK) {
@@ -162,6 +200,11 @@ class AIChatManager {
             this.tools = [...askTools];
             this.helpers = {};
         }
+        else if (mode === AIMode.API) {
+            this.systemMessage = prepareApiSystemMessage();
+            this.tools = [...this.apiTools];
+            this.helpers = {};
+        }
     }
     canApplyCode = $derived(this.allowedModes.script && this.mode === AIMode.SCRIPT);
     changeModeTool = {
@@ -169,14 +212,14 @@ class AIChatManager {
             type: 'function',
             function: {
                 name: 'change_mode',
-                description: 'Change the AI mode to the one specified. Script mode is used to create scripts, and flow mode is used to create flows. Navigator mode is used to navigate the application and help the user find what they are looking for.',
+                description: 'Change the AI mode to the one specified. Script mode is used to create scripts. Flow mode is used to create flows. Navigator mode is used to navigate the application and help the user find what they are looking for. API mode is used to make API calls to the Windmill backend.',
                 parameters: {
                     type: 'object',
                     properties: {
                         mode: {
                             type: 'string',
                             description: 'The mode to change to',
-                            enum: ['script', 'flow', 'navigator']
+                            enum: ['script', 'flow', 'navigator', 'API']
                         },
                         pendingPrompt: {
                             type: 'string',
@@ -189,11 +232,11 @@ class AIChatManager {
             }
         },
         fn: async ({ args, toolId, toolCallbacks }) => {
-            toolCallbacks.setToolStatus(toolId, 'Switching to ' + args.mode + ' mode...');
+            toolCallbacks.setToolStatus(toolId, { content: 'Switching to ' + args.mode + ' mode...' });
             this.changeMode(args.mode, args.pendingPrompt, {
                 closeScriptSettings: true
             });
-            toolCallbacks.setToolStatus(toolId, 'Switched to ' + args.mode + ' mode');
+            toolCallbacks.setToolStatus(toolId, { content: 'Switched to ' + args.mode + ' mode' });
             return 'Mode changed to ' + args.mode;
         }
     };
@@ -259,13 +302,18 @@ class AIChatManager {
             let completion = null;
             while (true) {
                 const systemMessage = systemMessageOverride ?? this.systemMessage;
-                const tools = this.tools;
                 const helpers = this.helpers;
+                const tools = this.tools;
+                for (const tool of tools) {
+                    if (tool.setSchema) {
+                        await tool.setSchema(helpers);
+                    }
+                }
                 let pendingPrompt = this.pendingPrompt;
                 let pendingUserMessage = undefined;
                 if (pendingPrompt) {
                     if (this.mode === AIMode.SCRIPT) {
-                        pendingUserMessage = await prepareScriptUserMessage(pendingPrompt, this.scriptEditorOptions?.lang, this.contextManager.getSelectedContext());
+                        pendingUserMessage = prepareScriptUserMessage(pendingPrompt, this.scriptEditorOptions?.lang, this.contextManager.getSelectedContext());
                     }
                     else if (this.mode === AIMode.FLOW) {
                         pendingUserMessage = prepareFlowUserMessage(pendingPrompt, this.flowAiChatHelpers.getFlowAndSelectedId());
@@ -348,7 +396,6 @@ class AIChatManager {
                             const messageToAdd = await processToolCall({
                                 tools,
                                 toolCall,
-                                messages,
                                 helpers,
                                 toolCallbacks: callbacks
                             });
@@ -394,7 +441,7 @@ class AIChatManager {
         };
         let reply = '';
         try {
-            const userMessage = await prepareScriptUserMessage(instructions, lang, selectedContext, {
+            const userMessage = prepareScriptUserMessage(instructions, lang, selectedContext, {
                 isPreprocessor: false
             });
             const messages = [userMessage];
@@ -492,13 +539,29 @@ class AIChatManager {
             }
             const lang = this.scriptEditorOptions?.lang ?? options.lang ?? 'bun';
             const isPreprocessor = this.scriptEditorOptions?.path === 'preprocessor' || options.isPreprocessor;
-            const userMessage = this.mode === AIMode.FLOW
-                ? prepareFlowUserMessage(oldInstructions, this.flowAiChatHelpers.getFlowAndSelectedId())
-                : this.mode === AIMode.NAVIGATOR
-                    ? prepareNavigatorUserMessage(oldInstructions)
-                    : await prepareScriptUserMessage(oldInstructions, lang, oldSelectedContext, {
+            let userMessage = {
+                role: 'user',
+                content: ''
+            };
+            switch (this.mode) {
+                case AIMode.FLOW:
+                    userMessage = prepareFlowUserMessage(oldInstructions, this.flowAiChatHelpers.getFlowAndSelectedId());
+                    break;
+                case AIMode.NAVIGATOR:
+                    userMessage = prepareNavigatorUserMessage(oldInstructions);
+                    break;
+                case AIMode.ASK:
+                    userMessage = prepareAskUserMessage(oldInstructions);
+                    break;
+                case AIMode.SCRIPT:
+                    userMessage = prepareScriptUserMessage(oldInstructions, lang, oldSelectedContext, {
                         isPreprocessor
                     });
+                    break;
+                case AIMode.API:
+                    userMessage = prepareApiUserMessage(oldInstructions);
+                    break;
+            }
             this.messages.push(userMessage);
             await this.historyManager.saveChat(this.displayMessages, this.messages);
             this.currentReply = '';
@@ -526,18 +589,34 @@ class AIChatManager {
                         }
                         this.currentReply = '';
                     },
-                    setToolStatus: (id, content) => {
+                    setToolStatus: (id, metadata) => {
                         const existingIdx = this.displayMessages.findIndex((m) => m.role === 'tool' && m.tool_call_id === id);
                         if (existingIdx !== -1) {
-                            this.displayMessages[existingIdx].content = content;
+                            // Update existing tool message with metadata
+                            const existing = this.displayMessages[existingIdx];
+                            if (existing.content.length === 0 && metadata?.error) {
+                                this.displayMessages[existingIdx].content = metadata.error;
+                            }
+                            this.displayMessages[existingIdx] = {
+                                ...existing,
+                                ...(metadata || {})
+                            };
                         }
                         else {
-                            this.displayMessages.push({ role: 'tool', tool_call_id: id, content });
+                            // Create new tool message with metadata
+                            const newMessage = {
+                                role: 'tool',
+                                tool_call_id: id,
+                                content: metadata?.content ?? metadata?.error ?? '',
+                                ...(metadata || {})
+                            };
+                            this.displayMessages.push(newMessage);
                         }
-                    }
+                    },
+                    requestConfirmation: this.requestConfirmation
                 }
             };
-            if (this.mode === AIMode.NAVIGATOR && this.apiTools.length === 0) {
+            if (this.mode === AIMode.API && this.apiTools.length === 0) {
                 await this.loadApiTools();
             }
             const addedMessages = await this.chatRequest({
@@ -561,6 +640,10 @@ class AIChatManager {
         }
     };
     cancel = () => {
+        if (this.confirmationCallback) {
+            this.confirmationCallback(false);
+            this.confirmationCallback = undefined;
+        }
         this.abortController?.abort();
     };
     restartGeneration = (displayMessageIndex, newContent) => {
@@ -598,6 +681,7 @@ class AIChatManager {
         this.focusInput();
     };
     saveAndClear = async () => {
+        this.cancel();
         await this.historyManager.save(this.displayMessages, this.messages);
         this.displayMessages = [];
         this.messages = [];

package/package/components/copilot/chat/AIChatMessage.svelte

@@ -5,6 +5,7 @@ import { aiChatManager } from './AIChatManager.svelte';
 import { Button } from '../../common';
 import { RefreshCwIcon, Undo2Icon } from 'lucide-svelte';
 import AIChatInput from './AIChatInput.svelte';
+import ToolExecutionDisplay from './ToolExecutionDisplay.svelte';
 let { message, messageIndex, availableContext, selectedContext = $bindable(), editingMessageIndex = $bindable(null) } = $props();
 function editMessage() {
     if (message.role !== 'user' || editingMessageIndex !== null || aiChatManager.loading) {
@@ -60,6 +61,8 @@ function editMessage() {
 		>
 			{#if message.role === 'assistant'}
 				<AssistantMessage {message} />
+			{:else if message.role === 'tool'}
+				<ToolExecutionDisplay message={message as ToolDisplayMessage} />
 			{:else}
 				{message.content}
 			{/if}

package/package/components/copilot/chat/ToolContentDisplay.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">import { Loader2, Copy, Check } from 'lucide-svelte';
+let { title, content, error, loading, showCopy = true, showWhileLoading = true } = $props();
+let copied = $state(false);
+const hasContent = $derived(content !== undefined && content !== null);
+function formatJson(obj) {
+    try {
+        if (typeof obj === 'string') {
+            try {
+                const parsed = JSON.parse(obj);
+                return JSON.stringify(parsed, null, 2);
+            }
+            catch {
+                return obj;
+            }
+        }
+        return JSON.stringify(obj, null, 2);
+    }
+    catch {
+        return String(obj);
+    }
+}
+async function copyToClipboard() {
+    if (!hasContent)
+        return;
+    try {
+        await navigator.clipboard.writeText(formatJson(content));
+        copied = true;
+        setTimeout(() => (copied = false), 1500);
+    }
+    catch (err) {
+        console.error('Failed to copy:', err);
+    }
+}
+</script>
+
+{#if showWhileLoading || (!loading && hasContent)}
+	<div class="space-y-2">
+		<div class="flex items-center justify-between">
+			<span class="text-secondary text-2xs font-semibold uppercase tracking-wide">
+				{title}:
+			</span>
+			{#if showCopy && hasContent}
+				<button
+					class="p-1 rounded hover:bg-surface-secondary text-tertiary hover:text-secondary transition-colors"
+					onclick={copyToClipboard}
+					title="Copy {title.toLowerCase()}"
+				>
+					{#if copied}
+						<Check class="w-3 h-3 text-green-500" />
+					{:else}
+						<Copy class="w-3 h-3" />
+					{/if}
+				</button>
+			{/if}
+		</div>
+
+		{#if loading}
+			<div
+				class="bg-surface-secondary border border-gray-200 dark:border-gray-700 rounded p-3 flex items-center gap-2 text-tertiary"
+			>
+				<Loader2 class="w-3 h-3 animate-spin" />
+				<span class="text-2xs">Executing...</span>
+			</div>
+		{:else if error}
+			<div
+				class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded p-3 overflow-x-auto max-h-64 overflow-y-auto"
+			>
+				<pre class="text-2xs text-red-700 dark:text-red-300 whitespace-pre-wrap">{error}</pre>
+			</div>
+		{:else if hasContent}
+			<div
+				class="bg-surface-secondary border border-gray-200 dark:border-gray-700 rounded p-3 overflow-x-auto max-h-64 overflow-y-auto"
+			>
+				<pre class="text-2xs text-primary whitespace-pre-wrap">{formatJson(content)}</pre>
+			</div>
+		{:else}
+			<div
+				class="bg-surface-secondary border border-gray-200 dark:border-gray-700 rounded p-3 text-center"
+			>
+				<span class="text-2xs text-tertiary">No {title.toLowerCase()} yet</span>
+			</div>
+		{/if}
+	</div>
+{/if}

package/package/components/copilot/chat/ToolContentDisplay.svelte.d.ts

@@ -0,0 +1,11 @@
+interface Props {
+    title: string;
+    content?: any;
+    error?: string;
+    loading?: boolean;
+    showCopy?: boolean;
+    showWhileLoading?: boolean;
+}
+declare const ToolContentDisplay: import("svelte").Component<Props, {}, "">;
+type ToolContentDisplay = ReturnType<typeof ToolContentDisplay>;
+export default ToolContentDisplay;

package/package/components/copilot/chat/ToolExecutionDisplay.svelte

@@ -0,0 +1,105 @@
+<script lang="ts">import { Loader2, ChevronDown, ChevronRight, XCircle, Play } from 'lucide-svelte';
+import { Button } from '../../common';
+import { aiChatManager } from './AIChatManager.svelte';
+import { twMerge } from 'tailwind-merge';
+import ToolContentDisplay from './ToolContentDisplay.svelte';
+let { message } = $props();
+let isExpanded = $state(message.showDetails || (message.isLoading && message.needsConfirmation));
+const hasParameters = $derived(message.parameters !== undefined && Object.keys(message.parameters).length > 0);
+</script>
+
+<div
+	class="bg-surface border border-gray-200 dark:border-gray-700 rounded-md overflow-hidden font-mono text-xs"
+>
+	<!-- Collapsible Header -->
+	<button
+		class={twMerge(
+			"w-full p-3 bg-surface-secondary hover:bg-surface-hover transition-colors flex items-center justify-between text-left border-b border-gray-200 dark:border-gray-700",
+			message.needsConfirmation ? "opacity-80" : ""
+		)}
+		onclick={() => (isExpanded = !isExpanded)}
+		disabled={!message.showDetails}
+	>
+		<div class="flex items-center gap-2 flex-1">
+			{#if message.showDetails}
+				{#if isExpanded}
+					<ChevronDown class="w-3 h-3 text-secondary" />
+				{:else}
+					<ChevronRight class="w-3 h-3 text-secondary" />
+				{/if}
+			{/if}
+
+			{#if message.isLoading && !message.needsConfirmation}
+				<Loader2 class="w-3.5 h-3.5 animate-spin text-blue-500" />
+			{:else if message.error}
+				<span class="text-red-500">✗</span>
+			{:else if !message.isLoading && !message.error}
+				<span class="text-green-500">✓</span>
+			{/if}
+			<span class="text-primary font-medium text-2xs">
+				{message.content}
+			</span>
+		</div>
+	</button>
+
+	<!-- Expanded Content -->
+	{#if isExpanded}
+		<div class="p-3 bg-surface space-y-3">
+			<!-- Parameters Section -->
+			<div class={message.needsConfirmation ? "opacity-80" : ""}>
+				<ToolContentDisplay title="Parameters" content={message.parameters} />
+			</div>
+
+			<!-- Confirmation Footer -->
+			{#if message.needsConfirmation}
+				<div
+					class={twMerge(
+						'mt-3 pt-3 flex flex-row items-center justify-end gap-2',
+						hasParameters ? 'border-t border-gray-200 dark:border-gray-700' : ''
+					)}
+				>
+					<Button
+						variant="border"
+						color="gray"
+						size="xs"
+						on:click={() => {
+							if (message.tool_call_id) {
+								aiChatManager.handleToolConfirmation(message.tool_call_id, false)
+							}
+						}}
+						startIcon={{ icon: XCircle }}
+					></Button>
+					<Button
+						variant="border"
+						color="green"
+						size="xs"
+						on:click={() => {
+							if (message.tool_call_id) {
+								aiChatManager.handleToolConfirmation(message.tool_call_id, true)
+							}
+						}}
+						startIcon={{ icon: Play }}
+					>
+						Run
+					</Button>
+				</div>
+
+				<!-- Result Section -->
+			{:else}
+				<ToolContentDisplay
+					title="Logs"
+					content={message.logs}
+					loading={message.isLoading}
+					showWhileLoading={false}
+				/>
+
+				<ToolContentDisplay
+					title="Result"
+					content={message.result}
+					error={message.error}
+					loading={message.isLoading}
+				/>
+			{/if}
+		</div>
+	{/if}
+</div>

package/package/components/copilot/chat/ToolExecutionDisplay.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { ToolDisplayMessage } from './shared';
+interface Props {
+    message: ToolDisplayMessage;
+}
+declare const ToolExecutionDisplay: import("svelte").Component<Props, {}, "">;
+type ToolExecutionDisplay = ReturnType<typeof ToolExecutionDisplay>;
+export default ToolExecutionDisplay;

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

@@ -0,0 +1,7 @@
+import type { ChatCompletionTool } from 'openai/resources/index.mjs';
+import type { Tool } from '../shared';
+export declare function createApiTools(chatTools: ChatCompletionTool[], endpointMap?: Record<string, {
+    method: string;
+    path: string;
+}>): Tool<{}>[];
+export declare function loadApiTools(): Promise<Tool<{}>[]>;