windmill-components 1.502.6 → 1.503.3

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

@@ -34,6 +34,14 @@ function submitSuggestion(suggestion) {
 export function focusInput() {
     aiChatInput?.focusInput();
 }
+$effect(() => {
+    if (aiChatInput) {
+        aiChatManager.setAiChatInput(aiChatInput);
+    }
+    return () => {
+        aiChatManager.setAiChatInput(null);
+    };
+});
 </script>
 
 <div class="flex flex-col h-full">
@@ -182,32 +190,34 @@ export function focusInput() {
 				</Button>
 			</div>
 		{/if}
-		<AIChatInput
-			bind:this={aiChatInput}
-			bind:selectedContext
-			{availableContext}
-			{disabled}
-			isFirstMessage={messages.length === 0}
-			placeholder={messages.length === 0 ? 'Ask anything' : 'Ask followup'}
-		/>
-		<div
-			class={`flex flex-row ${
-				aiChatManager.mode === 'script' && hasDiff ? 'justify-between' : 'justify-end'
-			} items-center px-0.5`}
-		>
-			{#if aiChatManager.mode === 'script' && hasDiff}
-				<ChatQuickActions {askAi} {diffMode} />
-			{/if}
-			{#if disabled}
-				<div class="text-tertiary text-xs my-2 px-2">
-					<Markdown md={disabledMessage} />
-				</div>
-			{:else}
-				<div class="flex flex-row gap-2 min-w-0">
-					<ChatMode />
-					<ProviderModelSelector />
-				</div>
-			{/if}
+		<div class="px-2">
+			<AIChatInput
+				bind:this={aiChatInput}
+				bind:selectedContext
+				{availableContext}
+				{disabled}
+				isFirstMessage={messages.length === 0}
+				placeholder={messages.length === 0 ? 'Ask anything' : 'Ask followup'}
+			/>
+			<div
+				class={`flex flex-row ${
+					aiChatManager.mode === 'script' && hasDiff ? 'justify-between' : 'justify-end'
+				} items-center`}
+			>
+				{#if aiChatManager.mode === 'script' && hasDiff}
+					<ChatQuickActions {askAi} {diffMode} />
+				{/if}
+				{#if disabled}
+					<div class="text-tertiary text-xs my-2 px-2">
+						<Markdown md={disabledMessage} />
+					</div>
+				{:else}
+					<div class="flex flex-row gap-2 min-w-0">
+						<ChatMode />
+						<ProviderModelSelector />
+					</div>
+				{/if}
+			</div>
 		</div>
 		{#if (aiChatManager.mode === AIMode.NAVIGATOR || aiChatManager.mode === AIMode.ASK) && suggestions.length > 0 && messages.filter((m) => m.role === 'user').length === 0 && !disabled}
 			<div class="px-2 mt-4">

package/package/components/copilot/chat/AIChatInlineWidget.svelte

@@ -0,0 +1,209 @@
+<script lang="ts">import * as monaco from 'monaco-editor';
+import AIChatInput from './AIChatInput.svelte';
+import { aiChatManager, AIMode } from './AIChatManager.svelte';
+import LoadingIcon from '../../apps/svelte-select/lib/LoadingIcon.svelte';
+import { sendUserToast } from '../../../toast';
+import { onDestroy } from 'svelte';
+import { getModifierKey } from '../../../utils';
+let { editor, selection, selectedCode, show = $bindable(false), editorHandler } = $props();
+let widget = $state(null);
+let widgetElement = $state(null);
+let aiChatInput = $state(null);
+let processing = $state(false);
+let marginToAdd = $state(0);
+class AIChatWidget {
+    domNode;
+    position;
+    editor;
+    originalPadding = 0;
+    editorHandler;
+    constructor(lineNumber, domNode, editor, editorHandler) {
+        this.domNode = domNode;
+        this.position = { lineNumber, column: 0 };
+        this.editor = editor;
+        this.editorHandler = editorHandler;
+        this.ensureSpaceAbove();
+        this.editor.onDidScrollChange((e) => {
+            this.domNode.style.visibility = 'inherit';
+        });
+    }
+    ensureSpaceAbove() {
+        const widgetHeight = 100;
+        const additionalPadding = 15;
+        const linesHeight = 20 * this.position.lineNumber;
+        if (linesHeight < widgetHeight + additionalPadding) {
+            // Add top margin to editor to make space
+            const editorDom = this.editor.getDomNode();
+            if (editorDom) {
+                const neededPadding = widgetHeight + additionalPadding - linesHeight;
+                this.originalPadding = this.editor.getOption(monaco.editor.EditorOption.padding)?.top || 0;
+                this.editor.updateOptions({
+                    padding: {
+                        top: neededPadding
+                    }
+                });
+                // Trigger layout update
+                this.editor.layout();
+            }
+        }
+    }
+    restoreEditorSpacing() {
+        if (this.position.lineNumber < 10) {
+            const editorDom = this.editor.getDomNode();
+            if (editorDom) {
+                this.editor.updateOptions({
+                    padding: {
+                        top: this.originalPadding
+                    }
+                });
+                this.editor.layout();
+            }
+        }
+    }
+    getId() {
+        return 'ai-inline-chat-widget';
+    }
+    getDomNode() {
+        return this.domNode;
+    }
+    getAddedLines() {
+        if (!this.editorHandler || !this.editorHandler.groupChanges) {
+            return 0;
+        }
+        let totalAddedLines = 0;
+        let totalRemovedLines = 0;
+        for (const group of this.editorHandler.groupChanges) {
+            for (const change of group.changes) {
+                if (change.type === 'added_block') {
+                    // Count newlines in the added content
+                    const lines = change.value.split('\n').length - 1;
+                    totalAddedLines += Math.max(1, lines);
+                }
+                else if (change.type === 'deleted') {
+                    const lines = change.range.endLine - change.range.startLine + 1;
+                    totalRemovedLines += Math.max(1, lines);
+                }
+            }
+        }
+        return totalAddedLines - totalRemovedLines;
+    }
+    getPosition() {
+        return {
+            position: this.position,
+            preference: [monaco.editor.ContentWidgetPositionPreference.ABOVE]
+        };
+    }
+    dispose() {
+        this.restoreEditorSpacing();
+    }
+}
+// Cleanup function to safely remove widget and cancel requests
+function cleanupWidget() {
+    aiChatManager.cancel();
+    if (widget) {
+        try {
+            widget.dispose();
+            editor.removeContentWidget(widget);
+        }
+        catch (error) {
+            console.warn('Failed to remove content widget:', error);
+        }
+        widget = null;
+    }
+}
+// Create/remove widget based on show state
+$effect(() => {
+    if (show && !widget && widgetElement && selection) {
+        if (aiChatManager.mode !== AIMode.SCRIPT) {
+            aiChatManager.changeMode(AIMode.SCRIPT);
+        }
+        const startLine = selection.startLineNumber;
+        widget = new AIChatWidget(startLine, widgetElement, editor, editorHandler);
+        editor.addContentWidget(widget);
+        if (aiChatInput) {
+            aiChatInput.focusInput();
+        }
+    }
+    else if (!show && widget) {
+        cleanupWidget();
+    }
+});
+onDestroy(() => {
+    cleanupWidget();
+});
+export function focusInput() {
+    setTimeout(() => {
+        aiChatInput?.focusInput();
+    }, 130);
+}
+// Reactive effect to update margin when review state changes
+$effect(() => {
+    const isInReviewMode = aiChatManager.pendingNewCode !== undefined;
+    if (isInReviewMode && widget) {
+        const addedLines = widget.getAddedLines();
+        if (widgetElement) {
+            marginToAdd = addedLines * 25;
+            widgetElement.style.marginTop = `-${marginToAdd}px`;
+        }
+    }
+    else {
+        marginToAdd = 0;
+    }
+});
+</script>
+
+{#snippet bottomRightSnippet()}
+	{#if processing}
+		<LoadingIcon />
+	{:else if aiChatManager.pendingNewCode}
+		<span class="text-xs text-tertiary pr-1">
+			{getModifierKey()}↓ to apply
+		</span>
+	{:else}
+		<div></div>
+	{/if}
+{/snippet}
+
+{#if show}
+	<div bind:this={widgetElement} class="w-[300px] -mt-2">
+		<AIChatInput
+			bind:this={aiChatInput}
+			availableContext={aiChatManager.contextManager.getAvailableContext()}
+			selectedContext={aiChatManager.contextManager.getSelectedContext()}
+			onClickOutside={() => {
+				show = false
+			}}
+			onSendRequest={async (instructions) => {
+				if (!selection || processing) {
+					return
+				}
+
+				processing = true
+
+				try {
+					const reply = await aiChatManager.sendInlineRequest(instructions, selectedCode, selection)
+					if (reply) {
+						aiChatManager.scriptEditorApplyCode?.(reply)
+					}
+				} catch (error) {
+					console.error('Inline AI request failed:', error)
+					if (error instanceof Error) {
+						sendUserToast('AI request failed: ' + error.message, true)
+					} else {
+						sendUserToast('AI request failed: Unknown error', true)
+					}
+				} finally {
+					processing = false
+				}
+
+				focusInput()
+			}}
+			showContext={false}
+			className="-ml-2"
+			bottomRightSnippet={processing || aiChatManager.pendingNewCode
+				? bottomRightSnippet
+				: undefined}
+			disabled={processing}
+		/>
+	</div>
+{/if}

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

@@ -0,0 +1,15 @@
+import * as monaco from 'monaco-editor';
+import type { Selection } from 'monaco-editor';
+import type { AIChatEditorHandler } from './monaco-adapter';
+interface Props {
+    editor: monaco.editor.IStandaloneCodeEditor;
+    selection: Selection | null;
+    selectedCode: string;
+    show: boolean;
+    editorHandler: AIChatEditorHandler;
+}
+declare const AiChatInlineWidget: import("svelte").Component<Props, {
+    focusInput: () => void;
+}, "show">;
+type AiChatInlineWidget = ReturnType<typeof AiChatInlineWidget>;
+export default AiChatInlineWidget;

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

@@ -4,7 +4,8 @@ import ContextElementBadge from './ContextElementBadge.svelte';
 import ContextTextarea from './ContextTextarea.svelte';
 import autosize from '../../../autosize';
 import { aiChatManager } from './AIChatManager.svelte';
-let { availableContext, selectedContext = $bindable([]), disabled = false, isFirstMessage = false, placeholder = 'Ask anything', initialInstructions = '', editingMessageIndex = null, onEditEnd = () => { } } = $props();
+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 contextTextareaComponent = $state();
 let instructionsTextareaComponent = $state();
 let instructions = $state(initialInstructions);
@@ -18,8 +19,8 @@ export function focusInput() {
 }
 function clickOutside(node) {
     function handleClick(event) {
-        if (node && !node.contains(event.target) && editingMessageIndex !== null) {
-            onEditEnd();
+        if (node && !node.contains(event.target)) {
+            onClickOutside();
         }
     }
     document.addEventListener('click', handleClick, true);
@@ -57,39 +58,41 @@ $effect(() => {
 });
 </script>
 
-<div use:clickOutside>
+<div use:clickOutside class="relative">
 	{#if aiChatManager.mode === 'script'}
-		<div class="flex flex-row gap-1 mb-1 overflow-scroll pt-2 px-2 no-scrollbar">
-			<Popover>
-				<svelte:fragment slot="trigger">
-					<div
-						class="border rounded-md px-1 py-0.5 font-normal text-tertiary text-xs hover:bg-surface-hover"
-						>@</div
-					>
-				</svelte:fragment>
-				<svelte:fragment slot="content" let:close>
-					<AvailableContextList
-						{availableContext}
-						{selectedContext}
-						onSelect={(element) => {
-							addContextToSelection(element)
-							close()
+		{#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-tertiary 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()
+							}}
+						/>
+					</svelte:fragment>
+				</Popover>
+				{#each selectedContext as element}
+					<ContextElementBadge
+						contextElement={element}
+						deletable
+						on:delete={() => {
+							selectedContext = selectedContext?.filter(
+								(c) => c.type !== element.type || c.title !== element.title
+							)
 						}}
 					/>
-				</svelte:fragment>
-			</Popover>
-			{#each selectedContext as element}
-				<ContextElementBadge
-					contextElement={element}
-					deletable
-					on:delete={() => {
-						selectedContext = selectedContext?.filter(
-							(c) => c.type !== element.type || c.title !== element.title
-						)
-					}}
-				/>
-			{/each}
-		</div>
+				{/each}
+			</div>
+		{/if}
 		<ContextTextarea
 			bind:this={contextTextareaComponent}
 			bind:value={instructions}
@@ -99,23 +102,27 @@ $effect(() => {
 			{placeholder}
 			onAddContext={(contextElement) => addContextToSelection(contextElement)}
 			onSendRequest={() => {
-				sendRequest()
+				if (disabled) {
+					return
+				}
+				onSendRequest ? onSendRequest(instructions) : sendRequest()
 			}}
 			{disabled}
-			onEscape={onEditEnd}
+			{onKeyDown}
 		/>
 	{:else}
-		<div class="relative w-full px-2 scroll-pb-2 pt-2">
+		<div class={twMerge('relative w-full scroll-pb-2 pt-2', className)}>
 			<textarea
 				bind:this={instructionsTextareaComponent}
 				bind:value={instructions}
 				use:autosize
 				onkeydown={(e) => {
+					if (onKeyDown) {
+						onKeyDown(e)
+					}
 					if (e.key === 'Enter' && !e.shiftKey) {
 						e.preventDefault()
 						sendRequest()
-					} else if (e.key === 'Escape') {
-						onEditEnd()
 					}
 				}}
 				rows={3}
@@ -125,4 +132,9 @@ $effect(() => {
 			></textarea>
 		</div>
 	{/if}
+	{#if bottomRightSnippet}
+		<div class="absolute bottom-2 right-2">
+			{@render bottomRightSnippet()}
+		</div>
+	{/if}
 </div>

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

@@ -1,4 +1,5 @@
 import type { ContextElement } from './context';
+import type { Snippet } from 'svelte';
 interface Props {
     availableContext: ContextElement[];
     selectedContext: ContextElement[];
@@ -8,6 +9,12 @@ interface Props {
     initialInstructions?: string;
     editingMessageIndex?: number | null;
     onEditEnd?: () => void;
+    className?: string;
+    onClickOutside?: () => void;
+    onSendRequest?: (instructions: string) => void;
+    showContext?: boolean;
+    bottomRightSnippet?: Snippet;
+    onKeyDown?: (e: KeyboardEvent) => void;
 }
 declare const AiChatInput: import("svelte").Component<Props, {
     focusInput: () => void;

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

@@ -2,7 +2,7 @@ import { flowTools, prepareFlowSystemMessage, prepareFlowUserMessage } from './f
 import ContextManager from './ContextManager.svelte';
 import HistoryManager from './HistoryManager.svelte';
 import { processToolCall } from './shared';
-import { prepareScriptSystemMessage, prepareScriptTools } from './script/core';
+import { INLINE_CHAT_SYSTEM_PROMPT, prepareScriptSystemMessage, prepareScriptTools } from './script/core';
 import { navigatorTools, prepareNavigatorSystemMessage } from './navigator/core';
 import { loadApiTools } from './navigator/apiTools';
 import { prepareScriptUserMessage } from './script/core';
@@ -51,6 +51,7 @@ class AIChatManager {
     flowAiChatHelpers = $state(undefined);
     pendingNewCode = $state(undefined);
     apiTools = $state([]);
+    aiChatInput = $state(null);
     allowedModes = $derived({
         script: this.scriptEditorOptions !== undefined,
         flow: this.flowAiChatHelpers !== undefined,
@@ -58,12 +59,22 @@ class AIChatManager {
         ask: true
     });
     open = $derived(chatState.size > 0);
-    async loadApiTools() {
-        if (this.apiTools.length === 0) {
-            this.apiTools = await loadApiTools();
-            if (this.mode === AIMode.NAVIGATOR) {
-                this.tools = [this.changeModeTool, ...navigatorTools, ...this.apiTools];
-            }
+    constructor() {
+        loadApiTools()
+            .then((tools) => {
+            this.apiTools = tools;
+        })
+            .catch((err) => {
+            console.error('Error loading api tools', err);
+            this.apiTools = [];
+        });
+    }
+    setAiChatInput(aiChatInput) {
+        this.aiChatInput = aiChatInput;
+    }
+    focusInput() {
+        if (this.aiChatInput) {
+            this.aiChatInput.focusInput();
         }
     }
     updateMode(currentMode) {
@@ -199,11 +210,11 @@ class AIChatManager {
             lastUserMessage.error = true;
         }
     };
-    chatRequest = async ({ messages, abortController, callbacks }) => {
+    chatRequest = async ({ messages, abortController, callbacks, systemMessage: systemMessageOverride }) => {
         try {
             let completion = null;
             while (true) {
-                const systemMessage = this.systemMessage;
+                const systemMessage = systemMessageOverride ?? this.systemMessage;
                 const tools = this.tools;
                 const helpers = this.helpers;
                 let pendingPrompt = this.pendingPrompt;
@@ -308,6 +319,81 @@ class AIChatManager {
             }
         }
     };
+    sendInlineRequest = async (instructions, selectedCode, selection) => {
+        // Validate inputs
+        if (!instructions.trim()) {
+            throw new Error('Instructions are required');
+        }
+        this.abortController = new AbortController();
+        const lang = this.scriptEditorOptions?.lang ?? 'bun';
+        const selectedContext = [...this.contextManager.getSelectedContext()];
+        const startLine = selection.startLineNumber;
+        const endLine = selection.endLineNumber;
+        selectedContext.push({
+            type: 'code_piece',
+            lang,
+            title: `L${startLine}-L${endLine}`,
+            startLine,
+            endLine,
+            content: selectedCode
+        });
+        const systemMessage = {
+            role: 'system',
+            content: INLINE_CHAT_SYSTEM_PROMPT
+        };
+        let reply = '';
+        try {
+            const userMessage = await prepareScriptUserMessage(instructions, lang, selectedContext, {
+                isPreprocessor: false
+            });
+            const messages = [userMessage];
+            const params = {
+                messages,
+                abortController: this.abortController,
+                callbacks: {
+                    onNewToken: (token) => {
+                        reply += token;
+                    },
+                    onMessageEnd: () => { },
+                    setToolStatus: () => { }
+                },
+                systemMessage
+            };
+            await this.chatRequest({ ...params });
+            // Validate we received a response
+            if (!reply.trim()) {
+                throw new Error('AI response was empty');
+            }
+            // Try to extract new code from response
+            const newCodeMatch = reply.match(/<new_code>([\s\S]*?)<\/new_code>/i);
+            if (newCodeMatch && newCodeMatch[1]) {
+                const code = newCodeMatch[1].trim();
+                if (!code) {
+                    throw new Error('AI response contained empty code block');
+                }
+                return code;
+            }
+            // Fallback: try to take everything after the last <new_code> tag
+            const lastNewCodeMatch = reply.match(/<new_code>([\s\S]*)/i);
+            if (lastNewCodeMatch && lastNewCodeMatch[1]) {
+                const code = lastNewCodeMatch[1].trim().replace(/```/g, '');
+                if (!code) {
+                    throw new Error('AI response contained empty code block');
+                }
+                return code;
+            }
+            // If no code tags found, throw error with helpful message
+            throw new Error('AI response did not contain valid code. Please try rephrasing your request.');
+        }
+        catch (error) {
+            // if abort controller is aborted, don't throw an error
+            if (this.abortController?.signal.aborted) {
+                return;
+            }
+            console.error('Unexpected error in sendInlineRequest:', error);
+            throw new Error('An unexpected error occurred. Please try again.');
+        }
+    };
     sendRequest = async (options = {}) => {
         if (options.mode) {
             this.changeMode(options.mode);
@@ -450,6 +536,7 @@ class AIChatManager {
         }
         this.changeMode(AIMode.SCRIPT);
         this.contextManager?.addSelectedLinesToContext(lines, startLine, endLine);
+        this.focusInput();
     };
     saveAndClear = async () => {
         await this.historyManager.save(this.displayMessages, this.messages);

package/package/components/copilot/chat/AIChatMessage.svelte

@@ -33,13 +33,21 @@ function editMessage() {
 		</div>
 	{/if}
 	{#if message.role === 'user' && editingMessageIndex === messageIndex}
-		<AIChatInput
-			{availableContext}
-			bind:selectedContext
-			initialInstructions={message.content}
-			{editingMessageIndex}
-			onEditEnd={() => (editingMessageIndex = null)}
-		/>
+		<div class="px-2">
+			<AIChatInput
+				{availableContext}
+				bind:selectedContext
+				initialInstructions={message.content}
+				{editingMessageIndex}
+				onClickOutside={() => (editingMessageIndex = null)}
+				onKeyDown={(e) => {
+					if (e.key === 'Escape') {
+						editingMessageIndex = null
+					}
+				}}
+				onEditEnd={() => (editingMessageIndex = null)}
+			/>
+		</div>
 	{:else}
 		<div
 			class={twMerge(

package/package/components/copilot/chat/ChatQuickActions.svelte

@@ -7,7 +7,7 @@ let btnClasses = $derived(`!px-1 !py-0.5 !gap-1 ${diffMode
     : '!font-normal'}`);
 </script>
 
-<div class="flex flex-row items-center gap-2 px-2 py-1">
+<div class="flex flex-row items-center gap-2 pr-1 py-1">
 	<div class="flex flex-row items-center gap-1.5">
 		{#if diffMode}
 			<Button

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

@@ -19,7 +19,7 @@ const dispatch = createEventDispatcher();
 	<svelte:fragment slot="trigger">
 		<div
 			class={twMerge(
-				'border rounded-md px-1 py-0.5 flex flex-row items-center gap-1 text-tertiary text-xs cursor-default hover:bg-surface-hover hover:cursor-pointer max-w-48'
+				'border rounded-md px-1 py-0.5 flex flex-row items-center gap-1 text-tertiary text-xs cursor-default hover:bg-surface-hover hover:cursor-pointer max-w-48 bg-surface'
 			)}
 			on:mouseenter={() => (showDelete = true)}
 			on:mouseleave={() => (showDelete = false)}