windmill-components 1.623.1 → 1.642.0

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

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

@@ -2,6 +2,8 @@ import { FlowChatManager } from './FlowChatManager.svelte';
 interface Props {
     manager: FlowChatManager;
     deploymentInProgress?: boolean;
+    additionalInputsSchema?: Record<string, any>;
+    path: string;
 }
 declare const FlowChatInterface: import("svelte").Component<Props, {}, "">;
 type FlowChatInterface = ReturnType<typeof FlowChatInterface>;

package/package/components/flows/conversations/FlowChatManager.svelte.js

@@ -278,14 +278,16 @@ export class FlowChatManager {
             // Do a final poll to get all messages from database
             try {
                 if (this.selectedConversationId) {
-                    await this.pollConversationMessages(this.selectedConversationId);
+                    await this.pollConversationMessages(this.selectedConversationId, {
+                        removeTempMessages: true
+                    });
                 }
             }
             catch { }
             this.cleanup();
         }
     }
-    async pollConversationMessages(conversationId, isNewConversation) {
+    async pollConversationMessages(conversationId, options) {
         if (!get(workspaceStore))
             return;
         try {
@@ -297,7 +299,7 @@ export class FlowChatManager {
                 perPage: 50,
                 afterId: lastId
             });
-            if (isNewConversation) {
+            if (options?.isNewConversation) {
                 await this.refreshConversations();
             }
             const filteredResponse = response.filter((msg) => msg.message_type !== 'user');
@@ -307,8 +309,11 @@ export class FlowChatManager {
                     this.messages = [...this.messages, msg];
                 }
             }
-            // Remove temporary messages
-            this.messages = this.messages.filter((msg) => !msg.id.startsWith('temp-'));
+            // Only remove temporary messages when explicitly requested (e.g., after job completion)
+            // During streaming, we keep temp messages to avoid them disappearing due to race conditions
+            if (options?.removeTempMessages) {
+                this.messages = this.messages.filter((msg) => !msg.id.startsWith('temp-'));
+            }
         }
         catch (error) {
             console.error('Polling error:', error);
@@ -318,7 +323,7 @@ export class FlowChatManager {
         if (this.pollingInterval)
             return;
         this.pollingInterval = setInterval(() => {
-            this.pollConversationMessages(conversationId, isNewConversation);
+            this.pollConversationMessages(conversationId, { isNewConversation });
         }, 500); // Poll every 0.5 seconds
         setTimeout(() => {
             this.stopPolling();
@@ -331,7 +336,7 @@ export class FlowChatManager {
         }
     }
     // Message sending
-    async sendMessage() {
+    async sendMessage(additionalInputs) {
         if (!this.inputMessage.trim() || this.isLoading)
             return;
         const isNewConversation = this.messages.length === 0;
@@ -365,10 +370,10 @@ export class FlowChatManager {
             await tick();
             this.scrollToUserMessage(userMessage.id);
             if (this.#useStreaming && this.#path) {
-                await this.handleStreamingMessage(messageContent, currentConversationId, isNewConversation);
+                await this.handleStreamingMessage(messageContent, currentConversationId, isNewConversation, additionalInputs);
             }
             else {
-                await this.handlePollingMessage(messageContent, currentConversationId, isNewConversation);
+                await this.handlePollingMessage(messageContent, currentConversationId, isNewConversation, additionalInputs);
             }
         }
         catch (error) {
@@ -383,7 +388,7 @@ export class FlowChatManager {
         await tick();
         this.focusInput();
     }
-    async handleStreamingMessage(messageContent, currentConversationId, isNewConversation) {
+    async handleStreamingMessage(messageContent, currentConversationId, isNewConversation, additionalInputs) {
         // Close any existing EventSource
         if (this.currentEventSource) {
             this.currentEventSource.close();
@@ -393,7 +398,7 @@ export class FlowChatManager {
         let assistantMessageId = '';
         let isCompleted = false;
         try {
-            const jobId = await this.#onRunFlow?.(messageContent, currentConversationId);
+            const jobId = await this.#onRunFlow?.(messageContent, currentConversationId, additionalInputs);
             if (!jobId) {
                 console.error('No jobId returned from onRunFlow');
                 return;
@@ -412,7 +417,38 @@ export class FlowChatManager {
             eventSource.onmessage = async (event) => {
                 try {
                     const data = JSON.parse(event.data);
-                    if (data.type === 'update') {
+                    const type = data.type;
+                    // Handle timeout - reconnect to SSE
+                    if (type === 'timeout') {
+                        eventSource.close();
+                        this.currentEventSource = undefined;
+                        // Reconnect
+                        this.handleStreamingMessage(messageContent, currentConversationId, isNewConversation, additionalInputs);
+                        return;
+                    }
+                    // Handle ping - just ignore
+                    if (type === 'ping') {
+                        return;
+                    }
+                    // Handle error
+                    if (type === 'error') {
+                        eventSource.close();
+                        this.currentEventSource = undefined;
+                        console.error('SSE error:', data);
+                        sendUserToast('Stream error: ' + (data.error || 'Unknown error'), true);
+                        this.cleanup();
+                        return;
+                    }
+                    // Handle not found
+                    if (type === 'not_found') {
+                        eventSource.close();
+                        this.currentEventSource = undefined;
+                        console.error('Job not found');
+                        sendUserToast('Job not found', true);
+                        this.cleanup();
+                        return;
+                    }
+                    if (type === 'update') {
                         if (data.flow_stream_job_id) {
                             this.currentJobId = data.flow_stream_job_id;
                         }
@@ -475,7 +511,9 @@ export class FlowChatManager {
                             isCompleted = true;
                             // Do a final poll to get all messages from database
                             if (this.selectedConversationId) {
-                                await this.pollConversationMessages(this.selectedConversationId);
+                                await this.pollConversationMessages(this.selectedConversationId, {
+                                    removeTempMessages: true
+                                });
                             }
                             this.cleanup();
                         }
@@ -499,8 +537,8 @@ export class FlowChatManager {
             this.cleanup();
         }
     }
-    async handlePollingMessage(messageContent, currentConversationId, isNewConversation) {
-        const jobId = await this.#onRunFlow?.(messageContent, currentConversationId);
+    async handlePollingMessage(messageContent, currentConversationId, isNewConversation, additionalInputs) {
+        const jobId = await this.#onRunFlow?.(messageContent, currentConversationId, additionalInputs);
         if (!jobId) {
             console.error('No jobId returned from onRunFlow');
             return;
@@ -514,11 +552,5 @@ export class FlowChatManager {
         this.startPolling(currentConversationId);
         this.pollJobResult(jobId);
     }
-    handleKeyDown = (event) => {
-        if (event.key === 'Enter' && !event.shiftKey) {
-            event.preventDefault();
-            this.sendMessage();
-        }
-    };
 }
 export const createFlowChatManager = () => new FlowChatManager();

package/package/components/flows/conversations/FlowConversationsSidebar.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">import { Button } from '../../common';
-import { MessageCircle, Plus, Trash2, PanelLeftClose, PanelLeftOpen, Loader2 } from 'lucide-svelte';
+import { MessageCircle, Plus, Trash2, PanelLeftClose, PanelLeftOpen } from 'lucide-svelte';
 import {} from '../../../gen';
 import CountBadge from '../../common/badge/CountBadge.svelte';
 import InfiniteList from '../../InfiniteList.svelte';
 import { twMerge } from 'tailwind-merge';
 import { FlowChatManager } from './FlowChatManager.svelte';
+import { fade } from 'svelte/transition';
 let { manager } = $props();
 function getConversationTitle(conversation) {
     return conversation.title || `Conversation ${conversation.created_at.slice(0, 10)}`;
@@ -12,35 +13,37 @@ function getConversationTitle(conversation) {
 </script>
 
 <div
-	class="flex flex-col h-full bg-surface border-r border-gray-200 dark:border-gray-700 transition-all duration-300 {manager.isSidebarExpanded
+	class="flex flex-col h-full bg-surface border-r transition-all duration-300 {manager.isSidebarExpanded
 		? 'w-60'
-		: 'w-16'}"
+		: 'w-[44px]'}"
 >
 	<!-- Header -->
-	<div class="flex-shrink-0 p-2 border-b border-gray-200 dark:border-gray-700">
-		<div class="flex flex-col gap-2">
+	<div class="flex-shrink-0 border-b">
+		<div class="flex flex-col gap-2 p-1">
 			<Button
-				size="sm"
-				color="light"
-				startIcon={{ icon: manager.isSidebarExpanded ? PanelLeftClose : PanelLeftOpen }}
-				onclick={() => (manager.isSidebarExpanded = !manager.isSidebarExpanded)}
+				unifiedSize="md"
+				variant="subtle"
+				startIcon={{
+					icon: manager.isSidebarExpanded ? PanelLeftClose : PanelLeftOpen,
+					classes: 'ml-[2px]'
+				}}
+				onClick={() => (manager.isSidebarExpanded = !manager.isSidebarExpanded)}
 				iconOnly={!manager.isSidebarExpanded}
-				btnClasses={manager.isSidebarExpanded ? '!justify-start' : ''}
-				label="Conversations"
+				btnClasses={'justify-start transition-all duration-150'}
+				title="Conversations"
 			>
-				Conversations
+				<div transition:fade={{ duration: 100 }}> Conversations </div>
 			</Button>
 			<Button
-				size="sm"
-				color="light"
-				startIcon={{ icon: Plus }}
-				onclick={() => manager.createConversation({ clearMessages: true })}
+				unifiedSize="md"
+				variant="subtle"
+				startIcon={{ icon: Plus, classes: 'ml-[2px]' }}
+				onClick={() => manager.createConversation({ clearMessages: true })}
 				title="Start new conversation"
 				iconOnly={!manager.isSidebarExpanded}
-				btnClasses={manager.isSidebarExpanded ? '!justify-start' : ''}
-				label="New chat"
+				btnClasses={'justify-start transition-all duration-150 whitespace-nowrap'}
 			>
-				New chat
+				<div transition:fade={{ duration: 100 }}> New chat </div>
 			</Button>
 		</div>
 	</div>
@@ -48,71 +51,79 @@ function getConversationTitle(conversation) {
 	<!-- Conversations List -->
 	{#if !manager.isSidebarExpanded}
 		<!-- Collapsed state - show single chat icon with badge -->
-		<div class="p-2 flex flex-col items-center mt-2">
-			<button
-				class="relative w-[23px] h-[23px] rounded-md center-center hover:bg-surface-hover transition-all duration-100 text-secondary hover:text-primary group"
-				onclick={() => (manager.isSidebarExpanded = true)}
+		<div class="p-1">
+			<Button
+				unifiedSize="md"
+				startIcon={{ icon: MessageCircle }}
+				onClick={() => (manager.isSidebarExpanded = true)}
 				title="{manager.conversations.length} conversation{manager.conversations.length !== 1
 					? 's'
 					: ''}"
+				variant="subtle"
+				btnClasses="w-fit px-2 relative"
 			>
-				<MessageCircle size={16} />
-				<CountBadge count={manager.conversations.length} small={true} alwaysVisible={true} />
-			</button>
+				<CountBadge
+					count={manager.conversations.length}
+					small
+					alwaysVisible={true}
+					class="right-[3px] top-[3px]"
+				/>
+			</Button>
 		</div>
 	{/if}
 
 	<!-- Always mount InfiniteList, but hide it when collapsed -->
-	<div class="flex-1 overflow-hidden" class:hidden={!manager.isSidebarExpanded}>
+	<div
+		class="flex-1 overflow-hidden transition-all duration-150 p-1"
+		class:hidden={!manager.isSidebarExpanded}
+	>
 		<InfiniteList
 			bind:this={manager.conversationListComponent}
 			bind:items={manager.conversations}
 			selectedItemId={manager.selectedConversationId}
 			noBorder={true}
 			rounded={false}
+			preventXOverflow={true}
 		>
-			{#snippet children({ item: conversation, hover })}
-				<div
-					class={twMerge(
-						'w-full p-1',
-						manager.selectedConversationId === conversation.id
-							? 'bg-blue-200/30 text-blue-500 dark:bg-blue-600/30 text-blue-400'
-							: ''
-					)}
-				>
-					<Button
-						color="transparent"
-						size="xs"
-						onclick={() => manager.selectConversation(conversation.id, conversation.isDraft)}
-					>
-						<span class="flex-1 text-left text-sm font-medium text-primary truncate">
-							{getConversationTitle(conversation)}
-						</span>
-						<button
-							class="ml-2 p-1 rounded hover:bg-red-100 dark:hover:bg-red-900/30 text-red-500 transition-all {hover ||
-							manager.deletingConversationId === conversation.id
-								? 'opacity-100'
-								: 'opacity-0'}"
-							disabled={manager.deletingConversationId === conversation.id}
-							onclick={(e) => {
-								e.stopPropagation()
-								if (conversation.isDraft) {
-									// just remove first conversation as it is the draft
-									manager.conversations = [...manager.conversations.slice(1)]
-								} else {
-									manager.conversationListComponent?.deleteItem(conversation.id)
-								}
-							}}
-							title="Delete conversation"
+			{#snippet customRow({ item: conversation, hover })}
+				{#if manager.isSidebarExpanded}
+					<div class={twMerge('w-full pb-1')} transition:fade={{ duration: 100, delay: 30 }}>
+						<Button
+							unifiedSize="md"
+							variant="subtle"
+							onClick={() => manager.selectConversation(conversation.id, conversation.isDraft)}
+							selected={manager.selectedConversationId === conversation.id}
+							btnClasses="transition-all duration-150 group"
 						>
-							{#if manager.deletingConversationId === conversation.id}
-								<Loader2 size={14} class="animate-spin" />
-							{:else}
-								<Trash2 size={14} />
-							{/if}
-						</button>
-					</Button>
-				</div>
+							<span class="flex-1 text-left truncate">
+								{getConversationTitle(conversation)}
+							</span>
+							<Button
+								wrapperClasses={twMerge(
+									'ml-2 transition-all duration-100  opacity-0 group-hover:opacity-100',
+									manager.deletingConversationId === conversation.id ? 'opacity-100' : ' '
+								)}
+								disabled={manager.deletingConversationId === conversation.id}
+								onClick={(e) => {
+									e?.stopPropagation()
+									if (conversation.isDraft) {
+										// just remove first conversation as it is the draft
+										manager.conversations = [...manager.conversations.slice(1)]
+									} else {
+										manager.conversationListComponent?.deleteItem(conversation.id)
+									}
+								}}
+								title="Delete conversation"
+								destructive
+								unifiedSize="xs"
+								variant="subtle"
+								loading={manager.deletingConversationId === conversation.id}
+								iconOnly
+								startIcon={{ icon: Trash2 }}
+							/>
+						</Button>
+					</div>
+				{/if}
 			{/snippet}
 
 			{#snippet empty()}
@@ -122,13 +133,4 @@ function getConversationTitle(conversation) {
 			{/snippet}
 		</InfiniteList>
 	</div>
-
-	{#if manager.isSidebarExpanded}
-		<!-- Footer -->
-		<div class="flex-shrink-0 p-4 border-t border-gray-200 dark:border-gray-700">
-			<p class="text-xs text-primary">
-				{manager.conversations.length} conversation{manager.conversations.length !== 1 ? 's' : ''}
-			</p>
-		</div>
-	{/if}
 </div>

package/package/components/flows/flowState.js

@@ -1,3 +1,4 @@
+import { isFlowModuleTool, agentToolToFlowModule } from './agentToolUtils';
 import { loadFlowModuleState } from './flowStateUtils.svelte';
 import { emptyFlowModuleState } from './utils.svelte';
 /**
@@ -31,6 +32,11 @@ async function mapFlowModule(flowModule, modulesState) {
     if (value.type === 'branchone' || value.type === 'branchall') {
         await Promise.all(value.branches.map((branchModule) => mapFlowModules(branchModule.modules, modulesState)));
     }
+    if (value.type === 'aiagent' && value.tools) {
+        await Promise.all(value.tools.filter(isFlowModuleTool).map(async (tool) => {
+            modulesState[tool.id] = await loadFlowModuleState(agentToolToFlowModule(tool));
+        }));
+    }
     if (value.type === 'identity') {
         modulesState[flowModule.id] = emptyFlowModuleState();
     }

package/package/components/flows/flowStateUtils.svelte.js

@@ -9,6 +9,7 @@ import { loadSchemaFromModule } from './flowInfers';
 import { nextId } from './flowModuleNextId';
 import { findNextAvailablePath } from '../../path';
 import { emptySchema } from '../../utils';
+import { loadStoredConfig } from '../aiProviderStorage';
 export async function loadFlowModuleState(flowModule) {
     try {
         const { input_transforms, schema } = await loadSchemaFromModule(flowModule);
@@ -111,13 +112,15 @@ export async function createBranchAll(id) {
     return [branchesFlowModules, flowModuleState];
 }
 export async function createAiAgent(id) {
+    const storedConfig = loadStoredConfig();
+    const providerValue = storedConfig ?? { kind: 'openai', resource: '', model: '' };
     const aiAgentFlowModules = {
         id,
         value: {
             type: 'aiagent',
             tools: [],
             input_transforms: {
-                provider: { type: 'static', value: undefined },
+                provider: { type: 'static', value: providerValue },
                 output_type: { type: 'static', value: 'text' },
                 user_message: { type: 'static', value: undefined }
             }

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

@@ -65,7 +65,7 @@ export declare function getFirstStepSchema(flowState: FlowState, flow: OpenFlow)
         id: string;
         summary: string | undefined;
         value: {
-            language?: "deno" | "bun" | "python3" | "go" | "bash" | "powershell" | "postgresql" | "mysql" | "bigquery" | "snowflake" | "mssql" | "oracledb" | "graphql" | "nativets" | "php" | undefined;
+            language?: "deno" | "bun" | "python3" | "go" | "bash" | "powershell" | "postgresql" | "mysql" | "bigquery" | "snowflake" | "mssql" | "oracledb" | "graphql" | "nativets" | "php" | "rust" | "ansible" | "csharp" | "nu" | "java" | "ruby" | "duckdb" | undefined;
             path?: string | undefined;
             type: "rawscript" | "script" | "flow" | "forloopflow" | "whileloopflow" | "branchone" | "branchall" | "aiagent" | "identity";
         };

package/package/components/flows/flowStore.svelte.js

@@ -20,9 +20,11 @@ export async function copyFirstStepSchema(flowState, flowStore) {
             });
             return;
         }
-        return sendUserToast('Only scripts can be used as a input schema', true);
+        sendUserToast('Only scripts can be used as a input schema', true);
+        return;
     }
-    return sendUserToast('No first step found', true);
+    sendUserToast('No first step found', true);
+    return;
 }
 export async function getFirstStepSchema(flowState, flow) {
     const firstModuleId = flow.value.modules[0]?.id;

package/package/components/flows/header/FlowImportExportMenu.svelte

@@ -11,7 +11,7 @@ let flow = $derived(flowStore.val);
 <Drawer bind:this={drawer} size="800px">
 	<DrawerContent title="OpenFlow" on:close={() => drawer?.toggleDrawer()}>
 		{#if flow}
-			<FlowViewer flow={cleanFlow(flow)} tab="raw" />
+			<FlowViewer flow={cleanFlow(flow)} initTab="raw" />
 		{/if}
 	</DrawerContent>
 </Drawer>

package/package/components/flows/header/FlowPreviewButtons.svelte

@@ -4,7 +4,7 @@ import FlowPreviewContent from '../../FlowPreviewContent.svelte';
 import { createEventDispatcher, tick } from 'svelte';
 import { getContext } from 'svelte';
 import { Play } from 'lucide-svelte';
-let { loading = false, onRunPreview, onJobDone, localModuleStates = $bindable({}) } = $props();
+let { loading = false, onRunPreview, onJobDone, localModuleStates = $bindable({}), suspendStatus } = $props();
 const { selectionManager } = getContext('FlowEditorContext');
 let flowPreviewContent = $state(undefined);
 let preventEscape = $state(false);
@@ -148,6 +148,7 @@ export function getFlowPreviewContent() {
 			render={previewOpen}
 			{onJobDone}
 			{upToId}
+			{suspendStatus}
 		/>
 	</Drawer>
 {/if}