windmill-components 1.531.1 → 1.537.1

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',
@@ -119,7 +119,7 @@ function getCaretCoordinates(element, position) {
     return coordinates;
 }
 function getHighlightedText(text) {
-    return text.replace(/@[\w/.-]+/g, (match) => {
+    return text.replace(/@[\w/.\-\[\]]+/g, (match) => {
         const contextElement = availableContext.find((c) => c.title === match.slice(1));
         if (contextElement) {
             return `<span class="bg-black dark:bg-white text-white dark:text-black z-10">${match}</span>`;
@@ -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/context.d.ts

@@ -40,5 +40,23 @@ export interface CodePieceElement {
     title: string;
     lang: ScriptLang | 'bunnative';
 }
-export type ContextElement = CodeElement | ErrorElement | DBElement | DiffElement | CodePieceElement;
+export interface FlowModuleElement {
+    type: 'flow_module';
+    id: string;
+    title: string;
+    value: {
+        language?: ScriptLang | 'bunnative';
+        path?: string;
+        content?: string;
+        type: string;
+    };
+}
+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 {};

package/package/components/copilot/chat/context.js

@@ -7,4 +7,5 @@ export const ContextIconMap = {
     db: Database,
     diff: Diff,
     code_piece: Code
+    // flow_module type is handled with FlowModuleIcon
 };

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

@@ -71,13 +71,10 @@ const flowHelpers = {
     hasDiff: () => {
         return Object.keys(affectedModules).length > 0;
     },
-    acceptAllModuleActions: () => {
-        for (const [id, affectedModule] of Object.entries(affectedModules)) {
-            if (affectedModule.action === 'removed') {
-                deleteStep(id);
-            }
+    acceptAllModuleActions() {
+        for (const id of Object.keys(affectedModules)) {
+            this.acceptModuleAction(id);
         }
-        affectedModules = {};
     },
     rejectAllModuleActions() {
         for (const id of Object.keys(affectedModules)) {
@@ -151,7 +148,18 @@ const flowHelpers = {
                     if (!newModule) {
                         throw new Error('Module not found');
                     }
-                    newModule.value = oldModule.value;
+                    // Apply the old code to the editor and hide diff editor if the reverted module is a rawscript
+                    if (newModule.value.type === 'rawscript' &&
+                        $currentEditor?.type === 'script' &&
+                        $currentEditor.stepId === id) {
+                        const aiChatEditorHandler = $currentEditor.editor.getAiChatEditorHandler();
+                        if (aiChatEditorHandler) {
+                            aiChatEditorHandler.revertAll({ disableReviewCallback: true });
+                            $currentEditor.hideDiffMode();
+                        }
+                    }
+                    Object.keys(newModule).forEach((k) => delete newModule[k]);
+                    Object.assign(newModule, $state.snapshot(oldModule));
                 }
                 refreshStateStore(flowStore);
                 delete affectedModules[id];
@@ -162,6 +170,15 @@ const flowHelpers = {
         if (affectedModules[id]?.action === 'removed') {
             deleteStep(id);
         }
+        if (affectedModules[id]?.action === 'modified' &&
+            $currentEditor &&
+            $currentEditor.type === 'script' &&
+            $currentEditor.stepId === id) {
+            const aiChatEditorHandler = $currentEditor.editor.getAiChatEditorHandler();
+            if (aiChatEditorHandler) {
+                aiChatEditorHandler.keepAll({ disableReviewCallback: true });
+            }
+        }
         delete affectedModules[id];
     },
     // ai chat tools
@@ -416,6 +433,72 @@ const flowHelpers = {
             refreshStateStore(flowStore);
         }
         setModuleStatus(id, 'modified');
+    },
+    setForLoopOptions: async (id, opts) => {
+        const module = getModule(id);
+        if (!module) {
+            throw new Error('Module not found');
+        }
+        if (module.value.type !== 'forloopflow') {
+            throw new Error('Module is not a forloopflow');
+        }
+        // Apply skip_failures if provided
+        if (typeof opts.skip_failures === 'boolean') {
+            module.value.skip_failures = opts.skip_failures;
+        }
+        // Apply parallel if provided
+        if (typeof opts.parallel === 'boolean') {
+            module.value.parallel = opts.parallel;
+        }
+        // Handle parallelism
+        if (opts.parallel === false) {
+            // If parallel is disabled, clear parallelism
+            module.value.parallelism = undefined;
+        }
+        else if (opts.parallelism !== undefined) {
+            if (opts.parallelism === null) {
+                // Explicitly clear parallelism
+                module.value.parallelism = undefined;
+            }
+            else if (module.value.parallel || opts.parallel === true) {
+                // Only set parallelism if parallel is enabled
+                const n = Math.max(1, Math.floor(Math.abs(opts.parallelism)));
+                module.value.parallelism = n;
+            }
+        }
+        refreshStateStore(flowStore);
+        setModuleStatus(id, 'modified');
+    },
+    setModuleControlOptions: async (id, opts) => {
+        const module = getModule(id);
+        if (!module) {
+            throw new Error('Module not found');
+        }
+        // Handle stop_after_if
+        if (typeof opts.stop_after_if === 'boolean') {
+            if (opts.stop_after_if === false) {
+                module.stop_after_if = undefined;
+            }
+            else {
+                module.stop_after_if = {
+                    expr: opts.stop_after_if_expr ?? '',
+                    skip_if_stopped: opts.stop_after_if
+                };
+            }
+        }
+        // Handle skip_if
+        if (typeof opts.skip_if === 'boolean') {
+            if (opts.skip_if === false) {
+                module.skip_if = undefined;
+            }
+            else {
+                module.skip_if = {
+                    expr: opts.skip_if_expr ?? ''
+                };
+            }
+        }
+        refreshStateStore(flowStore);
+        setModuleStatus(id, 'modified');
     }
 };
 function deleteStep(id) {
@@ -454,6 +537,25 @@ $effect(() => {
     const cleanup = aiChatManager.listenForCurrentEditorChanges($currentEditor);
     return cleanup;
 });
+// Automatically show revert review when selecting a rawscript module with pending changes
+$effect(() => {
+    if ($currentEditor?.type === 'script' &&
+        $selectedId &&
+        affectedModules[$selectedId] &&
+        $currentEditor.editor.getAiChatEditorHandler()) {
+        const moduleLastSnapshot = getModule($selectedId, lastSnapshot);
+        const content = moduleLastSnapshot?.value.type === 'rawscript' ? moduleLastSnapshot.value.content : '';
+        if (content.length > 0) {
+            untrack(() => $currentEditor.editor.reviewAppliedCode(content, {
+                onFinishedReview: () => {
+                    const id = $selectedId;
+                    flowHelpers.acceptModuleAction(id);
+                    $currentEditor.hideDiffMode();
+                }
+            }));
+        }
+    }
+});
 let diffDrawer = $state(undefined);
 </script>
 

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

@@ -2,6 +2,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 { ContextElement } from '../context';
 import type { ExtendedOpenFlow } from '../../../flows/types';
 export type AIModuleAction = 'added' | 'modified' | 'removed';
 export interface FlowAIChatHelpers {
@@ -32,6 +33,17 @@ export interface FlowAIChatHelpers {
     addBranch: (id: string) => Promise<void>;
     removeBranch: (id: string, branchIndex: number) => Promise<void>;
     setForLoopIteratorExpression: (id: string, expression: string) => Promise<void>;
+    setForLoopOptions: (id: string, opts: {
+        skip_failures?: boolean | null;
+        parallel?: boolean | null;
+        parallelism?: number | null;
+    }) => Promise<void>;
+    setModuleControlOptions: (id: string, opts: {
+        stop_after_if?: boolean | null;
+        stop_after_if_expr?: string | null;
+        skip_if?: boolean | null;
+        skip_if_expr?: string | null;
+    }) => Promise<void>;
     setCode: (id: string, code: string) => Promise<void>;
 }
 declare const newStepSchema: z.ZodUnion<[z.ZodObject<{
@@ -130,5 +142,5 @@ export declare function prepareFlowSystemMessage(): ChatCompletionSystemMessageP
 export declare function prepareFlowUserMessage(instructions: string, flowAndSelectedId?: {
     flow: ExtendedOpenFlow;
     selectedId: string;
-}): ChatCompletionUserMessageParam;
+}, selectedContext?: ContextElement[]): ChatCompletionUserMessageParam;
 export {};