windmill-components 1.532.0 → 1.537.1

package/package/components/flows/types.d.ts

@@ -1,4 +1,4 @@
-import type { OpenFlow } from '../../gen';
+import type { Job, OpenFlow } from '../../gen';
 import type { History } from '../../history.svelte';
 import type { Writable } from 'svelte/store';
 import type ScriptEditorDrawer from './content/ScriptEditorDrawer.svelte';
@@ -7,12 +7,13 @@ import type { FlowBuilderWhitelabelCustomUi } from '../custom_ui';
 import type Editor from '../Editor.svelte';
 import type SimpleEditor from '../SimpleEditor.svelte';
 import type { StateStore } from '../../utils';
-import type { TestSteps } from './testSteps.svelte';
+import type { StepsInputArgs } from './stepsInputArgs.svelte';
 import type { Asset, AssetWithAccessType } from '../assets/lib';
 import type S3FilePicker from '../S3FilePicker.svelte';
 import type DbManagerDrawer from '../DBManagerDrawer.svelte';
 import type ResourceEditorDrawer from '../ResourceEditorDrawer.svelte';
 import type { ModulesTestStates } from '../modulesTest.svelte';
+import type { ButtonProp } from '../DiffEditor.svelte';
 export type FlowInput = Record<string, {
     flowStepWarnings?: Record<string, {
         message: string;
@@ -38,6 +39,8 @@ export type CurrentEditor = (({
     hideDiffMode: () => void;
     diffMode: boolean;
     lastDeployedCode: string | undefined;
+    setDiffOriginal?: (code: string) => void;
+    setDiffButtons?: (buttons: ButtonProp[]) => void;
 } | {
     type: 'iterator';
     editor: SimpleEditor;
@@ -57,7 +60,7 @@ export type FlowEditorContext = {
     flowStore: StateStore<ExtendedOpenFlow>;
     flowInputEditorState: Writable<FlowInputEditorState>;
     flowStateStore: StateStore<FlowState>;
-    testSteps: TestSteps;
+    stepsInputArgs: StepsInputArgs;
     saveDraft: () => void;
     initialPathStore: Writable<string>;
     fakeInitialPath: string;
@@ -79,3 +82,13 @@ export type FlowGraphAssetContext = StateStore<{
     additionalAssetsMap: Record<string, AssetWithAccessType[]>;
     computeAssetsCount: (asset: Asset) => number;
 }>;
+export type OutputViewerJob = ((Job | {
+    id: string;
+    result: unknown;
+    type: 'CompletedJob';
+    workspace_id: string;
+    success: boolean;
+}) & {
+    result_stream?: string;
+    result?: unknown;
+}) | undefined;

package/package/components/flows/utils.js

@@ -42,6 +42,9 @@ export function evalValue(k, mod, pickableProperties, showError) {
             v = undefined;
         }
     }
+    if (v === NEVER_TESTED_THIS_FAR) {
+        v = undefined;
+    }
     return v;
 }
 export function filteredContentForExport(flow) {

package/package/components/graph/FlowGraphV2.svelte

@@ -303,7 +303,7 @@ let graph = $derived.by(() => {
         suspendStatus,
         flowHasChanged,
         additionalAssetsMap: flowGraphAssetsCtx?.val.additionalAssetsMap
-    }, untrack(() => failureModule), untrack(() => preprocessorModule), eventHandler, success, $useDataflow, untrack(() => $selectedId), moving, simplifiableFlow, triggerNode ? path : undefined, expandedSubflows);
+    }, untrack(() => failureModule), preprocessorModule, eventHandler, success, $useDataflow, untrack(() => $selectedId), moving, simplifiableFlow, triggerNode ? path : undefined, expandedSubflows);
 });
 $effect(() => {
     ;

package/package/components/graph/renderers/nodes/AIToolNode.svelte

@@ -7,7 +7,7 @@ export const BELOW_ADDITIONAL_OFFSET = 19;
 export const AI_TOOL_CALL_PREFIX = '_wm_ai_agent_tool_call';
 export const AI_TOOL_MESSAGE_PREFIX = '_wm_ai_agent_message';
 const ROW_WIDTH = 275;
-const NEW_TOOL_NODE_WIDTH = 40;
+const NEW_TOOL_NODE_WIDTH = 50;
 const MAX_TOOLS_PER_ROW = 2;
 let computeAIToolNodesCache;
 export function getToolCallId(idx, agentModuleId, moduleId) {
@@ -100,13 +100,13 @@ export function computeAIToolNodes(nodes, eventHandlers, insertable, flowModuleS
                 id: `${node.id}-tool-${tool.id}`,
                 width: inputToolWidth,
                 position: {
-                    x: tools.length === 1
+                    x: (tools.length === 1
                         ? (ROW_WIDTH - inputToolWidth) / 2
                         : (i + 1) % 2 === 0
                             ? inputToolWidth + inputToolXGap
                             : isLastRow && tools.length % 2 === 1
                                 ? (ROW_WIDTH - inputToolWidth) / 2
-                                : 0,
+                                : 0) + node.data.offset,
                     y: baseOffset +
                         rowOffset *
                             (agentActions
@@ -132,7 +132,7 @@ export function computeAIToolNodes(nodes, eventHandlers, insertable, flowModuleS
                 parentId: node.id,
                 width: NEW_TOOL_NODE_WIDTH,
                 position: {
-                    x: (ROW_WIDTH - NEW_TOOL_NODE_WIDTH) / 2,
+                    x: (ROW_WIDTH - NEW_TOOL_NODE_WIDTH) / 2 + node.data.offset,
                     y: baseOffset + rowOffset
                 }
             });

package/package/components/graph/renderers/nodes/NewAIToolNode.svelte

@@ -1,64 +1,81 @@
-<script lang="ts">import { twMerge } from 'tailwind-merge';
+<script lang="ts">import { preventDefault, stopPropagation } from 'svelte/legacy';
+import { twMerge } from 'tailwind-merge';
 import {} from '../../graphBuilder.svelte';
-import NodeWrapper from './NodeWrapper.svelte';
-import Popover from '../../../meltComponents/Popover.svelte';
 import InsertModuleInner from '../../../flows/map/InsertModuleInner.svelte';
+import { Cross } from 'lucide-svelte';
+import PopupV2 from '../../../common/popup/PopupV2.svelte';
+import { flip, offset } from 'svelte-floating-ui/dom';
 let funcDesc = $state('');
 let { data } = $props();
+let floatingConfig = {
+    strategy: 'fixed',
+    // @ts-ignore
+    placement: 'bottom-center',
+    middleware: [offset(8), flip()],
+    autoUpdate: true
+};
 </script>
 
-<NodeWrapper>
-	{#snippet children({ darkMode })}
-		<!-- svelte-ignore a11y_no_static_element_interactions -->
-		<Popover
-			portal={null}
-			usePointerDownOutside
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<PopupV2 {floatingConfig} target="#flow-editor">
+	{#snippet button({ pointerdown, pointerup })}
+		<button
+			title={`Add 'tool'
+			}`}
+			type="button"
 			class={twMerge(
-				'!w-full text-2xs font-normal bg-surface h-6 pr-0.5 flex justify-center items-center rounded-sm text-tertiary border',
-				'hover:bg-surface-hover'
+				'!w-full h-6 flex items-center justify-center !outline-[1px] outline dark:outline-gray-500 outline-gray-300 text-secondary bg-surface focus:outline-none hover:bg-surface-hover rounded'
 			)}
-			placement="top"
+			onpointerdown={stopPropagation(
+				preventDefault(() => {
+					pointerdown()
+				})
+			)}
+			onpointerup={pointerup}
 		>
-			<svelte:fragment slot="trigger">+tool</svelte:fragment>
-			<svelte:fragment slot="content" let:close>
-				<InsertModuleInner
-					bind:funcDesc
-					scriptOnly
-					on:close={() => {
-						close()
-					}}
-					on:new={(e) => {
-						data.eventHandlers.insert({
-							index: -1, // ignored when agentId is set
-							agentId: data.agentModuleId,
-							...e.detail
-						})
-						close()
-					}}
-					on:insert={(e) => {
-						data.eventHandlers.insert({
-							index: -1, // ignored when agentId is set
-							agentId: data.agentModuleId,
-							...e.detail
-						})
-						close()
-					}}
-					on:pickScript={(e) => {
-						data.eventHandlers.insert({
-							index: -1, // ignored when agentId is set
-							agentId: data.agentModuleId,
-							kind: e.detail.kind,
-							script: {
-								...e.detail,
-								summary: e.detail.summary
-									? e.detail.summary.replace(/\s/, '_').replace(/[^a-zA-Z0-9_]/g, '')
-									: e.detail.path.split('/').pop()
-							}
-						})
-						close()
-					}}
-				/>
-			</svelte:fragment>
-		</Popover>
+			<div class="flex flex-row items-center gap-1 font-medium text-2xs">
+				<Cross size={12} />
+				tool
+			</div>
+		</button>
+	{/snippet}
+	{#snippet children({ close })}
+		<InsertModuleInner
+			bind:funcDesc
+			scriptOnly
+			on:close={() => {
+				close()
+			}}
+			on:new={(e) => {
+				data.eventHandlers.insert({
+					index: -1, // ignored when agentId is set
+					agentId: data.agentModuleId,
+					...e.detail
+				})
+				close()
+			}}
+			on:insert={(e) => {
+				data.eventHandlers.insert({
+					index: -1, // ignored when agentId is set
+					agentId: data.agentModuleId,
+					...e.detail
+				})
+				close()
+			}}
+			on:pickScript={(e) => {
+				data.eventHandlers.insert({
+					index: -1, // ignored when agentId is set
+					agentId: data.agentModuleId,
+					kind: e.detail.kind,
+					script: {
+						...e.detail,
+						summary: e.detail.summary
+							? e.detail.summary.replace(/\s/, '_').replace(/[^a-zA-Z0-9_]/g, '')
+							: e.detail.path.split('/').pop()
+					}
+				})
+				close()
+			}}
+		/>
 	{/snippet}
-</NodeWrapper>
+</PopupV2>

package/package/components/propertyPicker/ObjectViewer.svelte

@@ -40,6 +40,11 @@ export function getTypeAsString(arg) {
     if (Object.keys(arg).length === 1 && Object.keys(arg).includes('s3')) {
         return 's3object';
     }
+    if (Object.keys(arg).length === 2 &&
+        Object.keys(arg).includes('s3') &&
+        Object.keys(arg).includes('filename')) {
+        return 's3object';
+    }
     return typeof arg;
 }
 function collapse() {
@@ -123,9 +128,12 @@ let fullyCollapsed = $derived(keys.length > 1 && collapsed);
 	</span>
 {/snippet}
 
-<Portal name="object-viewer">
-	<S3FilePicker bind:this={s3FileViewer} readOnlyMode={true} />
-</Portal>
+{#if getTypeAsString(jsonFiltered) === 's3object'}
+	<Portal name="object-viewer">
+		<S3FilePicker bind:this={s3FileViewer} readOnlyMode={true} />
+	</Portal>
+{/if}
+
 {#if level == 0}
 	<div class="float-right">
 		{#if searchOpen}

package/package/components/raw_apps/RawAppInlineScriptEditor.svelte

@@ -186,7 +186,7 @@ let drawerIsOpen = undefined;
 				<DiffEditor
 					open={false}
 					bind:this={diffEditor}
-					class="h-full"
+					className="h-full"
 					automaticLayout
 					fixedOverflowWidgets
 					defaultLang={scriptLangToEditorLang(inlineScript?.language)}

package/package/components/schema/AddPropertyV2.svelte

@@ -1,15 +1,13 @@
 <script lang="ts">import { modalToSchema } from '../../common';
 import { emptySchema, sendUserToast } from '../../utils';
-import { createEventDispatcher } from 'svelte';
 import AddPropertyFormV2 from './AddPropertyFormV2.svelte';
-let { schema = $bindable(emptySchema()), trigger, noPopover } = $props();
+let { schema = $bindable(emptySchema()), trigger, noPopover, onAddNew } = $props();
 export const DEFAULT_PROPERTY = {
     selectedType: 'string',
     description: '',
     name: '',
     required: false
 };
-const dispatch = createEventDispatcher();
 if (!schema) {
     schema = emptySchema();
 }
@@ -89,7 +87,6 @@ export function handleAddOrEditArgument(modalProperty) {
         editing = false;
         oldArgName = undefined;
         schema = $state.snapshot(newSchema);
-        dispatch('change', schema);
     }
     if (argError !== '') {
         sendUserToast(argError, true);
@@ -117,14 +114,12 @@ export function handleDeleteArgument(argPath, nschema) {
             if (modifiedObject.order) {
                 modifiedObject.order = modifiedObject.order.filter((arg) => arg !== argName);
             }
-            dispatch('change', schema);
         }
         else {
             throw Error('Argument not found!');
         }
         syncOrders(modifiedObject);
         schema = $state.snapshot(modifiedObject);
-        dispatch('change', schema);
     }
     catch (err) {
         sendUserToast(`Could not delete argument: ${err}`, true);
@@ -142,7 +137,7 @@ const trigger_render = $derived(trigger);
 				selectedType: 'string',
 				name: e.detail.name
 			})
-			dispatch('addNew', e.detail.name)
+			onAddNew?.(e.detail.name)
 		} catch (err) {
 			sendUserToast(`Could not add argument: ${err}`, true)
 		}

package/package/components/schema/AddPropertyV2.svelte.d.ts

@@ -3,29 +3,12 @@ interface Props {
     schema?: Schema | any;
     trigger?: import('svelte').Snippet;
     noPopover?: boolean;
+    onAddNew?: (argName: string) => void;
 }
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const AddPropertyV2: $$__sveltets_2_IsomorphicComponent<Props, {
-    addNew: CustomEvent<any>;
-    change: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {
+declare const AddPropertyV2: import("svelte").Component<Props, {
     DEFAULT_PROPERTY: ModalSchemaProperty;
     handleAddOrEditArgument: (modalProperty: ModalSchemaProperty) => void;
     handleDeleteArgument: (argPath: string[], nschema?: Schema) => void;
 }, "schema">;
-type AddPropertyV2 = InstanceType<typeof AddPropertyV2>;
+type AddPropertyV2 = ReturnType<typeof AddPropertyV2>;
 export default AddPropertyV2;

package/package/components/schema/EditableSchemaDrawer.svelte

@@ -5,7 +5,7 @@ import { Drawer, DrawerContent } from '../common';
 import AddProperty from './AddProperty.svelte';
 import { dragHandle, dragHandleZone } from '@windmill-labs/svelte-dnd-action';
 import { flip } from 'svelte/animate';
-import { emptyString } from '../../utils';
+import { emptyString, generateRandomString } from '../../utils';
 import Button from '../common/button/Button.svelte';
 import { createEventDispatcher, tick } from 'svelte';
 import Label from '../Label.svelte';
@@ -35,16 +35,19 @@ function handleFinalize(e) {
     };
     tick().then(() => dispatch('change', schema));
 }
-let { schema = $bindable(), parentId = undefined, jsonView = $bindable(false) } = $props();
+let { schema = $bindable(), jsonView = $bindable(false), hiddenArgs = undefined } = $props();
 // let schema = $state(structuredClone($state.snapshot(schema)))
 let schemaString = $state(JSON.stringify(schema, null, '\t'));
 let editor = $state(undefined);
 let error = $state(undefined);
 let items = $derived([
-    ...new Set((schema?.order ?? Object.keys(schema?.properties ?? {}))?.map((item, index) => {
+    ...new Set((schema?.order ?? Object.keys(schema?.properties ?? {}))
+        ?.map((item, index) => {
         return { value: item, id: item };
-    }) ?? [])
+    })
+        .filter((item) => !hiddenArgs?.includes(item.value)) ?? [])
 ]);
+const rnd = generateRandomString();
 </script>
 
 <div class="flex flex-col items-end mb-2 w-full">
@@ -77,124 +80,115 @@ let items = $derived([
 />
 
 {#if !jsonView}
-	<div
-		use:dragHandleZone={{
-			items,
-			flipDurationMs,
-			dropTargetStyle: {},
-			type: parentId ? `app-editor-fields-${parentId}` : 'app-editor-fields'
-		}}
-		onconsider={handleConsider}
-		onfinalize={handleFinalize}
-		class="gap-1 flex flex-col mt-2"
-	>
-		{#if items?.length > 0}
-			{#each items as item (item.id)}
-				<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-				<div
-					animate:flip={{ duration: 200 }}
-					class="w-full flex flex-col justify-between border items-center py-1 px-2 rounded-md bg-surface text-sm"
-				>
-					{#if schema.properties?.[item.value]}
-						<div class="flex flex-row justify-between items-center w-full">
-							{`${item.value}${
-								schema.properties?.[item.value]?.title
-									? ` (title: ${schema.properties?.[item.value]?.title})`
-									: ''
-							} `}
-							<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-							<!-- svelte-ignore a11y_no_static_element_interactions -->
-							<div class="flex flex-row gap-1 item-center h-full justify-center">
-								<Button
-									iconOnly
-									size="xs2"
-									color="light"
-									startIcon={{ icon: Trash }}
-									on:click={() => {
-										addPropertyComponent?.handleDeleteArgument([item.value])
-									}}
-								/>
-								<Button
-									iconOnly
-									size="xs2"
-									color="light"
-									startIcon={{ icon: Pen }}
-									on:click={() => {
-										schemaFormDrawer?.openDrawer()
+	{#key rnd}
+		<div
+			use:dragHandleZone={{
+				items,
+				flipDurationMs,
+				dropTargetStyle: {},
+				type: rnd
+			}}
+			onconsider={handleConsider}
+			onfinalize={handleFinalize}
+			class="gap-1 flex flex-col mt-2"
+		>
+			{#if items?.length > 0}
+				{#each items as item (item.id)}
+					<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+					<div
+						animate:flip={{ duration: 200 }}
+						class="w-full flex flex-col justify-between border items-center py-1 px-2 rounded-md bg-surface text-sm"
+					>
+						{#if schema.properties?.[item.value]}
+							<div class="flex flex-row justify-between items-center w-full">
+								{`${item.value}${
+									schema.properties?.[item.value]?.title
+										? ` (title: ${schema.properties?.[item.value]?.title})`
+										: ''
+								} `}
+								<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+								<!-- svelte-ignore a11y_no_static_element_interactions -->
+								<div class="flex flex-row gap-1 item-center h-full justify-center">
+									<Button
+										iconOnly
+										size="xs2"
+										color="light"
+										startIcon={{ icon: Trash }}
+										on:click={() => {
+											addPropertyComponent?.handleDeleteArgument([item.value])
+										}}
+									/>
+									<Button
+										iconOnly
+										size="xs2"
+										color="light"
+										startIcon={{ icon: Pen }}
+										on:click={() => {
+											schemaFormDrawer?.openDrawer()
 
-										tick().then(() => {
-											editableSchemaForm?.openField(item.value)
-										})
-									}}
-								/>
+											tick().then(() => {
+												editableSchemaForm?.openField(item.value)
+											})
+										}}
+									/>
 
-								<div class="cursor-move flex items-center handle" use:dragHandle>
-									<GripVertical size={16} />
+									<div class="flex items-center handle" use:dragHandle>
+										<GripVertical size={16} />
+									</div>
 								</div>
 							</div>
-						</div>
 
-						{#if schema.properties[item.value]?.type === 'object' && !(schema.properties[item.value].oneOf && schema.properties[item.value].oneOf.length >= 2)}
-							<div class="flex flex-col w-full mt-2">
-								<Label label="Nested properties">
-									<EditableSchemaDrawer
-										on:change={() => {
-											schema = $state.snapshot(schema)
-											dispatch('change', schema)
-										}}
-										bind:schema={schema.properties[item.value]}
-										parentId={item.value}
-									/>
-								</Label>
-							</div>
+							{#if schema.properties[item.value]?.type === 'object' && !(schema.properties[item.value].oneOf && schema.properties[item.value].oneOf.length >= 2)}
+								<div class="flex flex-col w-full mt-2">
+									<Label label="Nested properties">
+										<EditableSchemaDrawer bind:schema={schema.properties[item.value]} />
+									</Label>
+								</div>
+							{/if}
+						{:else}
+							<div class="text-tertiary"> Value is undefined </div>
 						{/if}
-					{:else}
-						<div class="text-tertiary"> Value is undefined </div>
-					{/if}
-				</div>
-			{/each}
-		{/if}
-	</div>
-
+					</div>
+				{/each}
+			{/if}
+		</div>
+	{/key}
 	<Drawer bind:this={schemaFormDrawer} size="1200px">
-		<DrawerContent title="UI Customisation" on:close={schemaFormDrawer.closeDrawer}>
-			<EditableSchemaForm
-				on:change={(e) => {
-					schema = $state.snapshot(schema)
-					dispatch('change', schema)
-				}}
-				bind:this={editableSchemaForm}
-				bind:schema
-				isAppInput
-				on:edit={(e) => {
-					addPropertyComponent?.openDrawer(e.detail)
-				}}
-				on:delete={(e) => {
-					addPropertyComponent?.handleDeleteArgument([e.detail])
-				}}
-				dndType="drawer"
-				editTab="inputEditor"
-			>
-				{#snippet addProperty()}
-					<AddPropertyV2
-						bind:schema
-						on:change
-						on:addNew={(e) => {
-							schema = $state.snapshot(schema)
-							editableSchemaForm?.openField(e.detail)
-						}}
-					>
-						{#snippet trigger()}
-							<div
-								class="w-full py-2 flex justify-center items-center border border-dashed rounded-md hover:bg-surface-hover"
-							>
-								<Plus size={14} />
-							</div>
-						{/snippet}
-					</AddPropertyV2>
-				{/snippet}
-			</EditableSchemaForm>
-		</DrawerContent>
+		{#snippet children()}
+			<DrawerContent title="UI Customisation" on:close={() => schemaFormDrawer?.closeDrawer()}>
+				<EditableSchemaForm
+					schemaFormClassName="h-full"
+					bind:this={editableSchemaForm}
+					bind:schema
+					isAppInput
+					on:edit={(e) => {
+						addPropertyComponent?.openDrawer(e.detail)
+					}}
+					on:delete={(e) => {
+						addPropertyComponent?.handleDeleteArgument([e.detail])
+					}}
+					{hiddenArgs}
+					editTab="inputEditor"
+				>
+					{#snippet addProperty()}
+						<AddPropertyV2
+							bind:schema
+							onAddNew={(argName) => {
+								editableSchemaForm?.openField(argName)
+							}}
+						>
+							{#snippet trigger()}
+								<div
+									class="w-full py-2 flex justify-center items-center border border-dashed rounded-md hover:bg-surface-hover"
+								>
+									<Plus size={14} />
+								</div>
+							{/snippet}
+						</AddPropertyV2>
+					{/snippet}
+				</EditableSchemaForm>
+			</DrawerContent>
+		{/snippet}
 	</Drawer>
 {:else}
 	<div class="mt-2"></div>

package/package/components/schema/EditableSchemaDrawer.svelte.d.ts

@@ -2,8 +2,9 @@ import EditableSchemaDrawer from './EditableSchemaDrawer.svelte';
 import type { Schema } from '../../common';
 interface Props {
     schema: Schema | undefined | any;
-    parentId?: string | undefined;
     jsonView?: boolean;
+    hiddenArgs?: string[];
+    onClose?: () => void;
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {