windmill-components 1.493.10 → 1.501.5

package/package/components/details/EmailTriggerConfigSection.svelte.d.ts

@@ -1,17 +1,4 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const EmailTriggerConfigSection: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     token?: string;
     isFlow?: boolean;
     hash?: string | undefined;
@@ -19,8 +6,7 @@ declare const EmailTriggerConfigSection: $$__sveltets_2_IsomorphicComponent<{
     userSettings: any;
     emailDomain?: string | null;
     email?: string;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type EmailTriggerConfigSection = InstanceType<typeof EmailTriggerConfigSection>;
+}
+declare const EmailTriggerConfigSection: import("svelte").Component<Props, {}, "email" | "token">;
+type EmailTriggerConfigSection = ReturnType<typeof EmailTriggerConfigSection>;
 export default EmailTriggerConfigSection;

package/package/components/details/createAppFromScript.d.ts

@@ -54,7 +54,7 @@ export declare function createAppFromScript(path: string, schema: Record<string,
                     style: string;
                 };
             };
-            actions: never[];
+            actions: undefined;
             numberOfSubgrids: number;
             id: string;
             panes?: undefined;
@@ -162,6 +162,10 @@ export declare function createAppFromScript(path: string, schema: Record<string,
                     disabled: {
                         type: string;
                         expr: string;
+                        connections: {
+                            componentId: string;
+                            id: string;
+                        }[];
                     };
                     beforeIcon: {
                         type: string;
@@ -479,7 +483,7 @@ export declare function createAppFromScript(path: string, schema: Record<string,
                         style: string;
                     };
                 };
-                actions: never[];
+                actions: undefined;
                 horizontalAlignment: string;
                 verticalAlignment: string;
                 id: string;
@@ -518,12 +522,12 @@ export declare function createAppFromScript(path: string, schema: Record<string,
                     };
                     text?: undefined;
                 };
-                actions: never[];
                 menuItems: never[];
                 horizontalAlignment: string;
                 verticalAlignment: string;
                 id: string;
                 componentInput?: undefined;
+                actions?: undefined;
             };
             id: string;
         })[];
@@ -567,7 +571,6 @@ export declare function createAppFromFlow(path: string, schema: Record<string, a
             };
             numberOfSubgrids: number;
             id: string;
-            actions?: undefined;
         };
         id: string;
     } | {
@@ -596,7 +599,6 @@ export declare function createAppFromFlow(path: string, schema: Record<string, a
                     style: string;
                 };
             };
-            actions: never[];
             numberOfSubgrids: number;
             id: string;
             panes?: undefined;
@@ -704,6 +706,10 @@ export declare function createAppFromFlow(path: string, schema: Record<string, a
                     disabled: {
                         type: string;
                         expr: string;
+                        connections: {
+                            componentId: string;
+                            id: string;
+                        }[];
                     };
                     beforeIcon: {
                         type: string;
@@ -1022,7 +1028,6 @@ export declare function createAppFromFlow(path: string, schema: Record<string, a
                         style: string;
                     };
                 };
-                actions: never[];
                 horizontalAlignment: string;
                 verticalAlignment: string;
                 id: string;
@@ -1061,7 +1066,6 @@ export declare function createAppFromFlow(path: string, schema: Record<string, a
                     };
                     text?: undefined;
                 };
-                actions: never[];
                 menuItems: never[];
                 horizontalAlignment: string;
                 verticalAlignment: string;

package/package/components/details/createAppFromScript.js

@@ -54,7 +54,7 @@ export function createAppFromScript(path, schema) {
                             style: ''
                         }
                     },
-                    actions: [],
+                    actions: undefined,
                     numberOfSubgrids: 1,
                     id: 'topbar'
                 },
@@ -145,8 +145,14 @@ export function createAppFromScript(path, schema) {
                                 value: false
                             },
                             disabled: {
-                                type: 'eval',
-                                expr: '!c.valid'
+                                type: 'evalv2',
+                                expr: '!c.valid',
+                                connections: [
+                                    {
+                                        componentId: 'c',
+                                        id: 'valid'
+                                    }
+                                ]
                             },
                             beforeIcon: {
                                 type: 'static',
@@ -478,7 +484,7 @@ export function createAppFromScript(path, schema) {
                                 style: ''
                             }
                         },
-                        actions: [],
+                        actions: undefined,
                         horizontalAlignment: 'left',
                         verticalAlignment: 'center',
                         id: 'title'
@@ -511,7 +517,6 @@ export function createAppFromScript(path, schema) {
                                 class: ''
                             }
                         },
-                        actions: [],
                         menuItems: [],
                         horizontalAlignment: 'right',
                         verticalAlignment: 'center',
@@ -599,7 +604,6 @@ export function createAppFromFlow(path, schema) {
                             style: ''
                         }
                     },
-                    actions: [],
                     numberOfSubgrids: 1,
                     id: 'topbar'
                 },
@@ -690,8 +694,14 @@ export function createAppFromFlow(path, schema) {
                                 value: false
                             },
                             disabled: {
-                                type: 'eval',
-                                expr: '!c.valid'
+                                type: 'evalv2',
+                                expr: '!c.valid',
+                                connections: [
+                                    {
+                                        componentId: 'c',
+                                        id: 'valid'
+                                    }
+                                ]
                             },
                             beforeIcon: {
                                 type: 'static',
@@ -1024,7 +1034,6 @@ export function createAppFromFlow(path, schema) {
                                 style: ''
                             }
                         },
-                        actions: [],
                         horizontalAlignment: 'left',
                         verticalAlignment: 'center',
                         id: 'title'
@@ -1057,7 +1066,6 @@ export function createAppFromFlow(path, schema) {
                                 class: ''
                             }
                         },
-                        actions: [],
                         menuItems: [],
                         horizontalAlignment: 'right',
                         verticalAlignment: 'center',

package/package/components/display/PdfViewer.svelte

@@ -5,26 +5,16 @@ import { fade } from 'svelte/transition';
 import { twMerge } from 'tailwind-merge';
 import { throttle } from '../../utils';
 import { Button } from '../common';
-import { createEventDispatcher } from 'svelte';
-export let source = undefined;
-export let zoom = 100;
-export let extraButton = undefined;
-export let allowFullscreen = false;
-let fullscreen = false;
-let wrapper = undefined;
-let error = undefined;
-let doc = undefined;
-let pages = [];
-let controlsWidth = undefined;
-let controlsHeight = undefined;
-let pageNumber = 1;
-$: if (source == '') {
-    resetDoc();
-    error = 'Set the "Source" attribute of the PDF component';
-}
-$: zoom && handleZoom();
-$: wrapper && loadDocument(source);
-$: wideView = controlsWidth && controlsWidth > 450;
+import { createEventDispatcher, untrack } from 'svelte';
+let { source = undefined, zoom = $bindable(100), extraButton = undefined, allowFullscreen = false, class: classNames = undefined, style = undefined } = $props();
+let fullscreen = $state(false);
+let wrapper = $state(undefined);
+let error = $state(undefined);
+let doc = $state(undefined);
+let pages = $state([]);
+let controlsWidth = $state(undefined);
+let controlsHeight = $state(undefined);
+let pageNumber = $state(1);
 async function resetDoc() {
     await doc?.destroy();
     doc = undefined;
@@ -155,6 +145,22 @@ function minMax(value, min, max) {
     }
     return value;
 }
+$effect(() => {
+    if (source == '') {
+        untrack(() => {
+            resetDoc();
+            error = 'Set the "Source" attribute of the PDF component';
+        });
+    }
+});
+$effect(() => {
+    zoom && untrack(() => handleZoom());
+});
+$effect(() => {
+    source;
+    wrapper && untrack(() => loadDocument(source));
+});
+let wideView = $derived(controlsWidth && controlsWidth > 450);
 </script>
 
 <div
@@ -221,7 +227,7 @@ function minMax(value, min, max) {
 				</div>
 				<div class="center-center px-2 text-secondary text-sm">
 					<input
-						on:input={({ currentTarget }) => {
+						oninput={({ currentTarget }) => {
 							scrollToPage(currentTarget.valueAsNumber)
 						}}
 						min="1"
@@ -277,19 +283,20 @@ function minMax(value, min, max) {
 		{/if}
 		<div
 			bind:this={wrapper}
-			on:scroll={throttledScroll}
+			onscroll={throttledScroll}
 			class={twMerge(
 				'w-full h-full overflow-auto',
-				$$props.class ?? '',
+				classNames,
 				// css?.container?.class ?? '',
 				'bg-gray-100',
 				'wm-pdf'
 			)}
-			style={$$props.style ?? ''}
+			style={style ?? ''}
 		></div>
 	{/if}
 	{#if extraButton}
-		<svelte:component this={extraButton} />
+		{@const SvelteComponent = extraButton}
+		<SvelteComponent />
 	{/if}
 	<!-- {#if $mode !== 'preview' && $selectedComponent?.includes(id)}
 			<button
@@ -300,7 +307,6 @@ function minMax(value, min, max) {
 				Sync zoom value
 			</button>
 		{/if} -->
-	<slot name="extra-button" />
 	{#if error}
 		<div
 			class="absolute inset-0 z-20 center-center

package/package/components/display/PdfViewer.svelte.d.ts

@@ -1,3 +1,11 @@
+interface Props {
+    source?: string | ArrayBuffer | undefined;
+    zoom?: number | undefined;
+    extraButton?: any | undefined;
+    allowFullscreen?: boolean;
+    class?: string | undefined;
+    style?: string | undefined;
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -11,19 +19,11 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const PdfViewer: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: any;
-    source?: string | ArrayBuffer | undefined;
-    zoom?: number | undefined | undefined;
-    extraButton?: any | undefined;
-    allowFullscreen?: boolean | undefined;
-}, {
+declare const PdfViewer: $$__sveltets_2_IsomorphicComponent<Props, {
     loading: CustomEvent<any>;
     loaded: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {
-    'extra-button': {};
-}, {}, string>;
+}, {}, {}, "zoom">;
 type PdfViewer = InstanceType<typeof PdfViewer>;
 export default PdfViewer;

package/package/components/flows/CreateActionsApp.svelte

@@ -19,6 +19,8 @@ async function importRaw() {
 <!-- Buttons -->
 <div class="flex flex-row gap-2">
 	<Button
+		aiId="apps-create-actions-app"
+		aiDescription="Create a new low-code app"
 		size="sm"
 		spacingSize="xl"
 		startIcon={{ icon: Plus }}
@@ -67,8 +69,8 @@ async function importRaw() {
 				fixedOverflowWidgets={false}
 			/>
 		{/await}
-		<svelte:fragment slot="actions">
+		{#snippet actions()}
 			<Button size="sm" on:click={importRaw}>Import</Button>
-		</svelte:fragment>
+		{/snippet}
 	</DrawerContent>
 </Drawer>

package/package/components/flows/CreateActionsFlow.svelte

@@ -4,14 +4,15 @@ import BarsStaggered from '../icons/BarsStaggered.svelte';
 import { Button } from '../common';
 import Drawer from '../common/drawer/Drawer.svelte';
 import DrawerContent from '../common/drawer/DrawerContent.svelte';
-import { importFlowStore } from './flowStore';
+import { importFlowStore } from './flowStore.svelte';
 import { Loader2, Plus } from 'lucide-svelte';
 import YAML from 'yaml';
-let drawer = undefined;
-let pendingRaw;
-let importType = 'yaml';
+let drawer = $state(undefined);
+let pendingRaw = $state(undefined);
+let importType = $state('yaml');
 async function importRaw() {
-    $importFlowStore = importType === 'yaml' ? YAML.parse(pendingRaw) : JSON.parse(pendingRaw);
+    $importFlowStore =
+        importType === 'yaml' ? YAML.parse(pendingRaw ?? '') : JSON.parse(pendingRaw ?? '');
     await goto('/flows/add');
     drawer?.closeDrawer?.();
 }
@@ -20,6 +21,8 @@ async function importRaw() {
 <!-- Buttons -->
 <div class="flex flex-row gap-2">
 	<Button
+		aiId="flows-create-actions-flow"
+		aiDescription="Create a new flow"
 		size="sm"
 		spacingSize="xl"
 		startIcon={{ icon: Plus }}
@@ -63,8 +66,8 @@ async function importRaw() {
 				fixedOverflowWidgets={false}
 			/>
 		{/await}
-		<svelte:fragment slot="actions">
+		{#snippet actions()}
 			<Button size="sm" on:click={importRaw}>Import</Button>
-		</svelte:fragment>
+		{/snippet}
 	</DrawerContent>
 </Drawer>

package/package/components/flows/CreateActionsFlow.svelte.d.ts

@@ -1,18 +1,3 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const CreateActionsFlow: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type CreateActionsFlow = InstanceType<typeof CreateActionsFlow>;
+declare const CreateActionsFlow: import("svelte").Component<Record<string, never>, {}, "">;
+type CreateActionsFlow = ReturnType<typeof CreateActionsFlow>;
 export default CreateActionsFlow;

package/package/components/flows/FlowEditor.svelte

@@ -3,37 +3,36 @@ import FlowEditorPanel from './content/FlowEditorPanel.svelte';
 import FlowModuleSchemaMap from './map/FlowModuleSchemaMap.svelte';
 import WindmillIcon from '../icons/WindmillIcon.svelte';
 import { Skeleton } from '../common';
-import { getContext, setContext } from 'svelte';
-import { classNames } from '../../utils';
+import { getContext, onDestroy, onMount, setContext } from 'svelte';
 import { writable } from 'svelte/store';
+import FlowAIChat from '../copilot/chat/flow/FlowAIChat.svelte';
+import { aiChatManager, AIMode } from '../copilot/chat/AIChatManager.svelte';
+import { triggerableByAI } from '../../actions/triggerableByAI.svelte';
 const { flowStore } = getContext('FlowEditorContext');
-export let loading;
-export let disableStaticInputs = false;
-export let disableTutorials = false;
-export let disableAi = false;
-export let disableSettings = false;
-export let disabledFlowInputs = false;
-export let smallErrorHandler = false;
-export let newFlow = false;
-export let savedFlow = undefined;
-export let onDeployTrigger = () => { };
-let size = 50;
-const { currentStepStore: copilotCurrentStepStore } = getContext('FlowCopilotContext');
+let { loading, disableStaticInputs = false, disableTutorials = false, disableAi = false, disableSettings = false, disabledFlowInputs = false, smallErrorHandler = false, newFlow = false, savedFlow = undefined, onDeployTrigger = () => { }, onTestUpTo = undefined, onEditInput = undefined, forceTestTab, highlightArg, aiChatOpen, showFlowAiButton, toggleAiChat, onRunPreview = () => { } } = $props();
+let flowModuleSchemaMap = $state();
 setContext('PropPickerContext', {
     flowPropPickerConfig: writable(undefined),
     pickablePropertiesFiltered: writable(undefined)
 });
+onMount(() => {
+    aiChatManager.changeMode(AIMode.FLOW);
+});
+onDestroy(() => {
+    aiChatManager.changeMode(AIMode.NAVIGATOR);
+});
 </script>
 
 <div
 	id="flow-editor"
-	class={classNames(
-		'h-full overflow-hidden transition-colors duration-[400ms] ease-linear border-t',
-		$copilotCurrentStepStore !== undefined ? 'border-gray-500/75' : ''
-	)}
+	class={'h-full overflow-hidden transition-colors duration-[400ms] ease-linear border-t'}
+	use:triggerableByAI={{
+		id: 'flow-editor',
+		description: 'Component to edit a flow'
+	}}
 >
 	<Splitpanes>
-		<Pane {size} minSize={15} class="h-full relative z-0">
+		<Pane size={50} minSize={15} class="h-full relative z-0">
 			<div class="grow overflow-hidden bg-gray h-full bg-surface-secondary relative">
 				{#if loading}
 					<div class="p-2 pt-10">
@@ -41,21 +40,32 @@ setContext('PropPickerContext', {
 							<Skeleton layout={[[2], 1.5]} />
 						{/each}
 					</div>
-				{:else if $flowStore.value.modules}
+				{:else if flowStore.val.value.modules}
 					<FlowModuleSchemaMap
+						bind:this={flowModuleSchemaMap}
 						{disableStaticInputs}
 						{disableTutorials}
 						{disableAi}
 						{disableSettings}
 						{smallErrorHandler}
 						{newFlow}
-						bind:modules={$flowStore.value.modules}
 						on:reload
+						on:generateStep={({ detail }) => {
+							if (!aiChatManager.open) {
+								aiChatManager.openChat()
+							}
+							aiChatManager.generateStep(detail.moduleId, detail.lang, detail.instructions)
+						}}
+						{onTestUpTo}
+						{onEditInput}
+						{aiChatOpen}
+						{showFlowAiButton}
+						{toggleAiChat}
 					/>
 				{/if}
 			</div>
 		</Pane>
-		<Pane class="relative z-10" size={100 - size} minSize={40}>
+		<Pane class="relative z-10" size={50} minSize={20}>
 			{#if loading}
 				<div class="w-full h-full">
 					<div class="block m-auto pt-40 w-10">
@@ -71,8 +81,14 @@ setContext('PropPickerContext', {
 					on:applyArgs
 					on:testWithArgs
 					{onDeployTrigger}
+					{forceTestTab}
+					{highlightArg}
+					{onRunPreview}
 				/>
 			{/if}
 		</Pane>
+		{#if !disableAi}
+			<FlowAIChat {flowModuleSchemaMap} />
+		{/if}
 	</Splitpanes>
 </div>

package/package/components/flows/FlowEditor.svelte.d.ts

@@ -1,5 +1,27 @@
 import type { Flow } from '../../gen';
 import type { Trigger } from '../triggers/utils';
+interface Props {
+    loading: boolean;
+    disableStaticInputs?: boolean;
+    disableTutorials?: boolean;
+    disableAi?: boolean;
+    disableSettings?: boolean;
+    disabledFlowInputs?: boolean;
+    smallErrorHandler?: boolean;
+    newFlow?: boolean;
+    savedFlow?: (Flow & {
+        draft?: Flow | undefined;
+    }) | undefined;
+    onDeployTrigger?: (trigger: Trigger) => void;
+    onTestUpTo?: ((id: string) => void) | undefined;
+    onEditInput?: ((moduleId: string, key: string) => void) | undefined;
+    forceTestTab?: Record<string, boolean>;
+    highlightArg?: Record<string, string | undefined>;
+    aiChatOpen?: boolean;
+    showFlowAiButton?: boolean;
+    toggleAiChat?: () => void;
+    onRunPreview?: () => void;
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -13,25 +35,12 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const FlowEditor: $$__sveltets_2_IsomorphicComponent<{
-    loading: boolean;
-    disableStaticInputs?: boolean;
-    disableTutorials?: boolean;
-    disableAi?: boolean;
-    disableSettings?: boolean;
-    disabledFlowInputs?: boolean;
-    smallErrorHandler?: boolean;
-    newFlow?: boolean;
-    savedFlow?: (Flow & {
-        draft?: Flow | undefined;
-    }) | undefined;
-    onDeployTrigger?: (trigger: Trigger) => void;
-}, {
+declare const FlowEditor: $$__sveltets_2_IsomorphicComponent<Props, {
     reload: any;
     applyArgs: any;
     testWithArgs: any;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "">;
 type FlowEditor = InstanceType<typeof FlowEditor>;
 export default FlowEditor;

package/package/components/flows/FlowHistory.svelte

@@ -1,13 +1,11 @@
-<script lang="ts">import { createEventDispatcher } from 'svelte';
-import Drawer from '../common/drawer/Drawer.svelte';
+<script lang="ts">import Drawer from '../common/drawer/Drawer.svelte';
 import DrawerContent from '../common/drawer/DrawerContent.svelte';
 import FlowHistoryInner from './FlowHistoryInner.svelte';
-export let path;
-let drawer;
+let { path, onHistoryRestore } = $props();
+let drawer = $state();
 export function open() {
-    drawer.openDrawer();
+    drawer?.openDrawer();
 }
-const dispatch = createEventDispatcher();
 </script>
 
 <Drawer bind:this={drawer} size="1200px">
@@ -20,9 +18,9 @@ const dispatch = createEventDispatcher();
 	>
 		<FlowHistoryInner
 			allowFork
-			on:historyRestore={() => {
-				drawer.closeDrawer()
-				dispatch('historyRestore')
+			onHistoryRestore={() => {
+				drawer?.closeDrawer()
+				onHistoryRestore?.()
 			}}
 			{path}
 		/>

package/package/components/flows/FlowHistory.svelte.d.ts

@@ -1,25 +1,9 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const FlowHistory: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     path: string;
-    open?: () => void;
-}, {
-    historyRestore: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {
+    onHistoryRestore?: () => void;
+}
+declare const FlowHistory: import("svelte").Component<Props, {
     open: () => void;
-}, string>;
-type FlowHistory = InstanceType<typeof FlowHistory>;
+}, "">;
+type FlowHistory = ReturnType<typeof FlowHistory>;
 export default FlowHistory;