windmill-components 1.558.4 → 1.596.0

package/package/components/graph/graphBuilder.svelte.d.ts

@@ -3,7 +3,8 @@ import { type Edge } from '@xyflow/svelte';
 import type { GraphModuleState } from './model';
 import { type AssetWithAltAccessType } from '../assets/lib';
 import type { ModulesTestStates, ModuleTestState } from '../modulesTest.svelte';
-export type InsertKind = 'script' | 'forloop' | 'whileloop' | 'branchone' | 'branchall' | 'flow' | 'trigger' | 'approval' | 'end' | 'aiagent';
+import type { ModuleActionInfo } from '../flows/flowDiff';
+export type InsertKind = 'script' | 'forloop' | 'whileloop' | 'branchone' | 'branchall' | 'flow' | 'trigger' | 'approval' | 'end' | 'aiagent' | 'mcpTool' | 'websearchTool';
 export type InlineScript = {
     language: RawScript['language'];
     kind: Script['kind'];
@@ -78,6 +79,7 @@ export type NodeLayout = {
     data: {
         offset?: number;
     };
+    selectable?: boolean;
 } & FlowNode;
 export type FlowNode = InputN | ModuleN | BranchAllStartN | BranchAllEndN | ForLoopEndN | ForLoopStartN | ResultN | WhileLoopStartN | WhileLoopEndN | BranchOneStartN | BranchOneEndN | SubflowBoundN | NoBranchN | TriggerN | AssetN | AssetsOverflowedN | AiToolN | NewAiToolN;
 export type InputN = {
@@ -97,6 +99,7 @@ export type InputN = {
         showJobStatus: boolean;
         flowHasChanged: boolean;
         chatInputEnabled: boolean;
+        moduleAction?: ModuleActionInfo;
         assets?: AssetWithAltAccessType[] | undefined;
     };
 };
@@ -116,6 +119,7 @@ export type ModuleN = {
         flowJob: Job | undefined;
         isOwner: boolean;
         assets: AssetWithAltAccessType[] | undefined;
+        moduleAction: ModuleActionInfo | undefined;
     };
 };
 export type BranchAllStartN = {
@@ -261,6 +265,7 @@ export type AiToolN = {
     type: 'aiTool';
     data: {
         tool: string;
+        type?: string;
         eventHandlers: GraphEventHandlers;
         moduleId: string;
         insertable: boolean;
@@ -286,6 +291,7 @@ export declare function graphBuilder(modules: FlowModule[] | undefined, extra: {
     insertable: boolean;
     flowModuleStates: Record<string, GraphModuleState> | undefined;
     testModuleStates: ModulesTestStates | undefined;
+    moduleActions?: Record<string, ModuleActionInfo>;
     selectedId: string | undefined;
     path: string | undefined;
     newFlow: boolean;

package/package/components/graph/graphBuilder.svelte.js

@@ -78,9 +78,11 @@ export function graphBuilder(modules, extra, failureModule, preprocessorModule,
                     editMode: extra.editMode,
                     isOwner: extra.isOwner,
                     flowJob: extra.flowJob,
-                    assets: getFlowModuleAssets(module, extra.additionalAssetsMap)
+                    assets: getFlowModuleAssets(module, extra.additionalAssetsMap),
+                    moduleAction: extra.moduleActions?.[module.id]
                 },
-                type: 'module'
+                type: 'module',
+                selectable: true
             });
             return module.id;
         }
@@ -144,7 +146,8 @@ export function graphBuilder(modules, extra, failureModule, preprocessorModule,
                     ...extra,
                     insertable: extra.insertable && !options?.disableInsert && prefix == undefined,
                     shouldOffsetInsertBtnDueToAssetNode: nodeIdsWithOutputAssets.has(sourceId)
-                }
+                },
+                selectable: false
             });
         }
         const inputAssets = extra.additionalAssetsMap?.['Input'];
@@ -166,6 +169,7 @@ export function graphBuilder(modules, extra, failureModule, preprocessorModule,
                 showJobStatus: extra.showJobStatus,
                 flowHasChanged: extra.flowHasChanged,
                 chatInputEnabled: extra.chatInputEnabled,
+                moduleAction: extra.moduleActions?.['Input'],
                 ...(inputAssets ? { assets: inputAssets } : {})
             }
         };
@@ -196,7 +200,7 @@ export function graphBuilder(modules, extra, failureModule, preprocessorModule,
             }
         }
         const resultNode = {
-            id: 'result',
+            id: 'Result',
             data: {
                 eventHandlers: eventHandlers,
                 success: success,

package/package/components/graph/graphContext.d.ts

@@ -0,0 +1,15 @@
+import type { SelectionManager } from './selectionUtils.svelte';
+import type { NoteManager } from './noteManager.svelte';
+import type { Writable } from 'svelte/store';
+import type { FlowDiffManager } from '../flows/flowDiffManager.svelte';
+export type GraphContext = {
+    selectionManager: SelectionManager;
+    useDataflow: Writable<boolean | undefined>;
+    showAssets: Writable<boolean | undefined>;
+    noteManager?: NoteManager;
+    clearFlowSelection?: () => void;
+    yOffset?: number;
+    diffManager: FlowDiffManager;
+};
+export declare const getGraphContext: () => GraphContext;
+export declare const setGraphContext: (context: GraphContext) => GraphContext;

package/package/components/graph/graphContext.js

@@ -0,0 +1,5 @@
+import { getContext, setContext } from 'svelte';
+const graphContextKey = 'FlowGraphContext';
+//TODO: use https://svelte.dev/docs/svelte/context#Type-safe-context after migrating svelte 5 to latest version
+export const getGraphContext = () => getContext(graphContextKey);
+export const setGraphContext = (context) => setContext(graphContextKey, context);

package/package/components/graph/groupDetectionUtils.d.ts

@@ -0,0 +1,9 @@
+type FlowNode = {
+    id: string;
+    parentIds?: string[];
+};
+/**
+ * Use a simple algorithm to complete a group and split it into connected components
+ */
+export declare function completeAndSplitGroup(groupNodes: string[], flowNodes: FlowNode[]): string[][];
+export {};

package/package/components/graph/groupDetectionUtils.js

@@ -0,0 +1,73 @@
+/**
+ * Use a simple algorithm to complete a group and split it into connected components
+ */
+export function completeAndSplitGroup(groupNodes, flowNodes) {
+    if (groupNodes.length <= 1) {
+        return groupNodes.length === 1 ? [groupNodes] : [];
+    }
+    // Build parent map for upward traversal only
+    const parents = new Map();
+    for (const node of flowNodes) {
+        parents.set(node.id, node.parentIds || []);
+    }
+    const groupSet = new Set(groupNodes);
+    const assignedComponent = new Map();
+    const components = [];
+    const mergeComponents = (fromIdx, toIdx) => {
+        if (fromIdx === toIdx)
+            return;
+        const target = components[toIdx];
+        const source = components[fromIdx];
+        source.forEach((node) => target.add(node));
+        source.clear();
+        for (const [nodeId, idx] of assignedComponent.entries()) {
+            if (idx === fromIdx) {
+                assignedComponent.set(nodeId, toIdx);
+            }
+        }
+    };
+    for (const startNode of groupNodes) {
+        if (assignedComponent.has(startNode))
+            continue;
+        const componentIdx = components.length;
+        components.push(new Set([startNode]));
+        assignedComponent.set(startNode, componentIdx);
+        const stack = [
+            { nodeId: startNode, path: [startNode], seen: new Set([startNode]) }
+        ];
+        while (stack.length > 0) {
+            const { nodeId, path, seen } = stack.pop();
+            const parentIds = parents.get(nodeId) || [];
+            for (const parentId of parentIds) {
+                if (seen.has(parentId))
+                    continue;
+                const newPath = [...path, parentId];
+                const newSeen = new Set(seen);
+                newSeen.add(parentId);
+                if (groupSet.has(parentId)) {
+                    const existingIdx = assignedComponent.get(parentId);
+                    if (existingIdx === undefined) {
+                        assignedComponent.set(parentId, componentIdx);
+                        components[componentIdx].add(parentId);
+                        stack.push({ nodeId: parentId, path: [parentId], seen: new Set([parentId]) });
+                    }
+                    else if (existingIdx !== componentIdx) {
+                        mergeComponents(existingIdx, componentIdx);
+                    }
+                    for (const node of newPath) {
+                        components[componentIdx].add(node);
+                    }
+                }
+                else {
+                    stack.push({ nodeId: parentId, path: newPath, seen: newSeen });
+                }
+            }
+        }
+    }
+    return components
+        .filter((component) => component.size > 0)
+        .map((component) => Array.from(component)
+        .filter((nodeId) => !nodeId.startsWith('subflow:'))
+        .sort())
+        .filter((component) => component.length > 0);
+}

package/package/components/graph/model.d.ts

@@ -65,6 +65,7 @@ export type GraphModuleState = {
     isListJob?: boolean;
     skipped?: boolean;
     agent_actions?: FlowStatusModule['agent_actions'];
+    script_hash?: string;
 };
 export type NestedNodes = GraphItem[];
 export declare function isNode(item: GraphItem | NestedNodes | undefined): item is Node;

package/package/components/graph/noteColors.d.ts

@@ -0,0 +1,30 @@
+export declare enum NoteColor {
+    YELLOW = "yellow",
+    BLUE = "blue",
+    GREEN = "green",
+    PURPLE = "purple",
+    PINK = "pink",
+    ORANGE = "orange",
+    RED = "red",
+    CYAN = "cyan",
+    LIME = "lime",
+    GRAY = "gray"
+}
+export interface NoteColorConfig {
+    background: string;
+    outline: string;
+    outlineHover: string;
+    text: string;
+    hover: string;
+}
+export declare const NOTE_COLORS: Record<NoteColor, NoteColorConfig>;
+export declare const NOTE_COLOR_SWATCHES: Record<NoteColor, string>;
+export declare const DEFAULT_NOTE_COLOR = NoteColor.GREEN;
+export declare const DEFAULT_GROUP_NOTE_COLOR = NoteColor.BLUE;
+/**
+ * Get the next available color that's not in the used colors set
+ * Cycles through all available colors in order
+ */
+export declare function getNextAvailableColor(usedColors: Set<NoteColor>): NoteColor;
+export declare const MIN_NOTE_WIDTH = 275;
+export declare const MIN_NOTE_HEIGHT = 60;

package/package/components/graph/noteColors.js

@@ -0,0 +1,121 @@
+// Note color definitions with Tailwind classes for light and dark mode
+export var NoteColor;
+(function (NoteColor) {
+    NoteColor["YELLOW"] = "yellow";
+    NoteColor["BLUE"] = "blue";
+    NoteColor["GREEN"] = "green";
+    NoteColor["PURPLE"] = "purple";
+    NoteColor["PINK"] = "pink";
+    NoteColor["ORANGE"] = "orange";
+    NoteColor["RED"] = "red";
+    NoteColor["CYAN"] = "cyan";
+    NoteColor["LIME"] = "lime";
+    NoteColor["GRAY"] = "gray";
+})(NoteColor || (NoteColor = {}));
+// Color configurations for each note color with dark mode support
+export const NOTE_COLORS = {
+    [NoteColor.YELLOW]: {
+        background: 'bg-yellow-200 dark:bg-yellow-900',
+        outline: 'outline-yellow-300 dark:outline-yellow-600',
+        outlineHover: 'outline-yellow-300/60 dark:outline-yellow-600/60',
+        text: 'text-yellow-900 dark:text-yellow-100',
+        hover: 'hover:bg-yellow-200 dark:hover:bg-yellow-800'
+    },
+    [NoteColor.BLUE]: {
+        background: 'bg-blue-100 dark:bg-blue-950',
+        outline: 'outline-blue-300 dark:outline-blue-600',
+        outlineHover: 'outline-blue-300/60 dark:outline-blue-600/60',
+        text: 'text-blue-900 dark:text-blue-100',
+        hover: 'hover:bg-blue-200 dark:hover:bg-blue-800'
+    },
+    [NoteColor.GREEN]: {
+        background: 'bg-green-200 dark:bg-green-900',
+        outline: 'outline-green-300 dark:outline-green-600',
+        outlineHover: 'outline-green-300/60 dark:outline-green-600/60',
+        text: 'text-green-900 dark:text-green-100',
+        hover: 'hover:bg-green-200 dark:hover:bg-green-800'
+    },
+    [NoteColor.PURPLE]: {
+        background: 'bg-purple-200 dark:bg-purple-900',
+        outline: 'outline-purple-300 dark:outline-purple-600',
+        outlineHover: 'outline-purple-300/60 dark:outline-purple-600/60',
+        text: 'text-purple-900 dark:text-purple-100',
+        hover: 'hover:bg-purple-200 dark:hover:bg-purple-800'
+    },
+    [NoteColor.PINK]: {
+        background: 'bg-pink-200 dark:bg-pink-900',
+        outline: 'outline-pink-300 dark:outline-pink-600',
+        outlineHover: 'outline-pink-300/60 dark:outline-pink-600/60',
+        text: 'text-pink-900 dark:text-pink-100',
+        hover: 'hover:bg-pink-200 dark:hover:bg-pink-800'
+    },
+    [NoteColor.ORANGE]: {
+        background: 'bg-orange-200 dark:bg-orange-900',
+        outline: 'outline-orange-300 dark:outline-orange-600',
+        outlineHover: 'outline-orange-300/60 dark:outline-orange-600/60',
+        text: 'text-orange-900 dark:text-orange-100',
+        hover: 'hover:bg-orange-200 dark:hover:bg-orange-800'
+    },
+    [NoteColor.RED]: {
+        background: 'bg-red-200 dark:bg-red-900',
+        outline: 'outline-red-300 dark:outline-red-600',
+        outlineHover: 'outline-red-300/60 dark:outline-red-600/60',
+        text: 'text-red-900 dark:text-red-100',
+        hover: 'hover:bg-red-200 dark:hover:bg-red-800'
+    },
+    [NoteColor.CYAN]: {
+        background: 'bg-cyan-200 dark:bg-cyan-900',
+        outline: 'outline-cyan-300 dark:outline-cyan-600',
+        outlineHover: 'outline-cyan-300/60 dark:outline-cyan-600/60',
+        text: 'text-cyan-900 dark:text-cyan-100',
+        hover: 'hover:bg-cyan-200 dark:hover:bg-cyan-800'
+    },
+    [NoteColor.LIME]: {
+        background: 'bg-lime-200 dark:bg-lime-900',
+        outline: 'outline-lime-300 dark:outline-lime-600',
+        outlineHover: 'outline-lime-300/60 dark:outline-lime-600/60',
+        text: 'text-lime-900 dark:text-lime-100',
+        hover: 'hover:bg-lime-200 dark:hover:bg-lime-800'
+    },
+    [NoteColor.GRAY]: {
+        background: 'bg-gray-200 dark:bg-gray-800',
+        outline: 'outline-gray-300 dark:outline-gray-600',
+        outlineHover: 'outline-gray-300/60 dark:outline-gray-600/60',
+        text: 'text-gray-900 dark:text-gray-100',
+        hover: 'hover:bg-gray-200 dark:hover:bg-gray-700'
+    }
+};
+// Color swatch colors for the picker (solid colors for the palette dots)
+export const NOTE_COLOR_SWATCHES = {
+    [NoteColor.YELLOW]: 'bg-yellow-400',
+    [NoteColor.BLUE]: 'bg-blue-400',
+    [NoteColor.GREEN]: 'bg-green-400',
+    [NoteColor.PURPLE]: 'bg-purple-400',
+    [NoteColor.PINK]: 'bg-pink-400',
+    [NoteColor.ORANGE]: 'bg-orange-400',
+    [NoteColor.RED]: 'bg-red-400',
+    [NoteColor.CYAN]: 'bg-cyan-400',
+    [NoteColor.LIME]: 'bg-lime-400',
+    [NoteColor.GRAY]: 'bg-gray-400'
+};
+// Default note color
+export const DEFAULT_NOTE_COLOR = NoteColor.GREEN;
+export const DEFAULT_GROUP_NOTE_COLOR = NoteColor.BLUE;
+/**
+ * Get the next available color that's not in the used colors set
+ * Cycles through all available colors in order
+ */
+export function getNextAvailableColor(usedColors) {
+    const allColors = Object.values(NoteColor);
+    // Find first unused color
+    for (const color of allColors) {
+        if (!usedColors.has(color)) {
+            return color;
+        }
+    }
+    // If all colors are used, return the default
+    return DEFAULT_GROUP_NOTE_COLOR;
+}
+// Minimum note size constraints
+export const MIN_NOTE_WIDTH = 275;
+export const MIN_NOTE_HEIGHT = 60;

package/package/components/graph/noteEditor.svelte.d.ts

@@ -0,0 +1,97 @@
+import type { FlowNote } from '../../gen';
+import type { StateStore } from '../../utils';
+import type { ExtendedOpenFlow } from '../flows/types';
+import type { NoteColor } from './noteColors';
+/**
+ * Utility class for editing flow notes via direct flowStore mutations
+ * This class is designed to be used in editor contexts via Svelte context
+ */
+export declare class NoteEditor {
+    private flowStore;
+    private onNoteAdded?;
+    constructor(flowStore: StateStore<ExtendedOpenFlow>, onNoteAdded?: () => void);
+    /**
+     * Get the current notes array from the flow store
+     */
+    private getNotes;
+    /**
+     * Set the notes array in the flow store
+     */
+    private setNotes;
+    /**
+     * Add a new note to the flow
+     */
+    addNote(note: Omit<FlowNote, 'id'>): string;
+    /**
+     * Update the text content of a note
+     */
+    updateText(noteId: string, text: string): void;
+    /**
+     * Update the color of a note
+     */
+    updateColor(noteId: string, color: NoteColor): void;
+    /**
+     * Update the position of a note
+     */
+    updatePosition(noteId: string, position: {
+        x: number;
+        y: number;
+    }): void;
+    /**
+     * Update the size of a note
+     */
+    updateSize(noteId: string, size: {
+        width: number;
+        height: number;
+    }): void;
+    /**
+     * Toggle the locked state of a note
+     */
+    updateLock(noteId: string, locked: boolean): void;
+    /**
+     * Delete a note from the flow
+     */
+    deleteNote(noteId: string): void;
+    /**
+     * Find which nodes from the given list are already in existing group notes
+     */
+    private findNodesInExistingGroups;
+    /**
+     * Get smart color for group note based on existing groups
+     */
+    private getSmartGroupNoteColor;
+    /**
+     * Create a group note containing the specified node IDs
+     */
+    createGroupNote(nodeIds: string[], text?: string): string;
+    /**
+     * Check if a node is the only member of an existing group note
+     */
+    isNodeOnlyMemberOfGroupNote(nodeId: string): boolean;
+    /**
+     * Check if editing is available (flowStore is properly initialized)
+     */
+    isAvailable(): boolean;
+    /**
+     * Clean up group notes using DAG path completion
+     */
+    cleanupGroupNotes(flowNodes: {
+        id: string;
+        parentIds?: string[];
+        offset?: number;
+    }[]): void;
+}
+/**
+ * Context type for NoteEditor
+ */
+export type NoteEditorContext = {
+    noteEditor: NoteEditor;
+};
+/**
+ * Set the NoteEditor context (used in FlowBuilder)
+ */
+export declare function setNoteEditorContext(noteEditor: NoteEditor): void;
+/**
+ * Get the NoteEditor context (used in components that need editing capabilities)
+ */
+export declare function getNoteEditorContext(): NoteEditorContext | undefined;