windmill-components 1.493.10 → 1.501.5

package/package/components/RunForm.svelte

@@ -4,38 +4,32 @@ import SchemaForm from './SchemaForm.svelte';
 import SharedBadge from './SharedBadge.svelte';
 import TimeAgo from './TimeAgo.svelte';
 import Popover from './meltComponents/Popover.svelte';
-import { Calendar, CornerDownLeft } from 'lucide-svelte';
+import { Calendar, Check, CornerDownLeft } from 'lucide-svelte';
 import RunFormAdvancedPopup from './RunFormAdvancedPopup.svelte';
 import { page } from '$app/stores';
 import { replaceState } from '$app/navigation';
 import JsonInputs from './JsonInputs.svelte';
-export let runnable;
-export let runAction;
-export let buttonText = 'Run';
-export let schedulable = true;
-export let detailed = true;
-export let autofocus = false;
-export let topButton = false;
-export let loading = false;
-export let noVariablePicker = false;
-export let viewKeybinding = false;
-export let scheduledForStr;
-export let invisible_to_owner;
-export let overrideTag;
-export let args = {};
-export let jsonView = false;
-let reloadArgs = 0;
-let jsonEditor = undefined;
-let schemaHeight = 0;
+import { triggerableByAI } from '../actions/triggerableByAI.svelte';
+import InputSelectedBadge from './schema/InputSelectedBadge.svelte';
+import { untrack } from 'svelte';
+let reloadArgs = $state(0);
+let jsonEditor = $state(undefined);
+let schemaHeight = $state(0);
+let showInputSelectedBadge = $state(false);
+let savedPreviousArgs = $state(undefined);
 export async function setArgs(nargs) {
     args = nargs;
     reloadArgs++;
 }
 export function run() {
-    runAction(scheduledForStr, args, invisible_to_owner, overrideTag);
+    runAction(scheduledForStr, args ?? {}, invisible_to_owner, overrideTag);
 }
-export let isValid = true;
-$: onArgsChange(args);
+let { runnable = $bindable(), runAction, buttonText = 'Run', schedulable = true, detailed = true, autofocus = false, topButton = false, loading = false, noVariablePicker = false, viewKeybinding = false, scheduledForStr = $bindable(), invisible_to_owner = $bindable(), overrideTag = $bindable(), args = $bindable(), jsonView = false, isValid = $bindable(true) } = $props();
+$effect.pre(() => {
+    if (args == undefined) {
+        args = {};
+    }
+});
 let debounced = undefined;
 function onArgsChange(args) {
     try {
@@ -58,8 +52,61 @@ function onArgsChange(args) {
 export function setCode(code) {
     jsonEditor?.setCode(code);
 }
+$effect(() => {
+    Object.keys(args ?? {}).forEach((key) => {
+        args?.[key];
+    });
+    untrack(() => onArgsChange(args));
+});
 </script>
 
+<!-- Standalone triggerable registration for the run form -->
+<div
+	style="display: none"
+	use:triggerableByAI={{
+		id: `run-form-${runnable?.path ?? ''}`,
+		description: `Form to fill the inputs to run ${runnable?.summary && runnable?.summary.length > 0 ? runnable?.summary : runnable?.path}.
+	## Script description: ${runnable?.description ?? ''}.
+	## Schema used: ${JSON.stringify(runnable?.schema)}.
+	## Current args: ${JSON.stringify(args)}}`,
+		callback: (value) => {
+			savedPreviousArgs = args
+			setArgs(JSON.parse(value ?? '{}'))
+			showInputSelectedBadge = true
+		},
+		showAnimation: false
+	}}
+></div>
+
+{#snippet acceptButton()}
+	<Button
+		startIcon={{
+			icon: Check
+		}}
+		size="xs2"
+		btnClasses="border border-gray-200 dark:border-gray-600 !bg-surface text-primary"
+		on:click={() => {
+			showInputSelectedBadge = false
+			savedPreviousArgs = undefined
+		}}
+	>
+		Accept
+	</Button>
+{/snippet}
+
+{#if showInputSelectedBadge}
+	<InputSelectedBadge
+		inputSelected="ai"
+		labelColor="text-violet-800 dark:text-primary"
+		className="dark:!bg-violet-800 !bg-violet-200 !border-violet-200 dark:!border-violet-800"
+		{acceptButton}
+		onReject={() => {
+			setArgs(savedPreviousArgs ?? {})
+			savedPreviousArgs = undefined
+			showInputSelectedBadge = false
+		}}
+	/>
+{/if}
 <div class="max-w-3xl">
 	{#if detailed}
 		{#if runnable}
@@ -100,14 +147,19 @@ export function setCode(code) {
 				</div>
 			</div>
 		{:else}
-			<h1>Loading...</h1>
+			<h1
+				use:triggerableByAI={{
+					id: 'run-form-loading',
+					description: 'Run form is loading, should scan the page until this is gone'
+				}}>Loading...</h1
+			>
 		{/if}
 	{/if}
 	{#if topButton}
 		<Button
 			btnClasses="!px-6 !py-1 w-full"
 			disabled={!isValid || jsonView}
-			on:click={() => runAction(undefined, args, invisible_to_owner, overrideTag)}
+			on:click={() => runAction(undefined, args ?? {}, invisible_to_owner, overrideTag)}
 		>
 			{buttonText}
 		</Button>
@@ -137,7 +189,7 @@ export function setCode(code) {
 							? {
 									type: 'hash',
 									hash: runnable.hash
-							  }
+								}
 							: undefined}
 						prettifyHeader
 						{noVariablePicker}
@@ -161,26 +213,26 @@ export function setCode(code) {
 					color="dark"
 					btnClasses="!px-6 !py-1 !h-8 inline-flex gap-2"
 					disabled={!isValid || jsonView}
-					on:click={() => runAction(scheduledForStr, args, invisible_to_owner, overrideTag)}
+					on:click={() => runAction(scheduledForStr, args ?? {}, invisible_to_owner, overrideTag)}
 					shortCut={{ Icon: CornerDownLeft, hide: !viewKeybinding }}
 				>
 					{scheduledForStr ? 'Schedule to run later' : buttonText}
 				</Button>
 				<div>
 					<Popover placement="bottom" closeButton usePointerDownOutside>
-						<svelte:fragment slot="trigger">
+						{#snippet trigger()}
 							<Button nonCaptureEvent startIcon={{ icon: Calendar }} size="xs" color="light">
 								Advanced
 							</Button>
-						</svelte:fragment>
-						<svelte:fragment slot="content">
+						{/snippet}
+						{#snippet content()}
 							<RunFormAdvancedPopup
 								bind:scheduledForStr
 								bind:invisible_to_owner
 								bind:overrideTag
 								bind:runnable
 							/>
-						</svelte:fragment>
+						{/snippet}
 					</Popover>
 				</div>
 			</div>
@@ -199,7 +251,7 @@ export function setCode(code) {
 		<Button
 			btnClasses="!px-6 !py-1 w-full"
 			disabled={!isValid || jsonView}
-			on:click={() => runAction(undefined, args, invisible_to_owner, overrideTag)}
+			on:click={() => runAction(undefined, args ?? {}, invisible_to_owner, overrideTag)}
 			shortCut={{ Icon: CornerDownLeft, hide: !viewKeybinding }}
 		>
 			{buttonText}

package/package/components/RunForm.svelte.d.ts

@@ -1,18 +1,5 @@
 import type { Schema } from '../common';
-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 RunForm: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     runnable: {
         summary?: string;
         schema?: Schema | any;
@@ -40,16 +27,12 @@ declare const RunForm: $$__sveltets_2_IsomorphicComponent<{
     overrideTag: string | undefined;
     args?: Record<string, any>;
     jsonView?: boolean;
-    setArgs?: (nargs: Record<string, any>) => Promise<void>;
-    run?: () => void;
     isValid?: boolean;
-    setCode?: (code: string) => void;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {
+}
+declare const RunForm: import("svelte").Component<Props, {
     setArgs: (nargs: Record<string, any>) => Promise<void>;
     run: () => void;
     setCode: (code: string) => void;
-}, string>;
-type RunForm = InstanceType<typeof RunForm>;
+}, "args" | "invisible_to_owner" | "runnable" | "isValid" | "scheduledForStr" | "overrideTag">;
+type RunForm = ReturnType<typeof RunForm>;
 export default RunForm;

package/package/components/S3FilePicker.svelte

@@ -1,4 +1,6 @@
-<script lang="ts">import { File as FileIcon, FolderClosed, FolderOpen, RotateCw, Loader2, Download, Trash, FileUp, MoveRight } from 'lucide-svelte';
+<script lang="ts">import { run, createBubbler, stopPropagation } from 'svelte/legacy';
+const bubble = createBubbler();
+import { File as FileIcon, FolderClosed, FolderOpen, RotateCw, Loader2, Download, Trash, FileUp, MoveRight } from 'lucide-svelte';
 import { workspaceStore } from '../stores';
 import { HelpersService } from '../gen';
 import { base } from '../base';
@@ -6,49 +8,42 @@ import { displayDate, displaySize, emptyString, sendUserToast } from '../utils';
 import { Alert, Button, Drawer } from './common';
 import DrawerContent from './common/drawer/DrawerContent.svelte';
 import Section from './Section.svelte';
-import { createEventDispatcher } from 'svelte';
-import VirtualList from 'svelte-tiny-virtual-list';
+import { createEventDispatcher, untrack } from 'svelte';
+import VirtualList from '@tutorlatin/svelte-tiny-virtual-list';
 import TableSimple from './TableSimple.svelte';
 import ConfirmationModal from './common/confirmationModal/ConfirmationModal.svelte';
 import FileUploadModal from './common/fileUpload/FileUploadModal.svelte';
-import PdfViewer from './display/PdfViewer.svelte';
 import { twMerge } from 'tailwind-merge';
-let deletionModalOpen = false;
-let fileDeletionInProgress = false;
-let fileListUnavailable = undefined;
-let moveModalOpen = false;
-let moveDestKey = undefined;
-let fileMoveInProgress = false;
-let uploadModalOpen = false;
-let workspaceSettingsInitialized = true;
-export let fromWorkspaceSettings = false;
-export let readOnlyMode;
-export let initialFileKey = undefined;
+let deletionModalOpen = $state(false);
+let fileDeletionInProgress = $state(false);
+let fileListUnavailable = $state(undefined);
+let moveModalOpen = $state(false);
+let moveDestKey = $state(undefined);
+let fileMoveInProgress = $state(false);
+let uploadModalOpen = $state(false);
+let workspaceSettingsInitialized = $state(true);
 let initialFileKeyInternalCopy;
-export let selectedFileKey = undefined;
-export let folderOnly = false;
-export let regexFilter = undefined;
-let csvSeparatorChar = ',';
-let csvHasHeader = true;
+let { fromWorkspaceSettings = false, readOnlyMode, initialFileKey = $bindable(undefined), selectedFileKey = $bindable(undefined), folderOnly = false, regexFilter = undefined } = $props();
+let csvSeparatorChar = $state(',');
+let csvHasHeader = $state(true);
 let dispatch = createEventDispatcher();
-let drawer;
-let fileInfoLoading = true;
-let fileListLoading = true;
-let allFilesByKey = {};
-let displayedFileKeys = [];
-let listDivHeight = 0;
-let fileMetadata = undefined;
-let filePreviewLoading = false;
-let filePreview = undefined;
+let drawer = $state();
+let fileInfoLoading = $state(true);
+let fileListLoading = $state(true);
+let allFilesByKey = $state({});
+let displayedFileKeys = $state([]);
+let listDivHeight = $state(0);
+let fileMetadata = $state(undefined);
+let filePreviewLoading = $state(false);
+let filePreview = $state(undefined);
 let listMarkers;
-let page = 0;
+let page = $state(0);
 const maxKeys = 1000;
-let count = 0;
-let displayedCount = 0;
-let filter = '';
+let count = $state(0);
+let displayedCount = $state(0);
+let filter = $state('');
 let timeout = undefined;
 let firstLoad = true;
-$: filter != undefined && onFilterChange();
 function onFilterChange() {
     if (!firstLoad) {
         timeout && clearTimeout(timeout);
@@ -60,7 +55,7 @@ function onFilterChange() {
         firstLoad = false;
     }
 }
-let lastKeyFolders = [];
+let lastKeyFolders = $state([]);
 async function loadFiles() {
     fileListLoading = true;
     let availableFiles = await HelpersService.listStoredFiles({
@@ -291,7 +286,7 @@ async function moveS3File(srcFileKey, destFileKey) {
     await clearAndLoadFiles();
     await loadFileMetadataPlusPreviewAsync(selectedFileKey.s3);
 }
-let storage = undefined;
+let storage = $state(undefined);
 export async function open(preSelectedFileKey = undefined) {
     storage = preSelectedFileKey?.storage;
     if (preSelectedFileKey !== undefined) {
@@ -299,7 +294,7 @@ export async function open(preSelectedFileKey = undefined) {
         selectedFileKey = { ...preSelectedFileKey };
     }
     reloadContent();
-    drawer.openDrawer?.();
+    drawer?.openDrawer?.();
 }
 async function reloadContent() {
     if (initialFileKey !== undefined) {
@@ -330,13 +325,13 @@ async function reloadContent() {
     }
 }
 async function selectAndClose() {
-    drawer.closeDrawer?.();
+    drawer?.closeDrawer?.();
 }
 async function exit() {
     if (initialFileKeyInternalCopy !== undefined) {
         selectedFileKey = { ...initialFileKeyInternalCopy };
     }
-    drawer.closeDrawer?.();
+    drawer?.closeDrawer?.();
 }
 function selectItem(index, toggleCollapsed = true) {
     let item_key = displayedFileKeys[index];
@@ -389,10 +384,13 @@ function selectItem(index, toggleCollapsed = true) {
         loadFileMetadataPlusPreviewAsync(selectedFileKey.s3);
     }
 }
+run(() => {
+    filter != undefined && untrack(() => onFilterChange());
+});
 </script>
 
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
 <Drawer
 	bind:this={drawer}
 	on:close={() => {
@@ -477,51 +475,55 @@ function selectItem(index, toggleCollapsed = true) {
 									itemCount={displayedFileKeys.length}
 									itemSize={42}
 								>
-									<div
-										slot="item"
-										let:index
-										let:style
-										{style}
-										class={twMerge(
-											'hover:bg-surface-hover border-b',
-											index === displayedFileKeys.length - 1 && 'border-b-0'
-										)}
-									>
+									{#snippet header()}{/snippet}
+									{#snippet footer()}{/snippet}
+									{#snippet children({ index, style })}
 										{@const file_info = allFilesByKey[displayedFileKeys[index]]}
-										{#if file_info}
-											<div
-												on:click={() => selectItem(index)}
-												class={twMerge(
-													'flex flex-row h-full font-semibold text-xs items-center justify-start',
-													selectedFileKey !== undefined && selectedFileKey.s3 === file_info.full_key
-														? 'bg-surface-hover'
-														: ''
-												)}
-											>
+
+										<div
+											{style}
+											class={twMerge(
+												'hover:bg-surface-hover border-b',
+												index === displayedFileKeys.length - 1 && 'border-b-0'
+											)}
+										>
+											{#if file_info}
 												<div
-													class={`flex flex-row w-full gap-2 h-full items-center`}
-													style={`margin-left: ${(2 + file_info.nestingLevel) * 0.25}rem;`}
+													onclick={() => selectItem(index)}
+													class={twMerge(
+														'flex flex-row h-full font-semibold text-xs items-center justify-start',
+														selectedFileKey !== undefined &&
+															selectedFileKey.s3 === file_info.full_key
+															? 'bg-surface-hover'
+															: ''
+													)}
 												>
-													{#if file_info.type === 'folder'}
-														{#if file_info.collapsed}<FolderClosed size={16} />{:else}<FolderOpen
-																size={16}
-															/>{/if}
-														<div class="truncate text-ellipsis w-56">
-															{file_info.display_name} ({file_info.count}{count % 1000 === 0 &&
-															lastKeyFolders[file_info.nestingLevel / 2] === file_info.display_name
-																? '+'
-																: ''} item{file_info.count === 1 ? '' : 's'})
-														</div>
-													{:else}
-														<FileIcon size={16} />
-														<div class="truncate text-ellipsis w-56">
-															{file_info.display_name}
-														</div>
-													{/if}
+													<div
+														class={`flex flex-row w-full gap-2 h-full items-center`}
+														style={`margin-left: ${(2 + file_info.nestingLevel) * 0.25}rem;`}
+													>
+														{#if file_info.type === 'folder'}
+															{#if file_info.collapsed}<FolderClosed size={16} />{:else}<FolderOpen
+																	size={16}
+																/>{/if}
+															<div class="truncate text-ellipsis w-56">
+																{file_info.display_name} ({file_info.count}{count % 1000 === 0 &&
+																lastKeyFolders[file_info.nestingLevel / 2] ===
+																	file_info.display_name
+																	? '+'
+																	: ''} item{file_info.count === 1 ? '' : 's'})
+															</div>
+														{:else}
+															<FileIcon size={16} />
+															<div class="truncate text-ellipsis w-56">
+																{file_info.display_name}
+															</div>
+														{/if}
+													</div>
 												</div>
-											</div>
-										{/if}
-									</div>
+											{/if}
+										</div>
+									{/snippet}
 								</VirtualList>
 							</div>
 							<div
@@ -569,42 +571,44 @@ function selectItem(index, toggleCollapsed = true) {
 					{:else}
 						<div class="p-4 gap-2">
 							<Section label={fileMetadata.fileKey} breakAll>
-								<div slot="action" class="flex gap-2">
-									{#if filePreview !== undefined}
-										<Button
-											title="Download file from S3"
-											variant="border"
-											color="light"
-											href={`${base}/api/w/${$workspaceStore}/job_helpers/download_s3_file?file_key=${encodeURIComponent(
-												fileMetadata?.fileKey ?? ''
-											)}${storage ? `&storage=${storage}` : ''}`}
-											download={fileMetadata?.fileKey.split('/').pop() ?? 'unnamed_download.file'}
-											startIcon={{ icon: Download }}
-											iconOnly={true}
-										/>
-										<Button
-											title="Move file"
-											variant="border"
-											color="light"
-											on:click={() => {
-												moveDestKey = fileMetadata?.fileKey ?? ''
-												moveModalOpen = true
-											}}
-											startIcon={{ icon: MoveRight }}
-											iconOnly={true}
-										/>
-										<Button
-											title="Delete file from S3"
-											variant="border"
-											color="red"
-											on:click={() => {
-												deletionModalOpen = true
-											}}
-											startIcon={{ icon: Trash }}
-											iconOnly={true}
-										/>
-									{/if}
-								</div>
+								{#snippet action()}
+									<div class="flex gap-2">
+										{#if filePreview !== undefined}
+											<Button
+												title="Download file from S3"
+												variant="border"
+												color="light"
+												href={`${base}/api/w/${$workspaceStore}/job_helpers/download_s3_file?file_key=${encodeURIComponent(
+													fileMetadata?.fileKey ?? ''
+												)}${storage ? `&storage=${storage}` : ''}`}
+												download={fileMetadata?.fileKey.split('/').pop() ?? 'unnamed_download.file'}
+												startIcon={{ icon: Download }}
+												iconOnly={true}
+											/>
+											<Button
+												title="Move file"
+												variant="border"
+												color="light"
+												on:click={() => {
+													moveDestKey = fileMetadata?.fileKey ?? ''
+													moveModalOpen = true
+												}}
+												startIcon={{ icon: MoveRight }}
+												iconOnly={true}
+											/>
+											<Button
+												title="Delete file from S3"
+												variant="border"
+												color="red"
+												on:click={() => {
+													deletionModalOpen = true
+												}}
+												startIcon={{ icon: Trash }}
+												iconOnly={true}
+											/>
+										{/if}
+									</div>
+								{/snippet}
 							</Section>
 							<TableSimple
 								headers={['Last modified', 'Size', 'Type']}
@@ -627,11 +631,15 @@ function selectItem(index, toggleCollapsed = true) {
 								</div>
 							{:else if fileMetadata?.fileKey.endsWith('.pdf')}
 								<div class="w-full h-[950px] border">
-									<PdfViewer
-										source={`/api/w/${$workspaceStore}/job_helpers/load_image_preview?file_key=${encodeURIComponent(
-											fileMetadata.fileKey
-										)}` + (storage ? `&storage=${storage}` : '')}
-									/>
+									{#await import('./display/PdfViewer.svelte')}
+										<Loader2 class="animate-spin" />
+									{:then Module}
+										<Module.default
+											source={`/api/w/${$workspaceStore}/job_helpers/load_image_preview?file_key=${encodeURIComponent(
+												fileMetadata.fileKey
+											)}` + (storage ? `&storage=${storage}` : '')}
+										/>
+									{/await}
 								</div>
 							{:else if filePreviewLoading}
 								<div class="flex h-6 items-center text-tertiary mb-4">
@@ -647,7 +655,7 @@ function selectItem(index, toggleCollapsed = true) {
 											<select
 												class="h-8"
 												bind:value={csvSeparatorChar}
-												on:change={(e) =>
+												onchange={(e) =>
 													loadFilePreview(
 														fileMetadata?.fileKey ?? '',
 														fileMetadata?.size,
@@ -663,19 +671,20 @@ function selectItem(index, toggleCollapsed = true) {
 										Header row:
 										<div class="inline-flex item-center w-4 ml-2 mr-2">
 											<input
-												on:focus
-												on:click
+												onfocus={bubble('focus')}
+												onclick={bubble('click')}
 												disabled={false}
 												type="checkbox"
 												id="csv-header"
 												class="h-5"
 												bind:checked={csvHasHeader}
-												on:change|stopPropagation={(e) =>
+												onchange={stopPropagation((e) =>
 													loadFilePreview(
 														fileMetadata?.fileKey ?? '',
 														fileMetadata?.size,
 														fileMetadata?.mimeType
-													)}
+													)
+												)}
 											/>
 										</div>
 									{:else}
@@ -692,27 +701,29 @@ function selectItem(index, toggleCollapsed = true) {
 			</div>
 		{/if}
 
-		<div slot="actions" class="flex gap-1">
-			{#if !readOnlyMode}
-				<Button
-					variant="border"
-					color="light"
-					disabled={workspaceSettingsInitialized === false}
-					startIcon={{ icon: FileUp }}
-					on:click={() => {
-						uploadModalOpen = true
-					}}>Upload File</Button
-				>
-				{#if !fromWorkspaceSettings}
+		{#snippet actions()}
+			<div class="flex gap-1">
+				{#if !readOnlyMode}
 					<Button
-						disabled={selectedFileKey === undefined ||
-							emptyString(selectedFileKey.s3) ||
-							(folderOnly && allFilesByKey[selectedFileKey.s3]?.type !== 'folder')}
-						on:click={selectAndClose}>Select</Button
+						variant="border"
+						color="light"
+						disabled={workspaceSettingsInitialized === false}
+						startIcon={{ icon: FileUp }}
+						on:click={() => {
+							uploadModalOpen = true
+						}}>Upload File</Button
 					>
+					{#if !fromWorkspaceSettings}
+						<Button
+							disabled={selectedFileKey === undefined ||
+								emptyString(selectedFileKey.s3) ||
+								(folderOnly && allFilesByKey[selectedFileKey.s3]?.type !== 'folder')}
+							on:click={selectAndClose}>Select</Button
+						>
+					{/if}
 				{/if}
-			{/if}
-		</div>
+			</div>
+		{/snippet}
 	</DrawerContent>
 </Drawer>