windmill-components 1.407.2 → 1.408.2

package/package/components/ArgInput.svelte

@@ -104,6 +104,9 @@ let inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEnco
 $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncoding);
 let rawValue = undefined;
 function computeDefaultValue(nvalue, inputCat, defaultValue, nnullable) {
+    if (label == 'toString' && typeof value == 'function') {
+        value = undefined;
+    }
     if ((value == undefined || value == null) && !ignoreValueUndefined) {
         value = defaultValue;
         if (defaultValue === undefined || defaultValue === null) {

package/package/components/DisplayResult.svelte

@@ -547,7 +547,7 @@ let seeS3PreviewFileFromList = '';
 									>
 								</button>
 							{:else if !result?.disable_download}
-								<FileDownload s3object={result} />
+								<FileDownload {workspaceId} s3object={result} />
 								<button
 									class="text-secondary underline text-2xs whitespace-nowrap"
 									on:click={() => {

package/package/components/StringTypeNarrowing.svelte

@@ -15,9 +15,9 @@ export let format;
 export let contentEncoding;
 export let customErrorMessage;
 export let minRows = undefined;
-export let disableCreate = false;
-export let disableVariablePicker = false;
-export let password = false;
+export let disableCreate = undefined;
+export let disableVariablePicker = undefined;
+export let password = undefined;
 export let noExtra = false;
 export let dateFormat;
 export let enumLabels = undefined;
@@ -219,7 +219,7 @@ function onEnumKeyChange(oldKey, newKey) {
 			<Toggle
 				size="xs"
 				options={{ right: 'Disallow creating custom values' }}
-				checked={disableCreate != undefined && disableCreate}
+				checked={disableCreate}
 				on:change={(e) => {
 					if (e.detail) {
 						disableCreate = true
@@ -292,7 +292,7 @@ function onEnumKeyChange(oldKey, newKey) {
 		<Toggle
 			size="xs"
 			options={{ right: 'Disable variable picker' }}
-			checked={disableVariablePicker != undefined && disableVariablePicker}
+			checked={disableVariablePicker}
 			on:change={(e) => {
 				if (e.detail) {
 					disableVariablePicker = true
@@ -310,7 +310,11 @@ function onEnumKeyChange(oldKey, newKey) {
 			options={{ right: 'Is Password' }}
 			checked={password}
 			on:change={(e) => {
-				password = e.detail
+				if (e.detail) {
+					password = true
+				} else {
+					password = undefined
+				}
 			}}
 		/>
 	{/if}

package/package/components/apps/components/helpers/eval.js

@@ -1,5 +1,6 @@
 import { sendUserToast } from '../../../../toast';
 import { waitJob } from '../../../waitJob';
+import { base } from '../../../../base';
 export function computeGlobalContext(world, extraContext = {}) {
     return {
         ...Object.fromEntries(Object.entries(world?.outputsById ?? {})
@@ -16,7 +17,7 @@ export function computeGlobalContext(world, extraContext = {}) {
 function create_context_function_template(eval_string, contextKeys, noReturn) {
     let hasReturnAsLastLine = noReturn || eval_string.split('\n').some((x) => x.startsWith('return '));
     return `
-return async function (context, state, createProxy, goto, setTab, recompute, getAgGrid, setValue, setSelectedIndex, openModal, closeModal, open, close, validate, invalidate, validateAll, clearFiles, showToast, waitJob, askNewResource) {
+return async function (context, state, createProxy, goto, setTab, recompute, getAgGrid, setValue, setSelectedIndex, openModal, closeModal, open, close, validate, invalidate, validateAll, clearFiles, showToast, waitJob, askNewResource, downloadFile) {
 "use strict";
 ${contextKeys && contextKeys.length > 0
         ? `let ${contextKeys.map((key) => ` ${key} = createProxy('${key}', context['${key}'])`)};`
@@ -143,5 +144,64 @@ export async function eval_like(text, context = {}, state, editor, controlCompon
         sendUserToast(message, error);
     }, async (id) => waitJob(id), (id) => {
         controlComponents[id]?.askNewResource?.();
+    }, (input, filename) => {
+        const handleError = (error) => {
+            console.error('Error downloading file:', error);
+            sendUserToast(`Error downloading file: ${error.message}. Ensure it is a valid URL, a base64 encoded data URL (data:...), or a valid S3 object.`, true);
+        };
+        const isBase64 = (str) => {
+            try {
+                return btoa(atob(str)) === str;
+            }
+            catch (err) {
+                return false;
+            }
+        };
+        const downloadFile = (url, downloadFilename) => {
+            const link = document.createElement('a');
+            link.href = url;
+            link.download = downloadFilename || 'download';
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+        };
+        if (typeof input === 'object' && input.s3) {
+            const workspaceId = computeGlobalContext(worldStore).ctx.workspace;
+            const s3href = `${base}/api/w/${workspaceId}/job_helpers/download_s3_file?file_key=${input?.s3}${input?.storage ? `&storage=${input.storage}` : ''}`;
+            downloadFile(s3href, filename || input.s3);
+        }
+        else if (typeof input === 'string') {
+            if (input.startsWith('data:')) {
+                downloadFile(input, filename);
+            }
+            else if (isBase64(input)) {
+                const base64Url = `data:application/octet-stream;base64,${input}`;
+                downloadFile(base64Url, filename);
+            }
+            else if (/^(http|https):\/\//.test(input) || input.startsWith('/')) {
+                const url = input.startsWith('/') ? `${window.location.origin}${input}` : input;
+                fetch(url)
+                    .then(response => {
+                    if (!response.ok) {
+                        throw new Error(`HTTP error! status: ${response.status}`);
+                    }
+                    return response.blob();
+                })
+                    .then(blob => {
+                    const objectUrl = URL.createObjectURL(blob);
+                    const urlParts = input.split('/');
+                    const inferredFilename = urlParts[urlParts.length - 1];
+                    downloadFile(objectUrl, filename || inferredFilename);
+                    URL.revokeObjectURL(objectUrl);
+                })
+                    .catch(handleError);
+            }
+            else {
+                handleError(new Error('The input must be a valid URL, a base64 encoded string, or a valid S3 object.'));
+            }
+        }
+        else {
+            handleError(new Error('The input must be a string or an object with a getAuthenticatedUrl method.'));
+        }
     });
 }

package/package/components/apps/components/inputs/AppS3FileInput.svelte

@@ -15,7 +15,7 @@ export let extraKey = undefined;
 export let onFileChange = undefined;
 let resolvedConfig = initConfig(components['s3fileinputcomponent'].initialData.configuration, configuration);
 let fileUploads = writable([]);
-const { app, worldStore, componentControl, runnableComponents } = getContext('AppViewerContext');
+const { app, worldStore, componentControl, runnableComponents, workspace } = getContext('AppViewerContext');
 $componentControl[id] = {
     clearFiles: () => {
         outputs.result.set([]);
@@ -100,6 +100,7 @@ let forceDisplayUploads = false;
 		customResourceType="s3"
 		customClass={css?.container?.class}
 		customStyle={css?.container?.style}
+		{workspace}
 		on:addition={(evt) => {
 			const curr = outputs.result.peak()
 			outputs.result.set(curr.concat(evt.detail))

package/package/components/apps/utils.js

@@ -249,6 +249,13 @@ declare async function waitJob(id: string): Promise<any>;
  */
 declare async function askNewResource(id: string): void;
 
+/**
+ * Download a file from a url or base64 encoded string
+ * @param input url, base64 encoded string, [dataUrl](https://developer.mozilla.org/en-US/docs/Web/URI/Schemes/data) or S3 object
+ * @param [fileName] name of the file to download (optional)
+ */
+declare function downloadFile(input: string | {s3: string, storage?: string}, fileName?: string): void;
+
 `
         : ''}
 

package/package/components/common/fileDownload/FileDownload.svelte

@@ -2,6 +2,7 @@
 import { Download } from 'lucide-svelte';
 import { base } from '../../../base';
 export let s3object;
+export let workspaceId = undefined;
 </script>
 
 <a
@@ -9,9 +10,9 @@ export let s3object;
 border border-dashed border-gray-400 hover:border-blue-500
 focus-within:border-blue-500 hover:bg-blue-50 dark:hover:bg-frost-900 focus-within:bg-blue-50
 duration-200 rounded-lg p-1 gap-2"
-	href={`${base}/api/w/${$workspaceStore}/job_helpers/download_s3_file?file_key=${s3object?.s3}${
-		s3object?.storage ? `&storage=${s3object.storage}` : ''
-	}`}
+	href={`${base}/api/w/${workspaceId ?? $workspaceStore}/job_helpers/download_s3_file?file_key=${
+		s3object?.s3
+	}${s3object?.storage ? `&storage=${s3object.storage}` : ''}`}
 	download={s3object?.s3.split('/').pop() ?? 'unnamed_download.file'}
 >
 	<Download />

package/package/components/common/fileDownload/FileDownload.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         s3object: any;
+        workspaceId?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/common/fileUpload/FileUpload.svelte

@@ -20,6 +20,7 @@ export let randomFileKey = false;
 export let pathTransformer = undefined; // function taking as input {file: File} and returning a string
 export let forceDisplayUploads = false;
 export let defaultValue = undefined;
+export let workspace = undefined;
 const dispatch = createEventDispatcher();
 let fileUploads = writable([]);
 async function handleChange(files) {
@@ -130,7 +131,7 @@ async function uploadFileToS3(fileToUpload, fileToUploadKey) {
                     }
                 }
             });
-            xhr?.open('POST', `/api/w/${$workspaceStore}/job_helpers/upload_s3_file?${params.toString()}`, true);
+            xhr?.open('POST', `/api/w/${workspace ?? $workspaceStore}/job_helpers/upload_s3_file?${params.toString()}`, true);
             xhr?.setRequestHeader('Content-Type', 'application/octet-stream');
             xhr?.send(fileToUpload);
         }));
@@ -161,7 +162,7 @@ async function uploadFileToS3(fileToUpload, fileToUploadKey) {
 }
 async function deleteFile(fileKey) {
     await HelpersService.deleteS3File({
-        workspace: $workspaceStore,
+        workspace: workspace ?? $workspaceStore,
         fileKey: fileKey
     });
     dispatch('deletion', { path: fileKey });

package/package/components/common/fileUpload/FileUpload.svelte.d.ts

@@ -12,6 +12,7 @@ declare const __propDef: {
         pathTransformer?: any;
         forceDisplayUploads?: boolean | undefined;
         defaultValue?: string | undefined;
+        workspace?: string | undefined;
     };
     events: {
         addition: CustomEvent<any>;

package/package/components/copilot/StepGenQuick.svelte

@@ -3,7 +3,7 @@ import { ScriptService } from '../../gen';
 import { Wand2, Loader2 } from 'lucide-svelte';
 import SearchItems from '../SearchItems.svelte';
 import { emptyString } from '../../utils';
-import { onMount } from 'svelte';
+import { createEventDispatcher, onMount } from 'svelte';
 export let funcDesc;
 export let trigger = false;
 export let loading = false;
@@ -12,6 +12,7 @@ export let disableAi = false;
 let scripts = undefined;
 export let filteredItems = [];
 $: prefilteredItems = scripts ?? [];
+const dispatch = createEventDispatcher();
 async function loadScripts() {
     const loadedScripts = await ScriptService.listScripts({
         workspace: $workspaceStore,
@@ -43,6 +44,11 @@ onMount(() => {
 		<input
 			bind:this={input}
 			type="text"
+			on:keydown={(e) => {
+				if (e.key === 'Escape') {
+					dispatch('escape')
+				}
+			}}
 			bind:value={funcDesc}
 			placeholder="Search {trigger ? 'triggers' : 'scripts'} {disableAi ? '' : 'or AI gen'}"
 		/>

package/package/components/copilot/StepGenQuick.svelte.d.ts

@@ -12,6 +12,8 @@ declare const __propDef: {
         })[] | undefined;
     };
     events: {
+        escape: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/package/components/flows/map/InsertModuleButton.svelte

@@ -82,7 +82,14 @@ shouldUsePortal={true} -->
 		role="none"
 	>
 		<div class="flex flex-row items-center gap-2">
-			<StepGenQuick {disableAi} on:insert bind:funcDesc {preFilter} {loading} />
+			<StepGenQuick
+				on:escape={() => close(null)}
+				{disableAi}
+				on:insert
+				bind:funcDesc
+				{preFilter}
+				{loading}
+			/>
 			{#if selectedKind != 'preprocessor' && selectedKind != 'flow'}
 				<ToggleHubWorkspaceQuick bind:selected={preFilter} />
 			{/if}

package/package/components/graph/FlowGraphV2.svelte

@@ -210,7 +210,7 @@ let yamlEditorDrawer = undefined;
 	{:else}
 		<SvelteFlow
 			on:paneclick={(e) => {
-				window.dispatchEvent(new Event('focus'))
+				document.dispatchEvent(new Event('focus'))
 			}}
 			{nodes}
 			{edges}

package/package/components/icons/WindmillIcon2.svelte

@@ -1,4 +1,5 @@
-<script>export let white = false;
+<script>import { customIcon } from './store';
+export let white = false;
 export let size = '24px';
 export let color = undefined;
 export let spin = undefined;
@@ -92,50 +93,69 @@ let lessSaturatedColor;
 $: color ? (lessSaturatedColor = reduceSaturation(color, -16)) : (lessSaturatedColor = undefined);
 </script>
 
-<!-- SVG Icon with customizable color -->
-<svg
-	class={$$props.class}
-	class:animate-[spin_2s_linear_infinite]={spin === 'veryfast'}
-	class:animate-[spin_5s_linear_infinite]={spin === 'fast'}
-	class:animate-[spin_15s_linear_infinite]={spin === 'medium'}
-	class:animate-[spin_50s_linear_infinite]={spin === 'slow'}
-	version="1.1"
-	id="Calque_1"
-	xmlns="http://www.w3.org/2000/svg"
-	xmlns:xlink="http://www.w3.org/1999/xlink"
-	x="0px"
-	y="0px"
-	width={size}
-	height={size}
-	viewBox="0 0 256 256"
-	style="enable-background:new 0 0 256 256;"
-	xml:space="preserve"
->
-	<g>
-		<!-- Use color or fallback to defaults (white or blue) -->
-		<polygon
-			fill={lessSaturatedColor || (white ? '#cccccc' : '#bcd4fc')}
-			points="134.78,14.22 114.31,48.21 101.33,69.75 158.22,69.75 177.97,36.95 191.67,14.22"
+{#if customIcon.white || customIcon.normal}
+	{#if white}
+		<img
+			src={customIcon.white}
+			alt="Windmill Custom icon"
+			width={size}
+			height={size}
+			class={$$props.class}
 		/>
-		<polygon
-			fill={color || (white ? '#ffffff' : '#3b82f6')}
-			points="227.55,69.75 186.61,69.75 101.33,69.75 129.78,119.02 158.16,119.02 228.61,119.02 256,119.02"
+	{:else}
+		<img
+			src={customIcon.normal}
+			alt="Windmill Custom icon"
+			width={size}
+			height={size}
+			class={$$props.class}
 		/>
-		<polygon
-			fill={color || (white ? '#ffffff' : '#3b82f6')}
-			points="136.93,132.47 116.46,167.93 73.82,241.78 130.71,241.78 144.9,217.2 180.13,156.18 193.82,132.46"
-		/>
-		<polygon
-			fill={color || (white ? '#ffffff' : '#3b82f6')}
-			points="121.7,131.95 101.23,96.49 58.59,22.63 30.15,71.91 44.34,96.49 79.57,157.5 93.26,181.22"
-		/>
-		<polygon
-			fill={lessSaturatedColor || (white ? '#cccccc' : '#bcd4fc')}
-			points="64.81,131.95 25.15,131.21 0,130.74 28.44,180.01 66.73,180.72 93.26,181.21"
-		/>
-		<polygon
-			fill={lessSaturatedColor || (white ? '#cccccc' : '#bcd4fc')}
-			points="165.38,181.74 184.58,216.46 196.75,238.47 225.19,189.2 206.66,155.69 193.83,132.46"
-		/>
-	</g>
-</svg>
+	{/if}
+{:else}
+	<svg
+		class={$$props.class}
+		class:animate-[spin_2s_linear_infinite]={spin === 'veryfast'}
+		class:animate-[spin_5s_linear_infinite]={spin === 'fast'}
+		class:animate-[spin_15s_linear_infinite]={spin === 'medium'}
+		class:animate-[spin_50s_linear_infinite]={spin === 'slow'}
+		version="1.1"
+		id="Calque_1"
+		xmlns="http://www.w3.org/2000/svg"
+		xmlns:xlink="http://www.w3.org/1999/xlink"
+		x="0px"
+		y="0px"
+		width={size}
+		height={size}
+		viewBox="0 0 256 256"
+		style="enable-background:new 0 0 256 256;"
+		xml:space="preserve"
+	>
+		<g>
+			<!-- Use color or fallback to defaults (white or blue) -->
+			<polygon
+				fill={lessSaturatedColor || (white ? '#cccccc' : '#bcd4fc')}
+				points="134.78,14.22 114.31,48.21 101.33,69.75 158.22,69.75 177.97,36.95 191.67,14.22"
+			/>
+			<polygon
+				fill={color || (white ? '#ffffff' : '#3b82f6')}
+				points="227.55,69.75 186.61,69.75 101.33,69.75 129.78,119.02 158.16,119.02 228.61,119.02 256,119.02"
+			/>
+			<polygon
+				fill={color || (white ? '#ffffff' : '#3b82f6')}
+				points="136.93,132.47 116.46,167.93 73.82,241.78 130.71,241.78 144.9,217.2 180.13,156.18 193.82,132.46"
+			/>
+			<polygon
+				fill={color || (white ? '#ffffff' : '#3b82f6')}
+				points="121.7,131.95 101.23,96.49 58.59,22.63 30.15,71.91 44.34,96.49 79.57,157.5 93.26,181.22"
+			/>
+			<polygon
+				fill={lessSaturatedColor || (white ? '#cccccc' : '#bcd4fc')}
+				points="64.81,131.95 25.15,131.21 0,130.74 28.44,180.01 66.73,180.72 93.26,181.21"
+			/>
+			<polygon
+				fill={lessSaturatedColor || (white ? '#cccccc' : '#bcd4fc')}
+				points="165.38,181.74 184.58,216.46 196.75,238.47 225.19,189.2 206.66,155.69 193.83,132.46"
+			/>
+		</g>
+	</svg>
+{/if}

package/package/components/schema/FlowPropertyEditor.svelte

@@ -21,20 +21,20 @@ export let type = undefined;
 export let oneOf = undefined;
 export let required = false;
 export let pattern = undefined;
-export let password = false;
+export let password = undefined;
 export let variableEditor = undefined;
 export let itemPicker = undefined;
-export let nullable = false;
-export let disabled = false;
+export let nullable = undefined;
+export let disabled = undefined;
 export let defaultValue = undefined;
 export let propsNames = [];
 export let showExpr = undefined;
 export let extra = {};
 export let customErrorMessage = undefined;
 export let itemsType = undefined;
-export let properties = {};
-export let order = [];
-export let requiredProperty = [];
+export let properties = undefined;
+export let order = undefined;
+export let requiredProperty = undefined;
 export let displayWebhookWarning = true;
 export let lightweightMode = false;
 function getOneOfWithoutLabel(oneOf) {
@@ -97,7 +97,7 @@ function schemaUpdate(changedSchema) {
             return {
                 ...v,
                 properties: {
-                    ...v.properties,
+                    ...(v.properties ?? {}),
                     label: {
                         type: 'string',
                         enum: [v.title ?? '']
@@ -352,7 +352,14 @@ let initialObjectSelected = Object.keys(schema?.properties ?? {}).length == 0 ?
 				}}
 				lightMode
 				size="xs"
-				bind:checked={nullable}
+				checked={nullable}
+				on:change={(event) => {
+					if (event?.detail) {
+						nullable = true
+					} else {
+						nullable = undefined
+					}
+				}}
 				disabled={required}
 			/>
 		{/if}
@@ -363,7 +370,14 @@ let initialObjectSelected = Object.keys(schema?.properties ?? {}).length == 0 ?
 			}}
 			lightMode
 			size="xs"
-			bind:checked={disabled}
+			checked={disabled}
+			on:change={(event) => {
+				if (event?.detail) {
+					disabled = true
+				} else {
+					disabled = undefined
+				}
+			}}
 		/>
 	</div>
 

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

@@ -10,7 +10,7 @@ declare const __propDef: {
         oneOf?: SchemaProperty[] | undefined;
         required?: boolean | undefined;
         pattern?: undefined | string;
-        password?: boolean | undefined;
+        password?: undefined | boolean;
         variableEditor?: VariableEditor | undefined;
         itemPicker?: ItemPicker | undefined;
         nullable?: boolean | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "windmill-components",
-	"version": "1.407.2",
+	"version": "1.408.2",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build",