windmill-components 1.511.1 → 1.531.0

package/package/components/copilot/FlowInlineScriptAIButton.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">import { copilotInfo } from '../../stores';
+import { autoPlacement } from '@floating-ui/core';
+import Popover from '../meltComponents/Popover.svelte';
+import Button from '../common/button/Button.svelte';
+import { ExternalLink, WandSparkles } from 'lucide-svelte';
+import { base } from '../../base';
+import { twMerge } from 'tailwind-merge';
+import { aiChatManager, AIMode } from './chat/AIChatManager.svelte';
+const aiChatScriptModeClasses = $derived(aiChatManager.mode === AIMode.SCRIPT && aiChatManager.isOpen
+    ? 'dark:bg-violet-900 bg-violet-100'
+    : '');
+</script>
+
+{#snippet button(onClick?: () => void)}
+	<Button
+		size="xs"
+		color="light"
+		btnClasses={twMerge('!px-2', aiChatScriptModeClasses)}
+		{onClick}
+		iconOnly
+		title="Open AI chat in script mode"
+		startIcon={{ icon: WandSparkles, classes: 'text-violet-800 dark:text-violet-400' }}
+	/>
+{/snippet}
+
+{#if $copilotInfo.enabled}
+	{@render button(() => {
+		aiChatManager.openChat()
+		aiChatManager.changeMode(AIMode.SCRIPT)
+	})}
+{:else}
+	<Popover
+		floatingConfig={{
+			middleware: [
+				autoPlacement({
+					allowedPlacements: ['bottom-start', 'bottom-end', 'top-start', 'top-end', 'top', 'bottom']
+				})
+			]
+		}}
+	>
+		{#snippet trigger()}
+			{@render button()}
+		{/snippet}
+		{#snippet content({ close })}
+			<div class="p-4">
+				<p class="text-sm">
+					Enable Windmill AI in the <a
+						href="{base}/workspace_settings?tab=ai"
+						target="_blank"
+						class="inline-flex flex-row items-center gap-1"
+					>
+						workspace settings <ExternalLink size={16} />
+					</a>
+				</p>
+			</div>
+		{/snippet}
+	</Popover>
+{/if}

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

@@ -0,0 +1,3 @@
+declare const FlowInlineScriptAiButton: import("svelte").Component<Record<string, never>, {}, "">;
+type FlowInlineScriptAiButton = ReturnType<typeof FlowInlineScriptAiButton>;
+export default FlowInlineScriptAiButton;

package/package/components/copilot/MetadataGen.svelte

@@ -9,6 +9,7 @@ import autosize from '../../autosize';
 import { yamlStringifyExceptKeys } from './utils';
 import { createDispatcherIfMounted } from '../../createDispatcherIfMounted';
 import { triggerableByAI } from '../../actions/triggerableByAI.svelte';
+import { validateToolName } from '../graph/renderers/nodes/AIToolNode.svelte';
 const promptConfigs = {
     summary: {
         system: `
@@ -61,6 +62,18 @@ Do not include line breaks.
 Generate a description for the flow below:
 {flow}`,
         placeholderName: 'flow'
+    },
+    agentToolFunctionName: {
+        system: `
+You are a helpful AI assistant. You generate function names from scripts.
+These function names will be used by an AI agent to call this tool.
+It has to respect the following regex: /[a-zA-Z0-9_]+/
+Examples: generate_image, classify_image, summarize_text, etc.
+`,
+        user: `
+Generate a function name for the script below:
+{code}`,
+        placeholderName: 'code'
     }
 };
 export let aiId = undefined;
@@ -268,7 +281,12 @@ onDestroy(() => {
 			bind:this={el}
 			bind:value={content}
 			placeholder={!active ? elementProps.placeholder : ''}
-			class={active ? '!indent-[3.5rem]' : ''}
+			class={twMerge(
+				active ? '!indent-[3.5rem]' : '',
+				promptConfigName === 'agentToolFunctionName' &&
+					!validateToolName(content ?? '') &&
+					'!border-red-400'
+			)}
 			on:focus={() => (focused = true)}
 			on:blur={() => (focused = false)}
 		/>

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

@@ -19,7 +19,7 @@ declare const MetadataGen: $$__sveltets_2_IsomorphicComponent<{
     content: string | undefined;
     code?: string | undefined | undefined;
     flow?: FlowValue | undefined;
-    promptConfigName: "summary" | "description" | "flowSummary" | "flowDescription";
+    promptConfigName: "summary" | "description" | "flowSummary" | "flowDescription" | "agentToolFunctionName";
     generateOnAppear?: boolean | undefined;
     elementType?: "input" | "textarea" | undefined;
     elementProps?: Record<string, any> | undefined;

package/package/components/copilot/ScriptGen.svelte

@@ -1,5 +1,4 @@
-<script lang="ts">import { run } from 'svelte/legacy';
-import { base } from '../../base';
+<script lang="ts">import { base } from '../../base';
 import { Button } from '../common';
 import { MAX_SCHEMA_LENGTH, SUPPORTED_LANGUAGES, addThousandsSeparator, copilot } from './lib';
 import { sendUserToast } from '../../toast';
@@ -13,7 +12,7 @@ import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte';
 import { writable } from 'svelte/store';
 import HighlightCode from '../HighlightCode.svelte';
 import LoadingIcon from '../apps/svelte-select/lib/LoadingIcon.svelte';
-import { sleep } from '../../utils';
+import { readFieldsRecursively, sleep } from '../../utils';
 import { autoPlacement } from '@floating-ui/core';
 import { AlertTriangle, Ban, Check, ExternalLink, HistoryIcon, Wand2, X } from 'lucide-svelte';
 import { fade } from 'svelte/transition';
@@ -21,9 +20,8 @@ import { isInitialCode } from '../../script_helpers';
 import { twMerge } from 'tailwind-merge';
 import { onDestroy } from 'svelte';
 import ProviderModelSelector from './chat/ProviderModelSelector.svelte';
-import { aiChatManager, AIMode } from './chat/AIChatManager.svelte';
-let { iconOnly = false, lang = $bindable(), editor, diffEditor, inlineScript = false, args, transformer = false, openAiChat = false } = $props();
-run(() => {
+let { iconOnly = false, lang = $bindable(), editor, diffEditor, inlineScript = false, args, transformer = false } = $props();
+$effect.pre(() => {
     if (lang == 'bunnative') {
         lang = 'bun';
     }
@@ -39,7 +37,7 @@ let abortController = $state(undefined);
 let blockPopupOpen = $state(false);
 let mode = $state('gen');
 let button = $state();
-run(() => {
+$effect.pre(() => {
     trimmedDesc = funcDesc.trim();
 });
 async function callCopilot() {
@@ -72,16 +70,9 @@ function handleAiButtonClick() {
     else {
         mode = 'edit';
     }
-    if (openAiChat) {
-        // Open the AI chat in script mode
-        aiChatManager.openChat();
-        aiChatManager.changeMode(AIMode.SCRIPT);
-    }
-    else {
-        setTimeout(() => {
-            autoResize();
-        }, 0);
-    }
+    setTimeout(() => {
+        autoResize();
+    }, 0);
 }
 async function onGenerate(closePopup) {
     if (trimmedDesc.length <= 0) {
@@ -141,16 +132,16 @@ function hideDiff() {
     editor?.show();
     diffEditor?.hide();
 }
-run(() => {
+$effect(() => {
     input && setTimeout(() => input?.focus(), 100);
 });
 function clear() {
     $generatedCode = '';
 }
-run(() => {
+$effect(() => {
     lang && clear();
 });
-run(() => {
+$effect(() => {
     !$generatedCode && hideDiff();
 });
 function updateSchema(lang, args, dbSchemas) {
@@ -168,7 +159,12 @@ function updateSchema(lang, args, dbSchemas) {
         dbSchema = undefined;
     }
 }
-run(() => {
+$effect(() => {
+    readFieldsRecursively(args);
+    updateSchema(lang, args, $dbSchemas);
+});
+$effect(() => {
+    readFieldsRecursively(args);
     updateSchema(lang, args, $dbSchemas);
 });
 let codeDiv = $state();
@@ -214,10 +210,10 @@ function clearPromptHistory() {
     const storageKey = getPromptStorageKey();
     safeLocalStorageOperation(() => localStorage.setItem(storageKey, JSON.stringify(promptHistory)));
 }
-run(() => {
+$effect(() => {
     lang && getPromptHistory();
 });
-run(() => {
+$effect(() => {
     $generatedCode && updateScroll();
 });
 let innerWidth = $state(0);
@@ -241,9 +237,6 @@ function handlePublicOnlySelected({ detail }) {
         return;
     dbSchema.publicOnly = detail === 'true';
 }
-const aiChatScriptModeClasses = $derived(aiChatManager.mode === AIMode.SCRIPT && aiChatManager.isOpen
-    ? 'dark:bg-violet-900 bg-violet-100'
-    : '');
 onDestroy(() => {
     abortController?.abort();
 });
@@ -321,8 +314,8 @@ onDestroy(() => {
 				<Button
 					size="xs"
 					color={genLoading ? 'red' : 'light'}
-					btnClasses={twMerge(genLoading ? '!px-3 z-[5000]' : '!px-2', aiChatScriptModeClasses)}
-					propagateEvent={!genLoading && !openAiChat}
+					btnClasses={twMerge(genLoading ? '!px-3 z-[5000]' : '!px-2')}
+					propagateEvent={!genLoading}
 					on:click={genLoading ? () => abortController?.abort() : handleAiButtonClick}
 					bind:element={button}
 					iconOnly
@@ -336,14 +329,13 @@ onDestroy(() => {
 					title="Generate code from prompt"
 					btnClasses={twMerge(
 						'!font-medium',
-						genLoading ? 'z-[5000]' : 'text-violet-800 dark:text-violet-400',
-						aiChatScriptModeClasses
+						genLoading ? 'z-[5000]' : 'text-violet-800 dark:text-violet-400'
 					)}
 					size="xs"
 					color={genLoading ? 'red' : 'light'}
 					spacingSize="md"
 					startIcon={genLoading ? { icon: Ban } : { icon: Wand2 }}
-					propagateEvent={!genLoading && !openAiChat}
+					propagateEvent={!genLoading}
 					on:click={genLoading ? () => abortController?.abort() : handleAiButtonClick}
 					bind:element={button}
 					{iconOnly}

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

@@ -10,7 +10,6 @@ interface Props {
     inlineScript?: boolean;
     args: Record<string, any>;
     transformer?: boolean;
-    openAiChat?: boolean;
 }
 declare const ScriptGen: import("svelte").Component<Props, {}, "lang">;
 type ScriptGen = ReturnType<typeof ScriptGen>;

package/package/components/copilot/autocomplete/Autocompletor.js

@@ -128,6 +128,8 @@ export class Autocompletor {
                     ]
                 };
             },
+            // @ts-ignore
+            disposeInlineCompletions: () => { },
             freeInlineCompletions: () => { }
         });
         this.#cursorDisposable = editor.onDidChangeCursorPosition(async (e) => {

package/package/components/copilot/chat/AIChatDisplay.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">import AIChatMessage from './AIChatMessage.svelte';
 import {} from 'svelte';
-import { CheckIcon, HistoryIcon, Loader2, Plus, StopCircleIcon, X, XIcon } from 'lucide-svelte';
+import { CheckIcon, HistoryIcon, Loader2, Plus, X, XIcon } from 'lucide-svelte';
 import Button from '../../common/button/Button.svelte';
 import Popover from '../../meltComponents/Popover.svelte';
 import {} from './shared';
@@ -43,6 +43,7 @@ $effect(() => {
         aiChatManager.setAiChatInput(null);
     };
 });
+const isLastMessageTool = $derived(messages.length > 0 && messages[messages.length - 1].role === 'tool');
 </script>
 
 <div class="flex flex-col h-full">
@@ -146,7 +147,7 @@ $effect(() => {
 						bind:editingMessageIndex
 					/>
 				{/each}
-				{#if aiChatManager.loading && !aiChatManager.currentReply}
+				{#if aiChatManager.loading && !aiChatManager.currentReply && !isLastMessageTool}
 					<div class="mb-6 py-1 px-2">
 						<Loader2 class="animate-spin" />
 					</div>
@@ -159,7 +160,7 @@ $effect(() => {
 		{#if aiChatManager.loading}
 			<div class="absolute -top-10 w-full flex flex-row justify-center">
 				<Button
-					startIcon={{ icon: StopCircleIcon }}
+					startIcon={{ icon: Loader2, classes: 'animate-spin' }}
 					size="xs"
 					variant="border"
 					color="light"
@@ -205,7 +206,6 @@ $effect(() => {
 				{availableContext}
 				{disabled}
 				isFirstMessage={messages.length === 0}
-				placeholder={messages.length === 0 ? 'Ask anything' : 'Ask followup'}
 			/>
 			<div
 				class={`flex flex-row ${

package/package/components/copilot/chat/AIChatInput.svelte

@@ -3,14 +3,37 @@ import AvailableContextList from './AvailableContextList.svelte';
 import ContextElementBadge from './ContextElementBadge.svelte';
 import ContextTextarea from './ContextTextarea.svelte';
 import autosize from '../../../autosize';
-import { aiChatManager } from './AIChatManager.svelte';
+import { aiChatManager, AIMode } from './AIChatManager.svelte';
 import { twMerge } from 'tailwind-merge';
-let { availableContext, selectedContext = $bindable([]), disabled = false, isFirstMessage = false, placeholder = 'Ask anything', initialInstructions = '', editingMessageIndex = null, onEditEnd = () => { }, className = '', onClickOutside = () => { }, onSendRequest = undefined, showContext = true, bottomRightSnippet, onKeyDown = undefined } = $props();
+let { availableContext, selectedContext = $bindable([]), disabled = false, isFirstMessage = false, placeholder, initialInstructions = '', editingMessageIndex = null, onEditEnd = () => { }, className = '', onClickOutside = () => { }, onSendRequest = undefined, showContext = true, bottomRightSnippet, onKeyDown = undefined } = $props();
+// Generate mode-specific placeholder
+const modePlaceholder = $derived.by(() => {
+    if (!isFirstMessage) {
+        return 'Ask followup';
+    }
+    if (placeholder) {
+        return placeholder;
+    }
+    switch (aiChatManager.mode) {
+        case AIMode.SCRIPT:
+            return 'Modify this script...';
+        case AIMode.FLOW:
+            return 'Modify this flow...';
+        case AIMode.NAVIGATOR:
+            return 'Navigate the app...';
+        case AIMode.API:
+            return 'Make API calls...';
+        case AIMode.ASK:
+            return 'Ask questions about Windmill...';
+        default:
+            return 'Ask anything';
+    }
+});
 let contextTextareaComponent = $state();
 let instructionsTextareaComponent = $state();
 let instructions = $state(initialInstructions);
 export function focusInput() {
-    if (aiChatManager.mode === 'script') {
+    if (aiChatManager.mode === AIMode.SCRIPT) {
         contextTextareaComponent?.focus();
     }
     else {
@@ -59,7 +82,7 @@ $effect(() => {
 </script>
 
 <div use:clickOutside class="relative">
-	{#if aiChatManager.mode === 'script'}
+	{#if aiChatManager.mode === AIMode.SCRIPT}
 		{#if showContext}
 			<div class="flex flex-row gap-1 mb-1 overflow-scroll pt-2 no-scrollbar">
 				<Popover>
@@ -99,7 +122,7 @@ $effect(() => {
 			{availableContext}
 			{selectedContext}
 			{isFirstMessage}
-			{placeholder}
+			placeholder={modePlaceholder}
 			onAddContext={(contextElement) => addContextToSelection(contextElement)}
 			onSendRequest={() => {
 				if (disabled) {
@@ -126,7 +149,7 @@ $effect(() => {
 					}
 				}}
 				rows={3}
-				{placeholder}
+				placeholder={modePlaceholder}
 				class="resize-none"
 				{disabled}
 			></textarea>