windmill-components 1.493.10 → 1.501.5

package/package/components/ScriptBuilder.svelte.d.ts

@@ -5,31 +5,13 @@ import type { ScheduleTrigger } from './triggers';
 import type { SavedAndModifiedValue } from './common/confirmationModal/unsavedTypes';
 import type { ScriptBuilderFunctionExports } from './scriptBuilder';
 import { type NewScriptWithDraftAndDraftTriggers, type Trigger } from './triggers/utils';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const ScriptBuilder: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+interface Props {
     script: NewScript & {
         draft_triggers?: Trigger[];
     };
     fullyLoaded?: boolean;
     initialPath?: string;
-    template?: "docker" | "bunnative" | "script";
+    template?: 'docker' | 'bunnative' | 'script';
     initialArgs?: Record<string, any>;
     lockedLanguage?: boolean;
     showMeta?: boolean;
@@ -42,35 +24,41 @@ declare const ScriptBuilder: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_P
     customUi?: ScriptBuilderWhitelabelCustomUi;
     savedPrimarySchedule?: ScheduleTrigger | undefined;
     functionExports?: ((exports: ScriptBuilderFunctionExports) => void) | undefined;
-    onevent?: {
-        deploy?: (newHash: string) => void;
-        deployError?: (error: Error) => void;
-        saveInitial?: (path: string) => void;
-        saveDraft?: ({ path, savedAtNewPath, script }: {
-            path: string;
-            savedAtNewPath: boolean;
-            script: NewScript;
-        }) => void;
-        saveDraftError?: (error: Error) => void;
-        seeDetails?: (path: string) => void;
-    };
-    getInitialAndModifiedValues?: () => SavedAndModifiedValue;
-    setPrimarySchedule?: (schedule: ScheduleTrigger | undefined | false) => void;
-    setDraftTriggers?: (triggers: Trigger[] | undefined) => void;
-    setCode?: (code: string) => void;
-}, {
-    default: {};
-}>, {
-    focus: FocusEvent;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {
+    children?: import('svelte').Snippet;
+    onDeploy?: (e: {
+        path: string;
+        hash: string;
+    }) => void;
+    onDeployError?: (e: {
+        path: string;
+        error: any;
+    }) => void;
+    onSaveInitial?: (e: {
+        path: string;
+        hash: string;
+    }) => void;
+    onHistoryRestore?: () => void;
+    onSaveDraftOnlyAtNewPath?: (e: {
+        path: string;
+    }) => void;
+    onSaveDraft?: (e: {
+        path: string;
+        savedAtNewPath: boolean;
+        script: NewScript;
+    }) => void;
+    onSeeDetails?: (e: {
+        path: string;
+    }) => void;
+    onSaveDraftError?: (e: {
+        path: string;
+        error: any;
+    }) => void;
+}
+declare const ScriptBuilder: import("svelte").Component<Props, {
     getInitialAndModifiedValues: () => SavedAndModifiedValue;
     setPrimarySchedule: (schedule: ScheduleTrigger | undefined | false) => void;
     setDraftTriggers: (triggers: Trigger[] | undefined) => void;
     setCode: (code: string) => void;
-}, string>;
-type ScriptBuilder = InstanceType<typeof ScriptBuilder>;
+}, "script" | "template" | "initialPath" | "savedScript">;
+type ScriptBuilder = ReturnType<typeof ScriptBuilder>;
 export default ScriptBuilder;

package/package/components/ScriptEditor.svelte

@@ -10,7 +10,7 @@ import LogPanel from './scriptEditor/LogPanel.svelte';
 import EditorBar, { EDITOR_BAR_WIDTH_THRESHOLD } from './EditorBar.svelte';
 import TestJobLoader from './TestJobLoader.svelte';
 import JobProgressBar from './jobs/JobProgressBar.svelte';
-import { createEventDispatcher, onDestroy, onMount } from 'svelte';
+import { createEventDispatcher, onDestroy, onMount, untrack } from 'svelte';
 import { Button } from './common';
 import SplitPanesWrapper from './splitPanes/SplitPanesWrapper.svelte';
 import WindmillIcon from './icons/WindmillIcon.svelte';
@@ -26,67 +26,49 @@ import Tab from './common/tabs/Tab.svelte';
 import { slide } from 'svelte/transition';
 import CaptureTable from './triggers/CaptureTable.svelte';
 import CaptureButton from './triggers/CaptureButton.svelte';
-import AIChat from './copilot/chat/AIChat.svelte';
 import { setContext } from 'svelte';
 import HideButton from './apps/editor/settingsPanel/HideButton.svelte';
 import { base } from '../base';
-import { SUPPORTED_CHAT_SCRIPT_LANGUAGES } from './copilot/chat/core';
-import { createDispatcherIfMounted } from '../createDispatcherIfMounted';
-// Exported
-export let schema = emptySchema();
-export let code;
-export let path;
-export let lang;
-export let kind = undefined;
-export let template = 'script';
-export let tag;
-export let initialArgs = {};
-export let fixedOverflowWidgets = true;
-export let noSyncFromGithub = false;
-export let editor = undefined;
-export let diffEditor = undefined;
-export let collabMode = false;
-export let edit = true;
-export let noHistory = false;
-export let saveToWorkspace = false;
-export let watchChanges = false;
-export let customUi = undefined;
-export let args = initialArgs;
-export let selectedTab = 'main';
-export let hasPreprocessor = false;
-export let captureTable = undefined;
-export let showCaptures = true;
-export let stablePathForCaptures = '';
-export let lastSavedCode = undefined;
-export let lastDeployedCode = undefined;
-let showHistoryDrawer = false;
-let jobProgressReset;
-let diffMode = false;
-let websocketAlive = {
+import { SUPPORTED_CHAT_SCRIPT_LANGUAGES } from './copilot/chat/script/core';
+import { getStringError } from './copilot/chat/utils';
+import { aiChatManager, AIMode } from './copilot/chat/AIChatManager.svelte';
+import { triggerableByAI } from '../actions/triggerableByAI.svelte';
+let { schema = $bindable(), code = $bindable(), path, lang, kind = undefined, template = 'script', tag, fixedOverflowWidgets = true, noSyncFromGithub = false, editor = $bindable(undefined), diffEditor = $bindable(undefined), collabMode = false, edit = true, noHistory = false, saveToWorkspace = false, watchChanges = false, customUi = undefined, args = $bindable(), selectedTab = $bindable('main'), hasPreprocessor = $bindable(false), captureTable = $bindable(undefined), showCaptures = true, stablePathForCaptures = '', lastSavedCode = undefined, lastDeployedCode = undefined, editor_bar_right } = $props();
+$effect.pre(() => {
+    if (schema == undefined) {
+        schema = emptySchema();
+    }
+});
+let showHistoryDrawer = $state(false);
+let jobProgressReset = $state(undefined);
+let diffMode = $state(false);
+let websocketAlive = $state({
     pyright: false,
     deno: false,
     go: false,
     ruff: false,
     shellcheck: false
-};
+});
 const dispatch = createEventDispatcher();
-const dispatchIfMounted = createDispatcherIfMounted(dispatch);
-$: watchChanges &&
-    (code != undefined || schema != undefined) &&
-    dispatchIfMounted('change', { code, schema });
-let width = 1200;
-let testJobLoader;
-let isValid = true;
-let scriptProgress = undefined;
+$effect(() => {
+    watchChanges &&
+        (code != undefined || schema != undefined) &&
+        dispatch('change', { code, schema });
+});
+let width = $state(1200);
+let testJobLoader = $state(undefined);
+let isValid = $state(true);
+let scriptProgress = $state(undefined);
+let logPanel = $state(undefined);
 // Test
-let testIsLoading = false;
-let testJob;
-let pastPreviews = [];
-let validCode = true;
-let wsProvider = undefined;
-let yContent = undefined;
-let peers = [];
-let showCollabPopup = false;
+let testIsLoading = $state(false);
+let testJob = $state();
+let pastPreviews = $state([]);
+let validCode = $state(true);
+let wsProvider = $state(undefined);
+let yContent = $state(undefined);
+let peers = $state([]);
+let showCollabPopup = $state(false);
 const url = new URL(window.location.toString());
 let initialCollab = /true|1/i.test(url.searchParams.get('collab') ?? '0');
 if (initialCollab) {
@@ -100,10 +82,6 @@ function onKeyDown(event) {
         event.preventDefault();
         runTest();
     }
-    else if ((event.ctrlKey || event.metaKey) && event.key == 'l') {
-        event.preventDefault();
-        toggleAiPanel();
-    }
     else if ((event.ctrlKey || event.metaKey) && event.key == 'u') {
         event.preventDefault();
         toggleTestPanel();
@@ -118,9 +96,9 @@ export async function runTest() {
         jobProgressReset();
     //@ts-ignore
     let job = await testJobLoader.runPreview(path, code, lang, selectedTab === 'preprocessor' || kind === 'preprocessor'
-        ? { _ENTRYPOINT_OVERRIDE: 'preprocessor', ...args }
-        : args, tag);
-    setFocusToLogs();
+        ? { _ENTRYPOINT_OVERRIDE: 'preprocessor', ...(args ?? {}) }
+        : (args ?? {}), tag);
+    logPanel?.setFocusToLogs();
     return job;
 }
 async function loadPastTests() {
@@ -160,6 +138,7 @@ export async function inferSchema(code, nlang, resetArgs = false) {
 onMount(() => {
     inferSchema(code);
     loadPastTests();
+    aiChatManager.changeMode(AIMode.SCRIPT);
 });
 setLicense();
 export async function setCollaborationMode() {
@@ -218,6 +197,10 @@ export function disableCollaboration() {
 }
 onDestroy(() => {
     disableCollaboration();
+    aiChatManager.scriptEditorApplyCode = undefined;
+    aiChatManager.scriptEditorShowDiffMode = undefined;
+    aiChatManager.scriptEditorOptions = undefined;
+    aiChatManager.changeMode(AIMode.NAVIGATOR);
 });
 function asKind(str) {
     return str;
@@ -227,49 +210,24 @@ function collabUrl() {
     url.search = '';
     return `${url}?collab=1` + (edit ? '' : `&path=${path}`);
 }
-$: showTabs = hasPreprocessor;
-$: !hasPreprocessor && (selectedTab = 'main');
-$: selectedTab && inferSchema(code);
-let argsRender = 0;
+let showTabs = $derived(hasPreprocessor);
+$effect(() => {
+    !hasPreprocessor && (selectedTab = 'main');
+});
+$effect(() => {
+    selectedTab && code && untrack(() => inferSchema(code));
+});
+let argsRender = $state(0);
 export async function updateArgs(newArgs) {
     if (Object.keys(newArgs).length > 0) {
         args = { ...newArgs };
         argsRender++;
     }
 }
-let setFocusToLogs = () => { };
 setContext('disableTooltips', customUi?.disableTooltips === true);
-let aiPanelSize = !$copilotInfo.enabled ||
-    !SUPPORTED_CHAT_SCRIPT_LANGUAGES.includes(lang ?? '') ||
-    localStorage.getItem('aiPanelOpen') === 'false'
-    ? 0
-    : 30;
-let codePanelSize = 40 + (30 - aiPanelSize);
-let storedAiPanelSize = aiPanelSize > 0 ? aiPanelSize : 30;
-let testPanelSize = 30;
-let storedTestPanelSize = testPanelSize;
-function toggleAiPanel() {
-    if (!$copilotInfo.enabled)
-        return;
-    if (aiPanelSize > 0) {
-        storedAiPanelSize = aiPanelSize;
-        codePanelSize += aiPanelSize;
-        aiPanelSize = 0;
-        localStorage.setItem('aiPanelOpen', 'false');
-    }
-    else {
-        codePanelSize -= storedAiPanelSize;
-        aiPanelSize = storedAiPanelSize;
-        localStorage.setItem('aiPanelOpen', 'true');
-    }
-}
-function addSelectedLinesToAiChat(e) {
-    if (aiChat) {
-        aiChat.addSelectedLinesToContext(e.detail.lines, e.detail.startLine, e.detail.endLine);
-        aiChat.focusTextArea();
-    }
-}
-$: !SUPPORTED_CHAT_SCRIPT_LANGUAGES.includes(lang ?? '') && aiPanelSize > 0 && toggleAiPanel();
+let codePanelSize = $state(70);
+let testPanelSize = $state(30);
+let storedTestPanelSize = untrack(() => testPanelSize);
 function toggleTestPanel() {
     if (testPanelSize > 0) {
         storedTestPanelSize = testPanelSize;
@@ -281,15 +239,9 @@ function toggleTestPanel() {
         testPanelSize = storedTestPanelSize;
     }
 }
-let aiChat = undefined;
-function getStringError(job) {
-    if (job != undefined &&
-        job.type === 'CompletedJob' &&
-        typeof job.result == 'object' &&
-        job.result != null &&
-        `error` in job.result &&
-        job.result.error) {
-        return JSON.stringify(job.result.error, null, 2);
+function getError(job) {
+    if (job != undefined && job.type === 'CompletedJob' && !job.success) {
+        return getStringError(job.result);
     }
     return undefined;
 }
@@ -305,7 +257,27 @@ function hideDiffMode() {
     diffEditor?.hide();
     editor?.show();
 }
-$: error = getStringError(testJob);
+let error = $derived(getError(testJob));
+$effect(() => {
+    const options = {
+        code,
+        lang: lang,
+        error,
+        args: args ?? {},
+        path,
+        lastSavedCode,
+        lastDeployedCode,
+        diffMode
+    };
+    untrack(() => {
+        aiChatManager.scriptEditorOptions = options;
+        aiChatManager.scriptEditorApplyCode = (code) => {
+            hideDiffMode();
+            editor?.reviewAndApplyCode(code);
+        };
+        aiChatManager.scriptEditorShowDiffMode = showDiffMode;
+    });
+});
 </script>
 
 <TestJobLoader
@@ -316,7 +288,16 @@ $: error = getStringError(testJob);
 	bind:job={testJob}
 />
 
-<svelte:window on:keydown={onKeyDown} />
+<svelte:window onkeydown={onKeyDown} />
+
+<!-- Standalone triggerable registration for the script editor -->
+<div
+	style="display: none"
+	use:triggerableByAI={{
+		id: 'script-editor',
+		description: 'Component to edit a script'
+	}}
+></div>
 
 <Modal title="Invite others" bind:open={showCollabPopup}>
 	<div>Have others join by sharing the following url:</div>
@@ -333,42 +314,46 @@ $: error = getStringError(testJob);
 </Modal>
 <div class="border-b shadow-sm px-1 pr-4" bind:clientWidth={width}>
 	<div class="flex justify-between space-x-2">
-		<EditorBar
-			scriptPath={edit ? path : undefined}
-			on:toggleCollabMode={() => {
-				if (wsProvider?.shouldConnect) {
-					disableCollaboration()
-				} else {
-					setCollaborationMode()
-				}
-			}}
-			on:showDiffMode={showDiffMode}
-			on:hideDiffMode={hideDiffMode}
-			customUi={{ ...customUi?.editorBar, aiGen: false }}
-			collabLive={wsProvider?.shouldConnect}
-			{collabMode}
-			{validCode}
-			iconOnly={width < EDITOR_BAR_WIDTH_THRESHOLD}
-			on:collabPopup={() => (showCollabPopup = true)}
-			{editor}
-			{lang}
-			on:createScriptFromInlineScript
-			{websocketAlive}
-			collabUsers={peers}
-			kind={asKind(kind)}
-			{template}
-			{diffEditor}
-			{args}
-			{noHistory}
-			{saveToWorkspace}
-			lastDeployedCode={lastDeployedCode && lastDeployedCode !== code
-				? lastDeployedCode
-				: undefined}
-			{diffMode}
-			bind:showHistoryDrawer
-		>
-			<slot name="editor-bar-right" slot="right" />
-		</EditorBar>
+		{#if args}
+			<EditorBar
+				scriptPath={edit ? path : undefined}
+				on:toggleCollabMode={() => {
+					if (wsProvider?.shouldConnect) {
+						disableCollaboration()
+					} else {
+						setCollaborationMode()
+					}
+				}}
+				on:showDiffMode={showDiffMode}
+				on:hideDiffMode={hideDiffMode}
+				customUi={{ ...customUi?.editorBar, aiGen: false }}
+				collabLive={wsProvider?.shouldConnect}
+				{collabMode}
+				{validCode}
+				iconOnly={width < EDITOR_BAR_WIDTH_THRESHOLD}
+				on:collabPopup={() => (showCollabPopup = true)}
+				{editor}
+				{lang}
+				on:createScriptFromInlineScript
+				{websocketAlive}
+				collabUsers={peers}
+				kind={asKind(kind)}
+				{template}
+				{diffEditor}
+				{args}
+				{noHistory}
+				{saveToWorkspace}
+				lastDeployedCode={lastDeployedCode && lastDeployedCode !== code
+					? lastDeployedCode
+					: undefined}
+				{diffMode}
+				bind:showHistoryDrawer
+			>
+				{#snippet right()}
+					{@render editor_bar_right?.()}
+				{/snippet}
+			</EditorBar>
+		{/if}
 		{#if !noSyncFromGithub && customUi?.editorBar?.useVsCode != false}
 			<div class="py-1">
 				<Button
@@ -392,7 +377,24 @@ $: error = getStringError(testJob);
 		<Pane bind:size={codePanelSize} minSize={10} class="!overflow-visible">
 			<div class="h-full !overflow-visible bg-gray-50 dark:bg-[#272D38] relative">
 				<div class="absolute top-2 right-4 z-10 flex flex-row gap-2">
-					{#if aiPanelSize === 0}
+					{#if testPanelSize === 0}
+						<HideButton
+							hidden={true}
+							direction="right"
+							size="md"
+							panelName="Test"
+							shortcut="U"
+							customHiddenIcon={{
+								icon: PlayIcon
+							}}
+							on:click={() => {
+								toggleTestPanel()
+							}}
+							btnClasses="bg-marine-400 hover:bg-marine-200 !text-primary-inverse hover:!text-primary-inverse hover:dark:!text-primary-inverse dark:bg-marine-50 dark:hover:bg-marine-50/70"
+							color="marine"
+						/>
+					{/if}
+					{#if !aiChatManager.open}
 						{#if customUi?.editorBar?.aiGen != false && SUPPORTED_CHAT_SCRIPT_LANGUAGES.includes(lang ?? '')}
 							<HideButton
 								hidden={true}
@@ -401,13 +403,15 @@ $: error = getStringError(testJob);
 								shortcut="L"
 								size="md"
 								usePopoverOverride={!$copilotInfo.enabled}
-								customHiddenIcon={WandSparkles}
+								customHiddenIcon={{
+									icon: WandSparkles
+								}}
 								btnClasses="!text-violet-800 dark:!text-violet-400 border border-gray-200 dark:border-gray-600 bg-surface"
 								on:click={() => {
-									toggleAiPanel()
+									aiChatManager.toggleOpen()
 								}}
 							>
-								<svelte:fragment slot="popoverOverride">
+								{#snippet popoverOverride()}
 									<div class="text-sm">
 										Enable Windmill AI in the <a
 											href="{base}/workspace_settings?tab=ai"
@@ -417,24 +421,9 @@ $: error = getStringError(testJob);
 											workspace settings <ExternalLink size={16} />
 										</a>
 									</div>
-								</svelte:fragment>
+								{/snippet}
 							</HideButton>
 						{/if}
-						{#if testPanelSize === 0}
-							<HideButton
-								hidden={true}
-								direction="right"
-								size="md"
-								panelName="Test"
-								shortcut="U"
-								customHiddenIcon={PlayIcon}
-								on:click={() => {
-									toggleTestPanel()
-								}}
-								btnClasses="bg-marine-400 hover:bg-marine-200 !text-primary-inverse hover:!text-primary-inverse hover:dark:!text-primary-inverse dark:bg-marine-50 dark:hover:bg-marine-50/70"
-								color="marine"
-							/>
-						{/if}
 					{/if}
 				</div>
 				{#key lang}
@@ -451,10 +440,12 @@ $: error = getStringError(testJob);
 							inferSchema(e.detail)
 						}}
 						on:saveDraft
-						on:toggleAiPanel={toggleAiPanel}
-						on:addSelectedLinesToAiChat={addSelectedLinesToAiChat}
+						on:toggleAiPanel={() => aiChatManager.toggleOpen()}
+						on:addSelectedLinesToAiChat={(e) => {
+							const { lines, startLine, endLine } = e.detail
+							aiChatManager.addSelectedLinesToContext(lines, startLine, endLine)
+						}}
 						on:toggleTestPanel={toggleTestPanel}
-						isAiPanelOpen={aiPanelSize > 0}
 						cmdEnterAction={async () => {
 							await inferSchema(code)
 							runTest()
@@ -489,57 +480,6 @@ $: error = getStringError(testJob);
 				{/key}
 			</div>
 		</Pane>
-		{#if lang && $copilotInfo.enabled}
-			<Pane bind:size={aiPanelSize} minSize={0}>
-				<AIChat
-					bind:this={aiChat}
-					{code}
-					{lang}
-					{error}
-					{args}
-					{path}
-					on:applyCode={(e) => {
-						hideDiffMode()
-						editor?.reviewAndApplyCode(e.detail.code)
-					}}
-					on:showDiffMode={showDiffMode}
-					{lastSavedCode}
-					{lastDeployedCode}
-					{diffMode}
-				>
-					<svelte:fragment slot="header-left">
-						<HideButton
-							hidden={false}
-							direction="right"
-							panelName="AI"
-							shortcut="L"
-							size="md"
-							on:click={() => {
-								toggleAiPanel()
-							}}
-						/>
-					</svelte:fragment>
-					<svelte:fragment slot="header-right">
-						{#if testPanelSize === 0}
-							<div class="bg-gray-200 h-6 w-[1px] rounded-full dark:bg-gray-600"></div>
-							<HideButton
-								hidden={true}
-								direction="right"
-								panelName="Test"
-								shortcut="U"
-								size="md"
-								customHiddenIcon={PlayIcon}
-								on:click={() => {
-									toggleTestPanel()
-								}}
-								btnClasses="bg-marine-400 hover:bg-marine-200 !text-primary-inverse hover:!text-primary-inverse hover:dark:!text-primary-inverse dark:bg-marine-50 dark:hover:bg-marine-50/70"
-								color="marine"
-							/>
-						{/if}
-					</svelte:fragment>
-				</AIChat>
-			</Pane>
-		{/if}
 		<Pane bind:size={testPanelSize} minSize={0}>
 			<div class="flex flex-col h-full">
 				{#if showTabs}
@@ -651,11 +591,7 @@ $: error = getStringError(testJob);
 					</Pane>
 					<Pane size={67} class="relative">
 						<LogPanel
-							bind:setFocusToLogs
-							on:fix={() => {
-								aiChat?.fix()
-							}}
-							fixChatMode
+							bind:this={logPanel}
 							{lang}
 							previewJob={testJob}
 							{pastPreviews}
@@ -675,7 +611,7 @@ $: error = getStringError(testJob);
 									compact={true}
 								/>
 							{/if}
-							<svelte:fragment slot="capturesTab">
+							{#snippet capturesTab()}
 								<div class="h-full p-2">
 									<CaptureTable
 										bind:this={captureTable}
@@ -689,7 +625,7 @@ $: error = getStringError(testJob);
 										on:addPreprocessor
 									/>
 								</div>
-							</svelte:fragment>
+							{/snippet}
 						</LogPanel>
 					</Pane>
 				</Splitpanes>