windmill-components 1.542.5 → 1.555.0

package/package/components/DropdownV2.svelte

@@ -14,7 +14,8 @@ import Button from './common/button/Button.svelte';
 import { twMerge } from 'tailwind-merge';
 import { triggerableByAI } from '../actions/triggerableByAI.svelte';
 import { untrack } from 'svelte';
-let { aiId = undefined, aiDescription = undefined, items = [], disabled = false, placement = 'bottom-end', usePointerDownOutside = false, closeOnOtherDropdownOpen = true, fixedHeight = true, hidePopup = false, open = $bindable(false), customWidth = undefined, customMenu = false, class: classNames = undefined, buttonReplacement, menu } = $props();
+import { fly } from 'svelte/transition';
+let { aiId = undefined, aiDescription = undefined, items = [], disabled = false, placement = 'bottom-end', usePointerDownOutside = false, closeOnOtherDropdownOpen = true, fixedHeight = true, hidePopup = false, open = $bindable(false), customWidth = undefined, customMenu = false, class: classNames = undefined, enableFlyTransition = false, buttonReplacement, menu } = $props();
 let buttonEl = $state(undefined);
 const { elements: { menu: menuEl, item, trigger }, states, ids: { menu: dropdownId } } = createDropdownMenu({
     positioning: {
@@ -102,7 +103,12 @@ async function getMenuElements() {
 </button>
 
 {#if open && !hidePopup}
-	<div {...$menuEl} use:$menuEl.action data-menu class="z-[6000] transition-all duration-100">
+	<div
+		{...$menuEl} use:$menuEl.action
+		data-menu
+		class="z-[6000] transition-all duration-100"
+		transition:fly={{ duration: enableFlyTransition ? 100 : 0, y: -16 }}
+	>
 		{#if customMenu}
 			{@render menu?.()}
 		{:else}

package/package/components/DropdownV2.svelte.d.ts

@@ -14,6 +14,7 @@ interface Props {
     customWidth?: number | undefined;
     customMenu?: boolean;
     class?: string | undefined;
+    enableFlyTransition?: boolean;
     buttonReplacement?: import('svelte').Snippet;
     menu?: import('svelte').Snippet;
 }

package/package/components/DynamicInput.svelte

@@ -25,12 +25,14 @@ import {} from '../utils';
 import { deepEqual } from 'fast-equals';
 import { untrack } from 'svelte';
 let { value = $bindable(), helperScript, format, otherArgs: otherArgs } = $props();
-const [inputType, entrypoint] = format.includes('-') ? format.split('-', 2) : [format, ''];
-const isMultiple = inputType === 'dynmultiselect';
-const isSelect = inputType === 'dynselect' || inputType === 'dynmultiselect';
-if (isMultiple && value === undefined) {
-    value = [];
-}
+let [inputType, entrypoint] = $derived(format.includes('-') ? format.split('-', 2) : [format, '']);
+let isMultiple = $derived(inputType === 'dynmultiselect');
+let isSelect = $derived(inputType === 'dynselect' || inputType === 'dynmultiselect');
+$effect.pre(() => {
+    if (isMultiple && value === undefined) {
+        value = [];
+    }
+});
 let resultJobLoader = $state();
 let _items = usePromise(getItemsFromOptions, { clearValueOnRefresh: false });
 let items = $derived(_items.value);
@@ -68,15 +70,13 @@ async function getItemsFromOptions() {
                 reject(error);
             }
         };
-        helperScript?.type == 'inline'
-            ? resultJobLoader?.runPreview(helperScript?.path ?? 'NO_PATH', helperScript.code, helperScript.lang, { ...otherArgs, filterText, _ENTRYPOINT_OVERRIDE: entrypoint }, undefined, undefined, undefined, cb)
-            : resultJobLoader?.runScriptByHash(helperScript?.hash ?? 'NO_HASH', { ...otherArgs, filterText, _ENTRYPOINT_OVERRIDE: entrypoint }, cb);
+        resultJobLoader?.runDynamicInputScript(entrypoint, helperScript, { ...otherArgs, filterText, _ENTRYPOINT_OVERRIDE: entrypoint }, cb);
     });
 }
 let neverLoaded = $state(true);
 $effect(() => {
     if (_items.value && value !== undefined && isSelect) {
-        if (isMultiple && Array.isArray(value)) {
+        if (isMultiple && Array.isArray(value) && Array.isArray(_items.value)) {
             const availableValues = new Set(_items.value.map((x) => x.value));
             const filteredValue = value.filter((v) => availableValues.has(v));
             if (filteredValue.length !== value.length) {

package/package/components/EditableSchemaForm.svelte

@@ -82,7 +82,7 @@ function alignOrderWithProperties(schema) {
     let index = 0;
     let hasChanged = false;
     for (let k of properties) {
-        if (schema.properties[k].type === 'object' && schema.properties[k].properties) {
+        if (schema.properties[k]?.type === 'object' && schema.properties[k].properties) {
             hasChanged = hasChanged || alignOrderWithProperties(schema.properties[k]);
         }
         if (!norder.includes(k)) {
@@ -113,8 +113,8 @@ let opened = $state(untrack(() => keys[0]));
 function computeSelected(property) {
     if (!opened)
         return '';
-    if (property.type !== 'object')
-        return property.type;
+    if (property?.type !== 'object')
+        return property?.type;
     if (property.format === 'resource-s3_object')
         return 'S3';
     if (property.format?.startsWith('dynselect-'))
@@ -223,7 +223,7 @@ $effect(() => {
 let dynamicFunctions = $derived(Object.entries(schema?.properties ?? {})
     .filter(([_, property]) => {
     const props = property;
-    return props.type === 'object' && DynamicInput.isDynInputFormat(props.format);
+    return props?.type === 'object' && DynamicInput.isDynInputFormat(props.format);
 })
     .map(([fieldName, _]) => fieldName.replace(/\s+/g, '_')));
 const DYNAMIC_OPTIONS = [
@@ -234,11 +234,11 @@ let typeOptions = $state([
     ['String', 'string'],
     ['Number', 'number'],
     ['Integer', 'integer'],
-    ['Object', 'object'],
+    ['Boolean', 'boolean'],
     ['Resource', 'resource'],
+    ['Object', 'object'],
     ['OneOf', 'oneOf'],
     ['Array', 'array'],
-    ['Boolean', 'boolean'],
     ['S3', 'S3']
 ]);
 function initDynFn(lang) {
@@ -246,6 +246,11 @@ function initDynFn(lang) {
     return dynamicFunctions.map((functionName) => generateFn(functionName)).join('');
 }
 function updateDynCode(functionName, lang = 'bun') {
+    if ((lang == 'bun' && dynCode?.includes(`function ${functionName}`)) ||
+        (lang == 'python3' && dynCode?.includes(`def ${functionName}`))) {
+        // Don't add the function if it already exists
+        return;
+    }
     const generateFn = DynamicInput.getGenerateTemplateFn(lang);
     const code = generateFn(functionName);
     dynCode = dynCode ? dynCode.concat(code) : code;
@@ -315,7 +320,7 @@ let dndType = $state(generateRandomString());
 								}
 							}}
 							helperScript={{
-								type: 'inline',
+								source: 'inline',
 								code: dynCode!,
 								lang: dynLang!
 							}}
@@ -395,7 +400,7 @@ let dndType = $state(generateRandomString());
 				{:else}
 					<!-- WIP -->
 					{#if jsonEnabled && customUi?.jsonOnly != true}
-						<div class="w-full p-3 flex gap-4 justify-end items-center">
+						<div class="w-full px-3 flex gap-4 justify-end items-center">
 							{#if addPropertyInEditorTab}
 								<AddPropertyV2
 									bind:schema
@@ -414,8 +419,8 @@ let dndType = $state(generateRandomString());
 									label="JSON View"
 									size="xs"
 									options={{
-										right: 'JSON editor',
-										rightTooltip:
+										left: 'JSON editor',
+										leftTooltip:
 											'Arguments can be edited either using the wizard, or by editing their JSON Schema.'
 									}}
 									lightMode
@@ -508,7 +513,8 @@ let dndType = $state(generateRandomString());
 
 											{#if !uiOnly}
 												<button
-													class="rounded-full p-1 text-gray-500 bg-white
+													class="delete-schema-field-button
+													rounded-full p-1 text-gray-500 bg-white
 				duration-200 hover:bg-gray-600 focus:bg-gray-600 hover:text-white dark:bg-gray-700 dark:text-white dark:hover:bg-gray-800"
 													aria-label="Clear"
 													onclick={() => {
@@ -525,7 +531,7 @@ let dndType = $state(generateRandomString());
 													{#if typeof args == 'object' && schema?.properties[argName]}
 														<PropertyEditor
 															bind:description={schema.properties[argName].description}
-															type={schema.properties[argName].type}
+															type={schema.properties[argName]?.type}
 															bind:oneOf={schema.properties[argName].oneOf}
 															bind:pattern={schema.properties[argName].pattern}
 															bind:enum_={schema.properties[argName].enum}
@@ -574,6 +580,15 @@ let dndType = $state(generateRandomString());
 																						nullable: undefined,
 																						required: undefined
 																					}
+
+																					if (
+																						isDynMultiselect &&
+																						args &&
+																						!Array.isArray(args?.[argName])
+																					) {
+																						args[argName] = []
+																					}
+
 																					if (isS3) {
 																						schema.properties[argName] = {
 																							...emptyProperty,
@@ -668,7 +683,7 @@ let dndType = $state(generateRandomString());
 																	{itemPicker}
 																	bind:nullable={schema.properties[argName].nullable}
 																	bind:disabled={schema.properties[argName].disabled}
-																	type={schema.properties[argName].type}
+																	type={schema.properties[argName]?.type}
 																	bind:oneOf={schema.properties[argName].oneOf}
 																	bind:format={schema.properties[argName].format}
 																	contentEncoding={schema.properties[argName].contentEncoding}

package/package/components/Editor.svelte

@@ -17,7 +17,7 @@ import { MonacoLanguageClient } from 'monaco-languageclient';
 import { toSocket, WebSocketMessageReader, WebSocketMessageWriter } from 'vscode-ws-jsonrpc';
 import { CloseAction, ErrorAction, RequestType } from 'vscode-languageclient';
 import { MonacoBinding } from 'y-monaco';
-import { dbSchemas, copilotInfo, codeCompletionSessionEnabled, lspTokenStore, formatOnSave, vimMode, relativeLineNumbers } from '../stores';
+import { dbSchemas, codeCompletionSessionEnabled, lspTokenStore, formatOnSave, vimMode, relativeLineNumbers } from '../stores';
 import { editorConfig, updateOptions } from '../editorUtils';
 import { createHash as randomHash } from '../editorLangUtils';
 import { workspaceStore } from '../stores';
@@ -47,6 +47,7 @@ import { aiChatManager } from './copilot/chat/AIChatManager.svelte';
 import { getDbSchemas } from './apps/components/display/dbtable/utils';
 import { PYTHON_PREPROCESSOR_MODULE_CODE, TS_PREPROCESSOR_MODULE_CODE } from '../script_helpers';
 import { setMonacoTypescriptOptions } from './monacoLanguagesOptions';
+import { copilotInfo } from '../aiStore';
 // import EditorTheme from './EditorTheme.svelte'
 let divEl = $state(null);
 let editor = $state(null);

package/package/components/EditorSettings.svelte

@@ -5,7 +5,7 @@ import RelativeLineNumbers from './RelativeLineNumbers.svelte';
 import { Button } from './common';
 import CodeCompletionStatus from './copilot/CodeCompletionStatus.svelte';
 import Popover from './meltComponents/Popover.svelte';
-export let customUi = {};
+let { customUi = {} } = $props();
 </script>
 
 {#if customUi?.autoformatting != false || customUi?.vimMode != false || customUi?.aiCompletion != false}
@@ -14,7 +14,7 @@ export let customUi = {};
 		usePointerDownOutside
 		contentClasses="flex flex-col gap-y-2 p-4"
 	>
-		<svelte:fragment slot="trigger">
+		{#snippet trigger()}
 			{#if customUi.editorSettings != false}
 				<Button
 					btnClasses="text-tertiary"
@@ -26,9 +26,9 @@ export let customUi = {};
 					title="Editor settings"
 				/>
 			{/if}
-		</svelte:fragment>
+		{/snippet}
 
-		<svelte:fragment slot="content">
+		{#snippet content()}
 			{#if customUi?.autoformatting != false}
 				<div>
 					<FormatOnSave />
@@ -49,6 +49,6 @@ export let customUi = {};
 					<CodeCompletionStatus />
 				</div>
 			{/if}
-		</svelte:fragment>
+		{/snippet}
 	</Popover>
 {/if}

package/package/components/EditorSettings.svelte.d.ts

@@ -1,21 +1,7 @@
 import type { EditorBarUi } from './custom_ui';
-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 EditorSettings: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     customUi?: EditorBarUi;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type EditorSettings = InstanceType<typeof EditorSettings>;
+}
+declare const EditorSettings: import("svelte").Component<Props, {}, "">;
+type EditorSettings = ReturnType<typeof EditorSettings>;
 export default EditorSettings;

package/package/components/ErrorOrRecoveryHandler.svelte

@@ -12,7 +12,7 @@ import MultiSelect from './select/MultiSelect.svelte';
 import { FlowService, JobService, ScriptService, WorkspaceService } from '../gen';
 import { inferArgs } from '../infer';
 import { hubBaseUrlStore } from '../stores';
-import { CheckCircle2, Loader2, RotateCw, XCircle, RefreshCcw } from 'lucide-svelte';
+import { CheckCircle2, Loader2, RotateCw, XCircle } from 'lucide-svelte';
 import { hubPaths } from '../hub';
 import { isCloudHosted } from '../cloud';
 const slackRecoveryHandler = hubPaths.slackRecoveryHandler;
@@ -24,9 +24,8 @@ const teamsSuccessHandler = hubPaths.teamsSuccessHandler;
 let { errorOrRecovery, isEditable, toggleText = 'Enable', showScriptHelpText = false, handlerSelected = $bindable('custom'), handlerPath = $bindable(), handlerExtraArgs = $bindable(), customScriptTemplate, customHandlerKind = $bindable('script'), customTabTooltip, } = $props();
 let customHandlerSchema = $state();
 let slackHandlerSchema = $state();
-let isFetching = $state(false);
-let teams_channels = $state([]);
 let teams_team_name = $state(undefined);
+let teams_team_id = $state(undefined);
 let workspaceConnectedToSlack = $state(undefined);
 let workspaceConnectedToTeams = $state(undefined);
 let connectionTestJob = $state();
@@ -42,7 +41,6 @@ async function loadSlackResources() {
     }
 }
 async function loadTeamsResources() {
-    isFetching = true;
     const settings = await WorkspaceService.getSettings({ workspace: $workspaceStore });
     if (!emptyString(settings.teams_team_name) && !emptyString(settings.teams_team_id)) {
         workspaceConnectedToTeams = true;
@@ -52,11 +50,8 @@ async function loadTeamsResources() {
     }
     if (workspaceConnectedToTeams) {
         teams_team_name = settings.teams_team_name;
-        teams_channels = await WorkspaceService.listAvailableTeamsChannels({
-            workspace: $workspaceStore
-        });
+        teams_team_id = settings.teams_team_id;
     }
-    isFetching = false;
 }
 async function sendMessage(channel, platform) {
     const testJobFunction = platform === 'slack'
@@ -447,24 +442,23 @@ $effect(() => {
 				<ChannelSelector
 					containerClass="flex-grow"
 					minWidth="200px"
-					placeholder="Select Teams channel"
-					channels={teams_channels}
+					placeholder="Search Teams channels"
+					teamId={teams_team_id}
 					bind:selectedChannel={
 						() =>
 							handlerExtraArgs['channel']
-								? teams_channels.find((ch) => ch.channel_id === handlerExtraArgs['channel'])
+								? {
+										channel_id: handlerExtraArgs['channel'],
+										channel_name: handlerExtraArgs['channel_name']
+									}
 								: undefined,
-						(channel) => (handlerExtraArgs['channel'] = channel?.channel_id)
+						(channel) => {
+							handlerExtraArgs['channel'] = channel?.channel_id;
+							handlerExtraArgs['channel_name'] = channel?.channel_name;
+						}
 					}
+					onError={(e) => sendUserToast('Failed to load channels: ' + e.message, true)}
 				/>
-				<div class="flex-shrink-0">
-					<button
-						onclick={loadTeamsResources}
-						class="flex items-center gap-1 p-1.5 rounded hover:bg-surface-hover focus:bg-surface-hover"
-					>
-						<RefreshCcw size={16} class={isFetching ? 'animate-spin' : ''} />
-					</button>
-				</div>
 			</div>
 		</div>
 		<div class="flex flex-row gap-2 pb-4">

package/package/components/FakeMonacoPlaceHolder.svelte

@@ -1,7 +1,7 @@
 <!-- Used to avoid height jitter when loading monaco asynchronously -->
 
 <script lang="ts">import { getOS } from '../utils';
-let { code, autoheight = false, lineNumbersWidth = 51, lineNumbersOffset = 0, class: className = '', fontSize = 14 } = $props();
+let { code, autoheight = false, lineNumbersWidth = 51, lineNumbersOffset = 0, class: className = '', showNumbers = true, fontSize = 14 } = $props();
 // https://github.com/microsoft/vscode/blob/baa2dad3cdacd97ac02eff0604984faf1167ff1e/src/vs/editor/common/config/editorOptions.ts#L5421
 const DEFAULT_WINDOWS_FONT_FAMILY = "Consolas, 'Courier New', monospace";
 const DEFAULT_MAC_FONT_FAMILY = "Menlo, Monaco, 'Courier New', monospace";
@@ -48,7 +48,9 @@ let [editorWidth, editorHeight] = $derived([
 					class="margin-view-overlays"
 					role="presentation"
 					aria-hidden="true"
-					style="position: absolute; font-family: {fontFamily}; font-weight: normal; font-size: {fontSize}px; font-feature-settings: 'liga' 0, 'calt' 0; font-variation-settings: normal; line-height: {lineHeight}px; letter-spacing: 0px; width: {lineNumbersWidth}px; height: 4893px;"
+					style="position: absolute; font-family: {fontFamily}; font-weight: normal; font-size: {fontSize}px; font-feature-settings: 'liga' 0, 'calt' 0; font-variation-settings: normal; line-height: {lineHeight}px; letter-spacing: 0px; width: {lineNumbersWidth}px; height: 4893px; display: {!showNumbers
+						? 'none'
+						: 'block'};"
 				>
 					{#each lines as _, i}
 						<div style="top:{lineHeight * i}px;height:{lineHeight}px;">

package/package/components/FakeMonacoPlaceHolder.svelte.d.ts

@@ -3,6 +3,7 @@ type Props = {
     autoheight?: boolean;
     lineNumbersWidth?: number;
     lineNumbersOffset?: number;
+    showNumbers?: boolean;
     class?: string;
     fontSize?: number;
 };

package/package/components/FieldHeader.svelte

@@ -38,17 +38,15 @@ export let simpleTooltipIconClass = '';
 	{/if}
 
 	{#if displayType}
-		{#if format && !format.startsWith('resource') && !format.startsWith('jsonschema-')}
-			<span class="text-xs italic ml-2 text-tertiary dark:text-indigo-400">
+		<span class="text-xs italic ml-2 text-hint">
+			{#if format && !format.startsWith('resource') && !format.startsWith('jsonschema-')}
 				{format}
-			</span>
-		{:else}
-			<span class="text-xs italic ml-2 text-tertiary dark:text-indigo-400">
+			{:else}
 				{type ?? 'any'}{contentEncoding && contentEncoding != ''
 					? `, encoding: ${contentEncoding}`
 					: ''}
-			</span>
-		{/if}
+			{/if}
+		</span>
 	{/if}
 
 	{#if !emptyString(simpleTooltip)}

package/package/components/FirstStepInputs.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">import { createEventDispatcher, onDestroy, getContext, untrack } from 'svelte';
-import { getFirstStepSchema } from './flows/flowStore';
+import { getFirstStepSchema } from './flows/flowStore.svelte';
 import { twMerge } from 'tailwind-merge';
 import { Alert } from './common';
 import FlowModuleSchemaItemViewer from './flows/map/FlowModuleSchemaItemViewer.svelte';

package/package/components/FlowHistoryJobPicker.svelte

@@ -7,8 +7,10 @@ import { JobService } from '../gen';
 export let path;
 export let selected = undefined;
 export let selectInitial = false;
+export let loading = false;
 const dispatch = createEventDispatcher();
 async function loadInitial() {
+    loading = true;
     let jobs = await JobService.listJobs({
         workspace: $workspaceStore,
         scriptPathExact: path,
@@ -24,6 +26,7 @@ async function loadInitial() {
     else {
         dispatch('nohistory');
     }
+    loading = false;
 }
 $: $workspaceStore && loadInitial();
 </script>

package/package/components/FlowHistoryJobPicker.svelte.d.ts

@@ -15,6 +15,7 @@ declare const FlowHistoryJobPicker: $$__sveltets_2_IsomorphicComponent<{
     path: string;
     selected?: string | undefined;
     selectInitial?: boolean;
+    loading?: boolean;
 }, {
     select: CustomEvent<any>;
     unselect: CustomEvent<any>;

package/package/components/FlowJobResult.svelte

@@ -7,11 +7,11 @@ let { waitingForExecutor = false, result, result_stream, logs, col = false, noBo
 
 <div
 	class:border={!noBorder}
-	class="grid {!col
-		? 'grid-cols-2'
-		: 'grid-rows-2 max-h-screen'} shadow border border-tertiary-inverse grow overflow-hidden"
+	class="{!col
+		? 'grid grid-cols-2'
+		: 'flex flex-col max-h-screen gap-4'} shadow border border-tertiary-inverse grow overflow-hidden"
 >
-	<div class="bg-surface {col ? '' : 'max-h-80'} p-1 overflow-auto relative">
+	<div class="bg-surface {col ? 'max-h-1/2 grow' : 'max-h-80'} p-1 overflow-auto relative">
 		<span class="text-tertiary">Result</span>
 		{#if result !== undefined || result_stream !== undefined}
 			<DisplayResult {workspaceId} {jobId} {filename} {result} {result_stream} growVertical />
@@ -21,7 +21,7 @@ let { waitingForExecutor = false, result, result_stream, logs, col = false, noBo
 			<div class="text-gray-400">No result (result is undefined)</div>
 		{/if}
 	</div>
-	<div class="overflow-auto {col ? '' : 'max-h-80'} relative">
+	<div class="overflow-auto {col ? 'grow' : 'max-h-80'} relative">
 		{#if aiAgentStatus}
 			<AiAgentLogViewer {...aiAgentStatus} {workspaceId} />
 		{:else}

package/package/components/FlowLogRow.svelte

@@ -17,7 +17,7 @@ function handleClick() {
 >
 	<button
 		class={twMerge(
-			'py-1 leading-tight w-full flex items-center justify-left text-xs text-tertiary hover:text-primary ',
+			'py-1 leading-tight w-full flex items-center justify-left text-xs text-tertiary hover:text-primary hover:bg-surface-hover ',
 			isCurrent(id) ? 'bg-surface-hover text-primary' : '',
 			className
 		)}
@@ -44,7 +44,7 @@ function handleClick() {
 		</div>
 	</button>
 
-	{#if isExpanded(id) || !isCollapsible}
+	{#if isExpanded(id, isRunning) || !isCollapsible}
 		<div class="my-1 transition-all duration-200 ease-in-out">
 			<div class="pl-4">
 				{@render children()}