windmill-components 1.394.8 → 1.405.5

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

@@ -0,0 +1,419 @@
+<script>import { isCloudHosted } from '../../../cloud';
+import { sendUserToast } from '../../../toast';
+import FlowScriptPickerQuick from '../pickers/FlowScriptPickerQuick.svelte';
+import WorkspaceScriptPickerQuick from '../pickers/WorkspaceScriptPickerQuick.svelte';
+import { defaultScriptLanguages, processLangs } from '../../../scripts';
+import { defaultScripts, enterpriseLicense, userStore } from '../../../stores';
+import { createEventDispatcher, getContext, onDestroy, onMount } from 'svelte';
+import PickHubScriptQuick from '../pickers/PickHubScriptQuick.svelte';
+import {} from '../../../gen';
+import ListFiltersQuick from '../../home/ListFiltersQuick.svelte';
+import { Folder, User } from 'lucide-svelte';
+import { copilotInfo } from '../../../stores';
+import { nextId } from '../../flows/flowModuleNextId';
+import { twMerge } from 'tailwind-merge';
+import { fade } from 'svelte/transition';
+import { flip } from 'svelte/animate';
+import Scrollable from '../../Scrollable.svelte';
+import { Button } from '../../common';
+import { SettingsIcon } from 'lucide-svelte';
+import DefaultScriptsInner from '../../DefaultScriptsInner.svelte';
+import GenAiQuick from './GenAiQuick.svelte';
+import FlowToplevelNode from '../pickers/FlowToplevelNode.svelte';
+const dispatch = createEventDispatcher();
+export let summary = undefined;
+export let filter = '';
+export let disableAi = false;
+export let preFilter = 'hub';
+export let funcDesc;
+export let index;
+export let modules;
+export let owners = [];
+export let loading = false;
+export let small = false;
+export let kind;
+export let selectedKind = kind;
+let lang = undefined;
+let selectedCompletion = undefined;
+let filteredWorkspaceItems = [];
+let hubCompletions = [];
+const { flowStore, flowStateStore, insertButtonOpen } = getContext('FlowEditorContext');
+const { modulesStore: copilotModulesStore, genFlow } = getContext('FlowCopilotContext');
+let selected = undefined;
+let integrations = [];
+let customUi = getContext('customUi');
+$: langs = processLangs(undefined, $defaultScripts?.order ?? Object.keys(defaultScriptLanguages))
+    .map((l) => [defaultScriptLanguages[l], l])
+    .filter((x) => $defaultScripts?.hidden == undefined || !$defaultScripts.hidden.includes(x[1]));
+function displayLang(lang, kind) {
+    if (kind == 'trigger') {
+        return ['python3', 'bun', 'deno', 'go'].includes(lang);
+    }
+    else if (kind == 'script') {
+        return true;
+    }
+    else if (kind == 'approval') {
+        return ['python3', 'bun', 'deno'].includes(lang);
+    }
+    else if (kind == 'flow') {
+        return false;
+    }
+    else if (kind == 'preprocessor') {
+        return ['python3', 'bun', 'deno'].includes(lang);
+    }
+    else if (kind == 'failure') {
+        return ['python3', 'bun', 'deno', 'go'].includes(lang);
+    }
+}
+async function onGenerate() {
+    if (!selectedCompletion && !$copilotInfo.exists_openai_resource_path) {
+        sendUserToast('Windmill AI is not enabled, you can activate it in the workspace settings', true);
+        return;
+    }
+    $copilotModulesStore = [
+        {
+            id: nextId($flowStateStore, $flowStore),
+            type: selectedKind == 'trigger' ? 'trigger' : 'script',
+            description: funcDesc,
+            code: '',
+            source: selectedCompletion ? 'hub' : 'custom',
+            hubCompletions,
+            selectedCompletion,
+            editor: undefined,
+            lang
+        }
+    ];
+    genFlow?.(index, modules, true);
+    dispatch('close');
+}
+let openScriptSettings = false;
+let selectedByKeyboard = 0;
+$: onSelectedKindChange(selectedKind);
+function onSelectedKindChange(_selectedKind) {
+    selectedByKeyboard = 0;
+}
+let inlineScripts = [];
+const enterpriseLangs = ['bigquery', 'snowflake', 'mssql'];
+function computeInlineScriptChoices(funcDesc, selected, preFilter, selectedKind) {
+    if (['script', 'trigger', 'failure', 'approval', 'preprocessor'].includes(selectedKind)) {
+        if (!selected && preFilter == 'all') {
+            inlineScripts = langs.filter((lang) => {
+                return ((customUi?.languages == undefined || customUi?.languages?.includes(lang?.[1])) &&
+                    (funcDesc?.length == 0 ||
+                        lang?.[0]?.toLowerCase()?.includes(funcDesc?.toLowerCase())) &&
+                    displayLang(lang?.[1], selectedKind));
+            });
+            return;
+        }
+    }
+    inlineScripts = [];
+}
+const allToplevelNodes = [
+    ['For Loop', 'forloop'],
+    ['While Loop', 'whileloop'],
+    ['Branch to one', 'branchone'],
+    ['Branch to all', 'branchall']
+];
+let topLevelNodes = [];
+function computeToplevelNodeChoices(funcDesc, preFilter) {
+    if (funcDesc.length > 0 && preFilter == 'all' && kind == 'script') {
+        topLevelNodes = allToplevelNodes.filter((node) => node[0].toLowerCase().startsWith(funcDesc.toLowerCase()));
+    }
+    else {
+        topLevelNodes = [];
+    }
+}
+$: computeToplevelNodeChoices(funcDesc, preFilter);
+$: computeInlineScriptChoices(funcDesc, selected, preFilter, selectedKind);
+$: onPrefilterChange(preFilter);
+function onPrefilterChange(preFilter) {
+    if (preFilter == 'workspace') {
+        hubCompletions = [];
+    }
+    else if (preFilter == 'hub') {
+        filteredWorkspaceItems = [];
+    }
+    selectedByKeyboard = 0;
+}
+$: aiLength =
+    funcDesc?.length > 0 && !disableAi && selectedKind != 'flow' && preFilter == 'all' ? 2 : 0;
+let scrollable;
+function onKeyDown(e) {
+    let length = topLevelNodes?.length +
+        inlineScripts.length +
+        aiLength +
+        filteredWorkspaceItems.length +
+        hubCompletions.length;
+    if (e.key === 'ArrowDown') {
+        selectedByKeyboard = (selectedByKeyboard + 1) % length;
+        scrollable?.scrollIntoView(selectedByKeyboard * 32);
+        e.preventDefault();
+    }
+    else if (e.key === 'ArrowUp') {
+        selectedByKeyboard = (selectedByKeyboard - 1 + length) % length;
+        scrollable?.scrollIntoView(selectedByKeyboard * 32);
+        e.preventDefault();
+    }
+}
+onMount(() => {
+    $insertButtonOpen = true;
+});
+onDestroy(() => {
+    $insertButtonOpen = false;
+});
+</script>
+
+<svelte:window on:keydown={onKeyDown} />
+<div class="flex flex-row grow min-w-0 divide-x relative {!small ? 'shadow-inset' : ''}">
+	{#if selectedKind != 'preprocessor'}
+		<Scrollable shiftedShadow scrollableClass="w-32 grow-0 shrink-0 ">
+			{#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>
+					{/if}
+
+					{#if owners.length > 0}
+						{#each owners as owner (owner)}
+							<div
+								in:fade={{ duration: 50 }}
+								animate:flip={{ duration: 100 }}
+								class="w-full px-0.5"
+							>
+								<button
+									class={twMerge(
+										'w-full text-left text-2xs text-primary font-normal py-2 px-3 hover:bg-surface-hover transition-all whitespace-nowrap flex flex-row gap-2 items-center rounded-md',
+										owner === selected?.name ? 'bg-surface-hover' : ''
+									)}
+									on:click={() => {
+										selected = selected?.name == owner ? undefined : { kind: 'owner', name: owner }
+									}}
+								>
+									{#if owner.startsWith('f/')}
+										<Folder class="mr-0.5" size={14} />
+									{:else}
+										<User class="mr-0.5" size={14} />
+									{/if}
+									{owner.slice(2)}
+								</button>
+							</div>
+						{/each}
+						<div class="pb-1.5" />
+					{:else}
+						<div class="text-2xs text-tertiary font-light text-center py-3 px-3 items-center">
+							No items found.
+						</div>
+					{/if}
+				{/if}
+
+				{#if preFilter === 'hub' || preFilter === 'all'}
+					{#if preFilter == 'all'}
+						<div class="pb-0 text-2xs font-light text-secondary ml-2 pt-0.5">Integrations</div>
+					{/if}
+					<ListFiltersQuick
+						on:selected={() => {
+							filteredWorkspaceItems = []
+							selectedByKeyboard = 0
+						}}
+						filters={integrations}
+						bind:selectedFilter={selected}
+						resourceType
+					/>
+				{/if}
+			{:else if selectedKind === 'flow'}
+				{#if owners.length > 0}
+					{#each owners as owner (owner)}
+						<div in:fade={{ duration: 50 }} animate:flip={{ duration: 100 }}>
+							<button
+								class={twMerge(
+									'w-full text-left text-2xs text-primary font-normal py-2 px-3 hover:bg-surface-hover transition-all whitespace-nowrap flex flex-row gap-2 items-center rounded-md',
+									owner === selected?.name ? 'bg-surface-hover' : ''
+								)}
+								on:click={() => {
+									selected = selected?.name == owner ? undefined : { kind: 'owner', name: owner }
+								}}
+							>
+								{#if owner.startsWith('f/')}
+									<Folder class="mr-0.5" size={14} />
+								{:else}
+									<User class="mr-0.5" size={14} />
+								{/if}
+								{owner.slice(2)}
+							</button>
+						</div>
+					{/each}
+				{/if}
+			{/if}
+		</Scrollable>
+	{/if}
+	<Scrollable bind:this={scrollable} scrollableClass="grow min-w-0">
+		{#if kind == 'script'}
+			{#each topLevelNodes as [label, kind], i (label)}
+				<FlowToplevelNode
+					on:click={() => {
+						dispatch('new', { kind })
+					}}
+					{label}
+					selected={selectedByKeyboard === i}
+				/>
+			{/each}
+		{/if}
+
+		{#if inlineScripts?.length > 0}
+			<div class="pb-0 flex flex-row items-center gap-2">
+				<div class=" text-2xs font-light text-secondary ml-2"
+					>New {selectedKind != 'script' ? selectedKind + ' ' : ''}script</div
+				>
+				{#if $userStore?.is_admin || $userStore?.is_super_admin}
+					{#if !openScriptSettings}
+						<Button
+							on:click={() => (openScriptSettings = true)}
+							startIcon={{ icon: SettingsIcon }}
+							color="light"
+							size="xs2"
+							btnClasses="!text-tertiary"
+							variant="contained"
+							title="Edit global default scripts"
+						/>
+					{:else}
+						<Button
+							on:click={() => (openScriptSettings = false)}
+							startIcon={{ icon: SettingsIcon }}
+							color="dark"
+							size="xs2"
+							variant="contained"
+						>
+							Close
+						</Button>
+					{/if}
+				{/if}
+			</div>
+			{#if openScriptSettings}
+				<div class="p-2">
+					<DefaultScriptsInner small />
+				</div>
+			{/if}
+			{#each inlineScripts as [label, lang], i (lang)}
+				<FlowScriptPickerQuick
+					eeRestricted={!$enterpriseLicense && enterpriseLangs.includes(lang)}
+					selected={selectedByKeyboard === i + topLevelNodes.length}
+					{enterpriseLangs}
+					{label}
+					lang={lang == 'docker' ? 'bash' : lang}
+					on:click={() => {
+						if (lang == 'docker') {
+							if (isCloudHosted()) {
+								sendUserToast(
+									'You cannot use Docker scripts on the multi-tenant platform. Use a dedicated instance or self-host windmill instead.',
+									true,
+									[
+										{
+											label: 'Learn more',
+											callback: () => {
+												window.open('https://www.windmill.dev/docs/advanced/docker', '_blank')
+											}
+										}
+									]
+								)
+								return
+							}
+						}
+
+						dispatch('new', {
+							kind: 'script',
+							inlineScript: {
+								language: lang == 'docker' ? 'bash' : lang,
+								kind: selectedKind,
+								subkind:
+									lang == 'docker'
+										? 'docker'
+										: selectedKind == 'preprocessor'
+										? 'preprocessor'
+										: 'flow',
+								summary
+							}
+						})
+					}}
+				/>
+			{/each}
+		{/if}
+
+		{#if !disableAi && funcDesc?.length > 0 && kind != 'failure' && kind != 'preprocessor' && (selectedKind == 'script' || selectedKind == 'trigger') && preFilter == 'all'}
+			<ul class="transition-all">
+				<li
+					><GenAiQuick
+						{funcDesc}
+						lang="TypeScript"
+						selected={selectedByKeyboard === inlineScripts?.length + topLevelNodes.length}
+						on:click={() => {
+							lang = 'bun'
+							onGenerate()
+						}}
+					/>
+				</li>
+				<li>
+					<GenAiQuick
+						{funcDesc}
+						lang="Python"
+						selected={selectedByKeyboard === inlineScripts?.length + topLevelNodes.length + 1}
+						on:click={() => {
+							lang = 'python3'
+							onGenerate()
+						}}
+					/>
+				</li>
+			</ul>
+		{/if}
+
+		{#if (!selected || selected?.kind === 'owner') && (preFilter === 'workspace' || preFilter === 'all')}
+			{#if !selected && (preFilter !== 'workspace' || funcDesc?.length > 0)}
+				<div class="pt-2 pb-0 text-2xs font-light text-secondary ml-2">Workspace</div>
+			{/if}
+			<WorkspaceScriptPickerQuick
+				bind:owners
+				bind:ownerFilter={selected}
+				bind:filteredWithOwner={filteredWorkspaceItems}
+				{filter}
+				kind={selectedKind}
+				selected={selectedByKeyboard - inlineScripts?.length - aiLength - topLevelNodes.length}
+				on:pickScript
+				on:pickFlow
+			/>
+		{/if}
+
+		{#if selectedKind != 'preprocessor' && selectedKind != 'flow'}
+			{#if (!selected || selected?.kind === 'integrations') && (preFilter === 'hub' || preFilter === 'all')}
+				{#if !selected && preFilter !== 'hub'}
+					<div class=" pb-0 text-2xs font-light text-secondary ml-2">Hub</div>
+				{/if}
+
+				<PickHubScriptQuick
+					bind:items={hubCompletions}
+					bind:filter
+					bind:apps={integrations}
+					appFilter={selected?.name}
+					kind={selectedKind}
+					selected={selectedByKeyboard -
+						inlineScripts?.length -
+						aiLength -
+						filteredWorkspaceItems?.length -
+						topLevelNodes.length}
+					on:pickScript
+					bind:loading
+				/>
+			{/if}
+		{/if}
+	</Scrollable>
+</div>
+
+<style>
+	.shadow-inset::before {
+		box-shadow: inset 25px 0px 12px -30px rgba(94, 129, 172, 0.5);
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		content: '';
+		pointer-events: none;
+	}</style>

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

@@ -0,0 +1,33 @@
+import { SvelteComponent } from "svelte";
+import { type FlowModule } from '../../../gen';
+declare const __propDef: {
+    props: {
+        summary?: string | undefined;
+        filter?: string | undefined;
+        disableAi?: boolean | undefined;
+        preFilter?: "workspace" | "all" | "hub" | undefined;
+        funcDesc: string;
+        index: number;
+        modules: FlowModule[];
+        owners?: string[] | undefined;
+        loading?: boolean | undefined;
+        small?: boolean | undefined;
+        kind: 'trigger' | 'script' | 'preprocessor' | 'failure' | 'approval';
+        selectedKind?: "script" | "failure" | "trigger" | "approval" | "flow" | "preprocessor" | undefined;
+    };
+    events: {
+        pickScript: CustomEvent<any>;
+        pickFlow: CustomEvent<any>;
+        new: CustomEvent<any>;
+        close: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FlowInputsQuickProps = typeof __propDef.props;
+export type FlowInputsQuickEvents = typeof __propDef.events;
+export type FlowInputsQuickSlots = typeof __propDef.slots;
+export default class FlowInputsQuick extends SvelteComponent<FlowInputsQuickProps, FlowInputsQuickEvents, FlowInputsQuickSlots> {
+}
+export {};

package/package/components/flows/content/FlowLoop.svelte

@@ -17,6 +17,7 @@ import { Play } from 'lucide-svelte';
 import FlowLoopIterationPreview from '../../FlowLoopIterationPreview.svelte';
 import FlowModuleDeleteAfterUse from './FlowModuleDeleteAfterUse.svelte';
 import IteratorGen from '../../copilot/IteratorGen.svelte';
+import FlowModuleSkip from './FlowModuleSkip.svelte';
 const { previewArgs, flowStateStore, flowStore } = getContext('FlowEditorContext');
 export let mod;
 export let parentModule;
@@ -190,6 +191,7 @@ $: previewIterationArgs = $flowStateStore[mod.id]?.previewArgs ?? {};
 				<Tabs bind:selected>
 					<!-- <Tab value="retries">Retries</Tab> -->
 					<Tab value="early-stop">Early Stop/Break</Tab>
+					<Tab value="skip">Skip</Tab>
 					<Tab value="suspend">Suspend/Approval/Prompt</Tab>
 					<Tab value="sleep">Sleep</Tab>
 					<Tab value="mock">Mock</Tab>
@@ -208,7 +210,11 @@ $: previewIterationArgs = $flowStateStore[mod.id]?.previewArgs ?? {};
 									<FlowModuleEarlyStop bind:flowModule={mod} />
 								</div>
 							</TabContent>
-
+							<TabContent value="skip" class="flex flex-col flex-1 h-full">
+								<div class="p-4 overflow-y-auto">
+									<FlowModuleSkip bind:flowModule={mod} {parentModule} {previousModule} />
+								</div>
+							</TabContent>
 							<TabContent value="suspend" class="flex flex-col flex-1 h-full">
 								<div class="p-4 overflow-y-auto">
 									<FlowModuleSuspend previousModuleId={previousModule?.id} bind:flowModule={mod} />

package/package/components/flows/content/FlowModuleComponent.svelte

@@ -41,9 +41,11 @@ import { loadSchemaFromModule } from '../flowInfers';
 import { computeFlowStepWarning, initFlowStepWarnings } from '../utils';
 import { debounce } from '../../../utils';
 import { dfs } from '../dfs';
+import FlowModuleSkip from './FlowModuleSkip.svelte';
 const { selectedId, previewArgs, flowStateStore, flowStore, pathStore, saveDraft, flowInputsStore, customUi } = getContext('FlowEditorContext');
 export let flowModule;
 export let failureModule = false;
+export let preprocessorModule = false;
 export let parentModule = undefined;
 export let previousModule;
 export let scriptKind = 'script';
@@ -60,7 +62,7 @@ let websocketAlive = {
     ruff: false,
     shellcheck: false
 };
-let selected = 'inputs';
+let selected = preprocessorModule ? 'test' : 'inputs';
 let advancedSelected = 'retries';
 let advancedRuntimeSelected = 'concurrency';
 let s3Kind = 's3_client';
@@ -310,9 +312,13 @@ function setFlowInput(argName) {
 					</Pane>
 					<Pane bind:size={editorSettingsPanelSize} minSize={20}>
 						<Tabs bind:selected>
-							<Tab value="inputs">Step Input</Tab>
+							{#if !preprocessorModule}
+								<Tab value="inputs">Step Input</Tab>
+							{/if}
 							<Tab value="test">Test this step</Tab>
-							<Tab value="advanced">Advanced</Tab>
+							{#if !preprocessorModule}
+								<Tab value="advanced">Advanced</Tab>
+							{/if}
 						</Tabs>
 						<div
 							class={advancedSelected === 'runtime' ? 'h-[calc(100%-68px)]' : 'h-[calc(100%-34px)]'}
@@ -363,6 +369,7 @@ function setFlowInput(argName) {
 										>
 											Early Stop
 										</Tab>
+										<Tab value="skip" active={Boolean(flowModule.skip_if)}>Skip</Tab>
 										<Tab value="suspend" active={Boolean(flowModule.suspend)}>Suspend</Tab>
 										<Tab value="sleep" active={Boolean(flowModule.sleep)}>Sleep</Tab>
 										<Tab value="mock" active={Boolean(flowModule.mock?.enabled)}>Mock</Tab>
@@ -526,6 +533,8 @@ function setFlowInput(argName) {
 										</div>
 									{:else if advancedSelected === 'early-stop'}
 										<FlowModuleEarlyStop bind:flowModule />
+									{:else if advancedSelected === 'skip'}
+										<FlowModuleSkip bind:flowModule {parentModule} {previousModule} />
 									{:else if advancedSelected === 'suspend'}
 										<div>
 											<FlowModuleSuspend previousModuleId={previousModule?.id} bind:flowModule />

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

@@ -4,6 +4,7 @@ declare const __propDef: {
     props: {
         flowModule: FlowModule;
         failureModule?: boolean | undefined;
+        preprocessorModule?: boolean | undefined;
         parentModule?: FlowModule | undefined;
         previousModule: FlowModule | undefined;
         scriptKind?: "script" | "trigger" | "approval" | undefined;

package/package/components/flows/content/FlowModuleScript.svelte

@@ -53,7 +53,7 @@ export let showDiff = false;
 
 <div class="flex flex-col flex-1 h-full overflow-auto p-2">
 	{#if showDate && date}
-		<span class="text-xs text-tertiary mb-4"><TimeAgo agoOnlyIfRecent withDate {date} /></span>
+		<span class="text-xs text-tertiary mb-4"><TimeAgo agoOnlyIfRecent {date} /></span>
 	{/if}
 	{#if notFound}
 		<div class="text-red-400">script not found at {path} in workspace {$workspaceStore}</div>

package/package/components/flows/content/FlowModuleSkip.svelte

@@ -0,0 +1,69 @@
+<script>import SimpleEditor from '../../SimpleEditor.svelte';
+import Toggle from '../../Toggle.svelte';
+import PropPickerWrapper from '../propPicker/PropPickerWrapper.svelte';
+import Tooltip from '../../Tooltip.svelte';
+import { getContext } from 'svelte';
+import Section from '../../Section.svelte';
+import { getStepPropPicker } from '../previousResults';
+const { flowStateStore, flowStore, previewArgs } = getContext('FlowEditorContext');
+export let flowModule;
+export let parentModule;
+export let previousModule;
+let editor = undefined;
+$: stepPropPicker = getStepPropPicker($flowStateStore, parentModule, previousModule, flowModule.id, $flowStore, $previewArgs, false);
+$: isSkipEnabled = Boolean(flowModule.skip_if);
+</script>
+
+<div class="flex flex-col items-start space-y-2 {$$props.class}">
+	<Section label="Skip" class="w-full">
+		<svelte:fragment slot="header">
+			<Tooltip>
+				If the condition is met, the step will behave as an identity step, passing the previous
+				step's result through unchanged.
+			</Tooltip>
+		</svelte:fragment>
+
+		<Toggle
+			checked={isSkipEnabled}
+			on:change={() => {
+				if (isSkipEnabled && flowModule.skip_if) {
+					flowModule.skip_if = undefined
+				} else {
+					flowModule.skip_if = {
+						expr: 'false'
+					}
+				}
+			}}
+			options={{
+				right: 'Skip step if condition is met'
+			}}
+		/>
+
+		<div class="w-full border p-2 flex flex-col {flowModule.skip_if ? '' : 'bg-surface-secondary'}">
+			{#if flowModule.skip_if}
+				<span class="mt-2 text-xs font-bold">Skip condition expression</span>
+				<div class="border w-full">
+					<PropPickerWrapper
+						notSelectable
+						pickableProperties={stepPropPicker.pickableProperties}
+						on:select={({ detail }) => {
+							editor?.insertAtCursor(detail)
+							editor?.focus()
+						}}
+					>
+						<SimpleEditor
+							bind:this={editor}
+							lang="javascript"
+							bind:code={flowModule.skip_if.expr}
+							class="few-lines-editor"
+							extraLib={stepPropPicker.extraLib}
+						/>
+					</PropPickerWrapper>
+				</div>
+			{:else}
+				<span class="mt-2 text-xs font-bold">Skip condition expression</span>
+				<textarea disabled rows="3" class="min-h-[80px]" />
+			{/if}
+		</div>
+	</Section>
+</div>

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

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+import type { FlowModule } from '../../../gen';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        flowModule: FlowModule;
+        parentModule: FlowModule | undefined;
+        previousModule: FlowModule | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FlowModuleSkipProps = typeof __propDef.props;
+export type FlowModuleSkipEvents = typeof __propDef.events;
+export type FlowModuleSkipSlots = typeof __propDef.slots;
+export default class FlowModuleSkip extends SvelteComponent<FlowModuleSkipProps, FlowModuleSkipEvents, FlowModuleSkipSlots> {
+}
+export {};