windmill-components 1.642.0 → 1.655.1

package/package/components/copilot/ResourceGen.svelte

@@ -0,0 +1,157 @@
+<script lang="ts">import { ExternalLink, Wand2 } from 'lucide-svelte';
+import Button from '../common/button/Button.svelte';
+import { getNonStreamingCompletion } from './lib';
+import Popover from '../meltComponents/Popover.svelte';
+import { sendUserToast } from '../../toast';
+import { base } from '../../base';
+import { copilotInfo } from '../../aiStore';
+let { args = $bindable(), resourceType = '', resourceName = '', resourceDescription = '', resourceSchema = undefined, isFileset = false } = $props();
+let instructions = $state('');
+let instructionsField = $state(undefined);
+let genLoading = $state(false);
+let abortController = $state(new AbortController());
+function buildSystemPrompt() {
+    let prompt;
+    if (isFileset) {
+        prompt =
+            'You are a helpful assistant that generates file contents for a Windmill fileset resource. A fileset is a JSON object mapping file paths to their string contents, e.g. {"path/to/file.txt": "file content", "other/file.md": "# Title"}. You MUST return ONLY valid JSON (a flat object with string keys and string values), no markdown fences, no explanation, no extra text.';
+    }
+    else {
+        prompt =
+            'You are a helpful assistant that generates JSON values for Windmill resources. You MUST return ONLY valid JSON, no markdown fences, no explanation, no extra text.';
+    }
+    if (resourceType) {
+        prompt += `\nThe resource type is "${resourceType}".`;
+    }
+    if (!isFileset && resourceSchema?.properties) {
+        const schemaDesc = Object.entries(resourceSchema.properties)
+            .map(([key, prop]) => {
+            let desc = `- "${key}": type=${prop.type || 'string'}`;
+            if (prop.description)
+                desc += `, description="${prop.description}"`;
+            if (prop.default !== undefined)
+                desc += `, default=${JSON.stringify(prop.default)}`;
+            if (prop.enum)
+                desc += `, enum=${JSON.stringify(prop.enum)}`;
+            return desc;
+        })
+            .join('\n');
+        prompt += `\n\nThe resource schema has these properties:\n${schemaDesc}`;
+        if (resourceSchema.required?.length) {
+            prompt += `\n\nRequired fields: ${resourceSchema.required.join(', ')}`;
+        }
+    }
+    return prompt;
+}
+function buildUserPrompt() {
+    let prompt = instructions;
+    if (resourceName) {
+        prompt += `\nResource name: ${resourceName}`;
+    }
+    if (resourceDescription) {
+        prompt += `\nResource description: ${resourceDescription}`;
+    }
+    return prompt;
+}
+async function generateResource() {
+    genLoading = true;
+    abortController = new AbortController();
+    try {
+        const messages = [
+            {
+                role: 'system',
+                content: buildSystemPrompt()
+            },
+            {
+                role: 'user',
+                content: buildUserPrompt()
+            }
+        ];
+        let response = await getNonStreamingCompletion(messages, abortController);
+        // Strip markdown fences if present
+        response = response.trim();
+        if (response.startsWith('```')) {
+            response = response.replace(/^```(?:json)?\n?/, '').replace(/\n?```$/, '');
+        }
+        const parsed = JSON.parse(response);
+        args = parsed;
+    }
+    catch (err) {
+        if (!abortController.signal.aborted) {
+            sendUserToast('Could not generate resource: ' + err, true);
+        }
+    }
+    finally {
+        genLoading = false;
+    }
+}
+$effect(() => {
+    instructionsField && setTimeout(() => instructionsField?.focus(), 100);
+});
+</script>
+
+<Popover floatingConfig={{ strategy: 'absolute', placement: 'bottom-end' }}>
+	{#snippet trigger()}
+		<Button
+			color={genLoading ? 'red' : 'light'}
+			size="xs"
+			nonCaptureEvent={!genLoading}
+			startIcon={{ icon: Wand2 }}
+			iconOnly
+			title="AI Assistant"
+			btnClasses="text-ai bg-violet-100 dark:bg-gray-700"
+			loading={genLoading}
+			clickableWhileLoading
+			on:click={genLoading ? () => abortController?.abort() : () => {}}
+		/>
+	{/snippet}
+	{#snippet content({ close })}
+		<div class="border rounded-lg shadow-lg p-4 bg-surface">
+			{#if $copilotInfo.enabled}
+				<div class="flex flex-col w-80 gap-2">
+					<textarea
+						bind:this={instructionsField}
+						placeholder="Describe the resource values to generate..."
+						bind:value={instructions}
+						rows={3}
+						class="text-xs"
+						onkeydown={(e) => {
+							if (e.key === 'Enter' && !e.shiftKey && instructions.length > 0) {
+								e.preventDefault()
+								close()
+								generateResource()
+							}
+						}}
+					/>
+					<Button
+						size="xs"
+						color="light"
+						variant="contained"
+						buttonType="button"
+						btnClasses="text-ai bg-violet-100 dark:bg-gray-700"
+						title="Generate resource from prompt"
+						on:click={() => {
+							close()
+							generateResource()
+						}}
+						disabled={instructions.length == 0}
+						startIcon={{ icon: Wand2 }}
+					>
+						Generate
+					</Button>
+				</div>
+			{:else}
+				<div class="block text-primary">
+					<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>
+			{/if}
+		</div>
+	{/snippet}
+</Popover>

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

@@ -0,0 +1,12 @@
+import type { Schema } from '../../common';
+interface Props {
+    args: Record<string, any>;
+    resourceType?: string;
+    resourceName?: string;
+    resourceDescription?: string;
+    resourceSchema?: Schema | undefined;
+    isFileset?: boolean;
+}
+declare const ResourceGen: import("svelte").Component<Props, {}, "args">;
+type ResourceGen = ReturnType<typeof ResourceGen>;
+export default ResourceGen;

package/package/components/copilot/ScriptFix.svelte

@@ -20,38 +20,42 @@ let { lang } = $props();
 		}}
 		displayArrow={true}
 	>
-		<svelte:fragment slot="trigger">
-			<div class="flex flex-row">
-				<Button
-					title="Fix code"
-					size="xs"
-					color="light"
-					spacingSize="xs2"
-					startIcon={{ icon: WandSparkles }}
-					on:click={() => {
-						if ($copilotInfo.enabled) {
-							aiChatManager.fix()
-						}
-					}}
-					btnClasses="text-ai bg-violet-100 dark:bg-gray-700 min-w-[84px]"
-					propagateEvent={!$copilotInfo.enabled}
-				>
-					AI Fix
-				</Button>
-			</div>
-		</svelte:fragment>
-		<svelte:fragment slot="content">
-			<div class="p-4">
-				<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>
+		{#snippet trigger()}
+			
+				<div class="flex flex-row">
+					<Button
+						title="Fix code"
+						size="xs"
+						color="light"
+						spacingSize="xs2"
+						startIcon={{ icon: WandSparkles }}
+						on:click={() => {
+							if ($copilotInfo.enabled) {
+								aiChatManager.fix()
+							}
+						}}
+						btnClasses="text-ai bg-violet-100 dark:bg-gray-700 min-w-[84px]"
+						propagateEvent={!$copilotInfo.enabled}
+					>
+						AI Fix
+					</Button>
+				</div>
+			
+			{/snippet}
+		{#snippet content()}
+			
+				<div class="p-4">
+					<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>
+			
+			{/snippet}
 	</Popover>
 {/if}

package/package/components/copilot/ScriptGen.svelte

@@ -436,7 +436,7 @@ onDestroy(() => {
 										We pass the selected schema to GPT-4 Turbo for better script generation.
 									</Tooltip>
 									{#if dbSchema && dbSchema.stringified.length > MAX_SCHEMA_LENGTH}
-										<TooltipV2 notClickable placement="top">
+										<TooltipV2 placement="top">
 											<AlertTriangle size={16} class="text-yellow-500" />
 											{#snippet text()}
 												The schema is about {addThousandsSeparator(

package/package/components/copilot/chat/AIChat.svelte

@@ -48,7 +48,7 @@ $effect(() => {
 </script>
 
 <svelte:window
-	on:keydown={(e) => {
+	onkeydown={(e) => {
 		if ((e.ctrlKey || e.metaKey) && e.key === 'l') {
 			e.preventDefault()
 			aiChatManager.toggleOpen()

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

@@ -64,55 +64,59 @@ const appContext = $derived.by(() => {
 		</div>
 		<div class="flex flex-row items-center gap-2">
 			<Popover>
-				<svelte:fragment slot="trigger">
-					<Button
-						on:click={() => {}}
-						title="History"
-						size="md"
-						btnClasses="!p-1"
-						startIcon={{ icon: HistoryIcon }}
-						iconOnly
-						variant="border"
-						color="light"
-						propagateEvent
-					/>
-				</svelte:fragment>
-				<svelte:fragment slot="content" let:close>
-					<div class="p-1 overflow-y-auto max-h-[300px]">
-						{#if pastChats.length === 0}
-							<div class="text-center text-primary text-xs">No history</div>
-						{:else}
-							<div class="flex flex-col">
-								{#each pastChats as chat}
-									<button
-										class="text-left flex flex-row items-center gap-2 justify-between hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md p-1"
-										onclick={() => {
-											loadPastChat(chat.id)
-											close()
-										}}
-									>
-										<div
-											class="text-xs font-medium w-48 text-ellipsis overflow-hidden whitespace-nowrap flex-1"
-											title={chat.title}
-										>
-											{chat.title}
-										</div>
-										<Button
-											iconOnly
-											size="xs2"
-											btnClasses="!p-1"
-											variant="default"
-											startIcon={{ icon: X }}
-											on:click={() => {
-												deletePastChat(chat.id)
+				{#snippet trigger()}
+							
+						<Button
+							on:click={() => {}}
+							title="History"
+							size="md"
+							btnClasses="!p-1"
+							startIcon={{ icon: HistoryIcon }}
+							iconOnly
+							variant="border"
+							color="light"
+							propagateEvent
+						/>
+					
+							{/snippet}
+				{#snippet content({ close })}
+							
+						<div class="p-1 overflow-y-auto max-h-[300px]">
+							{#if pastChats.length === 0}
+								<div class="text-center text-primary text-xs">No history</div>
+							{:else}
+								<div class="flex flex-col">
+									{#each pastChats as chat}
+										<button
+											class="text-left flex flex-row items-center gap-2 justify-between hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md p-1"
+											onclick={() => {
+												loadPastChat(chat.id)
+												close()
 											}}
-										/>
-									</button>
-								{/each}
-							</div>
-						{/if}
-					</div>
-				</svelte:fragment>
+										>
+											<div
+												class="text-xs font-medium w-48 text-ellipsis overflow-hidden whitespace-nowrap flex-1"
+												title={chat.title}
+											>
+												{chat.title}
+											</div>
+											<Button
+												iconOnly
+												size="xs2"
+												btnClasses="!p-1"
+												variant="default"
+												startIcon={{ icon: X }}
+												on:click={() => {
+													deletePastChat(chat.id)
+												}}
+											/>
+										</button>
+									{/each}
+								</div>
+							{/if}
+						</div>
+					
+							{/snippet}
 			</Popover>
 			<Button
 				title="New chat"

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

@@ -8,7 +8,7 @@ import { aiChatManager, AIMode } from './AIChatManager.svelte';
 import { twMerge } from 'tailwind-merge';
 import Portal from '../../Portal.svelte';
 import { zIndexes } from '../../../zIndexes';
-import { tick } from 'svelte';
+import { tick, untrack } from 'svelte';
 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(() => {
@@ -37,7 +37,7 @@ const modePlaceholder = $derived.by(() => {
 });
 let contextTextareaComponent = $state();
 let instructionsTextareaComponent = $state();
-let instructions = $state(initialInstructions);
+let instructions = $state(untrack(() => initialInstructions));
 // App mode @ mention state
 let showAppContextTooltip = $state(false);
 let appContextTooltipWord = $state('');
@@ -278,26 +278,30 @@ $effect(() => {
 		{#if showContext}
 			<div class="flex flex-row gap-1 mb-1 overflow-scroll pt-2 no-scrollbar">
 				<Popover>
-					<svelte:fragment slot="trigger">
-						<div
-							class="border rounded-md px-1 py-0.5 font-normal text-primary text-xs hover:bg-surface-hover bg-surface"
-							>@</div
-						>
-					</svelte:fragment>
-					<svelte:fragment slot="content" let:close>
-						<AvailableContextList
-							{availableContext}
-							{selectedContext}
-							onSelect={(element) => {
-								addContextToSelection(element)
-								close()
-							}}
-							onSelectWorkspaceItem={(element) => {
-								addContextToSelection(element)
-								close()
-							}}
-						/>
-					</svelte:fragment>
+					{#snippet trigger()}
+									
+							<div
+								class="border rounded-md px-1 py-0.5 font-normal text-primary text-xs hover:bg-surface-hover bg-surface"
+								>@</div
+							>
+						
+									{/snippet}
+					{#snippet content({ close })}
+									
+							<AvailableContextList
+								{availableContext}
+								{selectedContext}
+								onSelect={(element) => {
+									addContextToSelection(element)
+									close()
+								}}
+								onSelectWorkspaceItem={(element) => {
+									addContextToSelection(element)
+									close()
+								}}
+							/>
+						
+									{/snippet}
 				</Popover>
 				{#each selectedContext as element}
 					<ContextElementBadge
@@ -333,22 +337,26 @@ $effect(() => {
 		{#if showContext}
 			<div class="flex flex-row gap-1 mb-1 overflow-scroll pt-2 no-scrollbar">
 				<Popover>
-					<svelte:fragment slot="trigger">
-						<div
-							class="border rounded-md px-1 py-0.5 font-normal text-primary text-xs hover:bg-surface-hover bg-surface"
-							>@</div
-						>
-					</svelte:fragment>
-					<svelte:fragment slot="content" let:close>
-						<AppAvailableContextList
-							{availableContext}
-							{selectedContext}
-							onSelect={(element) => {
-								addContextToSelection(element)
-								close()
-							}}
-						/>
-					</svelte:fragment>
+					{#snippet trigger()}
+											
+							<div
+								class="border rounded-md px-1 py-0.5 font-normal text-primary text-xs hover:bg-surface-hover bg-surface"
+								>@</div
+							>
+						
+											{/snippet}
+					{#snippet content({ close })}
+											
+							<AppAvailableContextList
+								{availableContext}
+								{selectedContext}
+								onSelect={(element) => {
+									addContextToSelection(element)
+									close()
+								}}
+							/>
+						
+											{/snippet}
 				</Popover>
 				{#each selectedContext as element (element.type + '-' + element.title)}
 					<ContextElementBadge

package/package/components/copilot/chat/AIChatManager.svelte.js

@@ -19,7 +19,7 @@ import { chatState, DEFAULT_SIZE, triggerablesByAi } from './sharedChatState.sve
 import { prepareApiSystemMessage, prepareApiUserMessage } from './api/core';
 import { getAnthropicCompletion, parseAnthropicCompletion } from './anthropic';
 import { getOpenAIResponsesCompletion, parseOpenAIResponsesCompletion } from './openai-responses';
-import { getCurrentModel, getCombinedCustomPrompt } from '../../../aiStore';
+import { getCurrentModel, tryGetCurrentModel, getCombinedCustomPrompt } from '../../../aiStore';
 // If the estimated token usage is greater than the model context window - the threshold, we delete the oldest message
 const MAX_TOKENS_THRESHOLD_PERCENTAGE = 0.05;
 const MAX_TOKENS_HARD_LIMIT = 5000;
@@ -158,11 +158,13 @@ class AIChatManager {
         }
     }
     changeMode(mode, pendingPrompt, options) {
+        if (mode === AIMode.SCRIPT && !tryGetCurrentModel())
+            return;
         this.mode = mode;
         this.pendingPrompt = pendingPrompt ?? '';
         if (mode === AIMode.SCRIPT) {
-            const customPrompt = getCombinedCustomPrompt(mode);
             const currentModel = getCurrentModel();
+            const customPrompt = getCombinedCustomPrompt(mode);
             const lang = this.scriptEditorOptions?.lang ?? 'bun';
             const context = this.contextManager.getSelectedContext();
             this.systemMessage = prepareScriptSystemMessage(currentModel, lang, {}, customPrompt);

package/package/components/copilot/chat/AssistantMessage.svelte

@@ -2,7 +2,7 @@
 import { gfmPlugin } from 'svelte-exmarkdown/gfm';
 import CodeDisplay from './script/CodeDisplay.svelte';
 import LinkRenderer from './LinkRenderer.svelte';
-export let message;
+let { message } = $props();
 </script>
 
 <div

package/package/components/copilot/chat/AssistantMessage.svelte.d.ts

@@ -1,21 +1,7 @@
 import type { DisplayMessage } from './shared';
-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 AssistantMessage: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     message: DisplayMessage;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type AssistantMessage = InstanceType<typeof AssistantMessage>;
+}
+declare const AssistantMessage: import("svelte").Component<Props, {}, "">;
+type AssistantMessage = ReturnType<typeof AssistantMessage>;
 export default AssistantMessage;

package/package/components/copilot/chat/ChatMode.svelte

@@ -11,39 +11,43 @@ import { aiChatManager, AIMode } from './AIChatManager.svelte';
 		).length < 2}
 		class="max-w-full"
 	>
-		<svelte:fragment slot="trigger">
-			<div
-				class="text-primary text-xs flex flex-row items-center font-normal gap-0.5 border px-1 rounded-lg"
-			>
-				<span class={`truncate`}>
-					{aiChatManager.mode.charAt(0).toUpperCase() + aiChatManager.mode.slice(1)} mode
-				</span>
-				{#if Object.keys(aiChatManager.allowedModes).filter((k) => aiChatManager.allowedModes[k]).length > 1}
-					<div class="shrink-0">
-						<ChevronDown size={16} />
-					</div>
-				{/if}
-			</div>
-		</svelte:fragment>
-		<svelte:fragment slot="content" let:close>
-			<div class="flex flex-col gap-1 p-1 min-w-24">
-				{#each Object.values(AIMode) as possibleMode}
-					{#if aiChatManager.allowedModes[possibleMode]}
-						<button
-							class={twMerge(
-								'text-left text-xs hover:bg-surface-hover rounded-md p-1 font-normal',
-								aiChatManager.mode === possibleMode && 'bg-surface-hover'
-							)}
-							onclick={() => {
-								aiChatManager.changeMode(possibleMode)
-								close()
-							}}
-						>
-							{possibleMode.charAt(0).toUpperCase() + possibleMode.slice(1)} mode
-						</button>
+		{#snippet trigger()}
+			
+				<div
+					class="text-primary text-xs flex flex-row items-center font-normal gap-0.5 border px-1 rounded-lg"
+				>
+					<span class={`truncate`}>
+						{aiChatManager.mode.charAt(0).toUpperCase() + aiChatManager.mode.slice(1)} mode
+					</span>
+					{#if Object.keys(aiChatManager.allowedModes).filter((k) => aiChatManager.allowedModes[k]).length > 1}
+						<div class="shrink-0">
+							<ChevronDown size={16} />
+						</div>
 					{/if}
-				{/each}
-			</div>
-		</svelte:fragment>
+				</div>
+			
+			{/snippet}
+		{#snippet content({ close })}
+			
+				<div class="flex flex-col gap-1 p-1 min-w-24">
+					{#each Object.values(AIMode) as possibleMode}
+						{#if aiChatManager.allowedModes[possibleMode]}
+							<button
+								class={twMerge(
+									'text-left text-xs hover:bg-surface-hover rounded-md p-1 font-normal',
+									aiChatManager.mode === possibleMode && 'bg-surface-hover'
+								)}
+								onclick={() => {
+									aiChatManager.changeMode(possibleMode)
+									close()
+								}}
+							>
+								{possibleMode.charAt(0).toUpperCase() + possibleMode.slice(1)} mode
+							</button>
+						{/if}
+					{/each}
+				</div>
+			
+			{/snippet}
 	</Popover>
 </div>

package/package/components/copilot/chat/ContextElementBadge.svelte

@@ -1,4 +1,5 @@
-<script lang="ts">import { Popover } from '../../meltComponents';
+<script lang="ts">import { untrack } from 'svelte';
+import { Popover } from '../../meltComponents';
 import { Loader2, X } from 'lucide-svelte';
 import { ContextIconMap } from './context';
 import { Highlight } from 'svelte-highlight';
@@ -9,7 +10,7 @@ import ObjectViewer from '../../propertyPicker/ObjectViewer.svelte';
 import HighlightCode from '../../HighlightCode.svelte';
 import FlowModuleIcon from '../../flows/FlowModuleIcon.svelte';
 let { contextElement, deletable = false, onDelete } = $props();
-const icon = ContextIconMap[contextElement.type];
+const icon = ContextIconMap[untrack(() => contextElement).type];
 let showDelete = $state(false);
 const isDeletable = $derived(deletable && contextElement.deletable !== false);
 </script>
@@ -51,13 +52,10 @@ const isDeletable = $derived(deletable && contextElement.deletable !== false);
 		{:else if contextElement.type === 'db'}
 			<div class="p-2 max-w-96 max-h-[300px] text-xs overflow-auto">
 				{#if contextElement.schema && contextElement.schema.lang === 'graphql'}
-					{#await import('../../GraphqlSchemaViewer.svelte')}
+					{#await Promise.all([import('../../GraphqlSchemaViewer.svelte'), formatGraphqlSchema(contextElement.schema.schema)])}
 						<Loader2 class="animate-spin" />
-					{:then Module}
-						<Module.default
-							code={formatGraphqlSchema(contextElement.schema.schema)}
-							class="h-full"
-						/>
+					{:then [Module, code]}
+						<Module.default {code} class="h-full" />
 					{/await}
 				{:else if contextElement.schema}
 					<ObjectViewer json={formatSchema(contextElement.schema)} pureViewer collapseLevel={1} />