windmill-components 1.596.1 → 1.612.2

package/package/components/flows/content/FlowModuleEarlyStop.svelte

@@ -24,8 +24,8 @@ function checkIfBreakableParent(flowStoreValue) {
     }
     return null;
 }
-let raise_error_message_stop_after_all_if = $state(flowModule.stop_after_all_iters_if?.error_message !== undefined);
-let raise_error_message_stop_after_if = $state(flowModule.stop_after_if?.error_message !== undefined);
+let raise_error_message_stop_after_all_if = $state(flowModule.stop_after_all_iters_if?.error_message != undefined);
+let raise_error_message_stop_after_if = $state(flowModule.stop_after_if?.error_message != undefined);
 let { isLoop, isParallelLoop } = $derived(flowModule.value.type === 'forloopflow' || flowModule.value.type === 'whileloopflow'
     ? { isLoop: true, isParallelLoop: flowModule.value.parallel ?? false }
     : { isLoop: false, isParallelLoop: false });
@@ -134,8 +134,7 @@ let breakableParent = $derived(checkIfBreakableParent(flowStore.val));
 						<PropPickerWrapper
 							noPadding
 							notSelectable
-							flow_input={stepPropPicker.pickableProperties.flow_input}
-							pickableProperties={undefined}
+							pickableProperties={stepPropPicker.pickableProperties}
 							result={earlyStopResult}
 							extraResults={isLoop ? { all_iters: result } : undefined}
 							on:select={({ detail }) => {
@@ -148,8 +147,8 @@ let breakableParent = $derived(checkIfBreakableParent(flowStore.val));
 								lang="javascript"
 								bind:code={flowModule.stop_after_if.expr}
 								class="h-full"
-								extraLib={`declare const result = ${JSON.stringify(earlyStopResult)};` +
-									`\n declare const flow_input = ${JSON.stringify(stepPropPicker.pickableProperties.flow_input)};` +
+								extraLib={`declare const result = ${JSON.stringify(earlyStopResult)};\n` +
+									stepPropPicker.extraLib +
 									(isLoop ? `\ndeclare const all_iters = ${JSON.stringify(result)};` : '')}
 							/>
 						</PropPickerWrapper>
@@ -271,8 +270,7 @@ let breakableParent = $derived(checkIfBreakableParent(flowStore.val));
 						<PropPickerWrapper
 							notSelectable
 							noPadding
-							flow_input={stepPropPicker.pickableProperties.flow_input}
-							pickableProperties={undefined}
+							pickableProperties={stepPropPicker.pickableProperties}
 							{result}
 							on:select={({ detail }) => {
 								editor?.insertAtCursor(detail)
@@ -284,8 +282,8 @@ let breakableParent = $derived(checkIfBreakableParent(flowStore.val));
 								lang="javascript"
 								bind:code={flowModule.stop_after_all_iters_if.expr}
 								class="h-full"
-								extraLib={`declare const result = ${JSON.stringify(result)};` +
-									`\ndeclare const flow_input = ${JSON.stringify(stepPropPicker.pickableProperties.flow_input)};`}
+								extraLib={`declare const result = ${JSON.stringify(result)};\n` +
+									stepPropPicker.extraLib}
 							/>
 						</PropPickerWrapper>
 					</div>

package/package/components/flows/content/FlowModuleHeader.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">import Button from '../../common/button/Button.svelte';
 import {} from '../../../gen';
 import { createEventDispatcher, getContext } from 'svelte';
-import { Bed, Database, ExternalLink, Gauge, GitFork, Pen, PhoneIncoming, RefreshCcw, Repeat, Square, Pin, Save } from 'lucide-svelte';
+import { Bed, Database, Gauge, GitFork, Pen, PhoneIncoming, RefreshCcw, Repeat, Square, Pin, Save } from 'lucide-svelte';
 import Popover from '../../Popover.svelte';
 import { sendUserToast } from '../../../utils';
 import { getLatestHashForScript } from '../../../scripts';
 import FlowModuleWorkerTagSelect from './FlowModuleWorkerTagSelect.svelte';
 let { module, tag } = $props();
-const { scriptEditorDrawer } = getContext('FlowEditorContext');
+const { scriptEditorDrawer, flowEditorDrawer } = getContext('FlowEditorContext');
 const dispatch = createEventDispatcher();
 let customUi = getContext('customUi');
 let popoverClasses = 'center-center rounded p-2 bg-blue-100 text-blue-800 border border-blue-300 hover:bg-blue-200 dark:bg-frost-700 dark:text-frost-100 dark:border-frost-600';
@@ -128,13 +128,16 @@ let popoverClasses = 'center-center rounded p-2 bg-blue-100 text-blue-800 border
 			variant="subtle"
 			on:click={async () => {
 				if (module.value.type == 'flow') {
-					window.open(`/flows/edit/${module.value.path}`, '_blank', 'noopener,noreferrer')
+					$flowEditorDrawer?.openDrawer(module.value.path, () => {
+						dispatch('reload')
+						sendUserToast('Flow has been updated')
+					})
 				}
 			}}
 			startIcon={{ icon: Pen }}
 			iconOnly={false}
 		>
-			Edit <ExternalLink size={12} />
+			Edit
 		</Button>
 		<Button
 			unifiedSize="sm"

package/package/components/flows/content/FlowModuleWorkerTagSelect.svelte

@@ -8,7 +8,7 @@ const dispatch = createEventDispatcher();
 loadWorkerGroups();
 async function loadWorkerGroups() {
     if (!$workerTags) {
-        $workerTags = await WorkerService.getCustomTags({ workspace: $workspaceStore });
+        $workerTags = await WorkerService.getCustomTagsForWorkspace({ workspace: $workspaceStore });
     }
 }
 </script>

package/package/components/flows/content/McpOAuthConnect.svelte

@@ -0,0 +1,217 @@
+<script lang="ts">import { workspaceStore } from '../../../stores';
+import { McpOauthService, OauthService, ResourceService, VariableService } from '../../../gen';
+import { Button } from '../../common';
+import Label from '../../Label.svelte';
+import Path from '../../Path.svelte';
+import { sendUserToast } from '../../../toast';
+import { sameTopDomainOrigin } from '../../../cookies';
+import { onDestroy } from 'svelte';
+let { onConnected, onCancel } = $props();
+let serverUrl = $state('');
+let discoveryResult = $state(null);
+let selectedScopes = $state([]);
+let resourceName = $state('');
+let resourcePath = $state('');
+let pathError = $state('');
+let status = $state('idle');
+let error = $state(null);
+async function discoverOAuth() {
+    status = 'discovering';
+    error = null;
+    try {
+        discoveryResult = await McpOauthService.discoverMcpOauth({
+            requestBody: { mcp_server_url: serverUrl }
+        });
+        selectedScopes = discoveryResult?.scopes_supported ?? [];
+        try {
+            const urlObj = new URL(serverUrl);
+            resourceName = urlObj.hostname.replace(/\./g, '_');
+        }
+        catch {
+            resourceName = 'mcp_server';
+        }
+        status = 'discovered';
+    }
+    catch (e) {
+        console.error('Error discovering OAuth settings', e);
+        const errorMessage = e.body?.message || e.body || e.message || 'Unknown error';
+        error = `Failed to discover OAuth settings: ${errorMessage}`;
+        status = 'idle';
+    }
+}
+function startOAuth() {
+    const url = new URL(`/api/mcp/oauth/start`, window.location.origin);
+    url.searchParams.set('mcp_server_url', serverUrl);
+    url.searchParams.set('scopes', selectedScopes.join(','));
+    const popup = window.open(url.toString(), '_blank', 'popup=true');
+    if (!popup) {
+        error = 'Popup blocked. Please allow popups for this site.';
+        return;
+    }
+    window.addEventListener('message', handleOAuthMessage);
+    window.addEventListener('storage', handleStorageEvent);
+    status = 'connecting';
+}
+function handleOAuthMessage(event) {
+    if (!sameTopDomainOrigin(event.origin, window.location.origin))
+        return;
+    if (event.data.type === 'MCP_CONNECTED') {
+        cleanup();
+        createMcpResource(event.data);
+    }
+    else if (event.data.type === 'MCP_ERROR') {
+        cleanup();
+        error = event.data.error;
+        status = 'discovered';
+    }
+}
+function handleStorageEvent(event) {
+    if (event.key === 'mcp-oauth-callback') {
+        cleanup();
+        try {
+            const data = JSON.parse(event.newValue || '{}');
+            localStorage.removeItem('mcp-oauth-callback');
+            if (data.type === 'MCP_CONNECTED') {
+                createMcpResource(data);
+            }
+        }
+        catch (e) {
+            console.error('Error parsing MCP OAuth callback', e);
+        }
+    }
+}
+function cleanup() {
+    window.removeEventListener('message', handleOAuthMessage);
+    window.removeEventListener('storage', handleStorageEvent);
+}
+async function createMcpResource(data) {
+    try {
+        let accountId;
+        if (data.expires_in && data.refresh_token) {
+            const accountIdStr = await OauthService.createAccount({
+                workspace: $workspaceStore,
+                requestBody: {
+                    refresh_token: data.refresh_token,
+                    expires_in: data.expires_in,
+                    client: 'mcp',
+                    mcp_server_url: data.mcp_server_url
+                }
+            });
+            accountId = Number(accountIdStr);
+        }
+        await VariableService.createVariable({
+            workspace: $workspaceStore,
+            requestBody: {
+                path: resourcePath,
+                value: data.access_token,
+                is_secret: true,
+                is_oauth: true,
+                account: accountId,
+                description: `MCP OAuth token for ${data.mcp_server_url}`
+            }
+        });
+        await ResourceService.createResource({
+            workspace: $workspaceStore,
+            requestBody: {
+                resource_type: 'mcp',
+                path: resourcePath,
+                value: {
+                    name: resourceName,
+                    url: data.mcp_server_url,
+                    token: `$var:${resourcePath}`
+                },
+                description: `MCP server connected via OAuth`
+            }
+        });
+        sendUserToast('Connected to MCP server');
+        onConnected(resourcePath, resourceName);
+    }
+    catch (e) {
+        error = e.body?.message || e.message || 'Failed to create resource';
+        status = 'discovered';
+    }
+}
+onDestroy(cleanup);
+</script>
+
+<div class="border rounded p-4 bg-surface-secondary flex flex-col gap-4">
+	<div class="flex justify-between items-center">
+		<span class="font-semibold text-sm">Connect MCP Server with OAuth</span>
+		<Button size="xs" color="light" onClick={onCancel}>Cancel</Button>
+	</div>
+
+	<Label label="MCP Server URL">
+		<input
+			type="url"
+			bind:value={serverUrl}
+			placeholder="https://mcp.example.com"
+			class="text-sm w-full"
+			disabled={status === 'connecting'}
+		/>
+	</Label>
+
+	{#if status === 'idle'}
+		<Button size="sm" onClick={discoverOAuth} disabled={!serverUrl}>Discover OAuth Settings</Button>
+	{:else if status === 'discovering'}
+		<div class="text-sm text-secondary">Discovering OAuth settings...</div>
+	{:else if status === 'discovered' && discoveryResult}
+		<div class="text-xs text-green-600 dark:text-green-400">
+			&#10003; OAuth supported
+			{#if discoveryResult.supports_dynamic_registration}
+				(Dynamic Client Registration available)
+			{/if}
+		</div>
+
+		{#if discoveryResult.scopes_supported && discoveryResult.scopes_supported.length > 0}
+			<Label label="Select Scopes">
+				<div class="flex flex-col flex-wrap gap-2">
+					{#each discoveryResult.scopes_supported as scope}
+						<label class="flex flex-row items-center gap-2 text-xs cursor-pointer">
+							<input
+								type="checkbox"
+								checked={selectedScopes.includes(scope)}
+								onchange={(e) => {
+									const target = e.target as HTMLInputElement
+									if (target.checked) {
+										selectedScopes = [...selectedScopes, scope]
+									} else {
+										selectedScopes = selectedScopes.filter((s) => s !== scope)
+									}
+								}}
+								class="!w-4 !h-4"
+							/>
+							{scope}
+						</label>
+					{/each}
+				</div>
+			</Label>
+		{/if}
+
+		<Label label="Resource Name">
+			<input
+				type="text"
+				bind:value={resourceName}
+				placeholder="my-mcp-server"
+				class="text-sm w-full"
+			/>
+		</Label>
+
+		<Path
+			bind:path={resourcePath}
+			bind:error={pathError}
+			initialPath=""
+			namePlaceholder={resourceName}
+			kind="resource"
+		/>
+
+		<Button size="sm" onClick={startOAuth} disabled={!resourcePath || pathError !== ''}>
+			Connect with OAuth
+		</Button>
+	{:else if status === 'connecting'}
+		<div class="text-sm text-secondary">Complete authentication in popup window...</div>
+	{/if}
+
+	{#if error}
+		<div class="text-xs text-red-600 dark:text-red-400">{error}</div>
+	{/if}
+</div>

package/package/components/flows/content/McpOAuthConnect.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    onConnected: (resourcePath: string, resourceName: string) => void;
+    onCancel: () => void;
+}
+declare const McpOAuthConnect: import("svelte").Component<Props, {}, "">;
+type McpOAuthConnect = ReturnType<typeof McpOAuthConnect>;
+export default McpOAuthConnect;

package/package/components/flows/content/McpToolEditor.svelte

@@ -7,8 +7,7 @@ let loadToolsCached = createCache(({ workspace, path }) => workspace && path &&
     : undefined, {
     initial: { workspace: get(workspaceStore), path: undefined, refreshCount: 0 },
     invalidateMs: 1000 * 60
-} // Cache for 60 seconds
-);
+});
 </script>
 
 <script lang="ts">import Section from '../../Section.svelte';
@@ -21,24 +20,25 @@ import ResourcePicker from '../../ResourcePicker.svelte';
 import { usePromise } from '../../../svelte5Utils.svelte';
 import { untrack } from 'svelte';
 import Alert from '../../common/alert/Alert.svelte';
+import McpOAuthConnect from './McpOAuthConnect.svelte';
 let { tool = $bindable() } = $props();
+let showOAuthForm = $state(false);
 let refreshCount = $state(0);
+let resourcePicker = $state();
 let tools = usePromise(async () => await loadToolsCached({
     workspace: $workspaceStore,
     path: tool.value.resource_path,
     refreshCount
 }), { loadInit: false, clearValueOnRefresh: false });
-// Options for the multiselect
 let toolOptions = $derived(safeSelectItems((tools.value ?? []).map((t) => t.name)));
-// Watch for resource_path changes and refresh tools
+let resourcePath = $derived(tool.value.resource_path);
+let error = $derived(tools.error?.body?.message || tools.error?.message);
 $effect(() => {
-    // Track reactive dependencies
-    tool.value.resource_path;
+    resourcePath;
     $workspaceStore;
     refreshCount;
-    // Trigger refresh when resource_path or workspace changes
     untrack(() => {
-        if (tool.value.resource_path?.length > 0) {
+        if (resourcePath?.length > 0) {
             tools.refresh();
         }
     });
@@ -52,14 +52,19 @@ $effect(() => {
     }
 });
 $effect(() => {
-    if (tool.value.resource_path?.length > 0 && tool.summary?.length === 0) {
+    if (resourcePath?.length > 0 && tool.summary?.length === 0) {
         tool.summary = `MCP: ${tool.value.resource_path}`;
     }
 });
+async function handleOAuthConnected(resourcePath, resourceName) {
+    await resourcePicker?.refreshResources();
+    tool.value.resource_path = resourcePath;
+    tool.summary = `MCP: ${resourceName}`;
+    showOAuthForm = false;
+}
 </script>
 
 <div class="flex flex-col gap-4 p-4">
-	<!-- Explanatory Section -->
 	<Alert type="info" title="MCP Client Configuration">
 		{#snippet children()}
 			<p class="mb-2 text-sm">
@@ -74,15 +79,26 @@ $effect(() => {
 		{/snippet}
 	</Alert>
 
-	<!-- Resource Path Section -->
 	<div class="w-full">
 		<Label label="MCP Resource">
-			<ResourcePicker resourceType="mcp" bind:value={tool.value.resource_path} />
+			<ResourcePicker bind:this={resourcePicker} resourceType="mcp" bind:value={tool.value.resource_path} />
 		</Label>
 	</div>
 
-	{#if tool.value.resource_path?.length > 0}
-		<!-- Summary Section -->
+	{#if !resourcePath}
+		{#if !showOAuthForm}
+			<Button size="xs" color="light" onClick={() => (showOAuthForm = true)}>
+				Connect with OAuth
+			</Button>
+		{:else}
+			<McpOAuthConnect
+				onConnected={handleOAuthConnected}
+				onCancel={() => (showOAuthForm = false)}
+			/>
+		{/if}
+	{/if}
+
+	{#if resourcePath?.length > 0}
 		<div class="w-full">
 			<Label label="Summary">
 				<input
@@ -94,13 +110,12 @@ $effect(() => {
 			</Label>
 		</div>
 
-		<!-- Available Tools Section -->
 		<Section label="Available Tools">
 			{#snippet action()}
 				<Button
 					size="xs"
 					color="light"
-					on:click={() => (refreshCount += 1)}
+					onClick={() => (refreshCount += 1)}
 					startIcon={{ icon: RefreshCw }}
 					disabled={tools.status === 'loading'}
 				>
@@ -108,39 +123,37 @@ $effect(() => {
 				</Button>
 			{/snippet}
 			<div class="w-full flex flex-col gap-2">
-				{#if tools.error}
-					<div class="text-xs text-red-600 p-2 border border-red-300 rounded bg-red-50">
-						{tools.error?.body?.message ||
-							tools.error?.message ||
-							'Failed to load tools from MCP server'}
-					</div>
-				{/if}
-				<div class="max-h-48 overflow-y-auto border rounded p-2 bg-surface-secondary">
-					{#if tools.status === 'loading'}
+				{#if error}
+					<div class="text-xs text-red-600 dark:text-red-400 mb-4"
+						>{`Failed to load tools from MCP server: ${error}`}</div
+					>
+				{:else if tools.status === 'loading'}
+					<div class="max-h-48 overflow-y-auto border rounded p-2 bg-surface-secondary">
 						<div class="text-xs text-secondary italic">Loading tools...</div>
-					{:else if (tools.value ?? []).length === 0}
+					</div>
+				{:else if (tools.value ?? []).length === 0 && !error}
+					<div class="max-h-48 overflow-y-auto border rounded p-2 bg-surface-secondary">
 						<div class="text-xs text-secondary italic">
-							{tools.error
-								? 'Failed to load tools. Please check the resource path and try again.'
-								: 'No tools loaded yet. Click "Refresh Tools" to fetch tools from the MCP server.'}
+							No tools loaded yet. Click "Refresh Tools" to fetch tools from the MCP server.
 						</div>
-					{:else}
+					</div>
+				{:else if (tools.value ?? []).length > 0}
+					<div class="max-h-48 overflow-y-auto border rounded p-2 bg-surface-secondary">
 						<div class="flex flex-col gap-1">
-							{#each tools.value ?? [] as tool}
+							{#each tools.value ?? [] as mcpTool}
 								<div class="text-xs">
-									<span class="font-semibold">{tool.name}</span>
-									{#if tool.description}
-										<span class="text-secondary">— {tool.description}</span>
+									<span class="font-semibold">{mcpTool.name}</span>
+									{#if mcpTool.description}
+										<span class="text-secondary">— {mcpTool.description}</span>
 									{/if}
 								</div>
 							{/each}
 						</div>
-					{/if}
-				</div>
+					</div>
+				{/if}
 			</div>
 		</Section>
 
-		<!-- Tool Filtering Section -->
 		{#if tool.value.include_tools && tool.value.exclude_tools}
 			<Section label="Tool Filtering">
 				<div class="w-full flex flex-col gap-3">

package/package/components/flows/content/McpToolEditor.svelte.d.ts

@@ -1,7 +1,6 @@
 import type { McpTool } from '../agentToolUtils';
 interface Props {
     tool: McpTool;
-    noEditor: boolean;
 }
 declare const McpToolEditor: import("svelte").Component<Props, {}, "tool">;
 type McpToolEditor = ReturnType<typeof McpToolEditor>;

package/package/components/flows/conversations/FlowChat.svelte

@@ -3,7 +3,7 @@ import { createFlowChatManager } from './FlowChatManager.svelte';
 import FlowConversationsSidebar from './FlowConversationsSidebar.svelte';
 import FlowChatInterface from './FlowChatInterface.svelte';
 import { untrack } from 'svelte';
-let { onRunFlow, deploymentInProgress = false, useStreaming = false, path, hideSidebar = false } = $props();
+let { onRunFlow, deploymentInProgress = false, useStreaming = false, path, hideSidebar = false, inputSchema = undefined, } = $props();
 const manager = createFlowChatManager();
 // Initialize manager when component mounts
 $effect(() => {
@@ -22,11 +22,25 @@ $effect(() => {
         });
     }
 });
+// Derive additional inputs schema (excluding user_message) for chat mode
+const additionalInputsSchema = $derived.by(() => {
+    const props = inputSchema?.properties ?? {};
+    const filtered = Object.fromEntries(Object.entries(props).filter(([k]) => k !== 'user_message'));
+    if (Object.keys(filtered).length === 0)
+        return undefined;
+    const required = inputSchema?.required;
+    const requiredArray = Array.isArray(required) ? required : [];
+    return {
+        ...inputSchema,
+        properties: filtered,
+        required: requiredArray.filter((k) => k !== 'user_message')
+    };
+});
 </script>
 
 <div class="flex border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden flex-1">
 	{#if !hideSidebar}
 		<FlowConversationsSidebar {manager} />
 	{/if}
-	<FlowChatInterface {manager} {deploymentInProgress} />
+	<FlowChatInterface {manager} {deploymentInProgress} {additionalInputsSchema} {path} />
 </div>

package/package/components/flows/conversations/FlowChat.svelte.d.ts

@@ -1,9 +1,10 @@
 interface Props {
-    onRunFlow: (userMessage: string, conversationId: string) => Promise<string | undefined>;
+    onRunFlow: (userMessage: string, conversationId: string, additionalInputs?: Record<string, any>) => Promise<string | undefined>;
     useStreaming?: boolean;
     deploymentInProgress?: boolean;
     path: string;
     hideSidebar?: boolean;
+    inputSchema?: Record<string, any>;
 }
 declare const FlowChat: import("svelte").Component<Props, {}, "">;
 type FlowChat = ReturnType<typeof FlowChat>;

package/package/components/flows/conversations/FlowChatInterface.svelte

@@ -1,11 +1,85 @@
-<script lang="ts">import { Alert } from '../../common';
-import { MessageCircle, Loader2 } from 'lucide-svelte';
+<script lang="ts">import { Alert, Button } from '../../common';
+import { MessageCircle, Loader2, Settings2 } from 'lucide-svelte';
 import ChatMessage from '../../chat/ChatMessage.svelte';
 import ChatInput from '../../chat/ChatInput.svelte';
 import { FlowChatManager } from './FlowChatManager.svelte';
-let { manager, deploymentInProgress = false } = $props();
+import Modal from '../../common/modal/Modal.svelte';
+import SchemaForm from '../../SchemaForm.svelte';
+import {} from '../../../utils';
+let { manager, deploymentInProgress = false, additionalInputsSchema, path } = $props();
+// Derive helperScript for dynamic inputs from schema
+const dynamicInputHelperScript = $derived.by(() => {
+    const dynCode = additionalInputsSchema?.['x-windmill-dyn-select-code'];
+    const dynLang = additionalInputsSchema?.['x-windmill-dyn-select-lang'];
+    if (dynCode && dynLang) {
+        return { source: 'inline', code: dynCode, lang: dynLang };
+    }
+    return undefined;
+});
+// LocalStorage helpers
+const STORAGE_KEY_PREFIX = 'windmill_flow_chat_inputs_';
+// State for additional inputs modal
+let showInputsModal = $state(false);
+let additionalInputsValues = $state(loadInputsFromStorage() ?? undefined);
+function getStorageKey() {
+    return `${STORAGE_KEY_PREFIX}${path}`;
+}
+function loadInputsFromStorage() {
+    try {
+        const stored = localStorage.getItem(getStorageKey());
+        return stored ? JSON.parse(stored) : null;
+    }
+    catch (e) {
+        console.error('Failed to load inputs from localStorage:', e);
+        return null;
+    }
+}
+function saveInputsToStorage(values) {
+    try {
+        localStorage.setItem(getStorageKey(), JSON.stringify(values));
+    }
+    catch (e) {
+        console.error('Failed to save inputs to localStorage:', e);
+    }
+}
+function handleModalConfirm() {
+    saveInputsToStorage(additionalInputsValues ?? {});
+    showInputsModal = false;
+}
+function handleSendMessage() {
+    const inputs = additionalInputsSchema
+        ? (loadInputsFromStorage() ?? additionalInputsValues)
+        : undefined;
+    manager.sendMessage(inputs);
+}
+function openInputsModal() {
+    const stored = loadInputsFromStorage();
+    if (stored)
+        additionalInputsValues = stored;
+    showInputsModal = true;
+}
+const hasMissingRequired = $derived.by(() => {
+    if (!additionalInputsSchema?.required?.length)
+        return false;
+    const values = additionalInputsValues ?? {};
+    return additionalInputsSchema.required.some((field) => values[field] === undefined || values[field] === '' || values[field] === null);
+});
 </script>
 
+<!-- Additional Inputs Modal -->
+{#if additionalInputsSchema}
+	<Modal title="Configure inputs" bind:open={showInputsModal}>
+		<SchemaForm
+			schema={additionalInputsSchema}
+			bind:args={additionalInputsValues}
+			helperScript={dynamicInputHelperScript}
+		/>
+		{#snippet actions()}
+			<Button onClick={handleModalConfirm} variant="accent">Save</Button>
+		{/snippet}
+	</Modal>
+{/if}
+
 <div class="flex flex-col h-full flex-1 min-w-0">
 	<!-- Messages Container -->
 	<div
@@ -48,14 +122,37 @@ let { manager, deploymentInProgress = false } = $props();
 	</div>
 
 	<!-- Chat Input -->
-	<div class="flex flex-row justify-center py-2 xl:max-w-7xl mx-auto w-full">
+	<div class="flex flex-col items-center p-2 xl:max-w-7xl mx-auto w-full gap-2">
+		{#if additionalInputsSchema}
+			<div class="flex items-center justify-end w-full">
+				<div class="relative">
+					<Button
+						size="xs"
+						variant="default"
+						startIcon={{ icon: Settings2 }}
+						title="Inputs"
+						onClick={openInputsModal}
+					>
+						Inputs
+					</Button>
+					{#if hasMissingRequired}
+						<span class="absolute -top-1 -right-1 w-2 h-2 bg-yellow-500 rounded-full"></span>
+					{/if}
+				</div>
+			</div>
+		{/if}
 		<div class="w-full" class:opacity-50={deploymentInProgress}>
 			<ChatInput
 				bind:value={manager.inputMessage}
 				bind:bindTextarea={manager.inputElement}
 				disabled={manager.isLoading || deploymentInProgress}
-				onSend={() => manager.sendMessage()}
-				onKeydown={manager.handleKeyDown}
+				onSend={handleSendMessage}
+				onKeydown={(e) => {
+					if (e.key === 'Enter' && !e.shiftKey && !e.isComposing) {
+						e.preventDefault()
+						handleSendMessage()
+					}
+				}}
 				showCancelButton={manager.isWaitingForResponse || manager.isLoading}
 				onCancel={() => manager.cancelCurrentJob()}
 				sendTitle={deploymentInProgress ? 'Deployment in progress' : 'Send message (Enter)'}