windmill-components 1.623.1 → 1.642.0

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

@@ -59,6 +59,7 @@ class AIChatManager {
     flowOptions = $state(undefined);
     scriptEditorApplyCode = $state(undefined);
     scriptEditorShowDiffMode = $state(undefined);
+    scriptEditorGetLintErrors = $state(undefined);
     flowAiChatHelpers = $state(undefined);
     appAiChatHelpers = $state(undefined);
     /** Datatable creation policy: enabled flag, datatable name, and optional schema */
@@ -66,6 +67,8 @@ class AIChatManager {
     pendingNewCode = $state(undefined);
     apiTools = $state([]);
     aiChatInput = $state(null);
+    /** Cached datatables for app context (fetched asynchronously) */
+    cachedDatatables = $state([]);
     confirmationCallback = $state(undefined);
     allowedModes = $derived({
         script: this.flowAiChatHelpers === undefined && this.scriptEditorOptions !== undefined,
@@ -176,6 +179,12 @@ class AIChatManager {
                 },
                 applyCode: (code, opts) => {
                     this.scriptEditorApplyCode?.(code, opts);
+                },
+                getLintErrors: () => {
+                    if (this.scriptEditorGetLintErrors) {
+                        return this.scriptEditorGetLintErrors();
+                    }
+                    return { errorCount: 0, warningCount: 0, errors: [], warnings: [] };
                 }
             };
             if (options?.closeScriptSettings) {
@@ -399,6 +408,7 @@ class AIChatManager {
             console.log('chatRequest error', err);
             console.error('chatRequest error', err);
             callbacks.onMessageEnd();
+            this.cancelLoadingTools('Error');
             if (!abortController.signal.aborted) {
                 throw err;
             }
@@ -549,7 +559,7 @@ class AIChatManager {
                     userMessage = prepareApiUserMessage(oldInstructions);
                     break;
                 case AIMode.APP:
-                    userMessage = prepareAppUserMessage(oldInstructions, this.appAiChatHelpers?.getSelectedContext());
+                    userMessage = prepareAppUserMessage(oldInstructions, this.appAiChatHelpers?.getSelectedContext(), oldSelectedContext);
                     break;
             }
             this.messages.push(userMessage);
@@ -647,18 +657,7 @@ class AIChatManager {
             abortController: this.abortController
         });
         this.abortController?.abort(cancelReason);
-        // Mark all tool messages in loading state as canceled
-        this.displayMessages = this.displayMessages.map((message) => {
-            if (message.role === 'tool' && message.isLoading) {
-                return {
-                    ...message,
-                    isLoading: false,
-                    content: 'Canceled',
-                    error: 'Canceled'
-                };
-            }
-            return message;
-        });
+        this.cancelLoadingTools();
     };
     cancelInlineRequest = (reason) => {
         const cancelReason = reason ?? 'inline_cancelled';
@@ -705,11 +704,6 @@ class AIChatManager {
         this.focusInput();
     };
     saveAndClear = async () => {
-        console.log('saveAndClear called', {
-            hasAbortController: !!this.abortController,
-            isLoading: this.loading,
-            stack: new Error().stack
-        });
         this.cancel('saveAndClear');
         await this.historyManager.save(this.displayMessages, this.messages);
         this.displayMessages = [];
@@ -768,14 +762,22 @@ class AIChatManager {
                     currentEditor.showDiffMode();
                 }
             };
+            this.scriptEditorGetLintErrors = () => {
+                if (currentEditor && currentEditor.type === 'script') {
+                    return currentEditor.editor.getLintErrors();
+                }
+                return { errorCount: 0, warningCount: 0, errors: [], warnings: [] };
+            };
         }
         else {
             this.scriptEditorApplyCode = undefined;
             this.scriptEditorShowDiffMode = undefined;
+            this.scriptEditorGetLintErrors = undefined;
         }
         return () => {
             this.scriptEditorApplyCode = undefined;
             this.scriptEditorShowDiffMode = undefined;
+            this.scriptEditorGetLintErrors = undefined;
         };
     };
     listenForSelectedIdChanges = (selectedId, flowStore, flowStateStore, currentEditor) => {
@@ -838,11 +840,113 @@ class AIChatManager {
             this.flowAiChatHelpers = undefined;
         };
     };
+    /**
+     * Refresh cached datatables from the app helpers (async)
+     * Creates one context element per table (not per datatable)
+     */
+    refreshDatatables = async () => {
+        if (!this.appAiChatHelpers) {
+            this.cachedDatatables = [];
+            return;
+        }
+        try {
+            const datatables = await this.appAiChatHelpers.getDatatables();
+            console.log('Refreshed datatables:', datatables);
+            // Flatten to individual tables
+            const tableElements = [];
+            for (const dt of datatables) {
+                if (dt.error) {
+                    // Skip datatables with errors
+                    continue;
+                }
+                for (const [schemaName, tables] of Object.entries(dt.schemas)) {
+                    for (const [tableName, columns] of Object.entries(tables)) {
+                        // Format title as "datatable/schema:table" or "datatable/table" if schema is public
+                        const title = schemaName === 'public'
+                            ? `${dt.datatable_name}/${tableName}`
+                            : `${dt.datatable_name}/${schemaName}:${tableName}`;
+                        tableElements.push({
+                            type: 'app_datatable',
+                            datatableName: dt.datatable_name,
+                            schemaName,
+                            tableName,
+                            title,
+                            columns
+                        });
+                    }
+                }
+            }
+            this.cachedDatatables = tableElements;
+        }
+        catch (err) {
+            console.error('Failed to refresh datatables:', err);
+            this.cachedDatatables = [];
+        }
+    };
+    /**
+     * Get available context elements for app mode (frontend files + backend runnables + datatables)
+     */
+    getAppAvailableContext = () => {
+        if (!this.appAiChatHelpers) {
+            return [];
+        }
+        const context = [];
+        // Add frontend files
+        const frontendFiles = this.appAiChatHelpers.listFrontendFiles();
+        for (const path of frontendFiles) {
+            const content = this.appAiChatHelpers.getFrontendFile(path);
+            if (content !== undefined) {
+                const element = {
+                    type: 'app_frontend_file',
+                    path,
+                    title: path,
+                    content
+                };
+                context.push(element);
+            }
+        }
+        // Add backend runnables
+        const runnables = this.appAiChatHelpers.listBackendRunnables();
+        for (const { key } of runnables) {
+            const runnable = this.appAiChatHelpers.getBackendRunnable(key);
+            if (runnable) {
+                const element = {
+                    type: 'app_backend_runnable',
+                    key,
+                    title: key,
+                    runnable
+                };
+                context.push(element);
+            }
+        }
+        // Add cached datatables
+        context.push(...this.cachedDatatables);
+        return context;
+    };
     setAppHelpers = (appHelpers) => {
         this.appAiChatHelpers = appHelpers;
+        // Refresh datatables when app helpers are set (deferred to avoid loop)
+        // Use setTimeout to ensure this runs after the effect completes
+        setTimeout(() => {
+            this.refreshDatatables();
+        }, 50);
         return () => {
             this.appAiChatHelpers = undefined;
+            this.cachedDatatables = [];
         };
     };
+    cancelLoadingTools = (messageText = 'Canceled') => {
+        this.displayMessages = this.displayMessages.map((message) => {
+            if (message.role === 'tool' && message.isLoading) {
+                return {
+                    ...message,
+                    isLoading: false,
+                    content: messageText,
+                    error: messageText
+                };
+            }
+            return message;
+        });
+    };
 }
 export const aiChatManager = new AIChatManager();

package/package/components/copilot/chat/AiChatLayout.svelte

@@ -7,6 +7,8 @@ import { chatState } from './sharedChatState.svelte';
 import { loadCopilot } from '../../../aiStore';
 import { aiChatManager } from './AIChatManager.svelte';
 import { onDestroy } from 'svelte';
+import Button from '../../common/button/Button.svelte';
+import { Menu } from 'lucide-svelte';
 let { noPadding: noBorder = false, isCollapsed = false, children, onMenuOpen, disableAi } = $props();
 $effect(() => {
     if (disableAi) {
@@ -28,49 +30,32 @@ onDestroy(() => {
 
 {#if !disableAi}
 	<Splitpanes horizontal={false} class="flex-1 min-h-0">
-		<Pane size={100 - chatState.size} minSize={50} class="flex flex-col min-h-0">
+		<Pane size={100 - chatState.size} minSize={50} class="flex flex-col grow min-h-0 ">
 			<div
 				id="content"
 				class={classNames(
-					'w-full flex-1 flex flex-col overflow-y-auto',
+					'w-full flex-1 flex flex-col overflow-y-auto min-h-0',
 					noBorder || $userStore?.operator ? '!pl-0' : isCollapsed ? 'md:pl-12' : 'md:pl-40',
 					'transition-all ease-in-out duration-200'
 				)}
 			>
-				<main class="flex-1 flex flex-col">
-					<div class="relative w-full flex-1 flex flex-col">
+				<main class="flex-1 flex flex-col min-h-0">
+					<div class="relative w-full flex-1 flex flex-col min-h-0">
 						<div
 							class={classNames(
-								'py-0.5 px-4 sm:px-4 flex flex-row justify-between items-center shadow-sm max-w-7xl md:hidden',
+								'py-0.5 px-4 sm:px-4 shadow-sm max-w-7xl md:hidden justify-start flex',
 								noBorder || $userStore?.operator ? 'hidden' : ''
 							)}
 						>
-							<button
-								aria-label="Menu"
-								type="button"
-								onclick={() => {
-									onMenuOpen?.()
-								}}
-								class="h-8 w-8 inline-flex items-center justify-center rounded-md text-primary hover:text-primary focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500"
-							>
-								<svg
-									class="h-6 w-6"
-									xmlns="http://www.w3.org/2000/svg"
-									fill="none"
-									viewBox="0 0 24 24"
-									stroke-width="2"
-									stroke="currentColor"
-									aria-hidden="true"
-								>
-									<path
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										d="M4 6h16M4 12h16M4 18h16"
-									/>
-								</svg>
-							</button>
+							<Button
+								variant="subtle"
+								unifiedSize="lg"
+								onClick={() => onMenuOpen?.()}
+								startIcon={{ icon: Menu }}
+								iconOnly
+							></Button>
 						</div>
-						<div class="flex-1">
+						<div class="flex-1 min-h-0">
 							{@render children?.()}
 						</div>
 					</div>

package/package/components/copilot/chat/AppAvailableContextList.svelte

@@ -0,0 +1,263 @@
+<script lang="ts">import { ContextIconMap } from './context';
+import { ArrowLeft, ChevronRight, FileCode, Code2, Table2 } from 'lucide-svelte';
+const { availableContext, selectedContext, onSelect, setShowing, showAllAvailable = false, stringSearch = '', onViewChange } = $props();
+// Current view state: 'categories' or specific category type
+let currentView = $state('categories');
+// Selected index for keyboard navigation
+let itemSelectedIndex = $state(0);
+let categorySelectedIndex = $state(0);
+// Category definitions for app mode
+const categories = [
+    { id: 'files', label: 'Frontend Files', icon: FileCode },
+    { id: 'runnables', label: 'Backend Runnables', icon: Code2 },
+    { id: 'datatables', label: 'Datatables', icon: Table2 }
+];
+const filteredAvailableContext = $derived(availableContext.filter((context) => {
+    const filtered = (showAllAvailable ||
+        !selectedContext.some((sc) => sc.type === context.type && sc.title === context.title)) &&
+        (!stringSearch || context.title.toLowerCase().includes(stringSearch.toLowerCase()));
+    return filtered;
+}));
+// Group context by category
+const contextByCategory = $derived.by(() => {
+    const grouped = {
+        files: [],
+        runnables: [],
+        datatables: []
+    };
+    filteredAvailableContext.forEach((context) => {
+        if (context.type === 'app_frontend_file')
+            grouped.files.push(context);
+        else if (context.type === 'app_backend_runnable')
+            grouped.runnables.push(context);
+        else if (context.type === 'app_datatable')
+            grouped.datatables.push(context);
+    });
+    return grouped;
+});
+const currentCategoryItems = $derived(currentView !== 'categories' ? contextByCategory[currentView] : []);
+// Filter to only show categories with items
+const availableCategories = $derived(categories.filter((cat) => contextByCategory[cat.id].length > 0));
+// Report view changes
+$effect(() => {
+    if (onViewChange) {
+        if (currentView === 'categories') {
+            onViewChange(availableCategories.length);
+        }
+        else {
+            onViewChange(currentCategoryItems.length + 1);
+        }
+    }
+});
+function handleCategoryClick(categoryId) {
+    currentView = categoryId;
+    itemSelectedIndex = 0;
+}
+function handleBackClick() {
+    currentView = 'categories';
+    itemSelectedIndex = 0;
+}
+function handleKeyDown(e) {
+    if (stringSearch.length > 0) {
+        // Navigation in search view (flat list)
+        if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            e.stopPropagation();
+            if (filteredAvailableContext.length > 0) {
+                itemSelectedIndex = (itemSelectedIndex + 1) % filteredAvailableContext.length;
+            }
+        }
+        else if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            e.stopPropagation();
+            if (filteredAvailableContext.length > 0) {
+                itemSelectedIndex =
+                    (itemSelectedIndex - 1 + filteredAvailableContext.length) %
+                        filteredAvailableContext.length;
+            }
+        }
+        else if (e.key === 'Enter' || e.key === 'Tab') {
+            if (e.key === 'Tab')
+                e.preventDefault();
+            e.stopPropagation();
+            const selectedItem = filteredAvailableContext[itemSelectedIndex];
+            if (selectedItem) {
+                onSelect(selectedItem);
+            }
+        }
+    }
+    else if (currentView === 'categories') {
+        // Navigation in categories view
+        if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            e.stopPropagation();
+            categorySelectedIndex = (categorySelectedIndex + 1) % availableCategories.length;
+        }
+        else if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            e.stopPropagation();
+            categorySelectedIndex =
+                (categorySelectedIndex - 1 + availableCategories.length) % availableCategories.length;
+        }
+        else if (e.key === 'Enter' || e.key === 'ArrowRight' || e.key === 'Tab') {
+            e.preventDefault();
+            e.stopPropagation();
+            const selectedCategory = availableCategories[categorySelectedIndex];
+            if (selectedCategory) {
+                handleCategoryClick(selectedCategory.id);
+            }
+        }
+        else if (e.key === 'Escape' || e.key === 'ArrowLeft') {
+            e.preventDefault();
+            e.stopPropagation();
+            setShowing?.(false);
+        }
+    }
+    else {
+        // Navigation in category items view
+        if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            e.stopPropagation();
+            if (currentCategoryItems.length > 0) {
+                itemSelectedIndex = (itemSelectedIndex + 1) % currentCategoryItems.length;
+            }
+        }
+        else if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            e.stopPropagation();
+            if (currentCategoryItems.length > 0) {
+                itemSelectedIndex =
+                    (itemSelectedIndex - 1 + currentCategoryItems.length) % currentCategoryItems.length;
+            }
+        }
+        else if (e.key === 'Enter' || e.key === 'Tab') {
+            if (e.key === 'Tab')
+                e.preventDefault();
+            e.stopPropagation();
+            const selectedItem = currentCategoryItems[itemSelectedIndex];
+            if (selectedItem) {
+                onSelect(selectedItem);
+                currentView = 'categories'; // Go back to categories after selection
+            }
+        }
+        else if (e.key === 'ArrowLeft' || e.key === 'Escape') {
+            e.preventDefault();
+            e.stopPropagation();
+            handleBackClick();
+        }
+    }
+}
+// Listen for keyboard events
+$effect(() => {
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+        document.removeEventListener('keydown', handleKeyDown);
+    };
+});
+$effect(() => {
+    if (stringSearch.length > 0) {
+        itemSelectedIndex = 0;
+    }
+});
+function getDisplayTitle(element) {
+    if (element.type === 'app_frontend_file') {
+        return element.path;
+    }
+    else if (element.type === 'app_backend_runnable') {
+        return element.key;
+    }
+    else if (element.type === 'app_datatable') {
+        // Show as datatable/table or datatable/schema:table
+        return element.title;
+    }
+    return element.title;
+}
+</script>
+
+<div
+	class="flex flex-col gap-1 text-primary text-xs p-1 pr-0 min-w-24 max-h-48 overflow-y-scroll"
+	onmousedown={(e) =>
+		// avoids triggering onblur on the textinput and closing the tooltip
+		e.preventDefault()}
+	role="listbox"
+	tabindex={0}
+>
+	{#if stringSearch.length > 0}
+		<!-- Search view - show flat list -->
+		{#each filteredAvailableContext as element, i (element.type + '-' + element.title)}
+			{@const Icon = ContextIconMap[element.type]}
+			<button
+				class="hover:bg-surface-hover rounded-md p-1 text-left flex flex-row gap-1 items-center font-normal transition-colors {i ===
+				itemSelectedIndex
+					? 'bg-surface-hover'
+					: ''}"
+				onclick={() => {
+					onSelect(element)
+				}}
+			>
+				{#if Icon}
+					<Icon size={16} />
+				{/if}
+				<span class="truncate">
+					{getDisplayTitle(element)}
+				</span>
+			</button>
+		{/each}
+		{#if filteredAvailableContext.length === 0}
+			<div class="text-center text-primary text-xs py-2">No matching context</div>
+		{/if}
+	{:else if currentView === 'categories'}
+		<!-- Categories view -->
+		{#each availableCategories as category, i (category.id)}
+			{@const Icon = category.icon}
+			<button
+				class="hover:bg-surface-hover rounded-md p-1 pr-0 text-left flex flex-row gap-1 items-center font-normal transition-colors {i ===
+				categorySelectedIndex
+					? 'bg-surface-hover'
+					: ''}"
+				onclick={() => handleCategoryClick(category.id)}
+			>
+				<Icon size={16} />
+				<span class="flex-1">{category.label}</span>
+				<ChevronRight size={16} />
+			</button>
+		{/each}
+		{#if availableCategories.length === 0}
+			<div class="text-center text-primary text-xs py-2">No available context</div>
+		{/if}
+	{:else}
+		<!-- Category items view -->
+		<button
+			class="hover:bg-surface-hover rounded-md text-left flex flex-row gap-1 items-center font-normal transition-colors mb-1"
+			onclick={handleBackClick}
+		>
+			<ArrowLeft size={12} />
+			<span class="text-xs">Go back</span>
+		</button>
+
+		{#if currentCategoryItems.length === 0}
+			<div class="text-center text-primary text-xs py-2">No items in this category</div>
+		{:else}
+			{#each currentCategoryItems as element, i (element.type + '-' + element.title)}
+				{@const Icon = ContextIconMap[element.type]}
+				<button
+					class="hover:bg-surface-hover rounded-md p-1 text-left flex flex-row gap-1 items-center font-normal transition-colors {i ===
+					itemSelectedIndex
+						? 'bg-surface-hover'
+						: ''}"
+					onclick={() => {
+						onSelect(element)
+						currentView = 'categories' // Go back to categories after selection
+					}}
+				>
+					{#if Icon}
+						<Icon size={16} />
+					{/if}
+					<span class="truncate">
+						{getDisplayTitle(element)}
+					</span>
+				</button>
+			{/each}
+		{/if}
+	{/if}
+</div>

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

@@ -0,0 +1,13 @@
+import { type ContextElement } from './context';
+interface Props {
+    availableContext: ContextElement[];
+    selectedContext: ContextElement[];
+    onSelect: (element: ContextElement) => void;
+    setShowing?: (showing: boolean) => void;
+    showAllAvailable?: boolean;
+    stringSearch?: string;
+    onViewChange?: (newNumber: number) => void;
+}
+declare const AppAvailableContextList: import("svelte").Component<Props, {}, "">;
+type AppAvailableContextList = ReturnType<typeof AppAvailableContextList>;
+export default AppAvailableContextList;