windmill-components 1.550.0 → 1.555.0

package/package/components/FlowPreviewContent.svelte

@@ -20,6 +20,7 @@ import FlowHistoryJobPicker from './FlowHistoryJobPicker.svelte';
 import { getStepHistoryLoaderContext } from './stepHistoryLoader.svelte';
 import { aiChatManager } from './copilot/chat/AIChatManager.svelte';
 import { stateSnapshot } from '../svelte5Utils.svelte';
+import FlowChatInterface from './flows/FlowChatInterface.svelte';
 let { previewMode = $bindable(), open, preventEscape = $bindable(false), jobId = $bindable(undefined), job = $bindable(undefined), initial = $bindable(false), selectedJobStep = $bindable(undefined), selectedJobStepIsTopLevel = $bindable(undefined), selectedJobStepType = $bindable('single'), rightColumnSelect = $bindable('timeline'), branchOrIterationN = $bindable(0), scrollTop = $bindable(0), localModuleStates = $bindable({}), localDurationStatuses = $bindable({}), onRunPreview, render = false, onJobDone, upToId = undefined } = $props();
 let restartBranchNames = [];
 let isRunning = $state(false);
@@ -29,9 +30,9 @@ let schemaHeight = $state(0);
 let isValid = $state(true);
 let suspendStatus = $state({ val: {} });
 let isOwner = $state(false);
-export function test() {
+export async function test() {
     renderCount++;
-    runPreview(previewArgs.val, undefined);
+    return await runPreview(previewArgs.val, undefined);
 }
 const { selectedId, previewArgs, flowStateStore, flowStore, pathStore, initialPathStore, fakeInitialPath, customUi, executionCount } = $state(getContext('FlowEditorContext'));
 const dispatch = createEventDispatcher();
@@ -58,6 +59,7 @@ function extractFlow(previewMode) {
 }
 let lastPreviewFlow = $state(undefined);
 export async function runPreview(args, restartedFrom) {
+    let newJobId = undefined;
     if (stepHistoryLoader?.flowJobInitial !== false) {
         stepHistoryLoader?.setFlowJobInitial(false);
     }
@@ -65,7 +67,8 @@ export async function runPreview(args, restartedFrom) {
         lastPreviewFlow = JSON.stringify(flowStore.val);
         flowProgressBar?.reset();
         const newFlow = extractFlow(previewMode);
-        jobId = await runFlowPreview(args, newFlow, $pathStore, restartedFrom);
+        newJobId = await runFlowPreview(args, newFlow, $pathStore, restartedFrom);
+        jobId = newJobId;
         isRunning = true;
         if (inputSelected) {
             savedArgs = $state.snapshot(previewArgs.val);
@@ -79,6 +82,7 @@ export async function runPreview(args, restartedFrom) {
         jobId = undefined;
     }
     schemaFormWithArgPicker?.refreshHistory();
+    return newJobId;
 }
 function onKeyDown(event) {
     if (open) {
@@ -323,25 +327,27 @@ export function flowHasChanged() {
 							</Popover>
 						{/if}
 					{/if}
-					<Button
-						variant="contained"
-						startIcon={{ icon: isRunning ? RefreshCw : Play }}
-						color="dark"
-						size="sm"
-						btnClasses="w-full max-w-lg"
-						on:click={() => runPreview(previewArgs.val, undefined)}
-						id="flow-editor-test-flow-drawer"
-						shortCut={{ Icon: CornerDownLeft }}
-					>
-						{#if previewMode == 'upTo'}
-							Test up to
-							<Badge baseClass="ml-1" color="indigo">
-								{$selectedId}
-							</Badge>
-						{:else}
-							Test flow
-						{/if}
-					</Button>
+					{#if !flowStore.val.value?.chat_input_enabled}
+						<Button
+							variant="contained"
+							startIcon={{ icon: isRunning ? RefreshCw : Play }}
+							color="dark"
+							size="sm"
+							btnClasses="w-full max-w-lg"
+							on:click={() => runPreview(previewArgs.val, undefined)}
+							id="flow-editor-test-flow-drawer"
+							shortCut={{ Icon: CornerDownLeft }}
+						>
+							{#if previewMode == 'upTo'}
+								Test up to
+								<Badge baseClass="ml-1" color="indigo">
+									{$selectedId}
+								</Badge>
+							{:else}
+								Test flow
+							{/if}
+						</Button>
+					{/if}
 				</div>
 			{/if}
 		</div>
@@ -366,81 +372,96 @@ export function flowHasChanged() {
 		onscroll={(e) => handleScroll()}
 	>
 		{#if render}
-			<div class="border-b">
-				<SchemaFormWithArgPicker
-					bind:this={schemaFormWithArgPicker}
-					runnableId={$initialPathStore}
-					stablePathForCaptures={$initialPathStore || fakeInitialPath}
-					runnableType={'FlowPath'}
-					previewArgs={previewArgs.val}
-					on:openTriggers
-					on:select={(e) => {
-						selectInput(e.detail.payload, e.detail?.type)
-					}}
-					{isValid}
-					{jsonView}
-				>
-					<div class="w-full flex flex-row justify-between">
-						<InputSelectedBadge
-							onReject={() => schemaFormWithArgPicker?.resetSelected()}
-							{inputSelected}
-						/>
-						<div class="flex flex-row gap-2">
-							<Toggle
-								bind:checked={jsonView}
-								label="JSON View"
-								size="xs"
-								options={{
-									right: 'JSON',
-									rightTooltip: 'Fill args from JSON'
-								}}
-								lightMode
-								on:change={(e) => {
-									jsonEditor?.setCode(JSON.stringify(previewArgs.val ?? {}, null, '\t'))
-									refresh()
-								}}
-							/>
-						</div>
-					</div>
-					{#if jsonView}
-						<div class="py-2" style="height: {Math.max(schemaHeight, 100)}px" data-schema-picker>
-							<JsonInputs
-								bind:this={jsonEditor}
-								on:select={(e) => {
-									if (e.detail) {
-										previewArgs.val = e.detail
-									}
-								}}
-								updateOnBlur={false}
-								placeholder={`Write args as JSON.<br/><br/>Example:<br/><br/>{<br/>&nbsp;&nbsp;"foo": "12"<br/>}`}
+			{#if flowStore.val.value?.chat_input_enabled}
+				<div class="flex flex-row justify-center w-full">
+					<FlowChatInterface
+						onRunFlow={async (userMessage, _conversationId) => {
+							await runPreview({ user_message: userMessage }, undefined)
+							return jobId ?? ''
+						}}
+						createConversation={async () => {
+							const newConversationId = crypto.randomUUID()
+							return newConversationId
+						}}
+					/>
+				</div>
+			{:else}
+				<div class="border-b">
+					<SchemaFormWithArgPicker
+						bind:this={schemaFormWithArgPicker}
+						runnableId={$initialPathStore}
+						stablePathForCaptures={$initialPathStore || fakeInitialPath}
+						runnableType={'FlowPath'}
+						previewArgs={previewArgs.val}
+						on:openTriggers
+						on:select={(e) => {
+							selectInput(e.detail.payload, e.detail?.type)
+						}}
+						{isValid}
+						{jsonView}
+					>
+						<div class="w-full flex flex-row justify-between">
+							<InputSelectedBadge
+								onReject={() => schemaFormWithArgPicker?.resetSelected()}
+								{inputSelected}
 							/>
+							<div class="flex flex-row gap-2">
+								<Toggle
+									bind:checked={jsonView}
+									label="JSON View"
+									size="xs"
+									options={{
+										right: 'JSON',
+										rightTooltip: 'Fill args from JSON'
+									}}
+									lightMode
+									on:change={(e) => {
+										jsonEditor?.setCode(JSON.stringify(previewArgs.val ?? {}, null, '\t'))
+										refresh()
+									}}
+								/>
+							</div>
 						</div>
-					{:else}
-						{#key renderCount}
-							<div bind:clientHeight={schemaHeight} class="min-h-[40vh]">
-								<SchemaForm
-									noVariablePicker
-									compact
-									schema={flowStore.val.schema}
-									bind:args={previewArgs.val}
-									on:change={() => {
-										savedArgs = $state.snapshot(previewArgs.val)
+						{#if jsonView}
+							<div class="py-2" style="height: {Math.max(schemaHeight, 100)}px" data-schema-picker>
+								<JsonInputs
+									bind:this={jsonEditor}
+									on:select={(e) => {
+										if (e.detail) {
+											previewArgs.val = e.detail
+										}
 									}}
-									bind:isValid
-									helperScript={flowStore.val.schema?.['x-windmill-dyn-select-code'] &&
-									flowStore.val.schema?.['x-windmill-dyn-select-lang']
-										? {
-												source: 'inline',
-												code: flowStore.val.schema['x-windmill-dyn-select-code'] as string,
-												lang: flowStore.val.schema['x-windmill-dyn-select-lang'] as ScriptLang
-											}
-										: undefined}
+									updateOnBlur={false}
+									placeholder={`Write args as JSON.<br/><br/>Example:<br/><br/>{<br/>&nbsp;&nbsp;"foo": "12"<br/>}`}
 								/>
 							</div>
-						{/key}
-					{/if}
-				</SchemaFormWithArgPicker>
-			</div>
+						{:else}
+							{#key renderCount}
+								<div bind:clientHeight={schemaHeight} class="min-h-[40vh]">
+									<SchemaForm
+										noVariablePicker
+										compact
+										schema={flowStore.val.schema}
+										bind:args={previewArgs.val}
+										on:change={() => {
+											savedArgs = $state.snapshot(previewArgs.val)
+										}}
+										bind:isValid
+										helperScript={flowStore.val.schema?.['x-windmill-dyn-select-code'] &&
+										flowStore.val.schema?.['x-windmill-dyn-select-lang']
+											? {
+													source: 'inline',
+													code: flowStore.val.schema['x-windmill-dyn-select-code'] as string,
+													lang: flowStore.val.schema['x-windmill-dyn-select-lang'] as ScriptLang
+												}
+											: undefined}
+									/>
+								</div>
+							{/key}
+						{/if}
+					</SchemaFormWithArgPicker>
+				</div>
+			{/if}
 		{/if}
 		<div class="pt-4 flex flex-col grow relative">
 			<div

package/package/components/FlowPreviewContent.svelte.d.ts

@@ -43,8 +43,8 @@ declare const FlowPreviewContent: $$__sveltets_2_IsomorphicComponent<Props, {
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}, {
-    test: () => void;
-    runPreview: (args: Record<string, any>, restartedFrom: RestartedFrom | undefined) => Promise<void>;
+    test: () => Promise<string | undefined>;
+    runPreview: (args: Record<string, any>, restartedFrom: RestartedFrom | undefined) => Promise<string | undefined>;
     refresh: () => void;
     cancelTest: () => Promise<void>;
     getLocalModuleStates: () => Record<string, GraphModuleState>;
@@ -57,6 +57,6 @@ declare const FlowPreviewContent: $$__sveltets_2_IsomorphicComponent<Props, {
     getIsOwner: () => boolean;
     getJob: () => Job | undefined;
     flowHasChanged: () => boolean;
-}, "initial" | "preventEscape" | "job" | "scrollTop" | "jobId" | "localModuleStates" | "localDurationStatuses" | "rightColumnSelect" | "selectedJobStep" | "previewMode" | "selectedJobStepIsTopLevel" | "selectedJobStepType" | "branchOrIterationN">;
+}, "initial" | "preventEscape" | "job" | "jobId" | "scrollTop" | "localModuleStates" | "localDurationStatuses" | "rightColumnSelect" | "selectedJobStep" | "previewMode" | "selectedJobStepIsTopLevel" | "selectedJobStepType" | "branchOrIterationN">;
 type FlowPreviewContent = InstanceType<typeof FlowPreviewContent>;
 export default FlowPreviewContent;

package/package/components/FlowStatusViewer.svelte

@@ -7,7 +7,7 @@ let lastJobId = jobId;
 let retryStatus = $state({ val: {} });
 let globalRefreshes = $state({});
 setContext('FlowStatusViewer', {
-    flowState: flowState,
+    flowState,
     suspendStatus,
     retryStatus,
     hideDownloadInGraph,
@@ -26,7 +26,8 @@ async function updateJobId() {
         retryStatus.val = {};
         suspendStatus.val = {};
         globalRefreshes = {};
-        flowState = {};
+        for (let key in localModuleStates)
+            delete flowState[key];
         localDurationStatuses = {};
         localModuleStates = {};
     }

package/package/components/FlowStatusViewerInner.svelte

@@ -1326,7 +1326,7 @@ let minTabHeight = $derived(Math.max(tabsHeight.sequenceHeight, tabsHeight.logsH
 		</div>
 		{#if selected == 'logs' && render}
 			<div
-				class="mx-auto"
+				class="mx-auto overflow-auto"
 				bind:clientHeight={tabsHeight.logsHeight}
 				style="min-height: {minTabHeight}px"
 			>

package/package/components/FolderEditor.svelte

@@ -1,5 +1,4 @@
-<script lang="ts">import { run } from 'svelte/legacy';
-import { userStore, workspaceStore } from '../stores';
+<script lang="ts">import { userStore, workspaceStore } from '../stores';
 import { FolderService, UserService, GranularAclService, GroupService } from '../gen';
 import TableCustom from './TableCustom.svelte';
 import { Alert, Button, Drawer, DrawerContent } from './common';
@@ -11,7 +10,7 @@ import Section from './Section.svelte';
 import { Eye, Plus } from 'lucide-svelte';
 import Label from './Label.svelte';
 import { sendUserToast } from '../toast';
-import { createEventDispatcher } from 'svelte';
+import { createEventDispatcher, untrack } from 'svelte';
 import Select from './select/Select.svelte';
 import { safeSelectItems } from './select/utils.svelte';
 let { name } = $props();
@@ -109,9 +108,11 @@ async function updateFolder() {
     dispatch('update');
     loadFolder();
 }
-run(() => {
+$effect.pre(() => {
     if ($workspaceStore && $userStore) {
-        load();
+        untrack(() => {
+            load();
+        });
     }
 });
 </script>
@@ -297,7 +298,6 @@ run(() => {
 													/>
 
 													<ToggleButton
-														position="center"
 														value="writer"
 														label="Writer"
 														tooltip="A writer of a folder has read AND write access to all the elements (scripts/flows/apps/schedules/resources/variables) inside the folder"
@@ -305,7 +305,6 @@ run(() => {
 													/>
 
 													<ToggleButton
-														position="right"
 														value="admin"
 														label="Admin"
 														tooltip="An admin of a folder has read AND write access to all the elements inside the folders and can manage the permissions as well as add new admins"