windmill-components 1.408.1 → 1.430.2

package/package/components/details/ErrorHandlerToggleButtonV2.svelte

@@ -0,0 +1,59 @@
+<script>import Toggle from '../Toggle.svelte';
+import { FlowService, ScriptService } from '../../gen';
+import { sendUserToast } from '../../toast';
+import { workspaceStore } from '../../stores';
+export let kind;
+export let scriptOrFlowPath;
+export let errorHandlerMuted;
+export let textDisabled = false;
+let toggleState = errorHandlerMuted;
+export let color = 'nord';
+async function toggleErrorHandler() {
+    toggleState = !toggleState;
+    if ($workspaceStore !== undefined) {
+        try {
+            if (kind === 'flow') {
+                await FlowService.toggleWorkspaceErrorHandlerForFlow({
+                    workspace: $workspaceStore,
+                    path: scriptOrFlowPath,
+                    requestBody: {
+                        muted: !errorHandlerMuted
+                    }
+                });
+            }
+            else {
+                await ScriptService.toggleWorkspaceErrorHandlerForScript({
+                    workspace: $workspaceStore,
+                    path: scriptOrFlowPath,
+                    requestBody: {
+                        muted: !errorHandlerMuted
+                    }
+                });
+            }
+        }
+        catch (error) {
+            sendUserToast(`Error while toggling Workspace Error Handler: ${error.body || error.message}`, true);
+            toggleState = false;
+            return;
+        }
+        errorHandlerMuted = !errorHandlerMuted;
+        toggleState = errorHandlerMuted;
+        sendUserToast(errorHandlerMuted ? 'Workspace error handler muted' : 'Workspace error handler active', false);
+    }
+    toggleState = false;
+}
+</script>
+
+<Toggle
+	{color}
+	textClass="font-normal text-sm"
+	size="xs"
+	checked={toggleState}
+	on:change={toggleErrorHandler}
+	options={{
+		right: 'Mute',
+		rightTooltip: 'Disable workspace error handler, EE only',
+		rightDocumentationLink: 'https://www.windmill.dev/docs/core_concepts/error_handling#workspace-error-handler'
+	}}
+	{textDisabled}
+/>

package/package/components/details/ErrorHandlerToggleButtonV2.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        kind: 'script' | 'flow';
+        scriptOrFlowPath: string;
+        errorHandlerMuted: boolean | undefined;
+        textDisabled?: boolean | undefined;
+        color?: "blue" | "red" | "nord" | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ErrorHandlerToggleButtonV2Props = typeof __propDef.props;
+export type ErrorHandlerToggleButtonV2Events = typeof __propDef.events;
+export type ErrorHandlerToggleButtonV2Slots = typeof __propDef.slots;
+export default class ErrorHandlerToggleButtonV2 extends SvelteComponent<ErrorHandlerToggleButtonV2Props, ErrorHandlerToggleButtonV2Events, ErrorHandlerToggleButtonV2Slots> {
+}
+export {};

package/package/components/display/PdfViewer.svelte

@@ -0,0 +1,312 @@
+<script>import { Download, Expand, Loader2, MoveHorizontal, Shrink, ZoomIn, ZoomOut } from 'lucide-svelte';
+import { getDocument, GlobalWorkerOptions } from 'pdfjs-dist';
+GlobalWorkerOptions.workerSrc = `https://unpkg.com/pdfjs-dist@4.8.69/build/pdf.worker.min.mjs`;
+import { fade } from 'svelte/transition';
+import { twMerge } from 'tailwind-merge';
+import { throttle } from '../../utils';
+import { Button } from '../common';
+import { createEventDispatcher } from 'svelte';
+export let source = undefined;
+export let zoom = 100;
+export let extraButton = undefined;
+export let allowFullscreen = false;
+let fullscreen = false;
+let wrapper = undefined;
+let error = undefined;
+let doc = undefined;
+let pages = [];
+let controlsWidth = undefined;
+let controlsHeight = undefined;
+let pageNumber = 1;
+$: if (source == '') {
+    resetDoc();
+    error = 'Set the "Source" attribute of the PDF component';
+}
+$: zoom && handleZoom();
+$: wrapper && loadDocument(source);
+$: wideView = controlsWidth && controlsWidth > 450;
+async function resetDoc() {
+    await doc?.destroy();
+    doc = undefined;
+}
+function handleZoom() {
+    if (zoom && wrapper) {
+        try {
+            renderPdf(false);
+        }
+        catch (err) {
+            error = err?.message ?? (typeof err === 'string' ? err : 'Error loading PDF');
+        }
+    }
+}
+const dispatch = createEventDispatcher();
+async function loadDocument(src) {
+    console.log('loading documnet');
+    if (!src) {
+        return;
+    }
+    try {
+        dispatch('loading');
+        await resetDoc();
+        doc = await getDocument(src).promise;
+        console.log('got doc');
+        pageNumber = 1;
+        await renderPdf(false, false);
+        console.log('rendered pdf');
+        error = undefined;
+    }
+    catch (err) {
+        await resetDoc();
+        error = err?.message ?? (typeof err === 'string' ? err : 'Error loading PDF');
+        console.log(err);
+    }
+    dispatch('loaded');
+}
+async function renderPdf(scaleToViewport = true, resizing = false) {
+    if (!(doc && wrapper && zoom)) {
+        return;
+    }
+    const scrollPosition = wrapper.scrollTop / wrapper.scrollHeight;
+    if (!resizing) {
+        pages = [];
+    }
+    const nextPages = [];
+    const nextChildren = [];
+    const { width } = wrapper.getBoundingClientRect();
+    let scale = zoom / 100;
+    if (scaleToViewport) {
+        const firstViewport = (await doc.getPage(1)).getViewport({ scale: 1 });
+        // Rounded to the first integer that is a multiple of 10 and is less than the viewport width
+        zoom = Math.floor((width / firstViewport.width) * 10) * 10;
+        scale = zoom / 100;
+    }
+    for (let i = 0; i < doc.numPages; i++) {
+        const canvas = document.createElement('canvas');
+        const canvasContext = canvas.getContext('2d');
+        if (!canvasContext) {
+            console.warn('Could not get canvas context for PDF page ' + i);
+            continue;
+        }
+        const page = await doc.getPage(i + 1);
+        nextPages.push(page);
+        const viewport = page.getViewport({ scale });
+        canvas.height = viewport.height;
+        canvas.width = viewport.width;
+        canvas.classList.add('mx-auto', 'my-4', 'shadow-sm');
+        await page.render({ canvasContext, viewport }).promise;
+        nextChildren.push(canvas);
+    }
+    while (wrapper.firstChild) {
+        wrapper.removeChild(wrapper.firstChild);
+    }
+    pages = [...nextPages];
+    wrapper.append(...nextChildren);
+    wrapper.scrollTo({
+        top: scrollPosition * wrapper.scrollHeight
+    });
+}
+function scrollToPage(page) {
+    page = pageNumber = minMax(page, 1, pages.length);
+    const offset = wrapper?.children.item(page - 1)?.offsetTop;
+    if (!offset) {
+        return;
+    }
+    //                       controlsHeight + 2px border + half of the top margin
+    const padding = (controlsHeight ? controlsHeight + 2 : 0) + 8;
+    wrapper?.scrollTo({
+        top: offset - padding
+    });
+}
+const throttledScroll = throttle(onScroll, 400);
+function onScroll() {
+    if (!wrapper) {
+        return;
+    }
+    const THRESHOLD = 50;
+    let scrollPosition = wrapper.scrollTop + THRESHOLD + (controlsHeight ?? 0);
+    let page = 1;
+    for (let i = 0; i < pages.length; i++) {
+        const canvas = wrapper.children.item(i);
+        if (scrollPosition < (canvas?.offsetTop ?? wrapper.scrollHeight)) {
+            break;
+        }
+        page = i + 1;
+    }
+    pageNumber = page;
+}
+async function downloadPdf() {
+    if (!doc) {
+        return;
+    }
+    const data = await doc.saveDocument();
+    const url = URL.createObjectURL(new Blob([data.buffer]));
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = 'document.pdf';
+    link.click();
+    URL.revokeObjectURL(url);
+}
+function minMax(value, min, max) {
+    if (value < min) {
+        return min;
+    }
+    else if (value > max) {
+        return max;
+    }
+    return value;
+}
+</script>
+
+<div
+	class={twMerge('flex flex-col w-full h-full', fullscreen ? 'fixed inset-0 z-[9999]' : 'relative')}
+>
+	{#if source && zoom}
+		{#if pages?.length}
+			<div
+				bind:clientWidth={controlsWidth}
+				bind:clientHeight={controlsHeight}
+				class="flex flex-row w-full justify-between overflow-x-auto bg-surface border-b mx-auto py-1"
+			>
+				<div class="flex justify-start items-center px-2 text-secondary text-sm">
+					<Button
+						on:click={() => zoom && (zoom -= 10)}
+						disabled={!doc}
+						size="xs"
+						color="light"
+						variant="border"
+						title="Zoom out"
+						aria-label="Zoom out"
+						btnClasses="!rounded-r-none !px-2"
+					>
+						<ZoomOut size={16} />
+					</Button>
+					{#if wideView}
+						<Button
+							on:click={() => (zoom = 100)}
+							disabled={!doc}
+							size="xs"
+							color="light"
+							variant="border"
+							title="Reset zoom"
+							aria-label="Reset zoom"
+							btnClasses="!w-[50px] !font-medium !rounded-none !border-l-0 !px-1"
+						>
+							{zoom.toFixed(0)}%
+						</Button>
+					{/if}
+					<Button
+						on:click={() => renderPdf(true, true)}
+						disabled={!doc}
+						size="xs"
+						color="light"
+						variant="border"
+						title="Scale to viewport"
+						aria-label="Scale to viewport"
+						btnClasses="!rounded-none !border-l-0 !px-2"
+					>
+						<MoveHorizontal size={16} />
+					</Button>
+					<Button
+						on:click={() => zoom && (zoom += 10)}
+						disabled={!doc}
+						size="xs"
+						color="light"
+						variant="border"
+						title="Zoom in"
+						aria-label="Zoom in"
+						btnClasses="!rounded-l-none !px-2 !border-l-0"
+					>
+						<ZoomIn size={16} />
+					</Button>
+				</div>
+				<div class="center-center px-2 text-secondary text-sm">
+					<input
+						on:input={({ currentTarget }) => {
+							scrollToPage(currentTarget.valueAsNumber)
+						}}
+						min="1"
+						max={pages.length}
+						value={pageNumber}
+						disabled={!doc}
+						type="number"
+						class="!w-[45px] !px-1 !py-0"
+					/>
+					<span class="whitespace-nowrap pl-1">
+						/ {pages.length}
+					</span>
+				</div>
+				<div class="flex justify-end items-center px-2 text-secondary text-sm gap-1">
+					<Button
+						on:click={downloadPdf}
+						disabled={!doc}
+						size="xs"
+						color="light"
+						title="Download PDF"
+						aria-label="Download PDF"
+						btnClasses="!font-medium !px-2"
+					>
+						<Download size={14} />
+					</Button>
+					{#if allowFullscreen}
+						<Button
+							on:click={() => (fullscreen = !fullscreen)}
+							disabled={!doc}
+							size="xs"
+							color="light"
+							title="Toggle fullscreen"
+							aria-label="Toggle fullscreen"
+							btnClasses="!font-medium !px-2"
+						>
+							{#if fullscreen}
+								<Shrink size={14} />
+							{:else}
+								<Expand size={14} />
+							{/if}
+						</Button>
+					{/if}
+				</div>
+			</div>
+		{:else}
+			<div
+				out:fade={{ duration: 200 }}
+				class="absolute inset-0 center-center flex-col text-center text-sm bg-surface text-secondary"
+			>
+				<Loader2 class="animate-spin mb-2" />
+				Loading PDF
+			</div>
+		{/if}
+		<div
+			bind:this={wrapper}
+			on:scroll={throttledScroll}
+			class={twMerge(
+				'w-full h-full overflow-auto',
+				$$props.class ?? '',
+				// css?.container?.class ?? '',
+				'bg-gray-100',
+				'wm-pdf'
+			)}
+			style={$$props.style ?? ''}
+		/>
+	{/if}
+	{#if extraButton}
+		<svelte:component this={extraButton} />
+	{/if}
+	<!-- {#if $mode !== 'preview' && $selectedComponent?.includes(id)}
+			<button
+				class="fixed z-10 bottom-0 left-0 px-2 py-0.5 bg-indigo-500/90
+			hover:bg-indigo-500 focus:bg-indigo-500 duration-200 text-white text-2xs"
+				on:click={() => syncZoomValue()}
+			>
+				Sync zoom value
+			</button>
+		{/if} -->
+	<slot name="extra-button" />
+	{#if error}
+		<div
+			class="absolute inset-0 z-20 center-center
+		bg-gray-100 text-center text-secondary text-sm"
+		>
+			{error}
+		</div>
+	{/if}
+</div>

package/package/components/display/PdfViewer.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        source?: string | ArrayBuffer | undefined;
+        zoom?: number | undefined;
+        extraButton?: any | undefined;
+        allowFullscreen?: boolean | undefined;
+    };
+    events: {
+        loading: CustomEvent<any>;
+        loaded: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        'extra-button': {};
+    };
+};
+export type PdfViewerProps = typeof __propDef.props;
+export type PdfViewerEvents = typeof __propDef.events;
+export type PdfViewerSlots = typeof __propDef.slots;
+export default class PdfViewer extends SvelteComponent<PdfViewerProps, PdfViewerEvents, PdfViewerSlots> {
+}
+export {};

package/package/components/flows/FlowEditor.svelte

@@ -3,8 +3,9 @@ import FlowEditorPanel from './content/FlowEditorPanel.svelte';
 import FlowModuleSchemaMap from './map/FlowModuleSchemaMap.svelte';
 import WindmillIcon from '../icons/WindmillIcon.svelte';
 import { Skeleton } from '../common';
-import { getContext } from 'svelte';
+import { getContext, setContext } from 'svelte';
 import { classNames } from '../../utils';
+import { writable } from 'svelte/store';
 const { flowStore } = getContext('FlowEditorContext');
 export let loading;
 export let disableStaticInputs = false;
@@ -13,8 +14,13 @@ export let disableAi = false;
 export let disableSettings = false;
 export let disabledFlowInputs = false;
 export let smallErrorHandler = false;
+export let newFlow = false;
 let size = 50;
 const { currentStepStore: copilotCurrentStepStore } = getContext('FlowCopilotContext');
+setContext('PropPickerContext', {
+    flowPropPickerConfig: writable(undefined),
+    pickablePropertiesFiltered: writable(undefined)
+});
 </script>
 
 <div
@@ -40,6 +46,7 @@ const { currentStepStore: copilotCurrentStepStore } = getContext('FlowCopilotCon
 						{disableAi}
 						{disableSettings}
 						{smallErrorHandler}
+						{newFlow}
 						bind:modules={$flowStore.value.modules}
 						on:reload
 					/>
@@ -54,7 +61,7 @@ const { currentStepStore: copilotCurrentStepStore } = getContext('FlowCopilotCon
 					</div>
 				</div>
 			{:else}
-				<FlowEditorPanel {disabledFlowInputs} enableAi={!disableAi} />
+				<FlowEditorPanel {disabledFlowInputs} {newFlow} enableAi={!disableAi} />
 			{/if}
 		</Pane>
 	</Splitpanes>

package/package/components/flows/FlowEditor.svelte.d.ts

@@ -8,6 +8,7 @@ declare const __propDef: {
         disableSettings?: boolean | undefined;
         disabledFlowInputs?: boolean | undefined;
         smallErrorHandler?: boolean | undefined;
+        newFlow?: boolean | undefined;
     };
     events: {
         reload: any;

package/package/components/flows/content/BranchPredicateEditor.svelte

@@ -17,12 +17,14 @@ $: stepPropPicker = getStepPropPicker($flowStateStore, parentModule, previousMod
 
 {#if open}
 	<PropPickerWrapper
+		alwaysOn
 		notSelectable
 		pickableProperties={stepPropPicker.pickableProperties}
 		on:select={({ detail }) => {
 			editor?.insertAtCursor(detail)
 			editor?.focus()
 		}}
+		paneClass="max-h-[320px] overflow-auto"
 	>
 		<div class="border border-gray-400">
 			<SimpleEditor

package/package/components/flows/content/FlowConstants.svelte

@@ -50,6 +50,7 @@ $: steps = scriptModules
 ])
     .filter(([i, f, m]) => f.length > 0);
 setContext('PropPickerWrapper', {
+    inputMatches: writable(undefined),
     focusProp: () => { },
     propPickerConfig: writable(undefined),
     clearFocus: () => { }
@@ -61,8 +62,8 @@ setContext('PropPickerWrapper', {
 		<Toggle slot="header" bind:checked={hideOptional} options={{ left: 'Hide optional inputs' }} />
 		<div class="min-h-full flex-1">
 			<Alert type="info" title="Static Inputs" class="m-4"
-				>This page centralizes the static inputs of every steps. It is akin to a file containing all
-				constants. Modifying a value here modify it in the step input directly. It is especially
+				>This page centralizes the static inputs of every steps. It is aking to a file containing all
+				constants. Modifying a value here modifies it in the step input directly. It is especially
 				useful when forking a flow to get an overview of all the variables to parametrize that are
 				not exposed directly as flow inputs.</Alert
 			>

package/package/components/flows/content/FlowEditorPanel.svelte

@@ -4,13 +4,15 @@ import FlowSettings from './FlowSettings.svelte';
 import FlowInput from './FlowInput.svelte';
 import FlowFailureModule from './FlowFailureModule.svelte';
 import FlowConstants from './FlowConstants.svelte';
+import TriggersEditor from '../../triggers/TriggersEditor.svelte';
 import { initFlowStepWarnings } from '../utils';
 import { dfs } from '../dfs';
 import FlowPreprocessorModule from './FlowPreprocessorModule.svelte';
 export let noEditor = false;
 export let enableAi = false;
+export let newFlow = false;
 export let disabledFlowInputs = false;
-const { selectedId, flowStore, flowStateStore, flowInputsStore } = getContext('FlowEditorContext');
+const { selectedId, flowStore, flowStateStore, flowInputsStore, pathStore, initialPath } = getContext('FlowEditorContext');
 function checkDup(modules) {
     let seenModules = [];
     for (const m of modules) {
@@ -44,13 +46,26 @@ onMount(() => {
 {:else if $selectedId === 'Input'}
 	<FlowInput {noEditor} disabled={disabledFlowInputs} />
 {:else if $selectedId === 'Result'}
-	<p class="p-4 text-secondary">Nothing to show about the result node. Happy flow building!</p>
+	<p class="p-4 text-secondary">The result of the flow will be the result of the last node.</p>
 {:else if $selectedId === 'constants'}
 	<FlowConstants {noEditor} />
 {:else if $selectedId === 'failure'}
 	<FlowFailureModule {noEditor} />
 {:else if $selectedId === 'preprocessor'}
 	<FlowPreprocessorModule {noEditor} />
+{:else if $selectedId === 'triggers'}
+	<TriggersEditor
+		currentPath={$pathStore}
+		{initialPath}
+		schema={$flowStore.schema}
+		{noEditor}
+		newItem={newFlow}
+		isFlow={true}
+	/>
+{:else if $selectedId.startsWith('subflow:')}
+	<div class="p-4"
+		>Selected step is witin an expanded subflow and is not directly editable in the flow editor</div
+	>
 {:else}
 	{@const dup = checkDup($flowStore.value.modules)}
 	{#if dup}

package/package/components/flows/content/FlowEditorPanel.svelte.d.ts

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         noEditor?: boolean | undefined;
         enableAi?: boolean | undefined;
+        newFlow?: boolean | undefined;
         disabledFlowInputs?: boolean | undefined;
     };
     events: {

package/package/components/flows/content/FlowInputsQuick.svelte

@@ -33,6 +33,7 @@ export let loading = false;
 export let small = false;
 export let kind;
 export let selectedKind = kind;
+export let displayPath = false;
 let lang = undefined;
 let selectedCompletion = undefined;
 let filteredWorkspaceItems = [];
@@ -66,7 +67,7 @@ function displayLang(lang, kind) {
     }
 }
 async function onGenerate() {
-    if (!selectedCompletion && !$copilotInfo.exists_openai_resource_path) {
+    if (!selectedCompletion && !$copilotInfo.exists_ai_resource) {
         sendUserToast('Windmill AI is not enabled, you can activate it in the workspace settings', true);
         return;
     }
@@ -170,7 +171,7 @@ onDestroy(() => {
 			{#if ['script', 'trigger', 'approval', 'preprocessor', 'failure'].includes(selectedKind)}
 				{#if (preFilter === 'all' && owners.length > 0) || preFilter === 'workspace'}
 					{#if preFilter !== 'workspace'}
-						<div class="pb-0 text-2xs font-light text-secondary ml-2">Workspace Folders</div>
+						<div class="pb-0 text-2xs font-light text-secondary ml-2">Folders</div>
 					{/if}
 
 					{#if owners.length > 0}
@@ -246,7 +247,7 @@ onDestroy(() => {
 			{/if}
 		</Scrollable>
 	{/if}
-	<Scrollable bind:this={scrollable} scrollableClass="grow min-w-0">
+	<Scrollable id="flow-editor-flow-atoms" bind:this={scrollable} scrollableClass="grow min-w-0">
 		{#if kind == 'script'}
 			{#each topLevelNodes as [label, kind], i (label)}
 				<FlowToplevelNode
@@ -260,7 +261,7 @@ onDestroy(() => {
 		{/if}
 
 		{#if inlineScripts?.length > 0}
-			<div class="pb-0 flex flex-row items-center gap-2">
+			<div class="pb-0 flex flex-row items-center gap-2 -mt-[3px]">
 				<div class=" text-2xs font-light text-secondary ml-2"
 					>New {selectedKind != 'script' ? selectedKind + ' ' : ''}script</div
 				>
@@ -378,6 +379,7 @@ onDestroy(() => {
 				selected={selectedByKeyboard - inlineScripts?.length - aiLength - topLevelNodes.length}
 				on:pickScript
 				on:pickFlow
+				{displayPath}
 			/>
 		{/if}
 
@@ -400,6 +402,7 @@ onDestroy(() => {
 						topLevelNodes.length}
 					on:pickScript
 					bind:loading
+					{displayPath}
 				/>
 			{/if}
 		{/if}

package/package/components/flows/content/FlowInputsQuick.svelte.d.ts

@@ -14,6 +14,7 @@ declare const __propDef: {
         small?: boolean | undefined;
         kind: 'trigger' | 'script' | 'preprocessor' | 'failure' | 'approval';
         selectedKind?: "script" | "failure" | "trigger" | "approval" | "flow" | "preprocessor" | undefined;
+        displayPath?: boolean | undefined;
     };
     events: {
         pickScript: CustomEvent<any>;