windmill-components 1.623.1 → 1.642.0

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

@@ -4,8 +4,10 @@ import { LRUCache } from 'lru-cache';
 import { autocompleteRequest } from './request';
 import { FIM_MAX_TOKENS, getModelContextWindow } from '../lib';
 import { setGlobalCSS } from '../shared';
+import { supportsAutocomplete } from '../utils';
 import { get } from 'svelte/store';
 import { copilotInfo } from '../../../aiStore';
+import { getTypeScriptWorker } from '@codingame/monaco-vscode-standalone-typescript-language-features';
 // max ratio of completions to context window
 const COMPLETIONS_MAX_RATIO = 0.1;
 // hard limit to max number of completions to fetch details for, to avoid performance overhead
@@ -128,7 +130,7 @@ export class Autocompletor {
                     ]
                 };
             },
-            disposeInlineCompletions: () => { },
+            disposeInlineCompletions: () => { }
         });
         this.#cursorDisposable = editor.onDidChangeCursorPosition(async (e) => {
             deletionsCues.clear();
@@ -142,10 +144,9 @@ export class Autocompletor {
         });
     }
     static isProviderModelSupported(providerModel) {
-        return (providerModel &&
-            providerModel.provider === 'mistral' &&
-            providerModel.model.startsWith('codestral-') &&
-            !providerModel.model.startsWith('codestral-embed'));
+        if (!providerModel)
+            return false;
+        return supportsAutocomplete(providerModel.model);
     }
     dispose() {
         this.#completionDisposable.dispose();
@@ -230,7 +231,7 @@ export class Autocompletor {
     async #getTsCompletions(model, position, afterDot) {
         try {
             const offs = model.getOffsetAt(position);
-            const workerFactory = await languages.typescript.getTypeScriptWorker();
+            const workerFactory = await getTypeScriptWorker();
             const worker = await workerFactory(model.uri);
             const info = await worker.getCompletionsAtPosition(model.uri.toString(), offs);
             let entries = [];

package/package/components/copilot/autocomplete/request.js

@@ -11,19 +11,23 @@ function comment(commentSymbol, text) {
         .join('\n');
 }
 export async function autocompleteRequest(context, abortController) {
-    let commentSymbol = getCommentSymbol(context.scriptLang);
-    let contextLines = comment(commentSymbol, 'You are a code completion assistant. You are given three important contexts (<LANGUAGE CONTEXT>, <DIAGNOSTICS>, <LIBRARY METHODS>) to help you complete the code.\n');
-    contextLines += comment(commentSymbol, 'LANGUAGE CONTEXT:\n');
-    contextLines += comment(commentSymbol, getLangContext(context.scriptLang) + '\n');
-    contextLines += comment(commentSymbol, 'DIAGNOSTICS:\n');
-    contextLines += comment(commentSymbol, context.markers.map((m) => m.message).join('\n') + '\n');
-    contextLines += comment(commentSymbol, 'LIBRARY METHODS:\n');
-    contextLines += comment(commentSymbol, context.libraries + '\n');
-    context.prefix = contextLines + '\n' + context.prefix;
     const providerModel = get(copilotInfo).codeCompletionModel;
     if (!providerModel) {
         throw new Error('No code completion model selected');
     }
+    // Only add context lines for Mistral (native FIM) - other providers use chat completion
+    // too much context degrades significantly the quality of the completion
+    if (providerModel.provider === 'mistral') {
+        let commentSymbol = getCommentSymbol(context.scriptLang);
+        let contextLines = comment(commentSymbol, 'You are a code completion assistant. You are given three important contexts (<LANGUAGE CONTEXT>, <DIAGNOSTICS>, <LIBRARY METHODS>) to help you complete the code.\n');
+        contextLines += comment(commentSymbol, 'LANGUAGE CONTEXT:\n');
+        contextLines += comment(commentSymbol, getLangContext(context.scriptLang) + '\n');
+        contextLines += comment(commentSymbol, 'DIAGNOSTICS:\n');
+        contextLines += comment(commentSymbol, context.markers.map((m) => m.message).join('\n') + '\n');
+        contextLines += comment(commentSymbol, 'LIBRARY METHODS:\n');
+        contextLines += comment(commentSymbol, context.libraries + '\n');
+        context.prefix = contextLines + '\n' + context.prefix;
+    }
     try {
         const completion = await getFimCompletion(context.prefix, context.suffix, providerModel, abortController);
         return completion;

package/package/components/copilot/chat/AIButtonStyle.d.ts

@@ -1 +1 @@
-export declare function AIBtnClasses(state?: 'default' | 'selected' | 'green'): string;
+export declare function AIBtnClasses(state?: 'default' | 'selected' | 'green' | 'accent'): string;

package/package/components/copilot/chat/AIButtonStyle.js

@@ -2,7 +2,8 @@ export function AIBtnClasses(state = 'default') {
     return twMerge(['selected', 'default'].includes(state) ? 'text-ai !border-ai/20 hover:bg-ai/15' : '', {
         default: '',
         selected: 'bg-ai/10',
-        green: 'bg-green-50 hover:bg-green-50 dark:bg-green-400/15 dark:hover:bg-green-400/15 text-green-800 border-green-200 dark:border-green-300/60 dark:text-green-400'
+        green: 'bg-green-50 hover:bg-green-50 dark:bg-green-400/15 dark:hover:bg-green-400/15 text-green-800 border-green-200 dark:border-green-300/60 dark:text-green-400',
+        accent: 'dark:bg-magenta-900 bg-magenta-600 text-white hover:bg-magenta-700 dark:hover:bg-magenta-950'
     }[state]);
 }
 import { twMerge } from 'tailwind-merge';

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

@@ -75,7 +75,9 @@ $effect(() => {
 		() => aiChatManager.contextManager.getSelectedContext(),
 		(sc) => aiChatManager.contextManager.setSelectedContext(sc)
 	}
-	availableContext={aiChatManager.contextManager.getAvailableContext()}
+	availableContext={aiChatManager.mode === AIMode.APP
+		? aiChatManager.getAppAvailableContext()
+		: aiChatManager.contextManager.getAvailableContext()}
 	messages={aiChatManager.currentReply
 		? [
 				...aiChatManager.displayMessages,

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, X, XIcon } from 'lucide-svelte';
+import { CheckIcon, Code2, FileCode, HistoryIcon, Loader2, MousePointer2, Plus, Square, TextSelect, X, XIcon } from 'lucide-svelte';
 import Button from '../../common/button/Button.svelte';
 import Popover from '../../meltComponents/Popover.svelte';
 import {} from './shared';
@@ -45,6 +45,13 @@ $effect(() => {
     };
 });
 const isLastMessageTool = $derived(messages.length > 0 && messages[messages.length - 1].role === 'tool');
+// Get app context for display when in APP mode
+const appContext = $derived.by(() => {
+    if (aiChatManager.mode !== AIMode.APP || !aiChatManager.appAiChatHelpers) {
+        return undefined;
+    }
+    return aiChatManager.appAiChatHelpers.getSelectedContext();
+});
 </script>
 
 <div class="flex flex-col h-full">
@@ -160,9 +167,10 @@ const isLastMessageTool = $derived(messages.length > 0 && messages[messages.leng
 		{#if aiChatManager.loading}
 			<div class="absolute -top-10 w-full flex flex-row justify-center">
 				<Button
-					startIcon={{ icon: Loader2, classes: 'animate-spin' }}
+					startIcon={{ icon: Square }}
 					size="xs"
 					variant="default"
+					btnClasses="bg-surface hover:bg-surface-selected"
 					on:click={() => {
 						cancel()
 					}}
@@ -217,10 +225,87 @@ const isLastMessageTool = $derived(messages.length > 0 && messages[messages.leng
 						<Markdown md={disabledMessage} />
 					</div>
 				{:else}
-					<div class="flex flex-row gap-2 min-w-0 flex-wrap items-center">
+					<div class="flex flex-row gap-x-1.5 min-w-0 flex-wrap items-center">
 						<ChatMode />
-						<DatatableCreationPolicy />
+						{#if aiChatManager.mode === AIMode.APP}
+							<DatatableCreationPolicy />
+						{/if}
 						<ProviderModelSelector />
+
+						{#if aiChatManager.mode === AIMode.APP && appContext && (appContext.type !== 'none' || appContext.inspectorElement || appContext.codeSelection)}
+							{#if appContext.type === 'frontend' && appContext.frontendPath && !appContext.selectionExcluded}
+								<div
+									class="inline-flex items-center gap-1 px-1.5 py-0.5 rounded bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 text-2xs"
+									title={appContext.frontendPath}
+								>
+									<FileCode class="w-3 h-3" />
+									<span class="truncate max-w-[80px]">{appContext.frontendPath}</span>
+									<button
+										class="hover:bg-blue-200 dark:hover:bg-blue-800/50 rounded p-0.5 -mr-0.5"
+										onclick={() => appContext.toggleSelectionExcluded?.()}
+										title="Exclude from prompt"
+									>
+										<X class="w-2.5 h-2.5" />
+									</button>
+								</div>
+							{:else if appContext.type === 'backend' && appContext.backendKey && !appContext.selectionExcluded}
+								<div
+									class="inline-flex items-center gap-1 px-1.5 py-0.5 rounded bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300 text-2xs"
+									title={appContext.backendKey}
+								>
+									<Code2 class="w-3 h-3" />
+									<span class="truncate max-w-[80px]">{appContext.backendKey}</span>
+									<button
+										class="hover:bg-green-200 dark:hover:bg-green-800/50 rounded p-0.5 -mr-0.5"
+										onclick={() => appContext.toggleSelectionExcluded?.()}
+										title="Exclude from prompt"
+									>
+										<X class="w-2.5 h-2.5" />
+									</button>
+								</div>
+							{/if}
+							{#if appContext.inspectorElement}
+								<div
+									class="inline-flex items-center gap-1 px-1.5 py-0.5 rounded bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300 text-2xs"
+									title={appContext.inspectorElement.path}
+								>
+									<MousePointer2 class="w-3 h-3" />
+									<span class="truncate max-w-[60px]">
+										{appContext.inspectorElement.tagName.toLowerCase()}{appContext.inspectorElement
+											.id
+											? `#${appContext.inspectorElement.id}`
+											: ''}{appContext.inspectorElement.className
+											? `.${appContext.inspectorElement.className.split(' ')[0]}`
+											: ''}
+									</span>
+									<button
+										class="hover:bg-purple-200 dark:hover:bg-purple-800/50 rounded p-0.5 -mr-0.5"
+										onclick={() => appContext.clearInspector?.()}
+										title="Clear element selection"
+									>
+										<X class="w-2.5 h-2.5" />
+									</button>
+								</div>
+							{/if}
+							{#if appContext.codeSelection}
+								<div
+									class="inline-flex items-center gap-1 px-1.5 py-0.5 rounded bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300 text-2xs"
+									title={`${appContext.codeSelection.source}: lines ${appContext.codeSelection.startLine}-${appContext.codeSelection.endLine}`}
+								>
+									<TextSelect class="w-3 h-3" />
+									<span class="truncate max-w-[80px]">
+										L{appContext.codeSelection.startLine}-{appContext.codeSelection.endLine}
+									</span>
+									<button
+										class="hover:bg-amber-200 dark:hover:bg-amber-800/50 rounded p-0.5 -mr-0.5"
+										onclick={() => appContext.clearCodeSelection?.()}
+										title="Clear code selection"
+									>
+										<X class="w-2.5 h-2.5" />
+									</button>
+								</div>
+							{/if}
+						{/if}
 					</div>
 				{/if}
 			</div>

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

@@ -1,10 +1,14 @@
 <script lang="ts">import Popover from '../../meltComponents/Popover.svelte';
 import AvailableContextList from './AvailableContextList.svelte';
+import AppAvailableContextList from './AppAvailableContextList.svelte';
 import ContextElementBadge from './ContextElementBadge.svelte';
 import ContextTextarea from './ContextTextarea.svelte';
 import autosize from '../../../autosize';
 import { aiChatManager, AIMode } from './AIChatManager.svelte';
 import { twMerge } from 'tailwind-merge';
+import Portal from '../../Portal.svelte';
+import { zIndexes } from '../../../zIndexes';
+import { tick } 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(() => {
@@ -34,6 +38,12 @@ const modePlaceholder = $derived.by(() => {
 let contextTextareaComponent = $state();
 let instructionsTextareaComponent = $state();
 let instructions = $state(initialInstructions);
+// App mode @ mention state
+let showAppContextTooltip = $state(false);
+let appContextTooltipWord = $state('');
+let appTooltipPosition = $state({ x: 0, y: 0 });
+let appTooltipElement = $state(undefined);
+let appTooltipCurrentViewNumber = $state(0);
 export function focusInput() {
     if (aiChatManager.mode === AIMode.SCRIPT || aiChatManager.mode === AIMode.FLOW) {
         contextTextareaComponent?.focus();
@@ -56,11 +66,24 @@ function clickOutside(node) {
     };
 }
 function addContextToSelection(contextElement) {
-    if (selectedContext &&
-        availableContext &&
-        !selectedContext.find((c) => c.type === contextElement.type && c.title === contextElement.title) &&
-        availableContext.find((c) => c.type === contextElement.type && c.title === contextElement.title)) {
-        selectedContext = [...selectedContext, contextElement];
+    if (!selectedContext || !availableContext)
+        return;
+    const alreadySelected = selectedContext.find((c) => c.type === contextElement.type && c.title === contextElement.title);
+    if (alreadySelected)
+        return;
+    // Workspace items are fetched on-demand and not in availableContext,
+    // so skip the availableContext check for them
+    const isWorkspaceItem = contextElement.type === 'workspace_script' || contextElement.type === 'workspace_flow';
+    if (!isWorkspaceItem &&
+        !availableContext.find((c) => c.type === contextElement.type && c.title === contextElement.title)) {
+        return;
+    }
+    selectedContext = [...selectedContext, contextElement];
+    // If it's a datatable table, add it to the app's whitelisted tables
+    if (contextElement.type === 'app_datatable' &&
+        aiChatManager.mode === AIMode.APP &&
+        aiChatManager.appAiChatHelpers) {
+        aiChatManager.appAiChatHelpers.addTableToWhitelist(contextElement.datatableName, contextElement.schemaName, contextElement.tableName);
     }
 }
 function sendRequest() {
@@ -81,6 +104,173 @@ $effect(() => {
         focusInput();
     }
 });
+// Properties to copy for caret position calculation (app mode)
+const caretProperties = [
+    'direction',
+    'boxSizing',
+    'width',
+    'height',
+    'overflowX',
+    'overflowY',
+    'borderTopWidth',
+    'borderRightWidth',
+    'borderBottomWidth',
+    'borderLeftWidth',
+    'borderStyle',
+    'paddingTop',
+    'paddingRight',
+    'paddingBottom',
+    'paddingLeft',
+    'fontStyle',
+    'fontVariant',
+    'fontWeight',
+    'fontStretch',
+    'fontSize',
+    'fontSizeAdjust',
+    'lineHeight',
+    'fontFamily',
+    'textAlign',
+    'textTransform',
+    'textIndent',
+    'textDecoration',
+    'letterSpacing',
+    'wordSpacing',
+    'tabSize',
+    'MozTabSize'
+];
+function getCaretCoordinates(element, position) {
+    const div = document.createElement('div');
+    div.id = 'input-textarea-caret-position-mirror-div';
+    document.body.appendChild(div);
+    const style = div.style;
+    const computed = window.getComputedStyle(element);
+    const isInput = element.nodeName === 'INPUT';
+    style.whiteSpace = 'pre-wrap';
+    if (!isInput)
+        style.wordWrap = 'break-word';
+    style.position = 'absolute';
+    style.visibility = 'hidden';
+    caretProperties.forEach(function (prop) {
+        if (isInput && prop === 'lineHeight') {
+            if (computed.boxSizing === 'border-box') {
+                const height = parseInt(computed.height);
+                const outerHeight = parseInt(computed.paddingTop) +
+                    parseInt(computed.paddingBottom) +
+                    parseInt(computed.borderTopWidth) +
+                    parseInt(computed.borderBottomWidth);
+                const targetHeight = outerHeight + parseInt(computed.lineHeight);
+                if (height > targetHeight) {
+                    style.lineHeight = height - outerHeight + 'px';
+                }
+                else if (height === targetHeight) {
+                    style.lineHeight = computed.lineHeight;
+                }
+                else {
+                    style.lineHeight = '0';
+                }
+            }
+            else {
+                style.lineHeight = computed.height;
+            }
+        }
+        else {
+            style[prop] = computed[prop];
+        }
+    });
+    const isFirefox = window.mozInnerScreenX != null;
+    if (isFirefox) {
+        if (element.scrollHeight > parseInt(computed.height))
+            style.overflowY = 'scroll';
+    }
+    else {
+        style.overflow = 'hidden';
+    }
+    div.textContent = element.value.substring(0, position);
+    if (isInput)
+        div.textContent = div.textContent.replace(/\s/g, '\u00a0');
+    const span = document.createElement('span');
+    span.textContent = element.value.substring(position) || '.';
+    div.appendChild(span);
+    const coordinates = {
+        top: span.offsetTop + parseInt(computed['borderTopWidth']),
+        left: span.offsetLeft + parseInt(computed['borderLeftWidth']),
+        height: parseInt(computed['lineHeight'])
+    };
+    document.body.removeChild(div);
+    return coordinates;
+}
+async function updateAppTooltipPosition(currentViewItemsNumber) {
+    if (!instructionsTextareaComponent)
+        return;
+    try {
+        const coords = getCaretCoordinates(instructionsTextareaComponent, instructionsTextareaComponent.selectionEnd);
+        const rect = instructionsTextareaComponent.getBoundingClientRect();
+        const itemHeight = 28;
+        const containerPadding = 8;
+        const maxHeight = 192 + containerPadding;
+        const numItems = currentViewItemsNumber;
+        let uncappedHeight = numItems > 0 ? numItems * itemHeight - 4 + containerPadding : containerPadding;
+        uncappedHeight = Math.max(uncappedHeight, containerPadding);
+        const estimatedTooltipHeight = Math.min(uncappedHeight, maxHeight);
+        const margin = 6;
+        let finalX = rect.left + coords.left - 70;
+        let finalY;
+        if (isFirstMessage) {
+            finalY = rect.top + coords.top + coords.height - 3;
+        }
+        else {
+            finalY = rect.top + coords.top - estimatedTooltipHeight - margin;
+        }
+        appTooltipPosition = {
+            x: finalX,
+            y: finalY
+        };
+        await tick();
+        if (appTooltipElement) {
+            const tooltipRect = appTooltipElement.getBoundingClientRect();
+            const tooltipWidth = tooltipRect.width;
+            if (finalX + tooltipWidth > window.innerWidth) {
+                finalX = Math.max(10, window.innerWidth - tooltipWidth - 10);
+                appTooltipPosition = {
+                    x: finalX,
+                    y: finalY
+                };
+            }
+        }
+    }
+    catch (error) {
+        console.error('Error updating tooltip position', error);
+        showAppContextTooltip = false;
+    }
+}
+function handleAppInput(_e) {
+    const words = instructions.split(/\s+/);
+    const lastWord = words[words.length - 1];
+    if (lastWord.startsWith('@') &&
+        (!availableContext.find((c) => c.title === lastWord.slice(1)) ||
+            !selectedContext.find((c) => c.title === lastWord.slice(1)))) {
+        showAppContextTooltip = true;
+        appContextTooltipWord = lastWord;
+    }
+    else {
+        showAppContextTooltip = false;
+        appContextTooltipWord = '';
+    }
+}
+function handleAppContextSelection(contextElement) {
+    addContextToSelection(contextElement);
+    // Update instructions with the selected context title
+    const index = instructions.lastIndexOf('@');
+    if (index !== -1) {
+        instructions = instructions.substring(0, index) + `@${contextElement.title}`;
+    }
+    showAppContextTooltip = false;
+}
+$effect(() => {
+    if (showAppContextTooltip) {
+        updateAppTooltipPosition(appTooltipCurrentViewNumber);
+    }
+});
 </script>
 
 <div use:clickOutside class="relative">
@@ -102,6 +292,10 @@ $effect(() => {
 								addContextToSelection(element)
 								close()
 							}}
+							onSelectWorkspaceItem={(element) => {
+								addContextToSelection(element)
+								close()
+							}}
 						/>
 					</svelte:fragment>
 				</Popover>
@@ -135,6 +329,98 @@ $effect(() => {
 			{disabled}
 			{onKeyDown}
 		/>
+	{:else if aiChatManager.mode === AIMode.APP}
+		{#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>
+				</Popover>
+				{#each selectedContext as element (element.type + '-' + element.title)}
+					<ContextElementBadge
+						contextElement={element}
+						deletable
+						onDelete={() => {
+							selectedContext = selectedContext?.filter(
+								(c) => c.type !== element.type || c.title !== element.title
+							)
+						}}
+					/>
+				{/each}
+			</div>
+		{/if}
+		<div class={twMerge('relative w-full scroll-pb-2', className)}>
+			<textarea
+				bind:this={instructionsTextareaComponent}
+				bind:value={instructions}
+				use:autosize
+				oninput={handleAppInput}
+				onblur={() => {
+					setTimeout(() => {
+						showAppContextTooltip = false
+					}, 200)
+				}}
+				onkeydown={(e) => {
+					if (onKeyDown) {
+						onKeyDown(e)
+					}
+					if (showAppContextTooltip) {
+						// avoid new line after Enter in the tooltip
+						if (e.key === 'Enter') {
+							e.preventDefault()
+						}
+						return
+					}
+					if (e.key === 'Enter' && !e.shiftKey) {
+						e.preventDefault()
+						sendRequest()
+					}
+				}}
+				rows={3}
+				placeholder={modePlaceholder}
+				class="resize-none"
+				{disabled}
+			></textarea>
+		</div>
+		{#if showAppContextTooltip}
+			<Portal target="body">
+				<div
+					bind:this={appTooltipElement}
+					class="absolute bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-md shadow-lg"
+					style="left: {appTooltipPosition.x}px; top: {appTooltipPosition.y}px; z-index: {zIndexes.tooltip};"
+				>
+					<AppAvailableContextList
+						{availableContext}
+						{selectedContext}
+						onSelect={(element) => {
+							handleAppContextSelection(element)
+						}}
+						showAllAvailable={true}
+						stringSearch={appContextTooltipWord.slice(1)}
+						onViewChange={(newNumber) => {
+							appTooltipCurrentViewNumber = newNumber
+						}}
+						setShowing={(showing) => {
+							showAppContextTooltip = showing
+						}}
+					/>
+				</div>
+			</Portal>
+		{/if}
 	{:else}
 		<div class={twMerge('relative w-full scroll-pb-2 pt-2', className)}>
 			<textarea