windmill-components 1.531.1 → 1.537.1

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> & {

package/package/components/schema/EditableSchemaSdkWrapper.svelte

@@ -1,6 +1,19 @@
-<script lang="ts">import EditableSchemaWrapper from './EditableSchemaWrapper.svelte';
-let { schema: oldSchema, ...props } = $props();
+<script lang="ts">import { readFieldsRecursively } from '../../utils';
+import { deepEqual } from 'fast-equals';
+import EditableSchemaWrapper from './EditableSchemaWrapper.svelte';
+let { schema: oldSchema, onSchemaChange, ...props } = $props();
 let schema = $state(oldSchema);
+let lastSchema = $state.snapshot(schema);
+$effect(() => {
+    if (onSchemaChange) {
+        readFieldsRecursively(schema);
+        let newSchema = $state.snapshot(schema);
+        if (!deepEqual(lastSchema, newSchema)) {
+            lastSchema = newSchema;
+            onSchemaChange(newSchema);
+        }
+    }
+});
 </script>
 
-<EditableSchemaWrapper {schema} {...props} />
+<EditableSchemaWrapper bind:schema {...props} />

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

@@ -1,4 +1,7 @@
 import type { EditableSchemaWrapperProps } from './editable_schema_wrapper';
-declare const EditableSchemaSdkWrapper: import("svelte").Component<EditableSchemaWrapperProps, {}, "">;
+type $$ComponentProps = EditableSchemaWrapperProps & {
+    onSchemaChange?: (schema: any) => void;
+};
+declare const EditableSchemaSdkWrapper: import("svelte").Component<$$ComponentProps, {}, "">;
 type EditableSchemaSdkWrapper = ReturnType<typeof EditableSchemaSdkWrapper>;
 export default EditableSchemaSdkWrapper;

package/package/components/schema/EditableSchemaWrapper.svelte

@@ -7,7 +7,7 @@ import AddPropertyV2 from './AddPropertyV2.svelte';
 import { Plus } from 'lucide-svelte';
 import Select from '../select/Select.svelte';
 import { safeSelectItems } from '../select/utils.svelte';
-let { schema = $bindable(), uiOnly = false, noPreview = false, fullHeight = true, formatExtension = $bindable(undefined), onSchemaChange, customUi } = $props();
+let { schema = $bindable(), uiOnly = false, noPreview = false, fullHeight = true, formatExtension = $bindable(undefined), customUi } = $props();
 let resourceIsTextFile = $state(false);
 let addPropertyComponent = $state(undefined);
 let editableSchemaForm = $state(undefined);
@@ -35,7 +35,6 @@ function switchResourceIsFile() {
             }
         };
     }
-    onSchemaChange?.({ schema: $state.snapshot(schema) });
 }
 let suggestedFileExtensions = $state([
     'json',
@@ -64,9 +63,8 @@ let suggestedFileExtensions = $state([
 				noPopover={customUi?.noAddPopover}
 				bind:schema
 				bind:this={addPropertyComponent}
-				on:change={() => onSchemaChange?.({ schema: $state.snapshot(schema) })}
-				on:addNew={(e) => {
-					editableSchemaForm?.openField(e.detail)
+				onAddNew={(argName) => {
+					editableSchemaForm?.openField(argName)
 				}}
 			>
 				{#snippet trigger()}
@@ -82,11 +80,7 @@ let suggestedFileExtensions = $state([
 			onlyMaskPassword
 			bind:this={editableSchemaForm}
 			bind:schema
-			on:change={() => onSchemaChange?.({ schema: $state.snapshot(schema) })}
 			isFlowInput
-			on:edit={(e) => {
-				addPropertyComponent?.openDrawer(e.detail)
-			}}
 			on:delete={(e) => {
 				addPropertyComponent?.handleDeleteArgument([e.detail])
 			}}
@@ -100,7 +94,6 @@ let suggestedFileExtensions = $state([
 						noPopover={customUi?.noAddPopover}
 						bind:schema
 						bind:this={addPropertyComponent}
-						on:change={() => onSchemaChange?.({ schema })}
 					>
 						{#snippet trigger()}
 							<div