windmill-components 1.522.0 → 1.531.0

package/package/components/Editor.svelte.d.ts

@@ -71,7 +71,7 @@ declare const Editor: $$__sveltets_2_IsomorphicComponent<Props, {
     append: (code: string) => void;
     format: () => Promise<void>;
     getScriptLang: () => string | undefined;
-    reviewAndApplyCode: (code: string) => void;
+    reviewAndApplyCode: (code: string, applyAll?: boolean) => void;
     reloadWebsocket: () => Promise<void>;
     fetchPackageDeps: (deps: DepsToGet) => Promise<void>;
     addAction: (id: string, label: string, callback: (editor: meditor.IStandaloneCodeEditor) => void, keybindings?: number[]) => void;

package/package/components/EditorBar.svelte

@@ -23,13 +23,14 @@ import Toggle from './Toggle.svelte';
 import { DatabaseIcon, DiffIcon, DollarSign, File, History, Library, Link, Package, Plus, RotateCw, Save, Users } from 'lucide-svelte';
 import { capitalize, formatS3Object, toCamel } from '../utils';
 import ScriptVersionHistory from './ScriptVersionHistory.svelte';
-import ScriptGen from './copilot/ScriptGen.svelte';
 import { getResetCode } from '../script_helpers';
 import Popover from './Popover.svelte';
 import ResourceEditorDrawer from './ResourceEditorDrawer.svelte';
 import EditorSettings from './EditorSettings.svelte';
 import S3FilePicker from './S3FilePicker.svelte';
 import DucklakeIcon from './icons/DucklakeIcon.svelte';
+import FlowInlineScriptAiButton from './copilot/FlowInlineScriptAIButton.svelte';
+import ScriptGen from './copilot/ScriptGen.svelte';
 let { lang, editor, websocketAlive, iconOnly = false, validCode = true, kind = 'script', template = 'script', collabMode = false, collabLive = false, collabUsers = [], scriptPath = undefined, diffEditor = undefined, args, noHistory = false, saveToWorkspace = false, customUi = {}, lastDeployedCode = undefined, diffMode = false, showHistoryDrawer = $bindable(false), right, openAiChat = false } = $props();
 let contextualVariablePicker = $state();
 let variablePicker = $state();
@@ -53,7 +54,8 @@ let showContextVarPicker = $derived([
     'rust',
     'csharp',
     'nu',
-    'java'
+    'java',
+    'ruby'
     // for related places search: ADD_NEW_LANG
 ].includes(lang ?? ''));
 let showVarPicker = $derived([
@@ -69,7 +71,8 @@ let showVarPicker = $derived([
     'rust',
     'csharp',
     'nu',
-    'java'
+    'java',
+    'ruby'
     // for related places search: ADD_NEW_LANG
 ].includes(lang ?? ''));
 let showResourcePicker = $derived([
@@ -85,7 +88,8 @@ let showResourcePicker = $derived([
     'rust',
     'csharp',
     'nu',
-    'java'
+    'java',
+    'ruby',
     // for related places search: ADD_NEW_LANG
 ].includes(lang ?? ''));
 let showS3Picker = $derived(['duckdb', 'python3'].includes(lang ?? '') ||
@@ -341,6 +345,8 @@ function windmillPathToCamelCaseName(path) {
 		} else if (lang == 'java') {
 			editor.insertAtCursor(`System.getenv("${name}");`)
 			// for related places search: ADD_NEW_LANG
+		} else if (lang == 'ruby') {
+			editor.insertAtCursor(`ENV['${name}']`)
 		}
 		sendUserToast(`${name} inserted at cursor`)
 	}}
@@ -411,6 +417,11 @@ string ${windmillPathToCamelCaseName(path)} = await client.GetStringAsync(uri);
 		} else if (lang == 'java') {
 			editor.insertAtCursor(`(Wmill.getVariable("${path}"))`)
 			// for related places search: ADD_NEW_LANG
+		} else if (lang == 'ruby') {
+			if (!editor.getCode().includes("require 'windmill/mini'")) {
+				editor.insertAtBeginning("require 'windmill/mini'\n")
+			}
+			editor.insertAtCursor(`get_variable("${path}")`)
 		}
 		sendUserToast(`${name} inserted at cursor`)
 	}}
@@ -500,6 +511,11 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 		} else if (lang == 'java') {
 			editor.insertAtCursor(`(Wmill.getResource("${path}"))`)
 			// for related places search: ADD_NEW_LANG
+		} else if (lang == 'ruby') {
+			if (!editor.getCode().includes("require 'windmill/mini'")) {
+				editor.insertAtBeginning("require 'windmill/mini'\n")
+			}
+			editor.insertAtCursor(`get_resource("${path}")`)
 		} else if (lang == 'duckdb') {
 			let t = { postgresql: 'postgres', mysql: 'mysql', bigquery: 'bigquery' }[resType]
 			if (!t) {
@@ -853,7 +869,11 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 			{/if}
 
 			{#if customUi?.aiGen != false}
-				<ScriptGen {editor} {diffEditor} {lang} {iconOnly} {args} {openAiChat} />
+				{#if openAiChat}
+					<FlowInlineScriptAiButton />
+				{:else}
+					<ScriptGen {editor} {diffEditor} {lang} {iconOnly} {args} />
+				{/if}
 			{/if}
 
 			<EditorSettings {customUi} />

package/package/components/EditorSettings.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">import { Settings } from 'lucide-svelte';
 import FormatOnSave from './FormatOnSave.svelte';
 import VimMode from './VimMode.svelte';
+import RelativeLineNumbers from './RelativeLineNumbers.svelte';
 import { Button } from './common';
 import CodeCompletionStatus from './copilot/CodeCompletionStatus.svelte';
 import Popover from './meltComponents/Popover.svelte';
@@ -36,6 +37,11 @@ export let customUi = {};
 					<VimMode />
 				</div>
 			{/if}
+			{#if customUi?.relativeLineNumbers != false}
+				<div>
+					<RelativeLineNumbers />
+				</div>
+			{/if}
 			{#if customUi?.aiCompletion != false}
 				<div>
 					<CodeCompletionStatus />

package/package/components/FirstStepInputs.svelte

@@ -14,7 +14,7 @@ let error = $state(undefined);
 let mod = $state(undefined);
 async function loadSchema() {
     try {
-        const res = await getFirstStepSchema($flowStateStore, flowStore.val);
+        const res = await getFirstStepSchema(flowStateStore.val, flowStore.val);
         schema = res.schema;
         mod = res.mod;
         dispatch('connectFirstNode', { connectFirstNode: res.connectFirstNode });
@@ -24,7 +24,7 @@ async function loadSchema() {
     }
 }
 $effect(() => {
-    flowStore.val && $flowStateStore && untrack(() => loadSchema());
+    flowStore.val && flowStateStore.val && untrack(() => loadSchema());
 });
 function handleClick() {
     selected = !selected;

package/package/components/FlowBuilder.svelte

@@ -15,7 +15,7 @@ import ScriptEditorDrawer from './flows/content/ScriptEditorDrawer.svelte';
 import { dfs as dfsApply } from './flows/dfs';
 import FlowImportExportMenu from './flows/header/FlowImportExportMenu.svelte';
 import FlowPreviewButtons from './flows/header/FlowPreviewButtons.svelte';
-import { cleanInputs, updateDerivedModuleStatesFromTestJobs } from './flows/utils';
+import { cleanInputs } from './flows/utils';
 import { Calendar, Pen, Save, DiffIcon, HistoryIcon, FileJson, Settings } from 'lucide-svelte';
 import Awareness from './Awareness.svelte';
 import { getAllModules } from './flows/flowExplorer';
@@ -445,13 +445,7 @@ function select(selectedId) {
     selectedIdStore.set(selectedId);
 }
 let insertButtonOpen = writable(false);
-let testModuleId = $state(undefined);
-let modulesTestStates = new ModulesTestStates((moduleId) => {
-    // Update the derived store with test job states
-    delete $derivedModuleStates[moduleId];
-    testModuleId = moduleId;
-    showJobStatus = false;
-});
+let modulesTestStates = new ModulesTestStates();
 let outputPickerOpenFns = $state({});
 let flowEditor = $state(undefined);
 setContext('FlowEditorContext', {
@@ -715,25 +709,8 @@ function onJobDone() {
         }
     }
 }
-const localModuleStates = $derived(flowPreviewContent?.getLocalModuleStates() ?? writable({}));
-const localDurationStatuses = $derived(flowPreviewContent?.getLocalDurationStatuses() ?? writable({}));
-const suspendStatus = $derived(flowPreviewContent?.getSuspendStatus() ?? writable({}));
-// Create a derived store that only shows the module states when showModuleStatus is true
-// this store can also be updated
-let derivedModuleStates = writable({});
-$effect(() => {
-    derivedModuleStates.update((currentStates) => {
-        return showJobStatus ? $localModuleStates : currentStates;
-    });
-});
-$effect(() => {
-    updateDerivedModuleStatesFromTestJobs(testModuleId, modulesTestStates, derivedModuleStates);
-});
-function resetModulesStates() {
-    derivedModuleStates.set({});
-    showJobStatus = false;
-}
-const individualStepTests = $derived(!(showJobStatus && job) && Object.keys($derivedModuleStates).length > 0);
+let localModuleStates = $state({});
+let suspendStatus = $state({ val: {} });
 const flowHasChanged = $derived(flowPreviewContent?.flowHasChanged());
 </script>
 
@@ -798,7 +775,7 @@ const flowHasChanged = $derived(flowPreviewContent?.flowHasChanged());
 							for (const mod of restoredModules) {
 								if (mod) {
 									try {
-										loadFlowModuleState(mod).then((state) => ($flowStateStore[mod.id] = state))
+										loadFlowModuleState(mod).then((state) => (flowStateStore.val[mod.id] = state))
 									} catch (e) {
 										console.error('Error loading state for restored node', e)
 									}
@@ -928,10 +905,12 @@ const flowHasChanged = $derived(flowPreviewContent?.flowHasChanged());
 							showCaptureHint.set(true)
 						}}
 						{onJobDone}
+						bind:localModuleStates
 						bind:this={flowPreviewButtons}
 						{loading}
 						onRunPreview={() => {
-							localModuleStates.set({})
+							modulesTestStates.hideJobsInGraph()
+							localModuleStates = {}
 							showJobStatus = true
 						}}
 					/>
@@ -958,7 +937,7 @@ const flowHasChanged = $derived(flowPreviewContent?.flowHasChanged());
 				</div>
 			</div>
 			<!-- metadata -->
-			{#if $flowStateStore}
+			{#if flowStateStore.val}
 				<FlowEditor
 					bind:this={flowEditor}
 					{disabledFlowInputs}
@@ -1001,19 +980,22 @@ const flowHasChanged = $derived(flowPreviewContent?.flowHasChanged());
 					showFlowAiButton={!disableAi && customUi?.topBar?.aiBuilder != false}
 					toggleAiChat={() => aiChatManager.toggleOpen()}
 					onOpenPreview={flowPreviewButtons?.openPreview}
-					localModuleStates={derivedModuleStates}
+					localModuleStates={showJobStatus ? localModuleStates : {}}
+					{showJobStatus}
+					testModuleStates={modulesTestStates}
 					isOwner={flowPreviewContent?.getIsOwner()}
 					onTestFlow={flowPreviewButtons?.runPreview}
 					isRunning={flowPreviewContent?.getIsRunning()}
 					onCancelTestFlow={flowPreviewContent?.cancelTest}
-					onHideJobStatus={resetModulesStates}
-					{individualStepTests}
+					onHideJobStatus={() => {
+						modulesTestStates.hideJobsInGraph()
+						showJobStatus = false
+					}}
 					{job}
-					{localDurationStatuses}
 					{suspendStatus}
-					{showJobStatus}
 					onDelete={(id) => {
-						delete $derivedModuleStates[id]
+						delete localModuleStates[id]
+						delete modulesTestStates.states[id]
 					}}
 					{flowHasChanged}
 				/>

package/package/components/FlowGraphViewerStep.svelte

@@ -132,6 +132,8 @@ let codeViewer;
 						Inline {stepDetail.value.language} script
 					{:else if stepDetail.value.type == 'script'}
 						Workspace script
+					{:else if stepDetail.value.type == 'aiagent'}
+						AI Agent
 					{/if}
 				</span>
 			</div>
@@ -212,6 +214,11 @@ let codeViewer;
 			{:else}
 				<FlowModuleScript path={stepDetail.value.path} />
 			{/if}
+		{:else if stepDetail.value.type == 'aiagent'}
+			<div class="text-2xs">
+				<h3 class="mb-2 font-semibold mt-2">Step Inputs</h3>
+				<InputTransformsViewer inputTransforms={stepDetail?.value?.input_transforms ?? {}} />
+			</div>
 		{:else if stepDetail.value.type == 'forloopflow'}
 			<div>
 				<p class="font-medium text-secondary pb-2"> Iterator expression: </p>

package/package/components/FlowJobResult.svelte

@@ -1,59 +1,10 @@
 <script lang="ts">import { Loader2 } from 'lucide-svelte';
 import DisplayResult from './DisplayResult.svelte';
 import LogViewer from './LogViewer.svelte';
-import { JobService } from '../gen';
-import { workspaceStore } from '../stores';
-import DrawerContent from './common/drawer/DrawerContent.svelte';
-import { Drawer } from './common';
-import AllFlowLogs from './AllFlowLogs.svelte';
-import { untrack } from 'svelte';
-let { waitingForExecutor = false, result, result_stream, logs = $bindable(), col = false, noBorder = false, loading, filename = undefined, jobId = undefined, tag = undefined, workspaceId = undefined, refreshLog = false, durationStates, downloadLogs = true, tagLabel = undefined } = $props();
-let lastJobId = $state(undefined);
-let drawer = $state(undefined);
-let iteration = 0;
-let logOffset = 0;
-async function diffJobId() {
-    if (jobId != lastJobId) {
-        lastJobId = jobId;
-        logs = undefined;
-        logOffset = 0;
-        iteration = 0;
-        getLogs();
-    }
-}
-async function getLogs() {
-    iteration += 1;
-    if (jobId) {
-        const getUpdate = await JobService.getJobUpdates({
-            workspace: workspaceId ?? $workspaceStore,
-            id: jobId,
-            running: loading ?? false,
-            logOffset: logOffset == 0 ? (logs?.length ? logs?.length + 1 : 0) : logOffset
-        });
-        logs = (logs ?? '').concat(getUpdate.new_logs ?? '');
-        logOffset = getUpdate.log_offset ?? 0;
-    }
-    if (refreshLog) {
-        setTimeout(() => {
-            if (refreshLog) {
-                getLogs();
-            }
-        }, iteration < 10 ? 1000 : iteration < 20 ? 2000 : 5000);
-    }
-}
-$effect(() => {
-    jobId;
-    untrack(() => {
-        jobId != lastJobId && diffJobId();
-    });
-});
+import AiAgentLogViewer from './AIAgentLogViewer.svelte';
+let { waitingForExecutor = false, result, result_stream, logs, col = false, noBorder = false, loading, filename = undefined, jobId = undefined, tag = undefined, workspaceId = undefined, downloadLogs = true, tagLabel = undefined, aiAgentStatus = undefined } = $props();
 </script>
 
-<Drawer bind:this={drawer}>
-	<DrawerContent title="Explore all steps' logs" on:close={drawer.closeDrawer}
-		><AllFlowLogs states={durationStates} /></DrawerContent
-	>
-</Drawer>
 <div
 	class:border={!noBorder}
 	class="grid {!col
@@ -63,7 +14,7 @@ $effect(() => {
 	<div class="bg-surface {col ? '' : 'max-h-80'} p-1 overflow-auto relative">
 		<span class="text-tertiary">Result</span>
 		{#if result !== undefined || result_stream !== undefined}
-			<DisplayResult {workspaceId} {jobId} {filename} {result} {result_stream} />
+			<DisplayResult {workspaceId} {jobId} {filename} {result} {result_stream} growVertical />
 		{:else if loading}
 			<Loader2 class="animate-spin" />
 		{:else}
@@ -71,16 +22,17 @@ $effect(() => {
 		{/if}
 	</div>
 	<div class="overflow-auto {col ? '' : 'max-h-80'} relative">
-		<div class="absolute z-40 text-xs top-0 left-1"
-			><button class="" onclick={drawer.openDrawer}>explore all steps' logs</button></div
-		>
-		<LogViewer
-			{tagLabel}
-			download={downloadLogs}
-			content={logs ?? ''}
-			{jobId}
-			isLoading={waitingForExecutor}
-			{tag}
-		/>
+		{#if aiAgentStatus}
+			<AiAgentLogViewer {...aiAgentStatus} {workspaceId} />
+		{:else}
+			<LogViewer
+				{tagLabel}
+				download={downloadLogs}
+				content={logs ?? ''}
+				{jobId}
+				isLoading={waitingForExecutor}
+				{tag}
+			/>
+		{/if}
 	</div>
 </div>

package/package/components/FlowJobResult.svelte.d.ts

@@ -1,5 +1,4 @@
-import type { DurationStatus } from './graph';
-import type { Writable } from 'svelte/store';
+import type { CompletedJob, FlowModule, Job } from '../gen';
 interface Props {
     waitingForExecutor?: boolean;
     result: any;
@@ -13,10 +12,17 @@ interface Props {
     tag?: string | undefined;
     workspaceId?: string | undefined;
     refreshLog?: boolean;
-    durationStates: Writable<Record<string, DurationStatus>> | undefined;
     downloadLogs?: boolean;
     tagLabel?: string | undefined;
+    aiAgentStatus?: {
+        tools: FlowModule[];
+        agentJob: Partial<CompletedJob> & Pick<CompletedJob, 'id'> & {
+            type: 'CompletedJob';
+        };
+        storedToolCallJobs?: Record<number, Job>;
+        onToolJobLoaded?: (job: Job, idx: number) => void;
+    };
 }
-declare const FlowJobResult: import("svelte").Component<Props, {}, "logs">;
+declare const FlowJobResult: import("svelte").Component<Props, {}, "">;
 type FlowJobResult = ReturnType<typeof FlowJobResult>;
 export default FlowJobResult;