windmill-components 1.623.1 → 1.642.0

package/package/components/flows/content/FlowEditorDrawer.svelte

@@ -0,0 +1,124 @@
+<script lang="ts">import { Drawer, DrawerContent } from '../../common';
+import FlowBuilder from '../../FlowBuilder.svelte';
+import DiffDrawer from '../../DiffDrawer.svelte';
+import { FlowService } from '../../../gen';
+import { workspaceStore } from '../../../stores';
+import { ExternalLink, Loader2 } from 'lucide-svelte';
+import Button from '../../common/button/Button.svelte';
+import { emptySchema } from '../../../utils';
+import { createEventDispatcher } from 'svelte';
+import { fade } from 'svelte/transition';
+import { initFlow } from '../flowStore.svelte';
+let flowEditorDrawer = $state();
+const dispatch = createEventDispatcher();
+export async function openDrawer(path, cb) {
+    flowPath = path;
+    flow = undefined;
+    loading = true;
+    callback = cb;
+    flowEditorDrawer?.openDrawer?.();
+    try {
+        const flowWithDraft = await FlowService.getFlowByPathWithDraft({
+            workspace: $workspaceStore,
+            path
+        });
+        savedFlow = {
+            ...structuredClone(flowWithDraft),
+            draft: flowWithDraft.draft
+                ? {
+                    ...structuredClone(flowWithDraft.draft),
+                    path: flowWithDraft.draft.path ?? flowWithDraft.path
+                }
+                : undefined
+        };
+        // Use the draft if available, otherwise the deployed flow
+        flow = flowWithDraft.draft ?? flowWithDraft;
+        await initFlow(flow, flowStore, flowStateStore);
+        loading = false;
+    }
+    catch (error) {
+        console.error('Failed to load flow:', error);
+        loading = false;
+    }
+}
+let callback = undefined;
+let flowPath = $state('');
+let flow = $state(undefined);
+let savedFlow = $state(undefined);
+let loading = $state(true);
+const flowStore = $state({
+    val: {
+        summary: '',
+        value: { modules: [] },
+        path: '',
+        edited_at: '',
+        edited_by: '',
+        archived: false,
+        extra_perms: {},
+        schema: emptySchema()
+    }
+});
+const flowStateStore = $state({ val: {} });
+let diffDrawer = $state();
+</script>
+
+<Drawer bind:this={flowEditorDrawer} size="100%">
+	<DrawerContent
+		title="Flow Editor - {flowPath}"
+		noPadding
+		fullScreen
+		on:close={() => {
+			flowEditorDrawer?.closeDrawer()
+		}}
+	>
+		{#if loading}
+			<div
+				out:fade={{ duration: 200 }}
+				class="absolute inset-0 center-center flex-col bg-surface text-primary border"
+			>
+				<Loader2 class="animate-spin" size={16} />
+				<span class="text-xs mt-1">Loading flow...</span>
+			</div>
+		{:else if flow}
+			<FlowBuilder
+				{flowStore}
+				{flowStateStore}
+				initialPath={flowPath}
+				newFlow={false}
+				selectedId="settings-metadata"
+				loading={false}
+				bind:savedFlow
+				{diffDrawer}
+				customUi={{ topBar: { draft: false, extraDeployOptions: false } }}
+				onDeploy={() => {
+					callback?.()
+					dispatch('save')
+					flowEditorDrawer?.closeDrawer()
+				}}
+				onDetails={() => {
+					callback?.()
+					dispatch('save')
+					flowEditorDrawer?.closeDrawer()
+				}}
+			/>
+		{:else}
+			<div class="flex items-center justify-center h-full">
+				<span class="text-red-500">Failed to load flow</span>
+			</div>
+		{/if}
+		{#snippet actions()}
+			<Button
+				variant="default"
+				on:click={() => {
+					window.open(`/flows/edit/${flowPath}`, '_blank', 'noopener,noreferrer')
+					flowEditorDrawer?.closeDrawer()
+				}}
+				startIcon={{ icon: ExternalLink }}
+			>
+				Edit in new tab & close drawer
+			</Button>
+		{/snippet}
+	</DrawerContent>
+</Drawer>
+
+<DiffDrawer bind:this={diffDrawer} isFlow />

package/package/components/{schema/SchemaPicker.svelte.d.ts → flows/content/FlowEditorDrawer.svelte.d.ts}

@@ -2,7 +2,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
     } & Exports;
-    (internal: unknown, props: Props & {
+    (internal: unknown, props: {
         $$events?: Events;
         $$slots?: Slots;
     }): Exports & {
@@ -11,17 +11,12 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const SchemaPicker: $$__sveltets_2_IsomorphicComponent<{
-    payloadData: Record<string, any>;
-    date: string | undefined;
-    selected?: boolean;
-}, {
-    select: CustomEvent<any>;
+declare const FlowEditorDrawer: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    save: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {
-    start: {};
-    extra: {};
-}, {}, string>;
-type SchemaPicker = InstanceType<typeof SchemaPicker>;
-export default SchemaPicker;
+}, {}, {
+    openDrawer: (path: string, cb: () => void) => Promise<void>;
+}, "">;
+type FlowEditorDrawer = InstanceType<typeof FlowEditorDrawer>;
+export default FlowEditorDrawer;

package/package/components/flows/content/FlowEnvironmentVariables.svelte

@@ -143,9 +143,10 @@ function updateEnvType(key, newType) {
 }
 setContext('PropPickerWrapper', {
     inputMatches: writable(undefined),
-    focusProp: () => { },
+    connectProp: () => { },
     propPickerConfig: writable(undefined),
-    clearFocus: () => { }
+    clearConnect: () => { },
+    exprBeingEdited: writable([])
 });
 </script>
 

package/package/components/flows/content/FlowInput.svelte

@@ -11,7 +11,7 @@ import FlowInputViewer from '../../FlowInputViewer.svelte';
 import HistoricInputs from '../../HistoricInputs.svelte';
 import SavedInputsPicker from '../../SavedInputsPicker.svelte';
 import FirstStepInputs from '../../FirstStepInputs.svelte';
-import { CornerDownLeft, Pen, ChevronRight, Plus, History, Braces, Code, Save, X, Check } from 'lucide-svelte';
+import { CornerDownLeft, Pen, ChevronRight, Plus, History, Braces, Code, Save, X, Check, Settings2 } from 'lucide-svelte';
 import CaptureIcon from '../../triggers/CaptureIcon.svelte';
 import FlowInputEditor from './FlowInputEditor.svelte';
 import { twMerge } from 'tailwind-merge';
@@ -27,12 +27,16 @@ import { AI_AGENT_SCHEMA } from '../flowInfers';
 import { nextId } from '../flowModuleNextId';
 import ConfirmationModal from '../../common/confirmationModal/ConfirmationModal.svelte';
 import FlowChat from '../conversations/FlowChat.svelte';
+import { SPECIAL_MODULE_IDS } from '../../copilot/chat/shared';
 let { noEditor, disabled, onTestFlow, previewOpen, flowModuleSchemaMap = undefined } = $props();
 const { flowStore, flowStateStore, previewArgs, pathStore, initialPathStore, fakeInitialPath, flowInputEditorState } = getContext('FlowEditorContext');
 // Get diffManager from the graph
 const diffManager = $derived(flowModuleSchemaMap?.getDiffManager());
 // Use pending schema from diffManager when in diff mode, otherwise use flowStore
 const effectiveSchema = $derived(diffManager?.currentInputSchema ?? flowStore.val.schema);
+// Detect if we're in "review mode" (AI has made schema changes that are pending)
+const hasAiSchemaChanges = $derived(Boolean(diffManager?.moduleActions[SPECIAL_MODULE_IDS.INPUT]?.pending &&
+    diffManager?.beforeFlow?.schema));
 let chatInputEnabled = $state(Boolean(flowStore.val.value?.chat_input_enabled));
 let shouldUseStreaming = $derived.by(() => {
     const modules = flowStore.val.value?.modules;
@@ -42,6 +46,9 @@ let shouldUseStreaming = $derived.by(() => {
         lastModule?.value?.input_transforms?.streaming?.value === true);
 });
 let showChatModeWarning = $state(false);
+let showAdditionalInputs = $state(false);
+let chatInputsEditTab = $state(false);
+let chatInputsAddPropertyV2 = $state(undefined);
 let addPropertyV2 = $state(undefined);
 let previewSchema = $state(undefined);
 let payloadData = undefined;
@@ -77,6 +84,32 @@ $effect(() => {
 $effect(() => {
     chatInputEnabled = Boolean(flowStore.val.value?.chat_input_enabled);
 });
+// Set up review mode when AI has made schema changes that are pending
+$effect(() => {
+    hasAiSchemaChanges;
+    diffManager?.beforeFlow?.schema;
+    flowStore.val.schema;
+    untrack(() => {
+        if (hasAiSchemaChanges) {
+            // In review mode, selectedSchema = beforeSchema (what we might revert to)
+            selectedSchema = structuredClone($state.snapshot(diffManager.beforeFlow.schema));
+            diff = computeDiff(flowStore.val.schema, selectedSchema);
+            previewSchema = schemaFromDiff(diff, selectedSchema);
+            runDisabled = true;
+            if (Object.values(diff).every((d) => d.diff === 'same')) {
+                diffManager?.acceptModule(SPECIAL_MODULE_IDS.INPUT, flowStore);
+            }
+        }
+    });
+});
+$effect(() => {
+    if (!hasAiSchemaChanges) {
+        selectedSchema = undefined;
+        previewSchema = undefined;
+        diff = {};
+        runDisabled = false;
+    }
+});
 const getDropdownItems = () => {
     return [
         {
@@ -217,13 +250,20 @@ async function updatePreviewSchema(newSchema) {
     runDisabled = true;
 }
 async function applySchemaAndArgs() {
-    flowStore.val.schema = applyDiff(flowStore.val.schema, diff);
-    if (previewArgs.val) {
-        savedPreviewArgs = structuredClone($state.snapshot(previewArgs.val));
+    if (hasAiSchemaChanges) {
+        // Review mode: Accept all AI changes
+        diffManager?.acceptModule(SPECIAL_MODULE_IDS.INPUT, flowStore);
     }
-    updatePreviewSchemaAndArgs(undefined);
-    if ($flowInputEditorState) {
-        $flowInputEditorState.selectedTab = undefined;
+    else {
+        // Preview mode: Apply the diff to flowStore
+        flowStore.val.schema = applyDiff(flowStore.val.schema, diff);
+        if (previewArgs.val) {
+            savedPreviewArgs = structuredClone($state.snapshot(previewArgs.val));
+        }
+        updatePreviewSchemaAndArgs(undefined);
+        if ($flowInputEditorState) {
+            $flowInputEditorState.selectedTab = undefined;
+        }
     }
 }
 function updatePreviewArguments(payloadData) {
@@ -256,15 +296,29 @@ $effect(() => {
 });
 let preventEnter = $state(false);
 async function acceptChange(arg) {
-    handleChange(arg, flowStore.val.schema, diff, (newSchema) => {
-        flowStore.val.schema = newSchema;
-    });
+    if (hasAiSchemaChanges) {
+        // Review mode: Accept = finalize the AI change (keep current value)
+        handleChangeInReviewMode(arg, 'accept');
+    }
+    else {
+        // Preview mode: Accept = apply the change to flowStore
+        handleChange(arg, flowStore.val.schema, diff, (newSchema) => {
+            flowStore.val.schema = newSchema;
+        });
+    }
 }
 async function rejectChange(arg) {
-    const revertDiff = computeDiff(flowStore.val.schema, selectedSchema);
-    handleChange(arg, selectedSchema, revertDiff, (newSchema) => {
-        selectedSchema = newSchema;
-    });
+    if (hasAiSchemaChanges) {
+        // Review mode: Reject = revert flowStore field to beforeSchema value
+        handleChangeInReviewMode(arg, 'reject');
+    }
+    else {
+        // Preview mode: Reject = remove proposal from selectedSchema
+        const revertDiff = computeDiff(flowStore.val.schema, selectedSchema);
+        handleChange(arg, selectedSchema, revertDiff, (newSchema) => {
+            selectedSchema = newSchema;
+        });
+    }
 }
 function handleChange(arg, currentSchema, diffSchema, updateCurrentSchema) {
     if (!diff || !currentSchema) {
@@ -287,6 +341,45 @@ function handleChange(arg, currentSchema, diffSchema, updateCurrentSchema) {
     diff = computeDiff(selectedSchema, flowStore.val.schema);
     previewSchema = schemaFromDiff(diff, flowStore.val.schema);
 }
+function handleChangeInReviewMode(arg, action) {
+    // Accept: source=flowStore.val.schema (current), target=beforeSchema
+    // Reject: source=beforeSchema, target=flowStore.val.schema (current)
+    const beforeSchema = diffManager?.beforeFlow?.schema;
+    const sourceSchema = action === 'accept' ? flowStore.val.schema : beforeSchema;
+    const targetSchema = action === 'accept' ? beforeSchema : flowStore.val.schema;
+    if (!beforeSchema || !sourceSchema || !targetSchema)
+        return;
+    const path = getFullPath(arg);
+    const parentPath = path.slice(0, -1);
+    const getSchemaAtPath = (schema) => parentPath.length === 0 ? schema : getNestedProperty(schema, parentPath, 'properties');
+    const getProperties = (schema) => getSchemaAtPath(schema)?.properties;
+    const sourceProperties = getProperties(sourceSchema);
+    const targetProperties = getProperties(targetSchema);
+    const targetSchemaAtPath = getSchemaAtPath(targetSchema);
+    const sourceValue = sourceProperties?.[arg.label];
+    if (sourceValue !== undefined) {
+        if (targetProperties) {
+            targetProperties[arg.label] = structuredClone($state.snapshot(sourceValue));
+            if (targetSchemaAtPath?.order && !targetSchemaAtPath.order.includes(arg.label)) {
+                targetSchemaAtPath.order.push(arg.label);
+            }
+        }
+    }
+    else {
+        if (targetProperties && arg.label in targetProperties) {
+            delete targetProperties[arg.label];
+            if (targetSchemaAtPath?.order) {
+                targetSchemaAtPath.order = targetSchemaAtPath.order.filter((x) => x !== arg.label);
+            }
+        }
+    }
+    if (action === 'accept') {
+        diffManager.beforeFlow.schema = { ...beforeSchema };
+    }
+    else {
+        flowStore.val.schema = { ...flowStore.val.schema };
+    }
+}
 function resetArgs() {
     if (!previewSchema) {
         savedPreviewArgs = undefined;
@@ -312,8 +405,11 @@ function resetSelected() {
     jsonInputs?.resetSelected(true);
     firstStepInputs?.resetSelected(true);
 }
-async function runFlowWithMessage(message, conversationId) {
-    previewArgs.val = { user_message: message };
+async function runFlowWithMessage(message, conversationId, additionalInputs) {
+    previewArgs.val = {
+        user_message: message,
+        ...(additionalInputs ?? {})
+    };
     const jobId = await onTestFlow?.(conversationId);
     return jobId;
 }
@@ -434,29 +530,91 @@ function enableChatMode() {
 <FlowCard {noEditor} title="Flow Input">
 	{#snippet action()}
 		{#if !disabled}
-			<Toggle
-				size="sm"
-				bind:checked={chatInputEnabled}
-				on:change={(e) => {
-					handleToggleChatMode()
-				}}
-				options={{
-					right: 'Chat Mode',
-					rightTooltip:
-						'When enabled, the flow execution page will show a chat interface where each message sent runs the flow with the message as "user_message" input parameter. The flow schema will be automatically set to accept only a user_message string input.'
-				}}
-			/>
+			<div class="flex items-center gap-2">
+				<Toggle
+					size="sm"
+					bind:checked={chatInputEnabled}
+					on:change={() => {
+						handleToggleChatMode()
+					}}
+					options={{
+						right: 'Chat Mode',
+						rightTooltip:
+							'When enabled, the flow execution page will show a chat interface where each message sent runs the flow with the message as "user_message" input parameter. The flow schema will be automatically set to accept only a user_message string input.'
+					}}
+				/>
+				{#if flowStore.val.value?.chat_input_enabled}
+					<Button
+						size="xs"
+						variant="border"
+						color={showAdditionalInputs ? 'blue' : 'light'}
+						startIcon={{ icon: Settings2 }}
+						title="Manage inputs"
+						on:click={() => (showAdditionalInputs = !showAdditionalInputs)}
+					>
+						Manage inputs
+					</Button>
+				{/if}
+			</div>
 		{/if}
 	{/snippet}
 	{#if !disabled}
 		<div class="flex flex-col h-full">
 			{#if flowStore.val.value?.chat_input_enabled}
 				<div class="flex flex-col h-full">
+					{#if showAdditionalInputs}
+						<div class="border-b p-2">
+							<EditableSchemaForm
+								bind:schema={flowStore.val.schema}
+								hiddenArgs={['user_message']}
+								isFlowInput
+								editTab={chatInputsEditTab ? 'inputEditor' : undefined}
+								showDynOpt
+								bind:dynCode
+								bind:dynLang
+								on:delete={(e) => {
+									chatInputsAddPropertyV2?.handleDeleteArgument([e.detail])
+								}}
+							>
+								{#snippet openEditTab()}
+									<Button
+										size="xs"
+										variant={chatInputsEditTab ? 'contained' : 'border'}
+										color={chatInputsEditTab ? 'blue' : 'light'}
+										startIcon={{ icon: chatInputsEditTab ? ChevronRight : Pen }}
+										title={chatInputsEditTab ? 'Close editor' : 'Edit inputs'}
+										onClick={() => {
+											chatInputsEditTab = !chatInputsEditTab
+										}}
+									/>
+								{/snippet}
+								{#snippet addProperty()}
+									<AddPropertyV2
+										bind:this={chatInputsAddPropertyV2}
+										bind:schema={flowStore.val.schema}
+										onAddNew={() => {}}
+									>
+										{#snippet trigger()}
+											<Button
+												size="xs"
+												color="light"
+												startIcon={{ icon: Plus }}
+												title="Add additional input"
+											>
+												Add input
+											</Button>
+										{/snippet}
+									</AddPropertyV2>
+								{/snippet}
+							</EditableSchemaForm>
+						</div>
+					{/if}
 					<FlowChat
 						onRunFlow={runFlowWithMessage}
 						path={$pathStore}
 						hideSidebar={true}
 						useStreaming={shouldUseStreaming}
+						inputSchema={flowStore.val.schema}
 					/>
 				</div>
 			{:else}
@@ -488,13 +646,19 @@ function enableChatMode() {
 						{diff}
 						disableDnd={!!previewSchema}
 						on:rejectChange={(e) => {
+							const isAiChange = hasAiSchemaChanges
 							rejectChange(e.detail).then(() => {
-								updatePreviewSchema(selectedSchema)
+								if (!isAiChange) {
+									updatePreviewSchema(selectedSchema)
+								}
 							})
 						}}
 						on:acceptChange={(e) => {
 							acceptChange(e.detail).then(() => {
-								updatePreviewSchema(selectedSchema)
+								const isAiChange = hasAiSchemaChanges
+								if (!isAiChange) {
+									updatePreviewSchema(selectedSchema)
+								}
 							})
 						}}
 						shouldDispatchChanges={true}
@@ -543,22 +707,32 @@ function enableChatMode() {
 										disabled={!previewSchema}
 										shortCut={{ Icon: CornerDownLeft, hide: false, withoutModifier: true }}
 										startIcon={{ icon: Check }}
-										on:click={() => {
+										onClick={() => {
 											applySchemaAndArgs()
 											connectFirstNode()
 										}}
 									>
-										{Object.values(diff).every((el) => el.diff === 'same')
-											? 'Apply args'
-											: 'Update schema'}
+										{#if hasAiSchemaChanges}
+											Accept all changes
+										{:else if Object.values(diff).every((el) => el.diff === 'same')}
+											Apply args
+										{:else}
+											Update schema
+										{/if}
 									</Button>
 									<Button
 										variant="default"
 										size="xs"
 										startIcon={{ icon: X }}
 										shortCut={{ key: 'esc', withoutModifier: true }}
-										on:click={() => {
-											resetSelected()
+										onClick={() => {
+											if (hasAiSchemaChanges) {
+												if (diffManager?.beforeFlow?.schema) {
+													diffManager.rejectModule(SPECIAL_MODULE_IDS.INPUT, flowStore)
+												}
+											} else {
+												resetSelected()
+											}
 										}}
 									/>
 								</div>
@@ -705,7 +879,7 @@ function enableChatMode() {
 									disabled={runDisabled || !isValid}
 									size="xs"
 									shortCut={{ Icon: CornerDownLeft, hide: false }}
-									on:click={() => {
+									onClick={() => {
 										runPreview()
 									}}
 								>

package/package/components/flows/content/FlowLoop.svelte

@@ -18,7 +18,7 @@ import FlowModuleDeleteAfterUse from './FlowModuleDeleteAfterUse.svelte';
 import IteratorGen from '../../copilot/IteratorGen.svelte';
 import FlowModuleSkip from './FlowModuleSkip.svelte';
 import FlowPlugConnect from '../../FlowPlugConnect.svelte';
-import PropPickerWrapper, { CONNECT } from '../propPicker/PropPickerWrapper.svelte';
+import PropPickerWrapper from '../propPicker/PropPickerWrapper.svelte';
 import TabsV2 from '../../common/tabs/TabsV2.svelte';
 import { useUiIntent } from '../../copilot/chat/flow/useUiIntent';
 import { emptySchema } from '../../../utils';
@@ -312,10 +312,9 @@ let suggestion = $state(undefined);
 						</Tooltip>
 					</div>
 					<FlowPlugConnect
-						connecting={$flowPropPickerConfig?.insertionMode == CONNECT}
+						connecting={$flowPropPickerConfig != undefined}
 						on:click={() => {
 							const config = {
-								insertionMode: CONNECT,
 								onSelect: (code) => {
 									setExpr(code)
 									return true
@@ -357,7 +356,7 @@ let suggestion = $state(undefined);
 							notSelectable
 							pickableProperties={stepPropPicker.pickableProperties}
 							on:select={({ detail }) => {
-								if ($flowPropPickerConfig?.insertionMode == CONNECT) {
+								if ($flowPropPickerConfig) {
 									setExpr(detail)
 									flowPropPickerConfig.set(undefined)
 									return

package/package/components/flows/content/FlowModuleCache.svelte

@@ -37,9 +37,7 @@ let isCacheEnabled = $derived(Boolean(flowModule.cache_ttl));
 		/>
 		{#if flowModule.cache_ttl}
 			<Label label="How long to keep cache valid">
-				<div class="-mt-5">
-					<SecondsInput bind:seconds={flowModule.cache_ttl} />
-				</div>
+				<SecondsInput bind:seconds={flowModule.cache_ttl} />
 			</Label>
 			<Toggle
 				size="2xs"