windmill-components 1.394.8 → 1.405.5

package/package/assets/app.css

@@ -145,3 +145,23 @@ svelte-virtual-list-contents > * + * {
 		rgba(255, 69, 58, 0.2) 20px
 	);
 }
+
+.bg-draggedover {
+	background-image: repeating-linear-gradient(
+		-45deg,
+		rgba(0, 0, 128, 0.2),
+		rgba(0, 0, 192, 0.2) 10px,
+		rgba(0, 0, 128, 0.2) 10px,
+		rgba(0, 0, 192, 0.2) 20px
+	);
+}
+
+.bg-draggedover-dark {
+	background-image: repeating-linear-gradient(
+		-45deg,
+		rgba(0, 0, 128, 0.6),
+		rgba(0, 0, 192, 0.6) 10px,
+		rgba(0, 0, 128, 0.6) 10px,
+		rgba(0, 0, 192, 0.6) 20px
+	);
+}

package/package/ata/edgeCases.d.ts

@@ -1,3 +1,2 @@
 /** Converts some of the known global imports to node so that we grab the right info */
 export declare const mapModuleNameToModule: (moduleSpecifier: string) => string;
-export declare function isRelativePath(d: string): boolean;

package/package/ata/edgeCases.js

@@ -1,3 +1,4 @@
+import { isTypescriptRelativePath } from '../relative_imports';
 /** Converts some of the known global imports to node so that we grab the right info */
 export const mapModuleNameToModule = (moduleSpecifier) => {
     // in node repl:
@@ -59,7 +60,7 @@ export const mapModuleNameToModule = (moduleSpecifier) => {
     if (builtInNodeMods.includes(moduleSpecifier.replace('node:', ''))) {
         return 'node';
     }
-    if (isRelativePath(moduleSpecifier)) {
+    if (isTypescriptRelativePath(moduleSpecifier)) {
         return moduleSpecifier;
     }
     // strip module filepath e.g. lodash/identity => lodash
@@ -67,10 +68,3 @@ export const mapModuleNameToModule = (moduleSpecifier) => {
     const moduleName = a.startsWith('@') ? `${a}/${b}` : a;
     return moduleName;
 };
-export function isRelativePath(d) {
-    return (d.startsWith('./') ||
-        d.startsWith('../') ||
-        d.startsWith('/') ||
-        d.startsWith('.../') ||
-        d.startsWith('/'));
-}

package/package/ata/index.js

@@ -1,5 +1,6 @@
+import { isTypescriptRelativePath } from '../relative_imports';
 import { getDTSFileForModuleWithVersion, getFiletreeForModuleWithVersion, getNPMVersionForModuleReference, getNPMVersionsForModule, isOverlimit, limit } from './apis';
-import { isRelativePath, mapModuleNameToModule } from './edgeCases';
+import { mapModuleNameToModule } from './edgeCases';
 /**
  * The function which starts up type acquisition,
  * returns a function which you then pass the initial
@@ -65,7 +66,7 @@ export const setupTypeAcquisition = (config) => {
         })
             .filter((f) => !moduleMap.has(f.raw));
         if (depth == 0) {
-            const relativeDeps = depsToGet.filter((f) => isRelativePath(f.raw));
+            const relativeDeps = depsToGet.filter((f) => isTypescriptRelativePath(f.raw));
             relativeDeps.forEach(async (f) => {
                 let path = f.raw.startsWith('/')
                     ? f.raw
@@ -80,7 +81,7 @@ export const setupTypeAcquisition = (config) => {
             });
         }
         depsToGet.forEach((dep) => moduleMap.set(dep.raw, { state: 'loading' }));
-        depsToGet = depsToGet.filter((f) => !isRelativePath(f.raw));
+        depsToGet = depsToGet.filter((f) => !isTypescriptRelativePath(f.raw));
         if (depsToGet.length === 0) {
             return [];
         }

package/package/common.d.ts

@@ -96,6 +96,6 @@ export type Meta = {
 type Enumerate<N extends number, Acc extends number[] = []> = Acc['length'] extends N ? Acc[number] : Enumerate<N, [...Acc, Acc['length']]>;
 /** An inclusive range of integer numbers */
 export type IntRange<F extends number, T extends number> = F | Exclude<Enumerate<T>, Enumerate<F>> | T;
-export declare function pathToMeta(path: string): Meta;
+export declare function pathToMeta(path: string, hideUser: boolean): Meta;
 export declare function prettyLanguage(lang: string): string;
 export {};

package/package/common.js

@@ -38,7 +38,7 @@ export function mergeSchema(schema, enum_payload = {}) {
     }
     return new_schema;
 }
-export function pathToMeta(path) {
+export function pathToMeta(path, hideUser) {
     const splitted = path.split('/');
     let ownerKind;
     if (splitted[0] == 'g') {
@@ -53,7 +53,7 @@ export function pathToMeta(path) {
     else {
         console.error('Not recognized owner:' + splitted[0]);
         return {
-            ownerKind: 'user',
+            ownerKind: hideUser ? 'folder' : 'user',
             owner: '',
             name: ''
         };

package/package/components/ApiConnectForm.svelte

@@ -53,6 +53,7 @@ let error = '';
 let rawCode = '';
 let viewJsonSchema = false;
 $: rawCode && parseJson();
+$: textFileContent && parseTextFileContent();
 function switchTab(asJson) {
     viewJsonSchema = asJson;
     if (asJson) {
@@ -60,6 +61,9 @@ function switchTab(asJson) {
     }
     else {
         parseJson();
+        if (resourceTypeInfo?.format_extension) {
+            textFileContent = args.content;
+        }
     }
 }
 $: resourceType == 'postgresql' && isSupabaseAvailable();
@@ -89,6 +93,12 @@ function parseConnectionString(close) {
     }
 }
 let rawCodeEditor = undefined;
+let textFileContent;
+function parseTextFileContent() {
+    args = {
+        content: textFileContent
+    };
+}
 </script>
 
 {#if !notFound}
@@ -167,13 +177,29 @@ let rawCodeEditor = undefined;
 	{#if !emptyString(error)}<span class="text-red-400 text-xs mb-1 flex flex-row-reverse"
 			>{error}</span
 		>{:else}<div class="py-2" />{/if}
-	<SimpleEditor
-		bind:this={rawCodeEditor}
-		autoHeight
-		lang="json"
-		bind:code={rawCode}
-		fixedOverflowWidgets={false}
-	/>
+	<div class="h-full w-full border p-1 rounded">
+		<SimpleEditor
+			bind:this={rawCodeEditor}
+			autoHeight
+			lang="json"
+			bind:code={rawCode}
+			fixedOverflowWidgets={false}
+		/>
+	</div>
+{:else if resourceTypeInfo?.format_extension}
+	<h5 class="mt-4 inline-flex items-center gap-4">
+		File content ({resourceTypeInfo.format_extension})
+	</h5>
+	<div class="py-2" />
+	<div class="h-full w-full border p-1 rounded">
+		<SimpleEditor
+			bind:this={rawCodeEditor}
+			autoHeight
+			lang={resourceTypeInfo.format_extension}
+			bind:code={textFileContent}
+			fixedOverflowWidgets={false}
+		/>
+	</div>
 {:else}
 	<SchemaForm
 		onlyMaskPassword

package/package/components/AppConnectLightweightResourcePicker.svelte

@@ -0,0 +1,66 @@
+<script>import { base } from '$app/paths';
+import AppConnectInner from './AppConnectInner.svelte';
+import DarkModeObserver from './DarkModeObserver.svelte';
+import { Button } from './common';
+import { workspaceStore } from '../stores';
+import { onMount } from 'svelte';
+export let resourceType = undefined;
+export let workspace;
+export let express = false;
+let step = 1;
+let disabled = false;
+let isGoogleSignin = false;
+let manual = true;
+let appConnect = undefined;
+let darkMode = false;
+if (workspace) {
+    $workspaceStore = workspace;
+}
+onMount(async () => {
+    if (resourceType) {
+        appConnect?.open(resourceType, express);
+    }
+});
+</script>
+
+<DarkModeObserver bind:darkMode />
+
+<div>
+	<div class="flex flex-row-reverse w-full">
+		<div class="flex gap-2">
+			{#if step > 2}
+				<Button variant="border" on:click={appConnect?.back}>Back</Button>
+			{/if}
+
+			{#if isGoogleSignin}
+				<button {disabled} on:click={appConnect?.next}>
+					<img
+						class="h-10 w-auto object-contain"
+						src={darkMode ? base + '/google_signin_dark.png' : base + '/google_signin_light.png'}
+						alt="Google sign-in"
+					/>
+				</button>
+			{:else}
+				<Button {disabled} on:click={appConnect?.next}>
+					{#if step == 2 && !manual}
+						Connect
+					{:else if step == 1}
+						Next
+					{:else}
+						Save
+					{/if}
+				</Button>
+			{/if}
+		</div>
+	</div>
+	<AppConnectInner
+		bind:this={appConnect}
+		bind:step
+		bind:resourceType
+		bind:isGoogleSignin
+		bind:disabled
+		bind:manual
+		on:error
+		on:refresh
+	/>
+</div>

package/package/components/AppConnectLightweightResourcePicker.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        resourceType?: string | undefined;
+        workspace: string;
+        express?: boolean | undefined;
+    };
+    events: {
+        error: CustomEvent<any>;
+        refresh: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AppConnectLightweightResourcePickerProps = typeof __propDef.props;
+export type AppConnectLightweightResourcePickerEvents = typeof __propDef.events;
+export type AppConnectLightweightResourcePickerSlots = typeof __propDef.slots;
+export default class AppConnectLightweightResourcePicker extends SvelteComponent<AppConnectLightweightResourcePickerProps, AppConnectLightweightResourcePickerEvents, AppConnectLightweightResourcePickerSlots> {
+}
+export {};

package/package/components/ArgInput.svelte

@@ -67,6 +67,7 @@ export let order = undefined;
 export let editor = undefined;
 export let orderEditable = false;
 export let shouldDispatchChanges = false;
+export let noDefaultOnSelectFirst = false;
 export let helperScript = undefined;
 export let otherArgs = {};
 let oneOfSelected = undefined;
@@ -218,7 +219,8 @@ function testRegex(pattern, value) {
     }
 }
 function onKeyDown(e) {
-    if ((e.ctrlKey || e.metaKey) && e.key == 'Enter') {
+    if ((e.ctrlKey || e.metaKey) &&
+        (e.key == 'Enter' || e.key == 'c' || e.key == 'v' || e.key == 'x')) {
         return;
     }
     e.stopPropagation();
@@ -494,11 +496,14 @@ $: shouldDispatchChanges && debounced(value);
 			{:else if inputCat == 'resource-object' && (resourceTypes == undefined || (format.split('-').length > 1 && resourceTypes.includes(format.substring('resource-'.length))))}
 				<ObjectResourceInput
 					{defaultValue}
-					selectFirst
+					selectFirst={!noDefaultOnSelectFirst}
 					{disablePortal}
 					{format}
 					bind:value
 					bind:editor
+					on:clear={() => {
+						defaultValue = null
+					}}
 					{showSchemaExplorer}
 				/>
 			{:else if inputCat == 'resource-object' && format.split('-').length > 1 && format
@@ -542,7 +547,8 @@ $: shouldDispatchChanges && debounced(value);
 							randomFileKey={true}
 							on:addition={(evt) => {
 								value = {
-									s3: evt.detail?.path ?? ''
+									s3: evt.detail?.path ?? '',
+									filename: evt.detail?.filename ?? ''
 								}
 							}}
 							on:deletion={(evt) => {
@@ -763,7 +769,7 @@ $: shouldDispatchChanges && debounced(value);
 				</div>
 			{:else if inputCat == 'resource-string'}
 				<ResourcePicker
-					selectFirst
+					selectFirst={noDefaultOnSelectFirst}
 					{disablePortal}
 					bind:value
 					initialValue={defaultValue}

package/package/components/ArgInput.svelte.d.ts

@@ -57,6 +57,7 @@ declare const __propDef: {
         editor?: SimpleEditor | undefined;
         orderEditable?: boolean | undefined;
         shouldDispatchChanges?: boolean | undefined;
+        noDefaultOnSelectFirst?: boolean | undefined;
         helperScript?: {
             type: 'inline';
             path?: string | undefined;

package/package/components/CenteredModal.svelte

@@ -5,6 +5,7 @@ import LoginPageHeader from './LoginPageHeader.svelte';
 export let subtitle = undefined;
 export let title = 'Windmill';
 export let disableLogo = false;
+export let large = false;
 setLicense();
 </script>
 
@@ -20,7 +21,9 @@ setLicense();
 		{/if}
 
 		<div
-			class="border rounded-md shadow-md bg-surface w-full max-w-[640px] p-4 sm:py-8 sm:px-10 mb-6 md:mb-20 z-10"
+			class="border rounded-md shadow-md bg-surface w-full {large
+				? 'max-w-5xl'
+				: 'max-w-[640px]'} p-4 sm:py-8 sm:px-10 mb-6 md:mb-20 z-10"
 		>
 			<div class="mb-10">
 				<h1 class="text-center text-primary">

package/package/components/CenteredModal.svelte.d.ts

@@ -4,6 +4,7 @@ declare const __propDef: {
         subtitle?: string | undefined;
         title?: string | undefined;
         disableLogo?: boolean | undefined;
+        large?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/CustomPopover.svelte

@@ -59,7 +59,7 @@ $: focusEl && focusEl?.focus();
 	</button>
 {/if}
 {#if showTooltip && !disablePopup}
-	<Portal>
+	<Portal name="custom-popover">
 		<!-- svelte-ignore a11y-no-static-element-interactions -->
 		<div
 			use:popperContent={popperOptions}

package/package/components/DateInput.svelte

@@ -6,6 +6,7 @@ export let autofocus = false;
 export let minDate = undefined;
 export let maxDate = undefined;
 export let dateFormat = 'dd-MM-yyyy';
+export let disabled = false;
 let date = computeDate(value);
 const dispatch = createEventDispatcher();
 const defaultDateFormat = 'dd-MM-yyyy';
@@ -60,6 +61,7 @@ let randomId = 'datetarget-' + Math.random().toString(36).substring(7);
 <div class="flex flex-row gap-1 items-center w-full" id={randomId} on:pointerdown on:focus>
 	<!-- svelte-ignore a11y-autofocus -->
 	<input
+		{disabled}
 		type="date"
 		bind:value={date}
 		{autofocus}

package/package/components/DateInput.svelte.d.ts

@@ -6,6 +6,7 @@ declare const __propDef: {
         minDate?: string | undefined;
         maxDate?: string | undefined;
         dateFormat?: string | undefined;
+        disabled?: boolean | undefined;
     };
     events: {
         pointerdown: PointerEvent;

package/package/components/DefaultScripts.svelte

@@ -5,10 +5,13 @@ import Drawer from './common/drawer/Drawer.svelte';
 import DrawerContent from './common/drawer/DrawerContent.svelte';
 import DefaultScriptsInner from './DefaultScriptsInner.svelte';
 let drawer;
+export let placement = 'left';
+export let size = 'xs2';
+export let noText = false;
 </script>
 
 {#if $userStore?.is_admin || $userStore?.is_super_admin}
-	<Drawer bind:this={drawer} placement="left">
+	<Drawer bind:this={drawer} {placement}>
 		<DrawerContent title="Edit Default Scripts" on:close={drawer.closeDrawer}>
 			<DefaultScriptsInner />
 		</DrawerContent>
@@ -17,8 +20,10 @@ let drawer;
 		on:click={drawer?.openDrawer}
 		startIcon={{ icon: SettingsIcon }}
 		color="light"
-		size="xs2"
+		{size}
 		btnClasses="!text-tertiary"
-		variant="contained">defaults</Button
+		variant="contained"
 	>
+		{noText ? '' : 'defaults'}
+	</Button>
 {/if}

package/package/components/DefaultScripts.svelte.d.ts

@@ -1,6 +1,10 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
-    props: Record<string, never>;
+    props: {
+        placement?: "right" | "left" | undefined;
+        size?: "xs3" | "xs2" | undefined;
+        noText?: boolean | undefined;
+    };
     events: {
         [evt: string]: CustomEvent<any>;
     };

package/package/components/DefaultScriptsInner.svelte

@@ -4,6 +4,7 @@ import { flip } from 'svelte/animate';
 import Toggle from './Toggle.svelte';
 import { defaultScriptLanguages } from '../scripts';
 import Alert from './common/alert/Alert.svelte';
+export let small = false;
 $: langs = computeLangs($defaultScripts);
 function computeLangs(defaultScripts) {
     const allLangs = Object.keys(defaultScriptLanguages);
@@ -31,24 +32,32 @@ async function changePosition(i, up) {
 }
 </script>
 
-<Alert title="Global to workspace" type="info" class="mb-4">
+<Alert title="Global to workspace" type="info" class="mb-4" size={small ? 'xs' : 'sm'}>
 	This setting is only available to admins and will affect all users in the workspace.
 </Alert>
-<div class="h-full w-full flex-col gap-2 flex">
+<div class="h-full w-full flex-col {small ? 'gap-0' : 'gap-2'} flex">
 	{#each langs as lang, i (lang)}
 		<div
 			animate:flip={{ duration: 300 }}
-			class="w-full p-2 rounded border border-seconadry grid grid-cols-3"
-			><h3>{lang}</h3>
+			class="w-full p-2 rounded {small
+				? ''
+				: 'border border-secondary'} grid grid-cols-3 items-center"
+			><h3 class={small ? 'text-xs font-medium justify-center' : ''}>{lang}</h3>
 			<div>
 				{#if i > 0}
-					<button on:click={() => changePosition(i ?? 0, true)} class="text-lg mr-2">
+					<button
+						on:click={() => changePosition(i ?? 0, true)}
+						class={small ? 'mr-2 text-secondary text-sm' : 'text-lg mr-2'}
+						title="Move up"
+					>
 						&uparrow;</button
 					>
 				{/if}
 				{#if i < langs.length - 1}
-					<button on:click={() => changePosition(i ?? 0, false)} class="text-lg mr-2"
-						>&downarrow;</button
+					<button
+						on:click={() => changePosition(i ?? 0, false)}
+						class={small ? 'mr-2 text-secondary text-sm' : 'text-lg mr-2'}
+						title="Move down">&downarrow;</button
 					>
 				{/if}</div
 			>

package/package/components/DefaultScriptsInner.svelte.d.ts

@@ -1,6 +1,8 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
-    props: Record<string, never>;
+    props: {
+        small?: boolean | undefined;
+    };
     events: {
         [evt: string]: CustomEvent<any>;
     };

package/package/components/Dev.svelte

@@ -25,13 +25,16 @@ import Toggle from './Toggle.svelte';
 import { setLicense } from '../enterpriseUtils';
 import { workspacedOpenai } from './copilot/lib';
 import { pickScript } from './flows/flowStateUtils';
+import { approximateFindPythonRelativePath, isTypescriptRelativePath, parseTypescriptDeps } from '../relative_imports';
+import Tooltip from './Tooltip.svelte';
 $: token = $page.url.searchParams.get('wm_token') ?? undefined;
 $: workspace = $page.url.searchParams.get('workspace') ?? undefined;
 $: themeDarkRaw = $page.url.searchParams.get('activeColorTheme');
 $: themeDark = themeDarkRaw == '2' || themeDarkRaw == '4';
 $: if (token) {
     OpenAPI.WITH_CREDENTIALS = true;
-    OpenAPI.TOKEN = $page.url.searchParams.get('wm_token');
+    OpenAPI.TOKEN = token;
+    loadUser();
 }
 let flowCopilotContext = {
     drawerStore: writable(undefined),
@@ -125,7 +128,7 @@ let useLock = false;
 let lockChanges = false;
 let timeout = undefined;
 let loadingCodebaseButton = false;
-let lastBundleCommandId = '';
+let lastCommandId = '';
 const el = (event) => {
     // sendUserToast(`Received message from parent ${event.data.type}`, true)
     if (event.data.type == 'runTest') {
@@ -137,11 +140,19 @@ const el = (event) => {
         replaceScript(event.data);
     }
     else if (event.data.type == 'testBundle') {
-        if (event.data.id == lastBundleCommandId) {
+        if (event.data.id == lastCommandId) {
             testBundle(event.data.file, event.data.isTar);
         }
         else {
-            sendUserToast(`Bundle received ${lastBundleCommandId} was obsolete, ignoring`, true);
+            sendUserToast(`Bundle received ${lastCommandId} was obsolete, ignoring`, true);
+        }
+    }
+    else if (event.data.type == 'testPreviewBundle') {
+        if (event.data.id == lastCommandId && currentScript) {
+            testJobLoader.runPreview(currentScript.path, event.data.file, currentScript.language, args, currentScript.tag, useLock ? currentScript.lock : undefined);
+        }
+        else {
+            sendUserToast(`Bundle received ${lastCommandId} was obsolete, ignoring`, true);
         }
     }
     else if (event.data.type == 'testBundleError') {
@@ -176,7 +187,7 @@ onMount(() => {
             repeat: e.repeat,
             shiftKey: e.shiftKey
         };
-        if (obj.ctrlKey && obj.key == 'a') {
+        if ((obj.ctrlKey || obj.metaKey) && obj.key == 'a') {
             e.stopPropagation();
             return;
         }
@@ -260,6 +271,7 @@ function connectWs() {
         console.error(e);
     }
 }
+let typescriptBundlePreviewMode = false;
 function runTest() {
     if (mode == 'script') {
         if (!currentScript) {
@@ -267,12 +279,18 @@ function runTest() {
         }
         if (currentScript.isCodebase) {
             loadingCodebaseButton = true;
-            lastBundleCommandId = Math.random().toString(36).substring(7);
-            window.parent?.postMessage({ type: 'testBundle', id: lastBundleCommandId }, '*');
+            lastCommandId = Math.random().toString(36).substring(7);
+            window.parent?.postMessage({ type: 'testBundle', id: lastCommandId }, '*');
         }
         else {
-            //@ts-ignore
-            testJobLoader.runPreview(currentScript.path, currentScript.content, currentScript.language, args, currentScript.tag, useLock ? currentScript.lock : undefined);
+            if (relativePaths.length > 0 && typescriptBundlePreviewMode) {
+                lastCommandId = Math.random().toString(36).substring(7);
+                window.parent?.postMessage({ type: 'testPreviewBundle', external: ['!/*'], id: lastCommandId }, '*');
+            }
+            else {
+                //@ts-ignore
+                testJobLoader.runPreview(currentScript.path, currentScript.content, currentScript.language, args, currentScript.tag, useLock ? currentScript.lock : undefined);
+            }
         }
     }
     else {
@@ -298,15 +316,27 @@ async function onKeyDown(event) {
     else if ((event.ctrlKey || event.metaKey) && event.code === 'KeyX') {
         document.execCommand('cut');
     }
+    else if ((event.ctrlKey || event.metaKey) && event.code === 'KeyV') {
+        event.preventDefault();
+        document.execCommand('paste');
+    }
 }
+let relativePaths = [];
 let lastPath = undefined;
 async function replaceScript(lastEdit) {
     currentScript = lastEdit;
     if (lastPath !== lastEdit.path) {
         schema = emptySchema();
+        relativePaths = [];
     }
     try {
         await inferArgs(lastEdit.language, lastEdit.content, schema);
+        if (lastEdit?.language == 'bun') {
+            relativePaths = await parseTypescriptDeps(lastEdit.content).filter(isTypescriptRelativePath);
+        }
+        else if (lastEdit?.language == 'python3') {
+            relativePaths = approximateFindPythonRelativePath(lastEdit.content);
+        }
         schema = schema;
         lastPath = lastEdit.path;
         validCode = true;
@@ -372,7 +402,8 @@ setContext('FlowEditorContext', {
     saveDraft: () => { },
     initialPath: '',
     flowInputsStore: writable({}),
-    customUi: {}
+    customUi: {},
+    insertButtonOpen: writable(false)
 });
 $: updateFlow($flowStore);
 let lastSent = undefined;
@@ -429,7 +460,7 @@ async function inferModuleArgs(selectedIdStore) {
 
 <main class="h-screen w-full">
 	{#if mode == 'script'}
-		<div class="flex flex-col h-full">
+		<div class="flex flex-col min-h-full overflow-auto">
 			<div class="absolute top-0 left-2">
 				<DarkModeToggle bind:darkMode bind:this={darkModeToggle} forcedDarkMode={false} />
 			</div>
@@ -458,6 +489,32 @@ async function inferModuleArgs(selectedIdStore) {
 					options={{ left: 'Infer lockfile', right: 'Use current lockfile' }}
 				/>
 			</div>
+			{#if (currentScript?.language == 'bun' || currentScript?.language == 'python3') && currentScript?.content != undefined}
+				{#if relativePaths.length > 0}
+					<div class="flex flex-row-reverse py-1">
+						{#if currentScript?.language == 'bun'}
+							<Toggle
+								size="xs"
+								bind:checked={typescriptBundlePreviewMode}
+								options={{
+									left: '',
+									right: 'bundle relative paths for preview',
+									rightTooltip:
+										'(Beta) Instead of only sending the current file for preview and rely on already deployed code for the common logic, bundle all code that is imported in relative paths'
+								}}
+							/>
+						{:else if currentScript?.language == 'python3'}
+							<div class="text-xs text-yellow-500"
+								>relative imports detected<Tooltip
+									>Beware that when using relative imports, the code used in preview for those is
+									the one that is already deployed. If you make update to the common logic, you will
+									need to `wmill sync push` to see it reflected in the preview runs.</Tooltip
+								></div
+							>
+						{/if}
+					</div>
+				{/if}
+			{/if}
 			<div class="flex justify-center pt-1">
 				{#if testIsLoading}
 					<Button on:click={testJobLoader?.cancelJob} btnClasses="w-full" color="red" size="xs">

package/package/components/DisplayResult.svelte

@@ -774,7 +774,7 @@ let seeS3PreviewFileFromList = '';
 			</DrawerContent>
 		</Drawer>
 
-		<Portal>
+		<Portal name="s3filepicker">
 			<S3FilePicker bind:this={s3FileViewer} readOnlyMode={true} />
 		</Portal>
 	{/if}