windmill-components 1.493.10 → 1.501.4

package/package/components/copilot/AIFormAssistant.svelte.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    onEditInstructions: () => void;
+    instructions: string;
+    runnableType: 'script' | 'flow';
+}
+declare const AiFormAssistant: import("svelte").Component<Props, {}, "">;
+type AiFormAssistant = ReturnType<typeof AiFormAssistant>;
+export default AiFormAssistant;

package/package/components/copilot/AIFormSettings.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">import Label from '../Label.svelte';
+import Toggle from '../Toggle.svelte';
+import Tooltip from '../Tooltip.svelte';
+export let prompt = undefined;
+export let type = 'script';
+</script>
+
+<div class="flex flex-col gap-2">
+	<Toggle
+		size="sm"
+		checked={prompt !== undefined}
+		on:change={() => {
+			if (prompt !== undefined) {
+				prompt = undefined
+			} else {
+				prompt = ''
+			}
+		}}
+		options={{
+			right: `Enable filling ${type} inputs with AI`
+		}}
+	/>
+	{#if prompt !== undefined}
+		<Label label="Additional prompt for AI">
+			<svelte:fragment slot="header">
+				<Tooltip>
+					AI will use script description and each field description to fill the inputs form. In
+					addition, any prompt passed here will be used by AI to guide it. You can mention specific
+					fields and interaction between fields here.
+				</Tooltip>
+			</svelte:fragment>
+			<textarea bind:value={prompt} placeholder="Instructions for the AI about how to fill the form"
+			></textarea>
+		</Label>
+	{/if}
+</div>

package/package/components/copilot/{StepGen.svelte.d.ts → AIFormSettings.svelte.d.ts}

@@ -1,4 +1,3 @@
-import { type FlowModule } from '../../gen';
 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;
@@ -12,18 +11,11 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const StepGen: $$__sveltets_2_IsomorphicComponent<{
-    index: number;
-    open: boolean | undefined;
-    close: () => void;
-    funcDesc: string;
-    modules: FlowModule[];
-    trigger?: boolean;
-    disableAi?: boolean;
+declare const AiFormSettings: $$__sveltets_2_IsomorphicComponent<{
+    prompt?: string | undefined;
+    type?: "flow" | "script";
 }, {
-    insert: CustomEvent<any>;
-} & {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
-type StepGen = InstanceType<typeof StepGen>;
-export default StepGen;
+type AiFormSettings = InstanceType<typeof AiFormSettings>;
+export default AiFormSettings;

package/package/components/copilot/AskAiButton.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">import { Button } from '../common';
+import { WandSparkles } from 'lucide-svelte';
+import { aiChatManager } from './chat/AIChatManager.svelte';
+const { label, initialInput, onClick: onClickProp } = $props();
+export function onClick() {
+    aiChatManager.openChat();
+    if (initialInput) {
+        aiChatManager.askAi(initialInput, {
+            withCode: false,
+            withDiff: false
+        });
+    }
+    onClickProp?.();
+}
+</script>
+
+<Button
+	iconOnly={!label}
+	startIcon={{
+		icon: WandSparkles
+	}}
+	size="xs2"
+	btnClasses="!text-violet-800 dark:!text-violet-400 border border-gray-200 dark:border-gray-600 !bg-surface"
+	on:click={onClick}
+>
+	{label}
+</Button>

package/package/components/copilot/AskAiButton.svelte.d.ts

@@ -0,0 +1,10 @@
+interface Props {
+    label?: string;
+    initialInput?: string;
+    onClick?: () => void;
+}
+declare const AskAiButton: import("svelte").Component<Props, {
+    onClick: () => void;
+}, "">;
+type AskAiButton = ReturnType<typeof AskAiButton>;
+export default AskAiButton;

package/package/components/copilot/CronGen.svelte

@@ -13,7 +13,7 @@ let genLoading = false;
 let abortController = new AbortController();
 $: instructionsField && setTimeout(() => instructionsField?.focus(), 100);
 const SYSTEM_V2 = "You are a helpful assistant for creating CRON schedules using both standard and extended Croner patterns. The structure is 'second minute hour dayOfMonth month dayOfWeek'. Supported modifiers: ? (wildcard), L (last day/weekday), # (nth occurrence of a weekday), and W (closest weekday). Weekdays are Sunday (0 or 7), Monday (1), Tuesday (2), Wednesday (3), Thursday (4), Friday (5), Saturday (6). Ensure syntax is valid, including optional seconds and special modifiers. You only return either the CRON string without any leading/closing quotes or an error message prefixed with 'ERROR:'.";
-const SYSTEM_V1 = "You are a helpful assitant for creating CRON schedules. The structure is 'second minute hour dayOfMonth month dayOfWeek'. Weekdays are Sunday (1), Monday (2), Tuesday (3), Wednesday (4), Thursday (5), Friday (6), Saturday (7). You only return the CRON string without any wrapping characters. If it is invalid, you will return an error message preceeded by 'ERROR:'.";
+const SYSTEM_V1 = "You are a helpful assistant for creating CRON schedules. The structure is 'second minute hour dayOfMonth month dayOfWeek'. Weekdays are Sunday (1), Monday (2), Tuesday (3), Wednesday (4), Thursday (5), Friday (6), Saturday (7). You only return the CRON string without any wrapping characters. If it is invalid, you will return an error message preceded by 'ERROR:'.";
 $: updateSystemPrompt(cronVersion);
 function updateSystemPrompt(version) {
     if (version === 'v2') {

package/package/components/copilot/IteratorGen.svelte

@@ -5,7 +5,7 @@ import { sendUserToast } from '../../toast';
 import ManualPopover from '../ManualPopover.svelte';
 import { createEventDispatcher, getContext } from 'svelte';
 import YAML from 'yaml';
-import { sliceModules } from '../flows/flowStateUtils';
+import { sliceModules } from '../flows/flowStateUtils.svelte';
 import { dfs } from '../flows/dfs';
 import { yamlStringifyExceptKeys } from './utils';
 import { copilotInfo, stepInputCompletionEnabled } from '../../stores';
@@ -30,7 +30,7 @@ async function generateIteratorExpr() {
     }
     abortController = new AbortController();
     loading = true;
-    const flow = JSON.parse(JSON.stringify($flowStore));
+    const flow = JSON.parse(JSON.stringify(flowStore.val));
     const idOrders = dfs(flow.value.modules, (x) => x.id);
     const upToIndex = idOrders.indexOf($selectedId);
     if (upToIndex === -1) {

package/package/components/copilot/MetadataGen.svelte

@@ -8,6 +8,7 @@ import { twMerge } from 'tailwind-merge';
 import autosize from '../../autosize';
 import { yamlStringifyExceptKeys } from './utils';
 import { createDispatcherIfMounted } from '../../createDispatcherIfMounted';
+import { triggerableByAI } from '../../actions/triggerableByAI.svelte';
 const promptConfigs = {
     summary: {
         system: `
@@ -62,6 +63,8 @@ Generate a description for the flow below:
         placeholderName: 'flow'
     }
 };
+export let aiId = undefined;
+export let aiDescription = undefined;
 export let content;
 export let code = undefined;
 export let flow = undefined;
@@ -164,6 +167,16 @@ onDestroy(() => {
 <div
 	class={twMerge('relative', $$props.class)}
 	bind:clientWidth={width}
+	use:triggerableByAI={{
+		id: aiId,
+		description: aiDescription,
+		callback: (value) => {
+			if (value) {
+				content = value
+				dispatchIfMounted('change', { content })
+			}
+		}
+	}}
 	on:keydown={(event) => {
 		if (!$copilotInfo.enabled || !$metadataCompletionEnabled) {
 			return

package/package/components/copilot/MetadataGen.svelte.d.ts

@@ -14,6 +14,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const MetadataGen: $$__sveltets_2_IsomorphicComponent<{
     [x: string]: any;
+    aiId?: string | undefined | undefined;
+    aiDescription?: string | undefined | undefined;
     content: string | undefined;
     code?: string | undefined | undefined;
     flow?: FlowValue | undefined;

package/package/components/copilot/PredicateGen.svelte

@@ -4,7 +4,7 @@ import { getNonStreamingCompletion } from './lib';
 import { sendUserToast } from '../../toast';
 import { createEventDispatcher, getContext } from 'svelte';
 import YAML from 'yaml';
-import { sliceModules } from '../flows/flowStateUtils';
+import { sliceModules } from '../flows/flowStateUtils.svelte';
 import { dfs } from '../flows/dfs';
 import { yamlStringifyExceptKeys } from './utils';
 import { copilotInfo, stepInputCompletionEnabled } from '../../stores';
@@ -20,7 +20,7 @@ const dispatch = createEventDispatcher();
 async function generatePredicate() {
     abortController = new AbortController();
     loading = true;
-    const flow = JSON.parse(JSON.stringify($flowStore));
+    const flow = JSON.parse(JSON.stringify(flowStore.val));
     const idOrders = dfs(flow.value.modules, (x) => x.id);
     const upToIndex = idOrders.indexOf($selectedId);
     if (upToIndex === -1) {

package/package/components/copilot/ScriptFix.svelte

@@ -1,150 +1,16 @@
 <script lang="ts">import { base } from '../../base';
 import { Button } from '../common';
-import { SUPPORTED_LANGUAGES, copilot } from './lib';
-import { sendUserToast } from '../../toast';
-import { dbSchemas, copilotInfo, workspaceStore } from '../../stores';
-import { scriptLangToEditorLang } from '../../scripts';
+import { SUPPORTED_LANGUAGES } from './lib';
 import Popover from '../meltComponents/Popover.svelte';
-import { writable } from 'svelte/store';
-import { WindmillIcon } from '../icons';
-import HighlightCode from '../HighlightCode.svelte';
-import LoadingIcon from '../apps/svelte-select/lib/LoadingIcon.svelte';
 import { autoPlacement } from '@floating-ui/core';
-import { Check, Wand2, X, RotateCw } from 'lucide-svelte';
-import { createEventDispatcher } from 'svelte';
-// props
-export let lang;
-export let editor;
-export let diffEditor;
-export let error;
-export let args;
-export let chatMode = false;
-// state
-let genLoading = false;
-let generatedCode = writable('');
-let generatedExplanation = writable('');
-let dbSchema = undefined;
-let abortController = undefined;
-const dispatch = createEventDispatcher();
-async function onFix() {
-    if (!error) {
-        return;
-    }
-    try {
-        genLoading = true;
-        abortController = new AbortController();
-        await copilot({
-            language: lang,
-            code: editor?.getCode() || '',
-            error,
-            dbSchema: dbSchema,
-            type: 'fix',
-            workspace: $workspaceStore
-        }, generatedCode, abortController, generatedExplanation);
-        setupDiff();
-        diffEditor?.setModified($generatedCode);
-        showDiff();
-    }
-    catch (err) {
-        if (!abortController?.signal.aborted) {
-            if (err?.message) {
-                sendUserToast('Failed to generate code: ' + err.message, true);
-            }
-            else {
-                sendUserToast('Failed to generate code', true);
-                console.error(err);
-            }
-        }
-    }
-    finally {
-        genLoading = false;
-    }
-}
-function acceptDiff() {
-    editor?.setCode(diffEditor?.getModified() || '');
-    editor?.format();
-    clear();
-}
-function rejectDiff() {
-    clear();
-}
-function setupDiff() {
-    diffEditor?.setupModel(scriptLangToEditorLang(lang));
-    diffEditor?.setOriginal(editor?.getCode() || '');
-}
-function showDiff() {
-    diffEditor?.show();
-    editor?.hide();
-}
-function hideDiff() {
-    editor?.show();
-    diffEditor?.hide();
-}
-function clear() {
-    $generatedCode = '';
-    $generatedExplanation = '';
-}
-$: lang && clear();
-$: !$generatedCode && hideDiff();
-function updateSchema(lang, args) {
-    const schemaRes = lang === 'graphql' ? args.api : args.database;
-    if (typeof schemaRes === 'string') {
-        dbSchema = $dbSchemas[schemaRes.replace('$res:', '')];
-    }
-}
-$: updateSchema(lang, args);
-let popover = undefined;
+import { WandSparkles } from 'lucide-svelte';
+import { aiChatManager } from './chat/AIChatManager.svelte';
+import { copilotInfo } from '../../stores';
+let { lang } = $props();
 </script>
 
 {#if SUPPORTED_LANGUAGES.has(lang)}
-	{#if !genLoading && $generatedCode.length > 0}
-		<div class="flex gap-1">
-			<Button
-				title="Discard generated code"
-				size="xs"
-				color="red"
-				spacingSize="xs2"
-				on:click={() => {
-					popover?.close()
-					rejectDiff()
-				}}
-				variant="contained"
-				startIcon={{ icon: X }}
-				propagateEvent={true}
-			>
-				Discard
-			</Button>
-			<Button
-				title="Accept generated code"
-				size="xs"
-				color="green"
-				spacingSize="xs2"
-				on:click={() => {
-					popover?.close()
-					acceptDiff()
-				}}
-				startIcon={{ icon: Check }}
-				propagateEvent={true}
-			>
-				Accept
-			</Button>
-			<Button
-				size="xs"
-				color="light"
-				spacingSize="xs2"
-				on:click={() => {
-					$generatedExplanation = ''
-					popover?.open()
-					onFix()
-				}}
-				startIcon={{ icon: RotateCw }}
-				title="Retry"
-				btnClasses="text-violet-800 dark:text-violet-400"
-			/>
-		</div>
-	{/if}
 	<Popover
-		bind:this={popover}
 		floatingConfig={{
 			middleware: [
 				autoPlacement({
@@ -152,75 +18,39 @@ let popover = undefined;
 				})
 			]
 		}}
-		closeOnOutsideClick={!genLoading}
-		closeButton={!genLoading}
 		displayArrow={true}
 	>
-		<svelte:fragment slot="trigger" let:isOpen>
+		<svelte:fragment slot="trigger">
 			<div class="flex flex-row">
 				<Button
 					title="Fix code"
 					size="xs"
-					color={genLoading ? 'red' : 'light'}
+					color="light"
 					spacingSize="xs2"
-					startIcon={genLoading ? undefined : { icon: Wand2 }}
-					propagateEvent={!chatMode}
-					on:click={chatMode
-						? () => dispatch('fix')
-						: genLoading
-						? () => abortController?.abort()
-						: $generatedCode.length > 0
-							? () => {}
-							: () => onFix()}
-					btnClasses={genLoading
-						? ''
-						: 'text-violet-800 dark:text-violet-400 bg-violet-100 dark:bg-gray-700 min-w-[84px]'}
+					startIcon={{ icon: WandSparkles }}
+					on:click={() => {
+						if ($copilotInfo.enabled) {
+							aiChatManager.fix()
+						}
+					}}
+					btnClasses="text-violet-800 dark:text-violet-400 bg-violet-100 dark:bg-gray-700 min-w-[84px]"
+					propagateEvent={!$copilotInfo.enabled}
 				>
-					{#if genLoading}
-						<WindmillIcon
-							white
-							class="mr-1 text-white"
-							height="16px"
-							width="20px"
-							spin="veryfast"
-						/>
-						Stop
-					{:else if $generatedCode.length > 0}
-						<span class="text-xs">{isOpen ? 'Hide' : 'Show'}</span>
-					{:else}
-						AI Fix
-					{/if}
+					AI Fix
 				</Button>
 			</div>
 		</svelte:fragment>
 		<svelte:fragment slot="content">
 			<div class="p-4">
-				{#if $copilotInfo.enabled}
-					<div class="w-[42rem] min-h-[3rem] max-h-[34rem] overflow-y-auto">
-						{#if $generatedCode.length > 0 && genLoading}
-							<div class="overflow-x-scroll">
-								<HighlightCode language={lang} code={$generatedCode} />
-							</div>
-						{:else if genLoading}
-							<LoadingIcon />
-						{/if}
-						{#if $generatedExplanation.length > 0}
-							<p class="text-sm mt-2"
-								><span class="font-bold">Explanation: test</span> {$generatedExplanation}</p
-							>
-						{/if}
-					</div>
-				{:else}
-					<div class="w-80">
-						<p class="text-sm"
-							>Enable Windmill AI in the <a
-								class="inline-flex flex-row items-center gap-1"
-								href="{base}/workspace_settings?tab=ai"
-								target="_blank">workspace settings</a
-							></p
-						></div
-					>
-				{/if}
+				<div class="w-80">
+					<p class="text-sm"
+						>Enable Windmill AI in the <a
+							class="inline-flex flex-row items-center gap-1"
+							href="{base}/workspace_settings?tab=ai"
+							target="_blank">workspace settings</a
+						></p
+					></div
+				>
 			</div>
 		</svelte:fragment>
 	</Popover>

package/package/components/copilot/ScriptFix.svelte.d.ts

@@ -1,30 +1,7 @@
 import type { SupportedLanguage } from '../../common';
-import type Editor from '../Editor.svelte';
-import type DiffEditor from '../DiffEditor.svelte';
-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;
-}
-declare const ScriptFix: $$__sveltets_2_IsomorphicComponent<{
+type $$ComponentProps = {
     lang: SupportedLanguage;
-    editor: Editor | undefined;
-    diffEditor: DiffEditor | undefined;
-    error: string;
-    args: Record<string, any>;
-    chatMode?: boolean;
-}, {
-    fix: CustomEvent<null>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type ScriptFix = InstanceType<typeof ScriptFix>;
+};
+declare const ScriptFix: import("svelte").Component<$$ComponentProps, {}, "">;
+type ScriptFix = ReturnType<typeof ScriptFix>;
 export default ScriptFix;