windmill-components 1.532.0 → 1.542.4

package/package/components/copilot/chat/ContextTextarea.svelte

@@ -10,7 +10,7 @@ let contextTooltipWord = $state('');
 let tooltipPosition = $state({ x: 0, y: 0 });
 let textarea = $state(undefined);
 let tooltipElement = $state(undefined);
-let selectedSuggestionIndex = $state(0);
+let tooltipCurrentViewNumber = $state(0);
 // Properties to copy for caret position calculation
 const properties = [
     'direction',
@@ -142,18 +142,17 @@ function handleContextSelection(contextElement) {
     updateInstructionsWithContext(contextElement);
     showContextTooltip = false;
 }
-async function updateTooltipPosition(availableContext, showContextTooltip, contextTooltipWord) {
-    if (!textarea || !showContextTooltip)
+async function updateTooltipPosition(currentViewItemsNumber) {
+    if (!textarea)
         return;
     try {
         const coords = getCaretCoordinates(textarea, textarea.selectionEnd);
         const rect = textarea.getBoundingClientRect();
-        const filteredAvailableContext = availableContext.filter((c) => !contextTooltipWord || c.title.toLowerCase().includes(contextTooltipWord.slice(1)));
         const itemHeight = 28; // Estimated height of one item + gap (Button: p-1(8px) + text-xs(16px) = 24px; Parent: gap-1(4px) = 28px)
         const containerPadding = 8; // p-1 top + p-1 bottom = 4px + 4px = 8px
         const maxHeight = 192 + containerPadding; // max-h-48 (192px) + containerPadding (8px)
         // Calculate uncapped height, subtract gap from last item as it's not needed
-        const numItems = filteredAvailableContext.length;
+        const numItems = currentViewItemsNumber;
         let uncappedHeight = numItems > 0 ? numItems * itemHeight - 4 + containerPadding : containerPadding;
         // Ensure height is at least containerPadding even if no items
         uncappedHeight = Math.max(uncappedHeight, containerPadding);
@@ -211,59 +210,29 @@ function handleInput(e) {
     else {
         showContextTooltip = false;
         contextTooltipWord = '';
-        selectedSuggestionIndex = 0;
-    }
-}
-function handleKeyPress(e) {
-    if (e.key === 'Enter' && !e.shiftKey) {
-        e.preventDefault();
-        if (contextTooltipWord) {
-            const filteredContext = availableContext.filter((c) => !contextTooltipWord || c.title.toLowerCase().includes(contextTooltipWord.slice(1)));
-            const contextElement = filteredContext[selectedSuggestionIndex];
-            if (contextElement) {
-                const isInSelectedContext = selectedContext.find((c) => c.title === contextElement.title && c.type === contextElement.type);
-                // If the context element is already in the selected context and the last word in the instructions is the same as the context element title, send request
-                if (isInSelectedContext && value.split(' ').pop() === '@' + contextElement.title) {
-                    onSendRequest();
-                    return;
-                }
-                handleContextSelection(contextElement);
-            }
-            else if (contextTooltipWord === '@' && availableContext.length > 0) {
-                handleContextSelection(availableContext[0]);
-            }
-        }
-        else {
-            onSendRequest();
-        }
     }
 }
 function handleKeyDown(e) {
+    // Pass to parent first if provided
     if (onKeyDown) {
         onKeyDown(e);
     }
-    if (!showContextTooltip)
-        return;
-    const filteredContext = availableContext.filter((c) => !contextTooltipWord || c.title.toLowerCase().includes(contextTooltipWord.slice(1)));
-    if (e.key === 'Tab') {
-        e.preventDefault();
-        const contextElement = filteredContext[selectedSuggestionIndex];
-        if (contextElement) {
-            handleContextSelection(contextElement);
+    if (showContextTooltip) {
+        // avoid new line after Enter in the tooltip
+        if (e.key === 'Enter') {
+            e.preventDefault();
         }
+        return;
     }
-    if (e.key === 'ArrowDown') {
-        e.preventDefault();
-        selectedSuggestionIndex = (selectedSuggestionIndex + 1) % filteredContext.length;
-    }
-    else if (e.key === 'ArrowUp') {
+    if (e.key === 'Enter' && !e.shiftKey) {
         e.preventDefault();
-        selectedSuggestionIndex =
-            (selectedSuggestionIndex - 1 + filteredContext.length) % filteredContext.length;
+        onSendRequest();
     }
 }
 $effect(() => {
-    updateTooltipPosition(availableContext, showContextTooltip, contextTooltipWord);
+    if (showContextTooltip) {
+        updateTooltipPosition(tooltipCurrentViewNumber);
+    }
 });
 export function focus() {
     textarea?.focus();
@@ -283,7 +252,6 @@ export function focus() {
 	</div>
 	<textarea
 		bind:this={textarea}
-		onkeypress={handleKeyPress}
 		onkeydown={handleKeyDown}
 		bind:value
 		use:autosize
@@ -319,7 +287,12 @@ export function focus() {
 				}}
 				showAllAvailable={true}
 				stringSearch={contextTooltipWord.slice(1)}
-				selectedIndex={selectedSuggestionIndex}
+				onViewChange={(newNumber) => {
+					tooltipCurrentViewNumber = newNumber
+				}}
+				setShowing={(showing) => {
+					showContextTooltip = showing
+				}}
 			/>
 		</div>
 	</Portal>

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

@@ -13,6 +13,13 @@ function formatJson(obj) {
                 return obj;
             }
         }
+        for (const key in obj) {
+            try {
+                const parsed = JSON.parse(obj[key]);
+                obj[key] = parsed;
+            }
+            catch { }
+        }
         return JSON.stringify(obj, null, 2);
     }
     catch {
@@ -71,7 +78,9 @@ async function copyToClipboard() {
 			<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>
+				<pre class="text-2xs text-primary whitespace-pre-wrap"
+					>{formatJson($state.snapshot(content))}</pre
+				>
 			</div>
 		{:else}
 			<div

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

@@ -14,8 +14,8 @@ const hasParameters = $derived(message.parameters !== undefined && Object.keys(m
 	<!-- 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" : ""
+			'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}
@@ -46,7 +46,7 @@ const hasParameters = $derived(message.parameters !== undefined && Object.keys(m
 	{#if isExpanded}
 		<div class="p-3 bg-surface space-y-3">
 			<!-- Parameters Section -->
-			<div class={message.needsConfirmation ? "opacity-80" : ""}>
+			<div class={message.needsConfirmation ? 'opacity-80' : ''}>
 				<ToolContentDisplay title="Parameters" content={message.parameters} />
 			</div>
 

package/package/components/copilot/chat/anthropic.d.ts

@@ -0,0 +1,15 @@
+import { OpenAI } from 'openai';
+import type { ChatCompletionMessageParam } from 'openai/resources/index.mjs';
+import type { MessageParam, TextBlockParam, ToolUnion } from '@anthropic-ai/sdk/resources';
+import type { MessageStream } from '@anthropic-ai/sdk/lib/MessageStream';
+import { type Tool, type ToolCallbacks } from './shared';
+export declare function getAnthropicCompletion(messages: ChatCompletionMessageParam[], abortController: AbortController, tools?: OpenAI.Chat.Completions.ChatCompletionFunctionTool[]): Promise<MessageStream>;
+export declare function parseAnthropicCompletion(completion: MessageStream, callbacks: ToolCallbacks & {
+    onNewToken: (token: string) => void;
+    onMessageEnd: () => void;
+}, messages: ChatCompletionMessageParam[], addedMessages: ChatCompletionMessageParam[], tools: Tool<any>[], helpers: any): Promise<boolean>;
+export declare function convertOpenAIToAnthropicMessages(messages: ChatCompletionMessageParam[]): {
+    system: TextBlockParam[] | undefined;
+    messages: MessageParam[];
+};
+export declare function convertOpenAIToolsToAnthropic(tools?: OpenAI.Chat.Completions.ChatCompletionFunctionTool[]): ToolUnion[] | undefined;

package/package/components/copilot/chat/anthropic.js

@@ -0,0 +1,208 @@
+import { OpenAI } from 'openai';
+import { getProviderAndCompletionConfig, workspaceAIClients } from '../lib';
+import { processToolCall } from './shared';
+export async function getAnthropicCompletion(messages, abortController, tools) {
+    const { provider, config } = getProviderAndCompletionConfig({ messages, stream: true });
+    const { system, messages: anthropicMessages } = convertOpenAIToAnthropicMessages(messages);
+    const anthropicTools = convertOpenAIToolsToAnthropic(tools);
+    const anthropicClient = workspaceAIClients.getAnthropicClient();
+    const anthropicParams = {
+        model: config.model,
+        max_tokens: config.max_tokens,
+        messages: anthropicMessages,
+        ...(system && { system }),
+        ...(anthropicTools && { tools: anthropicTools }),
+        ...(typeof config.temperature === 'number' && { temperature: config.temperature })
+    };
+    const stream = anthropicClient.messages.stream(anthropicParams, {
+        signal: abortController.signal,
+        headers: {
+            'X-Provider': provider,
+            'anthropic-version': '2023-06-01',
+            'X-Anthropic-SDK': 'true'
+        }
+    });
+    return stream;
+}
+export async function parseAnthropicCompletion(completion, callbacks, messages, addedMessages, tools, helpers) {
+    let toolCallsToProcess = [];
+    let error = null;
+    // Handle text streaming
+    completion.on('text', (textDelta, _textSnapshot) => {
+        callbacks.onNewToken(textDelta);
+    });
+    completion.on('message', (message) => {
+        for (const block of message.content) {
+            if (block.type === 'text') {
+                const text = block.text;
+                const assistantMessage = { role: 'assistant', content: text };
+                messages.push(assistantMessage);
+                addedMessages.push(assistantMessage);
+                callbacks.onMessageEnd();
+            }
+            else if (block.type === 'tool_use') {
+                // Convert Anthropic tool calls to OpenAI format for compatibility
+                toolCallsToProcess.push({
+                    id: block.id,
+                    type: 'function',
+                    function: {
+                        name: block.name,
+                        arguments: JSON.stringify(block.input)
+                    }
+                });
+                // Preprocess tool if it has a preAction
+                const tool = tools.find((t) => t.def.function.name === block.name);
+                if (tool && tool.preAction) {
+                    tool.preAction({ toolCallbacks: callbacks, toolId: block.id });
+                }
+            }
+        }
+    });
+    // Handle errors
+    completion.on('error', (e) => {
+        console.error('Anthropic stream error:', e);
+        error = e;
+    });
+    // Wait for completion
+    await completion.done();
+    callbacks.onMessageEnd();
+    if (error) {
+        throw error;
+    }
+    // Process tool calls if any
+    if (toolCallsToProcess.length > 0) {
+        const assistantWithTools = {
+            role: 'assistant',
+            tool_calls: toolCallsToProcess
+        };
+        messages.push(assistantWithTools);
+        addedMessages.push(assistantWithTools);
+        // Process each tool call
+        for (const toolCall of toolCallsToProcess) {
+            const messageToAdd = await processToolCall({
+                tools,
+                toolCall,
+                helpers,
+                toolCallbacks: callbacks
+            });
+            messages.push(messageToAdd);
+            addedMessages.push(messageToAdd);
+        }
+        return true; // Continue the conversation loop
+    }
+    return false; // End the conversation
+}
+export function convertOpenAIToAnthropicMessages(messages) {
+    let system;
+    const anthropicMessages = [];
+    for (const message of messages) {
+        if (message.role === 'system') {
+            const systemText = typeof message.content === 'string' ? message.content : JSON.stringify(message.content);
+            // Convert system to array format with cache_control for caching
+            system = [
+                {
+                    type: 'text',
+                    text: systemText,
+                    cache_control: { type: 'ephemeral' }
+                }
+            ];
+            continue;
+        }
+        if (message.role === 'user') {
+            anthropicMessages.push({
+                role: 'user',
+                content: typeof message.content === 'string' ? message.content : JSON.stringify(message.content)
+            });
+        }
+        else if (message.role === 'assistant') {
+            const content = [];
+            if (message.content) {
+                content.push({
+                    type: 'text',
+                    text: typeof message.content === 'string' ? message.content : JSON.stringify(message.content)
+                });
+            }
+            if (message.tool_calls) {
+                for (const toolCall of message.tool_calls) {
+                    if (toolCall.type !== 'function')
+                        continue;
+                    let input = {};
+                    try {
+                        input = JSON.parse(toolCall.function.arguments || '{}');
+                    }
+                    catch (e) {
+                        console.error('Failed to parse tool call arguments', e);
+                    }
+                    content.push({
+                        type: 'tool_use',
+                        id: toolCall.id,
+                        name: toolCall.function.name,
+                        input
+                    });
+                }
+            }
+            if (content.length > 0) {
+                anthropicMessages.push({
+                    role: 'assistant',
+                    content: content.length === 1 && content[0].type === 'text' ? content[0].text : content
+                });
+            }
+        }
+        else if (message.role === 'tool') {
+            // Tool results must be in user messages in Anthropic format
+            anthropicMessages.push({
+                role: 'user',
+                content: [
+                    {
+                        type: 'tool_result',
+                        tool_use_id: message.tool_call_id,
+                        content: typeof message.content === 'string'
+                            ? message.content
+                            : JSON.stringify(message.content)
+                    }
+                ]
+            });
+        }
+    }
+    // Add cache_control to the last message content blocks
+    if (anthropicMessages.length > 0) {
+        const lastMessage = anthropicMessages[anthropicMessages.length - 1];
+        if (Array.isArray(lastMessage.content)) {
+            // Add cache_control to the last content block
+            if (lastMessage.content.length > 0) {
+                const lastBlock = lastMessage.content[lastMessage.content.length - 1];
+                if (lastBlock.type === 'text') {
+                    lastBlock.cache_control = { type: 'ephemeral' };
+                }
+            }
+        }
+        else if (typeof lastMessage.content === 'string') {
+            // Convert string content to array format with cache_control
+            lastMessage.content = [
+                {
+                    type: 'text',
+                    text: lastMessage.content,
+                    cache_control: { type: 'ephemeral' }
+                }
+            ];
+        }
+    }
+    return { system, messages: anthropicMessages };
+}
+export function convertOpenAIToolsToAnthropic(tools) {
+    if (!tools || tools.length === 0)
+        return undefined;
+    const anthropicTools = tools.map((tool) => ({
+        name: tool.function.name,
+        description: tool.function.description,
+        input_schema: (tool.function.parameters || {
+            type: 'object',
+            properties: {}
+        })
+    }));
+    // Add cache_control to the last tool to cache all tool definitions
+    if (anthropicTools.length > 0) {
+        anthropicTools[anthropicTools.length - 1].cache_control = { type: 'ephemeral' };
+    }
+    return anthropicTools;
+}

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

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

package/package/components/copilot/chat/api/apiTools.js

@@ -15,7 +15,8 @@ function buildApiCallTool(endpointTool) {
             if (key === 'workspace')
                 continue;
             parameters.properties[key] = schema;
-            if (Array.isArray(endpointTool.path_params_schema.required) && endpointTool.path_params_schema.required.includes(key)) {
+            if (Array.isArray(endpointTool.path_params_schema.required) &&
+                endpointTool.path_params_schema.required.includes(key)) {
                 parameters.required.push(key);
             }
         }
@@ -24,7 +25,8 @@ function buildApiCallTool(endpointTool) {
     if (endpointTool.query_params_schema?.properties) {
         for (const [key, schema] of Object.entries(endpointTool.query_params_schema.properties)) {
             parameters.properties[key] = schema;
-            if (Array.isArray(endpointTool.query_params_schema.required) && endpointTool.query_params_schema.required.includes(key)) {
+            if (Array.isArray(endpointTool.query_params_schema.required) &&
+                endpointTool.query_params_schema.required.includes(key)) {
                 parameters.required.push(key);
             }
         }
@@ -38,7 +40,8 @@ function buildApiCallTool(endpointTool) {
             properties: endpointTool.body_schema.properties,
             required: endpointTool.body_schema.required || []
         };
-        if (Array.isArray(endpointTool.body_schema.required) && endpointTool.body_schema.required.length > 0) {
+        if (Array.isArray(endpointTool.body_schema.required) &&
+            endpointTool.body_schema.required.length > 0) {
             parameters.required.push('body');
         }
     }
@@ -114,7 +117,7 @@ export function createApiTools(chatTools, endpointMap = {}) {
                         url += `?${searchParams.toString()}`;
                     }
                     toolCallbacks.setToolStatus(toolId, {
-                        content: `Calling ${toolName}...`,
+                        content: `Calling ${toolName}...`
                     });
                     const fetchOptions = {
                         method: endpoint.method
@@ -141,7 +144,7 @@ export function createApiTools(chatTools, endpointMap = {}) {
                         });
                         toolCallbacks.setToolStatus(toolId, {
                             content: `Call to ${toolName} completed`,
-                            result: jsonResult,
+                            result: jsonResult
                         });
                         return jsonResult;
                     }
@@ -155,7 +158,7 @@ export function createApiTools(chatTools, endpointMap = {}) {
                         toolCallbacks.setToolStatus(toolId, {
                             content: `Call to ${toolName} failed`,
                             result: jsonResult,
-                            error: `HTTP ${response.status}: ${text}`,
+                            error: `HTTP ${response.status}: ${text}`
                         });
                         return jsonResult;
                     }
@@ -164,7 +167,7 @@ export function createApiTools(chatTools, endpointMap = {}) {
                     const errorMessage = `Error calling API: ${error instanceof Error ? error.message : String(error)}`;
                     toolCallbacks.setToolStatus(toolId, {
                         content: `Call to ${toolName} failed`,
-                        error: errorMessage,
+                        error: errorMessage
                     });
                     console.error(`Error calling API:`, error);
                     return errorMessage;

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

@@ -3,5 +3,5 @@ import type { Tool } from '../shared';
 export declare const CHAT_SYSTEM_PROMPT: (username: string) => string;
 export declare function getApiTools(): Promise<Tool<{}>[]>;
 export declare const apiTools: Tool<{}>[];
-export declare function prepareApiSystemMessage(): ChatCompletionSystemMessageParam;
+export declare function prepareApiSystemMessage(customPrompt?: string): ChatCompletionSystemMessageParam;
 export declare function prepareApiUserMessage(instructions: string): ChatCompletionUserMessageParam;

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

@@ -47,10 +47,15 @@ export async function getApiTools() {
     return apiToolsCache;
 }
 export const apiTools = [getDocumentationTool];
-export function prepareApiSystemMessage() {
+export function prepareApiSystemMessage(customPrompt) {
+    let content = CHAT_SYSTEM_PROMPT(get(userStore)?.username ?? '');
+    // If there's a custom prompt, append it to the system prompt
+    if (customPrompt?.trim()) {
+        content = `${content}\n\nUSER GIVEN INSTRUCTIONS:\n${customPrompt.trim()}`;
+    }
     return {
         role: 'system',
-        content: CHAT_SYSTEM_PROMPT(get(userStore)?.username ?? '')
+        content
     };
 }
 export function prepareApiUserMessage(instructions) {

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

@@ -2,5 +2,5 @@ import type { ChatCompletionSystemMessageParam, ChatCompletionUserMessageParam }
 import type { Tool } from '../shared';
 export declare const CHAT_SYSTEM_PROMPT = "\nYou are Windmill's intelligent assistant, designed to answer questions about its functionality. It is your only purpose to help the user in the context of the windmill application.\nWindmill is an open-source developer platform for building internal tools, API integrations, background jobs, workflows, and user interfaces. It offers a unified system where scripts are automatically turned into sharable UIs and can be composed into flows or embedded in custom applications.\n\nYou have access to these tools:\n1. Get documentation for user requests (get_documentation)\n\nINSTRUCTIONS:\n- When user asks about something, use the get_documentation tool to retrieve accurate information about how to fulfill the user's request.\n- Complete your response with precisions about how it works based on the documentation. Also drop a link to the relevant documentation if possible.\n- If the user asks about something that you are unsure about, say that you are not sure about the answer and suggest to ask the question to the windmill team.\n\nGENERAL PRINCIPLES:\n- Be concise but thorough\n- Maintain a friendly, professional tone\n- If you encounter an error or can't complete a request, explain why and suggest alternatives\n";
 export declare const askTools: Tool<{}>[];
-export declare function prepareAskSystemMessage(): ChatCompletionSystemMessageParam;
+export declare function prepareAskSystemMessage(customPrompt?: string): ChatCompletionSystemMessageParam;
 export declare function prepareAskUserMessage(instructions: string): ChatCompletionUserMessageParam;

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

@@ -17,10 +17,15 @@ GENERAL PRINCIPLES:
 - If you encounter an error or can't complete a request, explain why and suggest alternatives
 `;
 export const askTools = [getDocumentationTool];
-export function prepareAskSystemMessage() {
+export function prepareAskSystemMessage(customPrompt) {
+    let content = CHAT_SYSTEM_PROMPT;
+    // If there's a custom prompt, append it to the system prompt
+    if (customPrompt?.trim()) {
+        content = `${content}\n\nUSER GIVEN INSTRUCTIONS:\n${customPrompt.trim()}`;
+    }
     return {
         role: 'system',
-        content: CHAT_SYSTEM_PROMPT
+        content
     };
 }
 export function prepareAskUserMessage(instructions) {

package/package/components/copilot/chat/context.d.ts

@@ -40,7 +40,7 @@ export interface CodePieceElement {
     title: string;
     lang: ScriptLang | 'bunnative';
 }
-export interface FlowModule {
+export interface FlowModuleElement {
     type: 'flow_module';
     id: string;
     title: string;
@@ -51,7 +51,12 @@ export interface FlowModule {
         type: string;
     };
 }
-export type ContextElement = (CodeElement | ErrorElement | DBElement | DiffElement | CodePieceElement | FlowModule) & {
+export interface FlowModuleCodePieceElement extends Omit<CodePieceElement, 'type'> {
+    type: 'flow_module_code_piece';
+    id: string;
+    value: FlowModuleElement['value'];
+}
+export type ContextElement = (CodeElement | ErrorElement | DBElement | DiffElement | CodePieceElement | FlowModuleElement | FlowModuleCodePieceElement) & {
     deletable?: boolean;
 };
 export {};