windmill-components 1.555.1 → 1.558.2

package/package/components/flows/content/FlowInputsQuick.svelte

@@ -97,7 +97,7 @@ const allToplevelNodes = [
     ['While loop', 'whileloop'],
     ['Branch to one', 'branchone'],
     ['Branch to all', 'branchall'],
-    ['AI Agent', 'aiagent']
+    ...(customUi?.aiAgent != false ? [['AI Agent', 'aiagent']] : [])
 ];
 let topLevelNodes = $state([]);
 function computeToplevelNodeChoices(funcDesc, preFilter) {

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

@@ -12,7 +12,7 @@ import { getStepPropPicker } from '../previousResults';
 import { enterpriseLicense } from '../../../stores';
 import FlowModuleSleep from './FlowModuleSleep.svelte';
 import FlowModuleMock from './FlowModuleMock.svelte';
-import { Play } from 'lucide-svelte';
+import { Play, FunctionSquare } from 'lucide-svelte';
 import FlowLoopIterationPreview from '../../FlowLoopIterationPreview.svelte';
 import FlowModuleDeleteAfterUse from './FlowModuleDeleteAfterUse.svelte';
 import IteratorGen from '../../copilot/IteratorGen.svelte';
@@ -21,10 +21,33 @@ import FlowPlugConnect from '../../FlowPlugConnect.svelte';
 import PropPickerWrapper, { CONNECT } from '../propPicker/PropPickerWrapper.svelte';
 import TabsV2 from '../../common/tabs/TabsV2.svelte';
 import { useUiIntent } from '../../copilot/chat/flow/useUiIntent';
+import { emptySchema } from '../../../utils';
+import { slide } from 'svelte/transition';
+import ToggleButtonGroup from '../../common/toggleButton-v2/ToggleButtonGroup.svelte';
+import ToggleButton from '../../common/toggleButton-v2/ToggleButton.svelte';
 const { previewArgs, flowStateStore, flowStore, currentEditor } = getContext('FlowEditorContext');
 let { mod = $bindable(), parentModule, previousModule, noEditor, enableAi = false } = $props();
 let editor = $state(undefined);
+let parallelismEditor = $state(undefined);
 let selected = $state('early-stop');
+let parallelismType = $state(mod.value.type === 'forloopflow'
+    ? mod.value.parallelism?.type === 'javascript'
+        ? 'javascript'
+        : 'static'
+    : undefined);
+let parallelismSchema = $state(emptySchema());
+parallelismSchema.properties['parallelism'] = {
+    type: 'number'
+};
+if (mod.value.type === 'forloopflow') {
+    const forloopValue = mod.value;
+    if (typeof forloopValue.parallelism === 'number') {
+        forloopValue.parallelism = {
+            type: 'static',
+            value: forloopValue.parallelism
+        };
+    }
+}
 // UI Intent handling for AI tool control
 useUiIntent(`forloopflow-${mod.id}`, {
     openTab: (tab) => {
@@ -96,8 +119,8 @@ $effect(() => {
 	<Splitpanes horizontal class="h-full">
 		<Pane size={50} minSize={20} class="p-4">
 			{#if mod.value.type === 'forloopflow'}
-				<div class="flex flex-row gap-8 mt-2 mb-6">
-					<div>
+				<div class="flex flex-row gap-6 mt-2 mb-6">
+					<div class="flex-shrink-0">
 						<div class="mb-2 text-sm font-bold"
 							>Skip failures <Tooltip
 								documentationLink="https://www.windmill.dev/docs/flows/flow_loops"
@@ -111,30 +134,140 @@ $effect(() => {
 							options={{
 								right: 'Skip failures'
 							}}
+							class="whitespace-nowrap"
 						/>
 					</div>
-					<div>
+					<div class="flex-shrink-0">
 						<div class="mb-2 text-sm font-bold">Run in parallel</div>
 						<Toggle
 							bind:checked={mod.value.parallel}
 							options={{
 								right: 'All iterations run in parallel'
 							}}
+							class="whitespace-nowrap"
 						/>
 					</div>
-					<div>
+					<div class="flex-shrink-0">
 						<div class="mb-2 text-sm font-bold"
 							>Parallelism <Tooltip
 								>Assign a maximum number of branches run in parallel to control huge for-loops.</Tooltip
 							>
 						</div>
-						<input
-							type="number"
-							disabled={!mod.value.parallel}
-							bind:value={mod.value.parallelism}
-						/>
+						<div class="flex gap-2 items-center">
+							<input
+								type="number"
+								min="1"
+								class="w-20 px-2 py-1 text-sm border border-gray-200 dark:border-gray-700 rounded bg-surface"
+								disabled={!mod.value.parallel || parallelismType === 'javascript'}
+								placeholder={parallelismType === 'javascript' ? 'Expression' : ''}
+								bind:value={
+									() => {
+										const parallelismExpr = (mod.value as ForloopFlow).parallelism
+
+										return parallelismExpr && parallelismExpr.type === 'static'
+											? parallelismExpr.value
+											: ''
+									},
+									(value) => {
+										;(mod.value as ForloopFlow).parallelism = {
+											type: 'static',
+											value
+										}
+									}
+								}
+							/>
+							<ToggleButtonGroup
+								disabled={!mod.value.parallel}
+								bind:selected={parallelismType}
+								on:selected={(e) => {
+									const forLoopFlow = mod.value as ForloopFlow
+									if (e.detail == parallelismType) return
+									if (e.detail === 'javascript') {
+										if (!forLoopFlow.parallelism || forLoopFlow.parallelism.type !== 'javascript') {
+											;(mod.value as ForloopFlow).parallelism = {
+												type: 'javascript',
+												expr: ''
+											}
+										}
+									} else {
+										if (!forLoopFlow.parallelism || forLoopFlow.parallelism.type !== 'static') {
+											;(mod.value as ForloopFlow).parallelism = {
+												type: 'static',
+												value: 0
+											}
+										}
+									}
+								}}
+								class="h-6"
+							>
+								{#snippet children({ item })}
+									<ToggleButton light small label="static" value="static" {item} />
+
+									<ToggleButton
+										small
+										light
+										tooltip="JavaScript expression ('flow_input' or 'results')."
+										value="javascript"
+										icon={FunctionSquare}
+										{item}
+									/>
+								{/snippet}
+							</ToggleButtonGroup>
+						</div>
 					</div>
 				</div>
+
+				{#if mod.value.type === 'forloopflow' && mod.value.parallel && mod.value.parallelism?.type == 'javascript'}
+					<div class="my-2 flex flex-row gap-2 items-center">
+						<div class="text-sm font-bold whitespace-nowrap">
+							Parallelism expression
+							<Tooltip>
+								JavaScript expression that defines the maximum number of parallel executions.
+								Example: flow_input.max_parallel || 3
+							</Tooltip>
+						</div>
+					</div>
+					<!-- svelte-ignore a11y_no_static_element_interactions -->
+					<div
+						class="border w-full mb-2 h-full max-h-[250px]"
+						id="flow-editor-parallel-expression"
+						transition:slide={{ duration: 300 }}
+					>
+						<PropPickerWrapper
+							notSelectable
+							flow_input={stepPropPicker.pickableProperties.flow_input}
+							pickableProperties={stepPropPicker.pickableProperties}
+							on:select={({ detail }) => {
+								parallelismEditor?.insertAtCursor(detail)
+								parallelismEditor?.focus()
+							}}
+						>
+							<SimpleEditor
+								bind:this={parallelismEditor}
+								autofocus
+								lang="javascript"
+								bind:code={
+									() => {
+										const parallelismExpr = (mod.value as ForloopFlow).parallelism
+
+										return parallelismExpr && parallelismExpr.type === 'javascript'
+											? parallelismExpr.expr
+											: ''
+									},
+									(expr) => {
+										;(mod.value as ForloopFlow).parallelism = {
+											type: 'javascript',
+											expr
+										}
+									}
+								}
+								class="small-editor"
+								shouldBindKey={false}
+								extraLib={stepPropPicker.extraLib}
+							/>
+						</PropPickerWrapper>
+					</div>
+				{/if}
 				<div class="my-2 flex flex-row gap-2 items-center">
 					<div class="text-sm font-bold whitespace-nowrap">
 						Iterator expression

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

@@ -0,0 +1,110 @@
+<script lang="ts">import { Button, Alert } from '../../common';
+import { MessageCircle, Loader2, ArrowUp } from 'lucide-svelte';
+import { workspaceStore } from '../../../stores';
+import autosize from '../../../autosize';
+import FlowChatMessage from './FlowChatMessage.svelte';
+import { createFlowChatManager } from './FlowChatManager.svelte';
+let { onRunFlow, conversationId, refreshConversations, deploymentInProgress = false, createConversation, useStreaming = false, path } = $props();
+const manager = createFlowChatManager();
+// Initialize manager when component mounts
+$effect(() => {
+    if ($workspaceStore) {
+        manager.initialize({
+            onRunFlow,
+            createConversation,
+            refreshConversations,
+            conversationId,
+            useStreaming,
+            path
+        }, $workspaceStore);
+    }
+    return () => {
+        manager.cleanup();
+    };
+});
+// Update conversation ID when it changes
+$effect(() => {
+    manager.updateConversationId(conversationId);
+});
+// Public API for parent components
+export function fillInputMessage(message) {
+    manager.fillInputMessage(message);
+}
+export function focusInput() {
+    manager.focusInput();
+}
+export function clearMessages() {
+    manager.clearMessages();
+}
+export async function loadConversationMessages(conversationId) {
+    await manager.loadConversationMessages(conversationId);
+}
+</script>
+
+<div class="flex flex-col h-full w-full">
+	<div class="flex-1 flex flex-col min-h-0 w-full">
+		<!-- Messages Container -->
+		<div
+			bind:this={manager.messagesContainer}
+			class="flex-1 overflow-y-auto p-4 bg-background"
+			onscroll={manager.handleScroll}
+		>
+			{#if deploymentInProgress}
+				<Alert type="warning" title="Deployment in progress" size="xs" />
+			{/if}
+			{#if manager.isLoadingMessages}
+				<div class="flex items-center justify-center h-full">
+					<Loader2 size={32} class="animate-spin" />
+				</div>
+			{:else if manager.messages.length === 0}
+				<div class="text-center text-tertiary flex items-center justify-center flex-col h-full">
+					<MessageCircle size={48} class="mx-auto mb-4 opacity-50" />
+					<p class="text-lg font-medium">Start a conversation</p>
+					<p class="text-sm">Send a message to run the flow and see the results</p>
+				</div>
+			{:else}
+				<div class="max-w-7xl mx-auto space-y-4">
+					{#each manager.messages as message (message.id)}
+						<FlowChatMessage {message} />
+					{/each}
+					{#if manager.isWaitingForResponse}
+						<div class="flex items-center gap-2 text-tertiary">
+							<Loader2 size={16} class="animate-spin" />
+							<span class="text-sm">Processing...</span>
+						</div>
+					{/if}
+				</div>
+			{/if}
+		</div>
+
+		<!-- Chat Input -->
+		<div class="p-2 bg-surface">
+			<div
+				class="flex items-center gap-2 rounded-lg border border-gray-200 dark:border-gray-600 bg-surface"
+				class:opacity-50={deploymentInProgress}
+			>
+				<textarea
+					bind:this={manager.inputElement}
+					bind:value={manager.inputMessage}
+					use:autosize
+					onkeydown={manager.handleKeyDown}
+					placeholder="Type your message here..."
+					class="flex-1 min-h-[24px] max-h-32 resize-none !border-0 !bg-transparent text-sm placeholder-gray-400 !outline-none !ring-0 p-0 !shadow-none focus:!border-0 focus:!outline-none focus:!ring-0 focus:!shadow-none"
+					rows={3}
+				></textarea>
+				<div class="flex-shrink-0 pr-2">
+					<Button
+						color="blue"
+						size="xs2"
+						btnClasses="!rounded-full !p-1.5"
+						startIcon={{ icon: ArrowUp }}
+						disabled={!manager.inputMessage?.trim() || manager.isLoading || deploymentInProgress}
+						on:click={() => manager.sendMessage()}
+						iconOnly
+						title={deploymentInProgress ? 'Deployment in progress' : 'Send message (Enter)'}
+					/>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>

package/package/components/flows/{FlowChatInterface.svelte.d.ts → conversations/FlowChatInterface.svelte.d.ts}

@@ -13,7 +13,7 @@ declare const FlowChatInterface: import("svelte").Component<Props, {
     fillInputMessage: (message: string) => void;
     focusInput: () => void;
     clearMessages: () => void;
-    loadConversationMessages: (convId: string) => Promise<void>;
+    loadConversationMessages: (conversationId?: string) => Promise<void>;
 }, "">;
 type FlowChatInterface = ReturnType<typeof FlowChatInterface>;
 export default FlowChatInterface;

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

@@ -0,0 +1,52 @@
+import type { FlowConversationMessage } from '../../../gen/types.gen';
+export interface ChatMessage extends FlowConversationMessage {
+    loading?: boolean;
+    streaming?: boolean;
+}
+export interface FlowChatManagerOptions {
+    onRunFlow: (userMessage: string, conversationId: string) => Promise<string | undefined>;
+    createConversation: (options: {
+        clearMessages?: boolean;
+    }) => Promise<string>;
+    refreshConversations?: () => Promise<void>;
+    conversationId?: string;
+    useStreaming?: boolean;
+    path?: string;
+}
+declare class FlowChatManager {
+    #private;
+    messages: ChatMessage[];
+    inputMessage: string;
+    isLoading: boolean;
+    isLoadingMessages: boolean;
+    isWaitingForResponse: boolean;
+    messagesContainer: HTMLDivElement | undefined;
+    inputElement: HTMLTextAreaElement | undefined;
+    page: number;
+    hasMoreMessages: boolean;
+    loadingMoreMessages: boolean;
+    currentEventSource: EventSource | undefined;
+    pollingInterval: number | undefined;
+    initialize(options: FlowChatManagerOptions, workspace: string): void;
+    updateConversationId(conversationId: string | undefined): void;
+    cleanup(): void;
+    fillInputMessage(message: string): void;
+    focusInput(): void;
+    clearMessages(): void;
+    loadConversationMessages(conversationId?: string): Promise<void>;
+    private loadMessages;
+    handleScroll: () => void;
+    scrollToBottom(): void;
+    private scrollToUserMessage;
+    private pollJobResult;
+    private parseStreamDeltas;
+    private pollConversationMessages;
+    private startPolling;
+    private stopPolling;
+    sendMessage(): Promise<void>;
+    private handleStreamingMessage;
+    private handlePollingMessage;
+    handleKeyDown: (event: KeyboardEvent) => void;
+}
+export declare const createFlowChatManager: () => FlowChatManager;
+export {};