windmill-components 1.309.6 → 1.339.2

package/package/components/apps/components/display/table/utils.js

@@ -39,3 +39,25 @@ export function cellRendererFactory(svelteComponent) {
     }
     return Renderer;
 }
+export function isLinkObject(value) {
+    return value && typeof value === 'object' && 'href' in value && 'label' in value;
+}
+export function defaultCellRenderer(cellRendererType) {
+    if (cellRendererType === 'link') {
+        return (params) => {
+            if (isLinkObject(params.value)) {
+                const value = params.value;
+                return `<a href=${value.href} class="underline" target="_blank">${value.label}</a>`;
+            }
+            else if (params.value) {
+                return `<a href=${params.value} class="underline" target="_blank">${params.value}</a>`;
+            }
+            else {
+                return params.value;
+            }
+        };
+    }
+    else {
+        return undefined;
+    }
+}

package/package/components/apps/components/helpers/DebouncedInput.svelte

@@ -1,4 +1,5 @@
-<script>export let placeholder = 'Search...';
+<script>import { twMerge } from 'tailwind-merge';
+export let placeholder = 'Search...';
 // Using 'any' so 'type="number"' can be passed to the input
 // which should return a number
 export let value;
@@ -20,6 +21,6 @@ function debounce(event) {
 	on:pointerdown|stopPropagation
 	on:keyup={debounce}
 	on:keydown|stopPropagation
-	class={parentClass}
+	class={twMerge(parentClass, 'mb-1 h-8 !rounded-md !shadow-none')}
 	{...$$restProps}
 />

package/package/components/apps/components/helpers/NonRunnableComponent.svelte

@@ -1,6 +1,7 @@
 <script>import { getContext } from 'svelte';
 import InputValue from './InputValue.svelte';
 import InitializeComponent from './InitializeComponent.svelte';
+import RefreshIndicator from './RefreshIndicator.svelte';
 export let componentInput;
 export let id;
 export let result;
@@ -14,6 +15,37 @@ function setOutput(v) {
     // console.log('setnr', id)
     outputs?.result?.set(v, true);
 }
+let loading = false;
+let loadingStates = {};
+let subscriptions = [];
+function updateGlobalLoading() {
+    loading = Object.values(loadingStates).some((state) => state === true);
+}
+function builtSubscriptions(connections) {
+    // If we are rebuilding the subscriptions, we need to unsubscribe from the previous ones
+    if (subscriptions.length > 0) {
+        subscriptions.forEach((unsubscribe) => unsubscribe?.());
+        subscriptions = [];
+        loadingStates = {};
+        loading = false;
+    }
+    connections.forEach((connection) => {
+        const output = $worldStore.outputsById[connection.componentId];
+        if (output?.loading?.subscribe) {
+            const unsubscribe = output.loading.subscribe({
+                id: `loading-${connection.componentId}`,
+                next: (isConnectionLoading) => {
+                    loadingStates[connection.componentId] = isConnectionLoading;
+                    updateGlobalLoading();
+                }
+            }, loadingStates[connection.componentId]);
+            subscriptions.push(unsubscribe);
+        }
+    });
+}
+$: componentInput.type === 'evalv2' &&
+    componentInput.connections &&
+    builtSubscriptions(componentInput.connections);
 $: result != undefined && outputs && setOutput(result);
 </script>
 
@@ -28,6 +60,9 @@ $: result != undefined && outputs && setOutput(result);
 {#if render || hasChildrens}
 	<div class={render ? 'h-full w-full' : 'invisible h-0 overflow-hidden'}>
 		<slot />
+		<div class="flex absolute top-1 right-1 z-50 app-component-refresh-btn">
+			<RefreshIndicator {loading} />
+		</div>
 	</div>
 {:else}
 	<div class="w-full h-full" />

package/package/components/apps/components/helpers/RefreshButton.svelte

@@ -1,17 +1,35 @@
-<script>import { RefreshCw } from 'lucide-svelte';
+<script>import { Button } from '../../../common';
+import { LoaderIcon, RefreshCw } from 'lucide-svelte';
 import { getContext } from 'svelte';
-export let componentId;
+import { twMerge } from 'tailwind-merge';
+import Popover from '../../../Popover.svelte';
+export let id;
 export let loading;
 const { runnableComponents } = getContext('AppViewerContext');
-async function refresh() {
-    await $runnableComponents[componentId]?.cb?.map((cb) => cb());
-}
 </script>
 
-<button
-	on:pointerdown|preventDefault|stopPropagation
-	on:click|preventDefault|stopPropagation={refresh}
-	class="center-center p-1 rounded border bg-surface/60 hover:bg-surface-hover z-10"
->
-	<RefreshCw class={loading ? 'animate-spin' : ''} size={16} />
-</button>
+<Popover>
+	<Button
+		startIcon={{
+			icon: loading ? LoaderIcon : RefreshCw,
+			classes: twMerge(
+				loading ? 'animate-spin text-blue-800' : '',
+				'transition-all text-gray-500 dark:text-white'
+			)
+		}}
+		color="light"
+		size="xs2"
+		btnClasses={twMerge(loading ? ' bg-blue-100 dark:bg-blue-400' : '', 'transition-all')}
+		on:click={() => {
+			$runnableComponents[id]?.cb?.map((cb) => cb())
+		}}
+		iconOnly
+	/>
+	<svelte:fragment slot="text">
+		{#if loading}
+			Refreshing...
+		{:else}
+			Refresh
+		{/if}
+	</svelte:fragment>
+</Popover>

package/package/components/apps/components/helpers/RefreshButton.svelte.d.ts

@@ -1,12 +1,10 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        componentId: string;
+        id: string;
         loading: boolean;
     };
     events: {
-        pointerdown: PointerEvent;
-    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/package/components/apps/components/helpers/RefreshIndicator.svelte

@@ -0,0 +1,19 @@
+<script>import { LoaderIcon } from 'lucide-svelte';
+import Popover from '../../../Popover.svelte';
+export let loading;
+</script>
+
+{#if loading}
+	<Popover>
+		<div class={'bg-blue-100 dark:bg-blue-400 transition-all p-1 rounded-component'}>
+			<LoaderIcon size={14} class="animate-spin text-blue-800 dark:text-white" />
+		</div>
+		<svelte:fragment slot="text">
+			{#if loading}
+				Refreshing...
+			{:else}
+				Refresh
+			{/if}
+		</svelte:fragment>
+	</Popover>
+{/if}

package/package/components/apps/components/helpers/RefreshIndicator.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        loading: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type RefreshIndicatorProps = typeof __propDef.props;
+export type RefreshIndicatorEvents = typeof __propDef.events;
+export type RefreshIndicatorSlots = typeof __propDef.slots;
+export default class RefreshIndicator extends SvelteComponent<RefreshIndicatorProps, RefreshIndicatorEvents, RefreshIndicatorSlots> {
+}
+export {};

package/package/components/apps/components/helpers/ResolveConfig.svelte

@@ -1,4 +1,4 @@
-<script>import { InputValue } from '.';
+<script>import InputValue from './InputValue.svelte';
 export let id;
 export let extraKey = '';
 export let key;

package/package/components/apps/components/helpers/RunnableComponent.svelte

@@ -8,11 +8,11 @@ import { Bug } from 'lucide-svelte';
 import { createEventDispatcher, getContext, onDestroy, onMount } from 'svelte';
 import { computeGlobalContext, eval_like } from './eval';
 import InputValue from './InputValue.svelte';
-import RefreshButton from './RefreshButton.svelte';
-import { selectId } from '../../editor/appUtils';
+import { collectOneOfFields, selectId } from '../../editor/appUtils';
 import ResultJobLoader from '../../../ResultJobLoader.svelte';
 import { userStore } from '../../../../stores';
 import { get } from 'svelte/store';
+import RefreshButton from './RefreshButton.svelte';
 // Component props
 export let id;
 export let fields;
@@ -37,13 +37,14 @@ export let hideRefreshButton = false;
 export let hasChildrens;
 export let allowConcurentRequests = false;
 export let noInitialize = false;
+export let overrideCallback = undefined;
+export let overrideAutoRefresh = false;
 const { worldStore, runnableComponents, workspace, appPath, isEditor, jobs, jobsById, noBackend, errorByComponent, mode, stateId, state, componentControl, initialized, selectedComponent, app, connectingInput, bgRuns } = getContext('AppViewerContext');
 const editorContext = getContext('AppEditorContext');
 const iterContext = getContext('ListWrapperContext');
 const rowContext = getContext('RowWrapperContext');
 const groupContext = getContext('GroupContext');
 const dispatch = createEventDispatcher();
-let donePromise = undefined;
 $runnableComponents = $runnableComponents;
 export function setArgs(value) {
     args = value;
@@ -71,17 +72,33 @@ let currentStaticValues = lazyStaticValues;
 let isBg = id.startsWith('bg_');
 $: isBg && updateBgRuns(loading);
 $: fields && (currentStaticValues = computeStaticValues());
-$: if (!deepEqual(currentStaticValues, lazyStaticValues)) {
-    lazyStaticValues = currentStaticValues;
-    refreshIfAutoRefresh('static changed');
+$: currentStaticValues && refreshOnStaticChange();
+function refreshOnStaticChange() {
+    if (!deepEqual(currentStaticValues, lazyStaticValues)) {
+        lazyStaticValues = currentStaticValues;
+        refreshIfAutoRefresh('static changed');
+    }
 }
+// $: sendUserToast('args' + JSON.stringify(runnableInputValues) + Boolean(extraQueryParams) || args)
 // $: console.log(runnableInputValues)
+let firstRefresh = true;
 $: (runnableInputValues || extraQueryParams || args) &&
     resultJobLoader &&
     refreshIfAutoRefresh('arg changed');
+$: runnableInputValues && dispatch('argsChanged');
 $: refreshOn =
     runnable && runnable.type === 'runnableByName' ? runnable.inlineScript?.refreshOn ?? [] : [];
-function refreshIfAutoRefresh(_src) {
+function refreshIfAutoRefresh(src) {
+    if (firstRefresh) {
+        firstRefresh = false;
+        if (src == 'arg changed' &&
+            args == undefined &&
+            Object.keys(runnableInputValues ?? {}).length == 0 &&
+            Object.keys(extraQueryParams ?? {}).length == 0) {
+            // console.debug(`Skipping refreshing ${id} because ${_src} (first)`)
+            return;
+        }
+    }
     // console.debug(`Triggering refreshing ${id} because ${_src}`)
     const refreshEnabled = autoRefresh && ((recomputeOnInputChanged ?? true) || refreshOn?.length > 0);
     if (refreshEnabled && $initialized.initialized) {
@@ -160,6 +177,7 @@ async function executeComponent(noToast = false, inlineScriptOverride, setRunnab
     let jobId;
     console.debug(`Executing ${id}`);
     if (iterContext && $iterContext.disabled) {
+        callbacks?.done({});
         console.debug(`Skipping execution of ${id} because it is part of a disabled list`);
         return;
     }
@@ -170,6 +188,7 @@ async function executeComponent(noToast = false, inlineScriptOverride, setRunnab
             job = generateNextFrontendJobId();
             addJob(job);
         }
+        console.log('Frontend job started', id);
         let r;
         try {
             r = await eval_like(runnable.inlineScript?.content, computeGlobalContext($worldStore, {
@@ -177,16 +196,16 @@ async function executeComponent(noToast = false, inlineScriptOverride, setRunnab
                 row: rowContext ? $rowContext : undefined,
                 group: groupContext ? $groupContext : undefined
             }), $state, isEditor, $componentControl, $worldStore, $runnableComponents, true);
-            await setResult(r, job, setRunnableJobEditorPanel);
+            await setResult(r, job);
             $state = $state;
         }
         catch (e) {
             sendUserToast(`Error running frontend script ${id}: ` + e.message, true);
             r = { error: { message: e.body ?? e.message } };
-            await setResult(r, job, setRunnableJobEditorPanel);
+            await setResult(r, job);
         }
         loading = false;
-        donePromise?.(r);
+        callbacks?.done(r);
         if (setRunnableJobEditorPanel && editorContext) {
             editorContext.runnableJobEditorPanel.update((p) => {
                 return {
@@ -201,39 +220,56 @@ async function executeComponent(noToast = false, inlineScriptOverride, setRunnab
         if (!noToast) {
             sendUserToast('This app is not connected to a windmill backend, it is a static preview');
         }
-        donePromise?.(undefined);
+        callbacks?.done({});
         return;
     }
     if (runnable?.type === 'runnableByName' && !runnable.inlineScript) {
+        callbacks?.done({});
         return;
     }
     if (!resultJobLoader) {
         console.warn('No test job loader');
+        callbacks?.done({});
         return;
     }
     try {
         jobId = await resultJobLoader?.abstractRun(async () => {
             const nonStaticRunnableInputs = dynamicArgsOverride ?? {};
             const staticRunnableInputs = {};
+            const allowUserResources = [];
             for (const k of Object.keys(fields ?? {})) {
                 let field = fields[k];
                 if (field?.type == 'static' && fields[k]) {
-                    staticRunnableInputs[k] = field.value;
+                    if (isEditor) {
+                        staticRunnableInputs[k] = field.value;
+                    }
                 }
                 else if (field?.type == 'user') {
                     nonStaticRunnableInputs[k] = args?.[k];
+                    if (isEditor && field.allowUserResources) {
+                        allowUserResources.push(k);
+                    }
                 }
                 else if (field?.type == 'eval' || (field?.type == 'evalv2' && inputValues[k])) {
                     nonStaticRunnableInputs[k] = await inputValues[k]?.computeExpr();
+                    if (isEditor && field?.type == 'evalv2' && field.allowUserResources) {
+                        allowUserResources.push(k);
+                    }
                 }
                 else {
+                    if (isEditor && field?.type == 'connected' && field.allowUserResources) {
+                        allowUserResources.push(k);
+                    }
                     nonStaticRunnableInputs[k] = runnableInputValues[k];
                 }
             }
+            const oneOfRunnableInputs = isEditor ? collectOneOfFields(fields, $app) : {};
             const requestBody = {
                 args: nonStaticRunnableInputs,
                 component: id,
-                force_viewer_static_fields: !isEditor ? undefined : staticRunnableInputs
+                force_viewer_static_fields: !isEditor ? undefined : staticRunnableInputs,
+                force_viewer_one_of_fields: !isEditor ? undefined : oneOfRunnableInputs,
+                force_viewer_allow_user_resources: !isEditor ? undefined : allowUserResources
             };
             if (runnable?.type === 'runnableByName') {
                 const { inlineScript } = inlineScriptOverride
@@ -242,7 +278,7 @@ async function executeComponent(noToast = false, inlineScriptOverride, setRunnab
                 if (inlineScript) {
                     requestBody['raw_code'] = {
                         content: inlineScript.content,
-                        language: inlineScript.language,
+                        language: inlineScript.language ?? '',
                         path: inlineScript.path,
                         lock: inlineScript.lock,
                         cache_ttl: inlineScript.cache_ttl
@@ -277,7 +313,7 @@ async function executeComponent(noToast = false, inlineScriptOverride, setRunnab
         let error = e.body ?? e.message;
         updateResult({ error });
         $errorByComponent[id] = { error };
-        donePromise?.({ error });
+        callbacks?.done({ error });
         sendUserToast(error, true);
         loading = false;
     }
@@ -288,7 +324,7 @@ export async function runComponent(noToast = false, inlineScriptOverride, setRun
             await cancellableRun();
         }
         else {
-            console.log('Run component');
+            console.log('Run component', id);
             return await executeComponent(noToast, inlineScriptOverride, setRunnableJobEditorPanel, dynamicArgsOverride, callbacks);
         }
     }
@@ -360,7 +396,7 @@ function updateResult(res) {
     outputs.result?.set(res);
     result = res;
 }
-async function setResult(res, jobId, setRunnableJobEditorPanel) {
+async function setResult(res, jobId) {
     dispatch('resultSet');
     const errors = getResultErrors(res);
     if (errors) {
@@ -370,7 +406,7 @@ async function setResult(res, jobId, setRunnableJobEditorPanel) {
         recordJob(jobId, errors, errors, transformerResult);
         updateResult(res);
         dispatch('handleError', errors);
-        donePromise?.(res);
+        // callbacks?.done(res)
         return;
     }
     const transformerResult = await runTransformer(res);
@@ -386,14 +422,14 @@ async function setResult(res, jobId, setRunnableJobEditorPanel) {
         recordJob(jobId, res, undefined, transformerResult);
         updateResult(transformerResult);
         dispatch('handleError', transformerResult.error);
-        donePromise?.(res);
+        // callbacks?.done(res)
         return;
     }
     updateResult(transformerResult ?? res);
     recordJob(jobId, result, undefined, transformerResult);
     delete $errorByComponent[id];
     dispatch('success', result);
-    donePromise?.(result);
+    // callbacks?.done(res)
 }
 function handleInputClick(e) {
     const event = e;
@@ -401,22 +437,37 @@ function handleInputClick(e) {
 }
 let cancellableRun = undefined;
 onMount(() => {
-    cancellableRun = (inlineScript, setRunnableJobEditorPanel) => {
-        let rejectCb;
-        let p = new Promise((resolve, reject) => {
-            rejectCb = reject;
-            donePromise = resolve;
-            executeComponent(true, inlineScript, setRunnableJobEditorPanel).catch(reject);
-        });
-        p.cancel = () => {
-            resultJobLoader?.cancelJob();
-            loading = false;
-            rejectCb(new Error('Canceled'));
+    if (overrideCallback) {
+        cancellableRun = overrideCallback;
+    }
+    else {
+        cancellableRun = (inlineScript, setRunnableJobEditorPanel) => {
+            let rejectCb;
+            let p = new Promise((resolve, reject) => {
+                rejectCb = reject;
+                executeComponent(true, inlineScript, setRunnableJobEditorPanel, undefined, {
+                    done: (x) => {
+                        resolve(x);
+                    },
+                    cancel: () => {
+                        reject();
+                    },
+                    error: (e) => {
+                        console.error(e);
+                        reject();
+                    }
+                }).catch(reject);
+            });
+            p.cancel = () => {
+                resultJobLoader?.cancelJob();
+                loading = false;
+                rejectCb(new Error('Canceled'));
+            };
+            return p;
         };
-        return p;
-    };
+    }
     $runnableComponents[id] = {
-        autoRefresh: autoRefresh && recomputableByRefreshButton,
+        autoRefresh: (autoRefresh && recomputableByRefreshButton) || overrideAutoRefresh,
         refreshOnStart: refreshOnStart,
         cb: [...($runnableComponents[id]?.cb ?? []), cancellableRun]
     };
@@ -582,7 +633,7 @@ function updateBgRuns(loading) {
 		{/if}
 		{#if render && !initializing && autoRefresh === true && !hideRefreshButton}
 			<div class="flex absolute top-1 right-1 z-50 app-component-refresh-btn">
-				<RefreshButton {loading} componentId={id} />
+				<RefreshButton {loading} {id} />
 			</div>
 		{/if}
 	</div>

package/package/components/apps/components/helpers/RunnableComponent.svelte.d.ts

@@ -1,7 +1,7 @@
 import { SvelteComponent } from "svelte";
 import type { AppInputs, Runnable } from '../../inputType';
 import type { Output } from '../../rx';
-import type { InlineScript } from '../../types';
+import type { CancelablePromise, InlineScript } from '../../types';
 declare const __propDef: {
     props: {
         id: string;
@@ -33,14 +33,16 @@ declare const __propDef: {
         hasChildrens: boolean;
         allowConcurentRequests?: boolean | undefined;
         noInitialize?: boolean | undefined;
+        overrideCallback?: (() => CancelablePromise<void>) | undefined;
+        overrideAutoRefresh?: boolean | undefined;
         setArgs?: ((value: any) => void) | undefined;
         invalidate?: ((key: string, error: string) => void) | undefined;
         validate?: ((key: string) => void) | undefined;
         validateAll?: (() => void) | undefined;
         runComponent?: ((noToast?: boolean, inlineScriptOverride?: InlineScript, setRunnableJobEditorPanel?: boolean, dynamicArgsOverride?: Record<string, any>, callbacks?: {
-            done: (x: any[]) => void;
+            done: (x: any) => void;
             cancel: () => void;
-            error: () => void;
+            error: (e: any) => void;
         } | undefined) => Promise<string | undefined>) | undefined;
     };
     events: {
@@ -48,6 +50,7 @@ declare const __propDef: {
         done: CustomEvent<any>;
         cancel: CustomEvent<any>;
         doneError: CustomEvent<any>;
+        argsChanged: CustomEvent<any>;
         resultSet: CustomEvent<any>;
         handleError: CustomEvent<any>;
         success: CustomEvent<any>;
@@ -67,9 +70,9 @@ export default class RunnableComponent extends SvelteComponent<RunnableComponent
     get validate(): (key: string) => void;
     get validateAll(): () => void;
     get runComponent(): (noToast?: boolean, inlineScriptOverride?: InlineScript | undefined, setRunnableJobEditorPanel?: boolean | undefined, dynamicArgsOverride?: Record<string, any> | undefined, callbacks?: {
-        done: (x: any[]) => void;
+        done: (x: any) => void;
         cancel: () => void;
-        error: () => void;
+        error: (e: any) => void;
     } | undefined) => Promise<string | undefined>;
 }
 export {};

package/package/components/apps/components/helpers/RunnableWrapper.svelte

@@ -6,6 +6,9 @@ import { sendUserToast } from '../../../../toast';
 import InitializeComponent from './InitializeComponent.svelte';
 export let componentInput;
 export let noInitialize = false;
+export let hideRefreshButton = undefined;
+export let overrideCallback = undefined;
+export let overrideAutoRefresh = false;
 export let id;
 export let result = undefined;
 export let initializing = true;
@@ -175,9 +178,11 @@ export async function handleSideEffect(success, errorMessage) {
 		fields={componentInput.fields}
 		bind:result
 		runnable={componentInput.runnable}
-		hideRefreshButton={componentInput.hideRefreshButton}
+		hideRefreshButton={componentInput.hideRefreshButton ?? hideRefreshButton}
 		transformer={componentInput.transformer}
 		{autoRefresh}
+		{overrideCallback}
+		{overrideAutoRefresh}
 		recomputableByRefreshButton={componentInput.autoRefresh ?? true}
 		bind:recomputeOnInputChanged={componentInput.recomputeOnInputChanged}
 		{id}
@@ -191,6 +196,7 @@ export async function handleSideEffect(success, errorMessage) {
 		on:done
 		on:doneError
 		on:cancel
+		on:argsChanged
 		on:resultSet={() => (initializing = false)}
 		on:success={(e) => {
 			onSuccess(e.detail)

package/package/components/apps/components/helpers/RunnableWrapper.svelte.d.ts

@@ -2,10 +2,14 @@ import { SvelteComponent } from "svelte";
 import type { AppInput } from '../../inputType';
 import type { Output } from '../../rx';
 import RunnableComponent from './RunnableComponent.svelte';
+import type { CancelablePromise } from '../../../../gen';
 declare const __propDef: {
     props: {
         componentInput: AppInput | undefined;
         noInitialize?: boolean | undefined;
+        hideRefreshButton?: boolean | undefined;
+        overrideCallback?: (() => CancelablePromise<void>) | undefined;
+        overrideAutoRefresh?: boolean | undefined;
         id: string;
         result?: any;
         initializing?: boolean | undefined;
@@ -117,6 +121,7 @@ declare const __propDef: {
         done: CustomEvent<any>;
         doneError: CustomEvent<any>;
         cancel: CustomEvent<any>;
+        argsChanged: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/package/components/apps/components/inputs/AppDateInput.svelte

@@ -83,7 +83,11 @@ let css = initCss($app.css?.dateinputcomponent, customCss);
 			min={resolvedConfig.minDate}
 			max={resolvedConfig.maxDate}
 			placeholder="Type..."
-			class={twMerge('windmillapp w-full py-1.5 text-sm px-2', css?.input?.class, 'wm-date-input')}
+			class={twMerge(
+				'windmillapp w-full py-1.5 text-sm px-1 app-editor-input',
+				css?.input?.class,
+				'wm-date-input'
+			)}
 			style={css?.input?.style ?? ''}
 		/>
 	{/if}

package/package/components/apps/components/inputs/AppFileInput.svelte

@@ -10,7 +10,7 @@ export let id;
 export let configuration;
 export let customCss = undefined;
 export let render;
-const { app, worldStore, componentControl } = getContext('AppViewerContext');
+const { app, worldStore, componentControl, mode } = getContext('AppViewerContext');
 let acceptedFileTypes = undefined;
 let allowMultiple = undefined;
 let text = undefined;
@@ -36,6 +36,14 @@ $componentControl[id] = {
         fileInput?.clearFiles();
     }
 };
+let files = undefined;
+function preFillFiles() {
+    const data = outputs?.result?.peak();
+    if (data && Array.isArray(data) && data.length > 0) {
+        files = data.map((file) => new File([], file?.name));
+    }
+}
+$: outputs.result && files === undefined && $mode === 'dnd' && preFillFiles();
 </script>
 
 {#each Object.keys(css ?? {}) as key (key)}
@@ -67,7 +75,7 @@ $componentControl[id] = {
 <InitializeComponent {id} />
 
 {#if render}
-	<div class="w-full h-full p-1">
+	<div class="w-full h-full">
 		<FileInput
 			bind:this={fileInput}
 			accept={acceptedFileTypes?.length ? acceptedFileTypes?.join(', ') : undefined}
@@ -80,6 +88,7 @@ $componentControl[id] = {
 			class={twMerge('w-full h-full', css?.container?.class, 'wm-file-input')}
 			style={css?.container?.style}
 			submittedText={submittedFileText}
+			bind:files
 		>
 			{text}
 		</FileInput>