windmill-components 1.448.50 → 1.472.2

package/package/components/common/fileUpload/FileUpload.svelte

@@ -2,8 +2,8 @@
 import FileProgressBar from '../FileProgressBar.svelte';
 import Button from '../button/Button.svelte';
 import { sendUserToast } from '../../../toast';
-import { userStore, workspaceStore } from '../../../stores';
-import { HelpersService } from '../../../gen';
+import { workspaceStore } from '../../../stores';
+import { AppService, HelpersService } from '../../../gen';
 import { writable } from 'svelte/store';
 import { Ban, CheckCheck, FileWarning, Files, RefreshCcw, Trash } from 'lucide-svelte';
 import { twMerge } from 'tailwind-merge';
@@ -11,9 +11,13 @@ import { createEventDispatcher, onDestroy } from 'svelte';
 import { emptyString } from '../../../utils';
 export let acceptedFileTypes = ['*'];
 export let allowMultiple = true;
-export let containerText = allowMultiple
-    ? 'Drag and drop files here or click to browse'
-    : 'Drag and drop a file here or click to browse';
+export let allowDelete = true;
+export let folderOnly = false;
+export let containerText = folderOnly
+    ? 'Drag and drop a folder here or click to browse'
+    : allowMultiple
+        ? 'Drag and drop files here or click to browse'
+        : 'Drag and drop a file here or click to browse';
 export let customResourcePath = undefined;
 export let customResourceType = undefined; // when customResourcePath is provided, this should be provided as well. Will default to S3 if not
 export let customClass = '';
@@ -26,21 +30,78 @@ export let workspace = undefined;
 export let fileUploads = writable([]);
 export let appPath = undefined;
 export let disabled = false;
+export let initialValue = undefined;
+init();
+function init() {
+    if (initialValue) {
+        if (!$fileUploads.find((fileUpload) => fileUpload.path === initialValue?.s3)) {
+            $fileUploads = [
+                ...$fileUploads,
+                {
+                    name: initialValue.filename,
+                    size: 0,
+                    progress: 100,
+                    path: initialValue?.s3
+                }
+            ];
+        }
+    }
+}
 export let computeForceViewerPolicies = undefined;
 const dispatch = createEventDispatcher();
 async function handleChange(files) {
-    for (const file of files ?? []) {
-        uploadFileToS3(file, file.name);
+    if (folderOnly) {
+        uniqueFolderPrefix = getRandomFolderPrefix();
+        uploadedFolderRoot = undefined;
+        await Promise.all(files?.map(async (file) => {
+            await uploadFileToS3(file, file.name);
+        }) ?? []);
+        if (uploadedFolderRoot) {
+            dispatch('addition', {
+                path: uniqueFolderPrefix + uploadedFolderRoot,
+                filename: undefined
+            });
+            sendUserToast('Folder uploaded!');
+        }
+    }
+    else {
+        for (const file of files ?? []) {
+            uploadFileToS3(file, file.name);
+        }
     }
 }
 let activeUploads = [];
+function getRandomFolderPrefix() {
+    const now = Date.now();
+    const randomNum = Math.floor(Math.random() * 65536);
+    return `windmill_uploads/upload_${now}_${randomNum}/`;
+}
+let uniqueFolderPrefix = getRandomFolderPrefix();
+let uploadedFolderRoot = undefined;
 async function uploadFileToS3(fileToUpload, fileToUploadKey) {
     if (fileToUpload === undefined || fileToUploadKey === undefined) {
         return;
     }
     let path = undefined;
     let fileExtension = undefined;
-    if (randomFileKey) {
+    if (folderOnly) {
+        const relativePath = fileToUpload.webkitRelativePath || fileToUpload.path;
+        if (!relativePath) {
+            throw new Error('Missing file relative path');
+        }
+        const rootFolder = relativePath.split('/')[0];
+        if (!rootFolder) {
+            throw new Error('Missing root folder');
+        }
+        if (uploadedFolderRoot && rootFolder !== uploadedFolderRoot) {
+            throw new Error('Uploading a file in a different root folder than the previous files');
+        }
+        else {
+            uploadedFolderRoot = rootFolder;
+        }
+        path = uniqueFolderPrefix + relativePath;
+    }
+    else if (randomFileKey) {
         fileExtension = fileToUpload.name.split('.').pop();
         if (emptyString(fileExtension)) {
             fileExtension = undefined;
@@ -60,7 +121,8 @@ async function uploadFileToS3(fileToUpload, fileToUploadKey) {
         progress: 1,
         cancelled: false,
         path: path,
-        file: fileToUpload
+        file: fileToUpload,
+        deleteToken: undefined
     };
     $fileUploads = [...$fileUploads, uploadData];
     // // Use a custom TransformStream to track upload progress
@@ -155,6 +217,9 @@ async function uploadFileToS3(fileToUpload, fileToUploadKey) {
             xhr?.send(fileToUpload);
         }));
         uploadData.path = response.file_key;
+        if (appPath && 'delete_token' in response) {
+            uploadData.deleteToken = response.delete_token;
+        }
     }
     catch (e) {
         console.error(e);
@@ -168,8 +233,10 @@ async function uploadFileToS3(fileToUpload, fileToUploadKey) {
         });
         return;
     }
-    dispatch('addition', { path: uploadData.path, filename: fileToUpload.name });
-    sendUserToast('File upload finished!');
+    if (!folderOnly) {
+        dispatch('addition', { path: uploadData.path, filename: fileToUpload.name });
+        sendUserToast('File uploaded!');
+    }
     uploadData.progress = 100;
     $fileUploads = $fileUploads.map((fileUpload) => {
         if (fileUpload.name === uploadData.name) {
@@ -179,13 +246,27 @@ async function uploadFileToS3(fileToUpload, fileToUploadKey) {
     });
     return;
 }
-async function deleteFile(fileKey) {
-    await HelpersService.deleteS3File({
-        workspace: workspace ?? $workspaceStore,
-        fileKey: fileKey
-    });
-    dispatch('deletion', { path: fileKey });
-    sendUserToast('File deleted!');
+async function deleteFile(fileKey, deleteToken) {
+    try {
+        if (deleteToken) {
+            await AppService.deleteS3FileFromApp({
+                workspace: workspace ?? $workspaceStore,
+                deleteToken: deleteToken
+            });
+        }
+        else {
+            await HelpersService.deleteS3File({
+                workspace: workspace ?? $workspaceStore,
+                fileKey: fileKey
+            });
+        }
+        dispatch('deletion', { path: fileKey });
+        sendUserToast('File deleted!');
+    }
+    catch (err) {
+        console.error(err);
+        sendUserToast('Could not delete file', true);
+    }
 }
 function clearRequests() {
     activeUploads.forEach(({ xhr }) => xhr.abort());
@@ -292,7 +373,7 @@ onDestroy(() => {
 									</Button>
 								{/if}
 
-								{#if fileUpload.progress === 100 && !fileUpload.cancelled && $userStore}
+								{#if fileUpload.progress === 100 && !fileUpload.cancelled && allowDelete && (!appPath || fileUpload.deleteToken != undefined)}
 									<Button
 										size="xs2"
 										color="red"
@@ -303,7 +384,7 @@ onDestroy(() => {
 											)
 
 											if (fileUpload.path) {
-												deleteFile(fileUpload.path)
+												deleteFile(fileUpload.path, fileUpload.deleteToken)
 											}
 											abortUpload(fileUpload.name)
 										}}
@@ -386,6 +467,7 @@ onDestroy(() => {
 		</div>
 	{:else}
 		<FileInput
+			{folderOnly}
 			{disabled}
 			accept={acceptedFileTypes?.join(',')}
 			multiple={allowMultiple}

package/package/components/common/fileUpload/FileUpload.svelte.d.ts

@@ -4,6 +4,8 @@ declare const __propDef: {
     props: {
         acceptedFileTypes?: string[] | undefined;
         allowMultiple?: boolean | undefined;
+        allowDelete?: boolean | undefined;
+        folderOnly?: boolean | undefined;
         containerText?: string | undefined;
         customResourcePath?: string | undefined;
         customResourceType?: 's3' | 'azure_blob' | undefined;
@@ -22,9 +24,14 @@ declare const __propDef: {
             errorMessage?: string | undefined;
             path?: string | undefined;
             file?: File | undefined;
+            deleteToken?: string | undefined;
         }[]> | undefined;
         appPath?: string | undefined;
         disabled?: boolean | undefined;
+        initialValue?: {
+            s3: string;
+            filename: string;
+        } | undefined;
         computeForceViewerPolicies?: (() => {
             allowed_resources: string[];
             allow_user_resources: boolean;

package/package/components/common/index.d.ts

@@ -9,7 +9,6 @@ export { default as DrawerContent } from './drawer/DrawerContent.svelte';
 export { default as Kbd } from './kbd/Kbd.svelte';
 export { default as Menu } from './menu/Menu.svelte';
 export { default as MenuItem } from './menu/MenuItem.svelte';
-export { default as Popup } from './popup/Popup.svelte';
 export { default as SecondsInput } from './seconds/SecondsInput.svelte';
 export { default as Skeleton } from './skeleton/Skeleton.svelte';
 export { default as Tab } from './tabs/Tab.svelte';

package/package/components/common/index.js

@@ -9,7 +9,6 @@ export { default as DrawerContent } from './drawer/DrawerContent.svelte';
 export { default as Kbd } from './kbd/Kbd.svelte';
 export { default as Menu } from './menu/Menu.svelte';
 export { default as MenuItem } from './menu/MenuItem.svelte';
-export { default as Popup } from './popup/Popup.svelte';
 export { default as SecondsInput } from './seconds/SecondsInput.svelte';
 export { default as Skeleton } from './skeleton/Skeleton.svelte';
 export { default as Tab } from './tabs/Tab.svelte';

package/package/components/common/layout/List.svelte.d.ts

@@ -3,7 +3,7 @@ declare const __propDef: {
     props: {
         horizontal?: boolean | undefined;
         gap?: "none" | "sm" | "md" | "lg" | undefined;
-        justify?: "center" | "start" | "end" | "between" | undefined;
+        justify?: "start" | "end" | "center" | "between" | undefined;
         wFull?: boolean | undefined;
         hFull?: boolean | undefined;
     };

package/package/components/common/toggleButton-v2/ToggleButton.svelte

@@ -1,9 +1,7 @@
-<script>import { getContext } from 'svelte';
-import { Tab } from '@rgossiaux/svelte-headlessui';
-import { twMerge } from 'tailwind-merge';
-import Popover from '../../Popover.svelte';
+<script>import { twMerge } from 'tailwind-merge';
+import Tooltip from '../../meltComponents/Tooltip.svelte';
+import { melt } from '@melt-ui/svelte';
 import { Info } from 'lucide-svelte';
-export let value;
 export let label = undefined;
 export let iconOnly = false;
 export let tooltip = undefined;
@@ -16,47 +14,52 @@ export let iconProps = {};
 export let showTooltipIcon = false;
 export let documentationLink = undefined;
 export let id = undefined;
-const { select, selected } = getContext('ToggleButtonGroup');
+export let item;
+export let value;
 </script>
 
-<Popover
-	notClickable
+<Tooltip
 	class={twMerge('flex', disabled ? 'cursor-not-allowed' : 'cursor-pointer')}
 	disablePopup={tooltip === undefined}
 	disappearTimeout={0}
 	{documentationLink}
 >
-	<div {id} class="flex">
-		<Tab
-			{disabled}
-			class={twMerge(
-				' rounded-md transition-all text-xs flex gap-1 flex-row items-center',
-				small ? 'px-1.5 py-0.5 text-2xs' : 'px-2 py-1',
-				light ? 'font-medium' : '',
-				$selected === value
-					? 'bg-surface shadow-md'
-					: 'bg-surface-secondary hover:bg-surface-hover',
-				$$props.class
-			)}
-			on:click={() => select(value)}
-		>
-			{#if icon}
-				<svelte:component
-					this={icon}
-					size={small ? 12 : 14}
-					color={$selected === value ? selectedColor : '#9CA3AF'}
-					{...iconProps}
-				/>
-			{/if}
-			{#if label && !iconOnly}
-				{label}
-			{/if}
-			{#if showTooltipIcon}
-				<Info size={14} class="text-gray-400" />
-			{/if}
-		</Tab>
-	</div>
+	{@const __MELTUI_BUILDER_0__ = $item(value)}
+	<button
+		{id}
+		{disabled}
+		class={twMerge(
+			'group rounded-md transition-all text-xs flex gap-1 flex-row items-center',
+			small ? 'px-1.5 py-0.5 text-2xs' : 'px-2 py-1',
+			light ? 'font-medium' : '',
+			'data-[state=on]:bg-surface data-[state=on]:shadow-md',
+			'bg-surface-secondary hover:bg-surface-hover',
+			$$props.class
+		)}
+		{...__MELTUI_BUILDER_0__} use:__MELTUI_BUILDER_0__.action
+		style={`--selected-color: ${selectedColor}`}
+	>
+		{#if icon}
+			<svelte:component
+				this={icon}
+				size={small ? 12 : 14}
+				{...iconProps}
+				class={twMerge(
+					'text-gray-400',
+					'group-data-[state=on]:text-[var(--selected-color)]',
+					iconProps.class
+				)}
+			/>
+		{/if}
+		{#if label && !iconOnly}
+			{label}
+		{/if}
+		{#if showTooltipIcon}
+			<Info size={14} class="text-gray-400" />
+		{/if}
+	</button>
+
 	<svelte:fragment slot="text">
 		{tooltip}
 	</svelte:fragment>
-</Popover>
+</Tooltip>

package/package/components/common/toggleButton-v2/ToggleButton.svelte.d.ts

@@ -1,8 +1,8 @@
 import { SvelteComponent } from "svelte";
+import { type ToggleGroupElements, type ToggleGroupItemProps } from '@melt-ui/svelte';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        value: any;
         label?: string | undefined;
         iconOnly?: boolean | undefined;
         tooltip?: string | undefined;
@@ -15,6 +15,8 @@ declare const __propDef: {
         showTooltipIcon?: boolean | undefined;
         documentationLink?: string | undefined;
         id?: string | undefined;
+        item: ToggleGroupElements['item'];
+        value: ToggleGroupItemProps;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/common/toggleButton-v2/ToggleButtonGroup.svelte

@@ -1,43 +1,42 @@
-<script context="module">export {};
-</script>
-
-<script>import { createEventDispatcher, setContext } from 'svelte';
-import { writable } from 'svelte/store';
-import { TabGroup, TabList } from '@rgossiaux/svelte-headlessui';
+<script>import { createEventDispatcher } from 'svelte';
 import { twMerge } from 'tailwind-merge';
+import { createSync } from '@melt-ui/svelte';
 export let id = undefined;
-export let selected;
+export let selected = undefined;
 export let noWFull = false;
 export let disabled = false;
 export let tabListClass = '';
+export let allowEmpty = false;
 const dispatch = createEventDispatcher();
-const selectedContent = writable(selected);
-function setSelected(selected) {
-    if ($selectedContent != selected) {
-        selectedContent.set(selected);
-    }
-}
-$: setSelected(selected);
-setContext('ToggleButtonGroup', {
-    selected: selectedContent,
-    select: (value) => {
-        selectedContent.set(value);
-        selected = value;
-        dispatch('selected', value);
+import { createToggleGroup, melt } from '@melt-ui/svelte';
+const { elements: { root, item }, options: { disabled: disabledOption }, states } = createToggleGroup({
+    type: 'single',
+    onValueChange: ({ curr, next }) => {
+        if (next === undefined && !allowEmpty) {
+            return curr;
+        }
+        if (curr !== next) {
+            dispatch('selected', next);
+        }
+        return next;
     }
 });
+$: $disabledOption = disabled;
+const sync = createSync(states);
+$: sync.value(selected, (v) => (selected = v));
 </script>
 
-<TabGroup
-	{id}
+<div
+	{...$root} use:$root.action
 	class={twMerge(
 		`h-8 flex ${noWFull ? '' : 'w-full'} ${disabled ? 'disabled' : ''}`,
-		$$props.class
+		$$props.class,
+		'flex items-center data-[orientation="vertical"]:flex-col'
 	)}
+	aria-label="Toggle button group"
+	{id}
 >
-	<TabList
-		class={twMerge('flex bg-surface-secondary rounded-md p-0.5 gap-1 h-full ', tabListClass)}
-	>
-		<slot />
-	</TabList>
-</TabGroup>
+	<div class={twMerge('flex bg-surface-secondary rounded-md p-0.5 gap-1 h-full ', tabListClass)}>
+		<slot {item} />
+	</div>
+</div>

package/package/components/common/toggleButton-v2/ToggleButtonGroup.svelte.d.ts

@@ -1,17 +1,13 @@
 import { SvelteComponent } from "svelte";
-export type ToggleButtonContext = {
-    selected: Writable<any>;
-    select: (value: any) => void;
-};
-import { type Writable } from 'svelte/store';
 declare const __propDef: {
     props: {
         [x: string]: any;
         id?: string | null | undefined;
-        selected: any;
+        selected?: string | string[] | undefined;
         noWFull?: boolean | undefined;
         disabled?: boolean | undefined;
         tabListClass?: string | undefined;
+        allowEmpty?: boolean | undefined;
     };
     events: {
         selected: CustomEvent<any>;
@@ -19,7 +15,27 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        default: {};
+        default: {
+            item: import("@melt-ui/svelte/internal/helpers").MeltElement<[{
+                update: (updater: import("svelte/store").Updater<string | string[] | undefined>, sideEffect?: ((newValue: string | string[] | undefined) => void) | undefined) => void;
+                set: (this: void, value: string | string[] | undefined) => void;
+                subscribe(this: void, run: import("svelte/store").Subscriber<string | string[] | undefined>, invalidate?: import("svelte/store").Invalidator<string | string[] | undefined> | undefined): import("svelte/store").Unsubscriber;
+                get: () => string | string[] | undefined;
+                destroy?: (() => void) | undefined;
+            }, import("@melt-ui/svelte/internal/helpers").WithGet<import("svelte/store").Writable<boolean>>, import("@melt-ui/svelte/internal/helpers").WithGet<import("svelte/store").Writable<import("@melt-ui/svelte/internal/types").Orientation>>, import("@melt-ui/svelte/internal/helpers").WithGet<import("svelte/store").Writable<"single">>], (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"click" | "keydown">, ([$value, $disabled, $orientation, $type]: [string | string[] | undefined, boolean, import("@melt-ui/svelte/internal/types").Orientation, "single"]) => (props: import("@melt-ui/svelte").ToggleGroupItemProps) => {
+                readonly disabled: true | undefined;
+                readonly pressed: boolean;
+                readonly 'data-orientation': import("@melt-ui/svelte/internal/types").Orientation;
+                readonly 'data-disabled': true | undefined;
+                readonly 'data-state': "on" | "off";
+                readonly 'data-value': string;
+                readonly 'aria-pressed': boolean | undefined;
+                readonly 'aria-checked': boolean | undefined;
+                readonly type: "button";
+                readonly role: "radio" | undefined;
+                readonly tabindex: 0 | -1;
+            }, string>;
+        };
     };
 };
 export type ToggleButtonGroupProps = typeof __propDef.props;

package/package/components/common/toggleButton-v2/ToggleButtonMore.svelte

@@ -1,14 +1,18 @@
-<script>import { getContext } from 'svelte';
-import { Tab } from '@rgossiaux/svelte-headlessui';
-import { twMerge } from 'tailwind-merge';
+<script>import { twMerge } from 'tailwind-merge';
 import Popover from '../../Popover.svelte';
 import DropdownV2 from '../../DropdownV2.svelte';
+import ToggleButton from './ToggleButton.svelte';
 export let disabled = false;
 export let small = false;
 export let light = false;
 export let id = undefined;
+export let item = undefined;
+export let selected = undefined;
 export let togglableItems;
-const { select, selected } = getContext('ToggleButtonGroup');
+function select(v) {
+    console.log('dbg select', v);
+    selected = v;
+}
 let items = togglableItems.map((i) => ({ displayName: i.label, action: () => select(i.value) }));
 function isAnOptionSelected(selected) {
     return togglableItems.some((i) => i.value === selected);
@@ -22,21 +26,16 @@ function isAnOptionSelected(selected) {
 	disappearTimeout={0}
 >
 	<div {id} class="flex">
-		{#if isAnOptionSelected($selected)}
-			<Tab
+		{#if isAnOptionSelected(selected)}
+			<ToggleButton
 				{disabled}
-				class={twMerge(
-					' rounded-md transition-all text-xs flex gap-1 flex-row items-center',
-					small ? 'px-1.5 py-0.5 text-2xs' : 'px-2 py-1',
-					light ? 'font-medium' : '',
-					isAnOptionSelected($selected)
-						? 'bg-surface shadow-md'
-						: 'bg-surface-secondary hover:bg-surface-hover',
-					$$props.class
-				)}
-			>
-				{togglableItems.find((i) => i.value === $selected)?.label}
-			</Tab>
+				value={selected ?? ''}
+				{item}
+				{small}
+				{light}
+				{id}
+				label={togglableItems.find((i) => i.value === selected)?.label}
+			/>
 		{/if}
 		<div class="flex items-center">
 			<DropdownV2 {items} />

package/package/components/common/toggleButton-v2/ToggleButtonMore.svelte.d.ts

@@ -1,11 +1,12 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        [x: string]: any;
         disabled?: boolean | undefined;
         small?: boolean | undefined;
         light?: boolean | undefined;
         id?: string | undefined;
+        item?: any | undefined;
+        selected?: string | undefined;
         togglableItems: {
             label: string;
             value: string;

package/package/components/common/waitTimeWarning/WaitTimeWarning.svelte.d.ts

@@ -3,7 +3,7 @@ declare const __propDef: {
     props: {
         self_wait_time_ms?: number | undefined;
         aggregate_wait_time_ms?: number | undefined;
-        variant?: "alert" | "icon" | "badge" | "badge-self-wait" | undefined;
+        variant?: "icon" | "badge" | "alert" | "badge-self-wait" | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/copilot/CodeCompletionStatus.svelte

@@ -6,7 +6,7 @@ function storeSetting() {
 }
 </script>
 
-{#if $copilotInfo.exists_ai_resource && $copilotInfo.code_completion_enabled}
+{#if $copilotInfo.exists_ai_resource && $copilotInfo.code_completion_model}
 	<Toggle
 		size="xs"
 		bind:checked={$codeCompletionSessionEnabled}