windmill-components 1.208.0 → 1.216.0

package/package/components/apps/editor/contextPanel/ComponentOutput.svelte

@@ -36,7 +36,6 @@ $: subGrids = Array.from({ length: gridItem.data.numberOfSubgrids ?? 0 }).map((_
 			connectOutput(connectingInput, gridItem?.data?.type, gridItem.data.id, detail)
 		}}
 	/>
-
 	<SubGridOutput {name} {expanded} {subGrids} parentId={gridItem.id} />
 	<TableActionsOutput {gridItem} />
 </OutputHeader>

package/package/components/apps/editor/contextPanel/SubGridOutput.svelte

@@ -1,6 +1,5 @@
 <script>import { classNames } from '../../../../utils';
 import { getContext } from 'svelte';
-import { slide } from 'svelte/transition';
 import { connectInput } from '../appUtils';
 import ComponentOutput from './ComponentOutput.svelte';
 export let name = undefined;
@@ -48,7 +47,7 @@ function subscribeToOutput() {
 		{/if}
 
 		{#if selected === index || name !== 'Tabs'}
-			<div transition:slide|local class="border-l">
+			<div class="border-l">
 				{#if items.length > 0}
 					{#each items as subGridItem, index (subGridItem.id)}
 						<ComponentOutput

package/package/components/apps/editor/settingsPanel/OneOfInputSpecsEditor.svelte

@@ -82,6 +82,7 @@ function getValueOfDeprecated(obj) {
 					placeholder={config?.['placeholder']}
 					customTitle={config?.['customTitle']}
 					tooltip={config?.['tooltip']}
+					fileUpload={config?.['fileUpload']}
 				/>
 			{/if}
 		{/each}

package/package/components/apps/editor/settingsPanel/QuickAddColumn.svelte

@@ -21,7 +21,7 @@ function subscribeToAllOutputs(observableOutputs) {
     }
 }
 function updateRemainingColumns(result, columns) {
-    if (result.length > 0) {
+    if (result?.length > 0) {
         const allKeysSet = result.reduce((acc, obj) => {
             Object.keys(obj).forEach((key) => acc.add(key));
             return acc;

package/package/components/apps/types.d.ts

@@ -22,6 +22,8 @@ export type ComponentCssProperty = {
     class?: string;
     style?: string;
     evalClass?: RichConfiguration;
+    quickCss?: readonly string[] | undefined;
+    quickTailwindClasses?: readonly string[] | undefined;
 };
 export type ComponentCustomCSS<T extends keyof typeof components> = Partial<(typeof components)[T]['customCss']>;
 export type Configuration = StaticAppInput | ConnectedAppInput | UserAppInput | RowAppInput | EvalAppInput | EvalV2AppInput | UploadAppInput | ResultAppInput;

package/package/components/apps/utils.d.ts

@@ -29,3 +29,4 @@ export declare const TailwindClassPatterns: {
 };
 export declare function hasTailwindClass(classes: string | undefined, pattern: RegExp): boolean;
 export declare function transformBareBase64IfNecessary(source: string | undefined): string | undefined;
+export declare function getImageDataURL(imageKind: string | undefined, image: string | undefined): string | null;

package/package/components/apps/utils.js

@@ -294,3 +294,18 @@ export function transformBareBase64IfNecessary(source) {
         return `data:application/octet-stream;base64,${source}`;
     }
 }
+export function getImageDataURL(imageKind, image) {
+    if (!imageKind || !image) {
+        return null;
+    }
+    switch (imageKind) {
+        case 'png encoded as base64':
+            return 'data:image/png;base64,' + image;
+        case 'jpeg encoded as base64':
+            return 'data:image/jpeg;base64,' + image;
+        case 'svg encoded as base64':
+            return 'data:image/svg+xml;base64,' + image;
+        default:
+            return image;
+    }
+}

package/package/components/build_workers.js

@@ -1,4 +1,8 @@
 import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
+import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
+import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';
+import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
+import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
 export function buildWorkerDefinition(workerPath, basePath, useModuleWorker) {
     const monWin = self;
     const workerOverrideGlobals = {
@@ -20,30 +24,21 @@ export function buildWorkerDefinition(workerPath, basePath, useModuleWorker) {
     monEnv.workerOverrideGlobals = workerOverrideGlobals;
     const getWorker = (_, label) => {
         console.log('getWorker: workerId: ' + _ + ' label: ' + label);
-        const buildWorker = (globals, label, workerName, editorType) => {
-            globals.workerOptions.name = label;
-            const workerFilename = globals.workerOptions.type === 'module' ? `${workerName}-es.js` : `${workerName}-iife.js`;
-            const workerPathLocal = `${globals.workerPath}/${workerFilename}`;
-            const workerUrl = new URL(workerPathLocal, globals.basePath);
-            console.log(`${editorType}: url: ${workerUrl.href} created from basePath: ${globals.basePath} and file: ${workerPathLocal}`);
-            return new Worker(workerUrl.href, globals.workerOptions);
-        };
         switch (label) {
             case 'template':
             case 'typescript':
             case 'javascript':
-                return buildWorker(workerOverrideGlobals, label, 'tsWorker', 'TS Worker');
+                return new tsWorker();
             case 'html':
             case 'handlebars':
             case 'razor':
-                return buildWorker(workerOverrideGlobals, label, 'htmlWorker', 'HTML Worker');
+                return new htmlWorker();
             case 'css':
-                return new cssWorker();
             case 'scss':
             case 'less':
-                return buildWorker(workerOverrideGlobals, label, 'cssWorker', 'CSS Worker');
+                return new cssWorker();
             case 'json':
-                return buildWorker(workerOverrideGlobals, label, 'jsonWorker', 'JSON Worker');
+                return new jsonWorker();
             case 'graphql':
                 const workerFilename = `graphql.worker.bundle.js`;
                 const workerPathLocal = `${workerOverrideGlobals.workerPath}/${workerFilename}`;
@@ -52,7 +47,7 @@ export function buildWorkerDefinition(workerPath, basePath, useModuleWorker) {
                     name: label
                 });
             default:
-                return buildWorker(workerOverrideGlobals, label, 'editorWorker', 'Editor Worker');
+                return new editorWorker();
         }
     };
     monWin.MonacoEnvironment.getWorker = getWorker;

package/package/components/common/alert/Alert.svelte

@@ -54,7 +54,7 @@ const classes = {
 			<svelte:component this={icons[type]} class={classes[type].iconClass} size={16} />
 		</div>
 
-		<div class="ml-2 w-full">
+		<div class="ml-2 pt-[0.15rem] w-full">
 			<span
 				class={classNames(
 					size === 'sm' ? 'text-sm' : 'text-xs ',
@@ -66,15 +66,17 @@ const classes = {
 					<Tooltip {documentationLink} scale={0.9}>{tooltip}</Tooltip>
 				{/if}
 			</span>
-			<div
-				class={classNames(
-					size === 'sm' ? 'text-sm' : 'text-xs ',
-					'mt-2',
-					classes[type].descriptionClass
-				)}
-			>
-				<slot />
-			</div>
+			{#if $$slots.default}
+				<div
+					class={classNames(
+						size === 'sm' ? 'text-sm' : 'text-xs ',
+						'mt-2',
+						classes[type].descriptionClass
+					)}
+				>
+					<slot />
+				</div>
+			{/if}
 		</div>
 	</div>
 </div>

package/package/components/common/skeleton/Skeleton.svelte

@@ -1,18 +1,23 @@
-<script>import { fade } from 'svelte/transition';
-import { HEIGHT_UNIT } from './model';
+<script>import { HEIGHT_UNIT } from './model';
 import SkeletonElement from './SkeletonElement.svelte';
+import { onMount } from 'svelte';
 export let layout;
 export let loading = true;
 export let overlay = false;
+export let mounted = false;
+onMount(() => {
+    setTimeout(() => {
+        mounted = true;
+    }, 10);
+});
 </script>
 
 {#if loading}
 	<div class="relative flex justify-center">
 		<div
-			in:fade|local={{ duration: 1000 }}
-			class="flex grow flex-col overflow-hidden {overlay
-				? 'absolute w-full h-full z-[1000]'
-				: ''} {$$props.class}"
+			class="flex grow flex-col overflow-hidden transition-[opacity] duration-1000 opacity-0 {mounted
+				? 'opacity-100'
+				: ''} {overlay ? 'absolute w-full h-full z-[1000]' : ''} {$$props.class}"
 		>
 			{#each layout as row}
 				<div class="flex justify-between items-start gap-4">

package/package/components/common/skeleton/Skeleton.svelte.d.ts

@@ -6,6 +6,7 @@ declare const __propDef: {
         layout: SkeletonLayout;
         loading?: boolean | undefined;
         overlay?: boolean | undefined;
+        mounted?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/copilot/CodeCompletionStatus.svelte

@@ -0,0 +1,37 @@
+<script>import { ZapIcon, ZapOffIcon } from 'lucide-svelte';
+import Button from '../common/button/Button.svelte';
+import { codeCompletionLoading, copilotInfo, codeCompletionSessionEnabled } from '../../stores';
+import Popover from '../Popover.svelte';
+function loadCodeCompletionSessinoEnabled() {
+    const stored = localStorage.getItem('codeCompletionSessionEnabled');
+    if (stored) {
+        $codeCompletionSessionEnabled = JSON.parse(stored);
+    }
+}
+function toggleCodeCompletionSessionEnabled() {
+    $codeCompletionSessionEnabled = !$codeCompletionSessionEnabled;
+    localStorage.setItem('codeCompletionSessionEnabled', JSON.stringify($codeCompletionSessionEnabled));
+}
+loadCodeCompletionSessinoEnabled();
+</script>
+
+{#if $copilotInfo.code_completion_enabled}
+	<Popover>
+		<svelte:fragment slot="text"
+			>Click to {$codeCompletionSessionEnabled ? 'disable' : 'enable'} code completion (applies only
+			to you)</svelte:fragment
+		>
+		<Button
+			color="light"
+			loading={$codeCompletionLoading}
+			startIcon={$codeCompletionLoading
+				? undefined
+				: {
+						icon: $codeCompletionSessionEnabled ? ZapIcon : ZapOffIcon
+				  }}
+			on:click={() => {
+				toggleCodeCompletionSessionEnabled()
+			}}
+		/>
+	</Popover>
+{/if}

package/package/components/copilot/CodeCompletionStatus.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type CodeCompletionStatusProps = typeof __propDef.props;
+export type CodeCompletionStatusEvents = typeof __propDef.events;
+export type CodeCompletionStatusSlots = typeof __propDef.slots;
+export default class CodeCompletionStatus extends SvelteComponent<CodeCompletionStatusProps, CodeCompletionStatusEvents, CodeCompletionStatusSlots> {
+}
+export {};

package/package/components/copilot/FlowCopilotDrawer.svelte

@@ -111,7 +111,10 @@ const { drawerStore, modulesStore, currentStepStore } = getContext('FlowCopilotC
 									<div class="w-full text-left font-normal">
 										<div class="text-primary flex-wrap text-sm font-medium">
 											{copilotModule.source === 'hub' && copilotModule.selectedCompletion
-												? copilotModule.selectedCompletion.summary
+												? copilotModule.selectedCompletion.summary +
+												  ' (' +
+												  copilotModule.selectedCompletion.app +
+												  ')'
 												: `Generate "${copilotModule.description}" in ${
 														copilotModule.lang === 'bun' ? 'TypeScript' : 'Python'
 												  }`}
@@ -240,7 +243,7 @@ const { drawerStore, modulesStore, currentStepStore } = getContext('FlowCopilotC
 
 													<div class="text-left font-normal text-sm">
 														<div class="text-primary font-medium">
-															{item.summary ?? ''}
+															{(item.summary ?? '') + ' (' + item['app'] + ')'}
 														</div>
 													</div>
 												</div>

package/package/components/copilot/FlowCopilotStatus.svelte

@@ -112,7 +112,7 @@ $: copilotStatus && copilotPopover?.refresh();
 				variant={'border'}
 				nonCaptureEvent
 			>
-				AI Flow Builder
+				AI
 			</Button>
 		</svelte:fragment>
 		<div class="block text-primary">

package/package/components/copilot/RegexGen.svelte

@@ -0,0 +1,172 @@
+<script>import { Button } from '../common';
+import { getNonStreamingCompletion } from './lib';
+import { sendUserToast } from '../../toast';
+import Popup from '../common/popup/Popup.svelte';
+import { copilotInfo } from '../../stores';
+import { WindmillIcon } from '../icons';
+import { autoPlacement } from '@floating-ui/core';
+import { ExternalLink, HistoryIcon, Wand2 } from 'lucide-svelte';
+import { fade } from 'svelte/transition';
+import { createEventDispatcher } from 'svelte';
+// state
+let funcDesc = '';
+let genLoading = false;
+let input;
+let abortController = undefined;
+let button;
+const dispatch = createEventDispatcher();
+async function onGenerate(closePopup) {
+    if (funcDesc.length <= 0) {
+        return;
+    }
+    savePrompt();
+    try {
+        genLoading = true;
+        abortController = new AbortController();
+        const res = await getNonStreamingCompletion([
+            {
+                role: 'system',
+                content: 'Generate a regex pattern that one can use in a javascript Regex object. Output only the regex itself. The regex should match the following:'
+            },
+            {
+                role: 'user',
+                content: funcDesc
+            }
+        ], abortController);
+        dispatch('gen', { res: res, prompt: funcDesc });
+        closePopup();
+        funcDesc = '';
+    }
+    catch (err) {
+        if (err?.message) {
+            sendUserToast('Failed to generate regex: ' + err.message, true);
+        }
+        else {
+            sendUserToast('Failed to generate regex', true);
+            console.error(err);
+        }
+    }
+    finally {
+        genLoading = false;
+    }
+}
+$: input && setTimeout(() => input?.focus(), 100);
+let promptHistory = JSON.parse(localStorage.getItem('prompts-regex') || '[]');
+function savePrompt() {
+    if (promptHistory.includes(funcDesc)) {
+        return;
+    }
+    promptHistory.unshift(funcDesc);
+    while (promptHistory.length > 5) {
+        promptHistory.pop();
+    }
+    localStorage.setItem('prompts-regex', JSON.stringify(promptHistory));
+}
+function clearPromptHistory() {
+    promptHistory = [];
+    localStorage.setItem('prompts-regex', JSON.stringify(promptHistory));
+}
+</script>
+
+{#if genLoading}
+	<div transition:fade class="fixed z-[4999] inset-0 bg-gray-500/75" />
+{/if}
+
+<Popup
+	floatingConfig={{
+		middleware: [
+			autoPlacement({
+				allowedPlacements: ['bottom-start', 'bottom-end', 'top-start', 'top-end', 'top', 'bottom']
+			})
+		]
+	}}
+	let:close
+>
+	<svelte:fragment slot="button">
+		<Button
+			title="Generate regexes from prompt"
+			btnClasses={'!font-medium ' + (genLoading ? 'z-[5000]' : '')}
+			size="xs"
+			color={genLoading ? 'red' : 'light'}
+			spacingSize="md"
+			startIcon={genLoading ? undefined : { icon: Wand2 }}
+			propagateEvent
+			on:click={genLoading ? () => abortController?.abort() : () => {}}
+			bind:element={button}
+		>
+			{#if genLoading}
+				<WindmillIcon
+					white={true}
+					class="mr-1 text-white"
+					height="16px"
+					width="20px"
+					spin="veryfast"
+				/>
+				Stop
+			{:else}
+				AI
+			{/if}
+		</Button>
+	</svelte:fragment>
+	<div class="block text-primary z-[2000]">
+		{#if $copilotInfo.exists_openai_resource_path}
+			<div class="flex flex-col gap-4">
+				<div class="flex w-96">
+					<input
+						type="text"
+						bind:this={input}
+						bind:value={funcDesc}
+						on:keypress={({ key }) => {
+							if (key === 'Enter' && funcDesc.length > 0) {
+								onGenerate(() => close(input || null))
+							}
+						}}
+						placeholder={'Describe what the regex should do'}
+					/>
+					<Button
+						size="xs"
+						color="blue"
+						buttonType="button"
+						btnClasses="!p-1 !w-[38px] !ml-2"
+						aria-label="Generate"
+						on:click={() => {
+							onGenerate(() => close(input || null))
+						}}
+						disabled={funcDesc.length <= 0}
+						iconOnly
+						startIcon={{ icon: Wand2 }}
+					/>
+				</div>
+				{#if promptHistory.length > 0}
+					<div class="w-96 flex flex-col gap-1">
+						{#each promptHistory as p}
+							<Button
+								size="xs2"
+								color="light"
+								btnClasses="justify-start overflow-x-scroll no-scrollbar"
+								startIcon={{ icon: HistoryIcon, classes: 'shrink-0' }}
+								on:click={() => {
+									funcDesc = p
+								}}>{p}</Button
+							>
+						{/each}
+						<button
+							class="underline text-xs text-start px-2 text-secondary font-normal"
+							on:click={clearPromptHistory}>clear history</button
+						>
+					</div>
+				{/if}
+			</div>
+		{:else}
+			<p class="text-sm">
+				Enable Windmill AI in the <a
+					href="/workspace_settings?tab=openai"
+					target="_blank"
+					class="inline-flex flex-row items-center gap-1"
+				>
+					workspace settings <ExternalLink size={16} />
+				</a>
+			</p>
+		{/if}
+	</div>
+</Popup>

package/package/components/copilot/RegexGen.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        gen: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type RegexGenProps = typeof __propDef.props;
+export type RegexGenEvents = typeof __propDef.events;
+export type RegexGenSlots = typeof __propDef.slots;
+export default class RegexGen extends SvelteComponent<RegexGenProps, RegexGenEvents, RegexGenSlots> {
+}
+export {};

package/package/components/copilot/ScriptFix.svelte

@@ -130,14 +130,7 @@ $: updateSchema(lang, args);
 				floatingConfig={{
 					middleware: [
 						autoPlacement({
-							allowedPlacements: [
-								'bottom-start',
-								'bottom-end',
-								'top-start',
-								'top-end',
-								'top',
-								'bottom'
-							]
+							allowedPlacements: ['bottom-end', 'top-end']
 						})
 					]
 				}}

package/package/components/copilot/ScriptGen.svelte

@@ -13,7 +13,7 @@ import HighlightCode from '../HighlightCode.svelte';
 import LoadingIcon from '../apps/svelte-select/lib/LoadingIcon.svelte';
 import { sleep } from '../../utils';
 import { autoPlacement } from '@floating-ui/core';
-import { Ban, Check, ExternalLink, HistoryIcon, Wand2, X } from 'lucide-svelte';
+import { Ban, Check, ExternalLink, HistoryIcon, Wand2, X, ZapIcon } from 'lucide-svelte';
 import { fade } from 'svelte/transition';
 import { isInitialCode } from '../../script_helpers';
 // props
@@ -101,7 +101,7 @@ function hideDiff() {
     editor?.show();
     diffEditor?.hide();
 }
-$: input?.focus();
+$: input && setTimeout(() => input?.focus(), 100);
 function clear() {
     $generatedCode = '';
 }
@@ -281,10 +281,16 @@ $: $generatedCode && updateScroll();
 				</div>
 			{:else if $copilotInfo.exists_openai_resource_path}
 				<div class="flex flex-col gap-4">
-					<ToggleButtonGroup class="w-auto shrink-0" bind:selected={mode}>
-						<ToggleButton value={'gen'} label="Generate from scratch" small light />
-						<ToggleButton value={'edit'} label="Edit existing code" small light />
-					</ToggleButtonGroup>
+					<div class="flex flex-row justify-between items-center">
+						<ToggleButtonGroup class="w-auto shrink-0" bind:selected={mode}>
+							<ToggleButton value={'gen'} label="Generate from scratch" small light />
+							<ToggleButton value={'edit'} label="Edit existing code" small light />
+						</ToggleButtonGroup>
+
+						<div class="text-[0.6rem] text-secondary opacity-60 flex flex-row items-center gap-0.5">
+							GPT-4 Turbo<ZapIcon size={14} />
+						</div>
+					</div>
 					<div class="flex w-96">
 						<input
 							type="text"
@@ -340,7 +346,7 @@ $: $generatedCode && updateScroll();
 									Context: {lang === 'graphql' ? 'GraphQL' : 'DB'} schema
 								</p>
 								<Tooltip>
-									In order to better generate the script, we pass the selected schema to GPT-4.
+									We pass the selected schema to GPT-4 Turbo for better script generation.
 								</Tooltip>
 							</div>
 							{#if dbSchema.lang !== 'graphql' && (dbSchema.schema?.public || dbSchema.schema?.PUBLIC || dbSchema.schema?.dbo)}

package/package/components/copilot/TestOpenaiKey.svelte

@@ -7,7 +7,7 @@ let loading = false;
 </script>
 
 <Button
-	size="sm"
+	size="xs"
 	variant="contained"
 	color="dark"
 	{disabled}

package/package/components/copilot/completion.js

@@ -1,4 +1,5 @@
 import { getNonStreamingCompletion } from './lib';
+import { codeCompletionLoading } from '../../stores';
 const systemPrompt = 'You are a code completion assistant, return the code that should go inside the <completion></completion> tags. If you add a line break, take into account the indentation of the code. You can also not return anything if you think the code is already complete.';
 const prompt = `complete the following code:
 \`\`\`{language}
@@ -13,6 +14,7 @@ const exampleUser = prompt
 const exampleAssistant = `<completion>print(number)
 		number = number / 4</completion>`;
 export async function editorCodeCompletion(before, after, lang, abortController) {
+    codeCompletionLoading.set(true);
     const messages = [
         {
             role: 'system',
@@ -44,4 +46,7 @@ export async function editorCodeCompletion(before, after, lang, abortController)
             console.log(err);
         }
     }
+    finally {
+        codeCompletionLoading.set(false);
+    }
 }

package/package/components/copilot/flow.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="svelte" />
-import type { Script, FlowModule, HubScriptKind } from '../../gen';
+import { type FlowModule, type HubScriptKind, RawScript, type PathScript, type InputTransform } from '../../gen';
 import type { Writable } from 'svelte/store';
 import type Editor from '../Editor.svelte';
 import type { Drawer } from '../common';
@@ -31,6 +31,16 @@ export type FlowCopilotContext = {
     modulesStore: Writable<FlowCopilotModule[]>;
     currentStepStore: Writable<string | undefined>;
     genFlow: ((i: number, modules: FlowModule[], stepOnly?: boolean) => Promise<void>) | undefined;
+    shouldUpdatePropertyType: Writable<{
+        [key: string]: 'static' | 'javascript' | undefined;
+    }>;
 };
-export declare function stepCopilot(module: FlowCopilotModule, deltaCodeStore: Writable<string>, prevCode: string, prevLang: Script.language | undefined, isFirstAction: boolean, isFirstInLoop: boolean, abortController: AbortController): Promise<string>;
-export declare function glueCopilot(inputs: string[], prevCode: string, prevLang: Script.language | undefined, isFirstInLoop: boolean, abortController: AbortController): Promise<Record<string, string>>;
+export declare function stepCopilot(module: FlowCopilotModule, deltaCodeStore: Writable<string>, workspace: string, pastModule: (FlowModule & {
+    value: RawScript | PathScript;
+}) | undefined, isFirstInLoop: boolean, abortController: AbortController): Promise<string>;
+export declare function glueCopilot(inputs: Record<string, InputTransform>, workspace: string, pastModule: FlowModule & {
+    value: RawScript | PathScript;
+}, isFirstInLoop: boolean, abortController: AbortController): Promise<{
+    inputs: Record<string, string>;
+    allExprs: Record<string, string>;
+}>;