windmill-components 1.623.1 → 1.623.2

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()
 									}}
 								>