windmill-components 1.596.1 → 1.612.2

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;

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

@@ -87,6 +87,50 @@ const isDeletable = $derived(deletable && contextElement.deletable !== false);
 					<div class="text-primary">{contextElement.title}</div>
 				</div>
 			{/if}
+		{:else if contextElement.type === 'app_frontend_file'}
+			<div class="max-w-96 max-h-[300px] text-xs overflow-auto">
+				<HighlightCode
+					language={contextElement.path.endsWith('.tsx') || contextElement.path.endsWith('.ts')
+						? 'bun'
+						: contextElement.path.endsWith('.css')
+							? 'bash'
+							: 'bun'}
+					code={contextElement.content}
+					className="w-full p-2"
+				/>
+			</div>
+		{:else if contextElement.type === 'app_backend_runnable'}
+			<div class="p-2 max-w-96 max-h-[300px] text-xs overflow-auto">
+				{#if contextElement.runnable.inlineScript}
+					<HighlightCode
+						language={contextElement.runnable.inlineScript.language}
+						code={contextElement.runnable.inlineScript.content}
+						className="w-full p-2"
+					/>
+				{:else}
+					<ObjectViewer json={contextElement.runnable} pureViewer collapseLevel={2} />
+				{/if}
+			</div>
+		{:else if contextElement.type === 'app_code_selection'}
+			<div class="max-w-96 max-h-[300px] text-xs overflow-auto">
+				<div class="text-tertiary text-xs mb-1 px-2 pt-1">
+					{contextElement.source} (L{contextElement.startLine}-L{contextElement.endLine})
+				</div>
+				<HighlightCode
+					language="bun"
+					code={contextElement.content}
+					className="w-full p-2"
+				/>
+			</div>
+		{:else if contextElement.type === 'app_datatable'}
+			<div class="p-2 max-w-96 max-h-[300px] text-xs overflow-auto">
+				<div class="text-tertiary text-xs mb-1">
+					{contextElement.datatableName}/{contextElement.schemaName === 'public'
+						? ''
+						: contextElement.schemaName + ':'}{contextElement.tableName}
+				</div>
+				<ObjectViewer json={contextElement.columns} pureViewer collapseLevel={1} />
+			</div>
 		{/if}
 	{/snippet}
 </Popover>

package/package/components/copilot/chat/DatatableCreationPolicy.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">import { AlertTriangle } from 'lucide-svelte';
 import Toggle from '../../Toggle.svelte';
-import { aiChatManager, AIMode } from './AIChatManager.svelte';
+import { aiChatManager } from './AIChatManager.svelte';
 import DefaultDatabaseSelector from '../../raw_apps/DefaultDatabaseSelector.svelte';
 import { workspaceStore } from '../../../stores';
 import { createDatatablesResource } from '../../raw_apps/datatableUtils.svelte';
@@ -9,7 +9,8 @@ const datatables = createDatatablesResource(() => $workspaceStore);
 const hasNoDatatables = $derived((datatables.current?.length ?? 0) === 0);
 // Auto-select first datatable when datatables load and none is selected
 $effect(() => {
-    if (datatables.current.length > 0 &&
+    if (datatables.current &&
+        datatables.current.length > 0 &&
         aiChatManager.datatableCreationPolicy.enabled &&
         !aiChatManager.datatableCreationPolicy.datatable) {
         aiChatManager.datatableCreationPolicy.datatable = datatables.current[0];
@@ -29,35 +30,33 @@ function handleDefaultChange(datatable, schema) {
 }
 </script>
 
-{#if aiChatManager.mode === AIMode.APP}
-	<div class="min-w-0 flex items-center gap-1 pt-0.5">
-		{#if hasNoDatatables}
-			<!-- Warning when no datatables are available -->
-			<div
-				class="text-2xs flex flex-row items-center gap-1 text-red-600 dark:text-red-400 px-1"
-				title="No datatables configured. Add datatables in the Data panel so AI can create tables."
-			>
-				<AlertTriangle size={12} class="shrink-0" />
-				<span class="truncate">No datatables</span>
-			</div>
-		{:else}
-			<!-- Toggle for new tables -->
-			<div class="flex items-center gap-1">
-				<Toggle
-					size="xs"
-					checked={aiChatManager.datatableCreationPolicy.enabled}
-					on:change={(e) => handleToggle(e.detail)}
-				/>
-				<span class="text-2xs text-secondary whitespace-nowrap">tables creation</span>
-			</div>
-
-			<!-- Settings icon with popover -->
-			<DefaultDatabaseSelector
-				datatable={aiChatManager.datatableCreationPolicy.datatable}
-				schema={aiChatManager.datatableCreationPolicy.schema}
-				onChange={handleDefaultChange}
-				description="Set the default datatable and schema for new tables. When table creation is enabled, AI can create tables here if needed."
+<div class="min-w-0 flex items-center gap-1 pt-0.5">
+	{#if hasNoDatatables}
+		<!-- Warning when no datatables are available -->
+		<div
+			class="text-2xs flex flex-row items-center gap-1 text-red-600 dark:text-red-400 px-1"
+			title="No datatables configured. Add datatables in the Data panel so AI can create tables."
+		>
+			<AlertTriangle size={12} class="shrink-0" />
+			<span class="truncate">No datatables</span>
+		</div>
+	{:else}
+		<!-- Toggle for new tables -->
+		<div class="flex items-center gap-1">
+			<Toggle
+				size="xs"
+				checked={aiChatManager.datatableCreationPolicy.enabled}
+				on:change={(e) => handleToggle(e.detail)}
 			/>
-		{/if}
-	</div>
-{/if}
+			<span class="text-2xs text-secondary whitespace-nowrap">tables creation</span>
+		</div>
+
+		<!-- Settings icon with popover -->
+		<DefaultDatabaseSelector
+			datatable={aiChatManager.datatableCreationPolicy.datatable}
+			schema={aiChatManager.datatableCreationPolicy.schema}
+			onChange={handleDefaultChange}
+			description="Set the default datatable and schema for new tables. When table creation is enabled, AI can create tables here if needed."
+		/>
+	{/if}
+</div>

package/package/components/copilot/chat/ProviderModelSelector.svelte

@@ -16,7 +16,7 @@ let multipleModels = $derived($copilotInfo.aiModels.length > 1);
 <div class="min-w-0">
 	<Popover disablePopup={!multipleModels} class="max-w-full">
 		{#snippet trigger()}
-			<div class="text-primary text-xs flex flex-row items-center font-normal gap-0.5">
+			<div class="text-secondary text-2xs flex flex-row items-center font-normal gap-0.5">
 				<span class={`truncate ${multipleModels ? '' : 'pr-2'}`}>{providerModel.model}</span>
 				{#if multipleModels}
 					<div class="shrink-0">

package/package/components/copilot/chat/__tests__/app/appEvalHelpers.js

@@ -90,6 +90,9 @@ export function createAppEvalHelpers(initialFrontend = {}, initialBackend = {})
         execDatatableSql: async (_datatableName, _sql, _newTable) => {
             // Return success with empty result for eval testing
             return { success: true, result: [] };
+        },
+        addTableToWhitelist: (_datatableName, _schemaName, _tableName) => {
+            // No-op for eval testing - tables are not tracked in test context
         }
     };
     return {

package/package/components/copilot/chat/__tests__/flow/flowEvalHelpers.js

@@ -65,6 +65,10 @@ export function createFlowEvalHelpers(initialModules = [], initialSchema) {
         testFlow: async () => {
             // Return mock job ID - we don't actually run flows in eval
             return 'mock-job-id-' + Date.now();
+        },
+        getLintErrors: async () => {
+            // Return empty lint result for eval
+            return { errorCount: 0, warningCount: 0, errors: [], warnings: [] };
         }
     };
     return {

package/package/components/copilot/chat/app/core.d.ts

@@ -1,5 +1,6 @@
 import type { ChatCompletionSystemMessageParam, ChatCompletionUserMessageParam } from 'openai/resources/chat/completions.mjs';
 import { type Tool } from '../shared';
+import type { ContextElement, AppCodeSelectionElement } from '../context';
 export type BackendRunnableType = 'script' | 'flow' | 'hubscript' | 'inline';
 export interface InlineScript {
     language: 'bun' | 'python3';
@@ -32,28 +33,66 @@ export interface LintResult {
     /** Warning messages grouped by source type */
     warnings: LintMessages;
 }
+/** Information about an element selected via the inspector tool */
+export interface InspectorElementInfo {
+    /** CSS selector path to the element */
+    path: string;
+    /** Tag name of the element (e.g., 'div', 'button') */
+    tagName: string;
+    /** Element's id attribute, if any */
+    id?: string;
+    /** Element's class names, if any */
+    className?: string;
+    /** Bounding rectangle of the element */
+    rect: {
+        top: number;
+        left: number;
+        width: number;
+        height: number;
+    };
+    /** Outer HTML of the element (may be truncated) */
+    html: string;
+    /** Text content of the element (may be truncated) */
+    textContent?: string;
+    /** Computed styles of the element */
+    styles: Record<string, string>;
+}
 /** Context about the currently selected file or runnable in the app editor */
 export interface SelectedContext {
     /** Type of selection: 'frontend' for frontend files, 'backend' for backend runnables, or 'none' if nothing is selected */
     type: 'frontend' | 'backend' | 'none';
     /** The path of the selected frontend file (when type is 'frontend') */
     frontendPath?: string;
+    /** The content of the selected frontend file */
+    frontendContent?: string;
     /** The key of the selected backend runnable (when type is 'backend') */
     backendKey?: string;
+    /** The configuration of the selected backend runnable */
+    backendRunnable?: BackendRunnable;
+    /** Inspector-selected element info (when user has used the inspector tool) */
+    inspectorElement?: InspectorElementInfo;
+    /** Whether the file/runnable selection is excluded from being sent to the AI prompt */
+    selectionExcluded?: boolean;
+    /** Function to toggle whether the selection is excluded from the prompt */
+    toggleSelectionExcluded?: () => void;
+    /** Function to clear the inspector selection */
+    clearInspector?: () => void;
+    /** Function to clear the runnable selection (go back to frontend view) */
+    clearRunnable?: () => void;
+    /** Code selection from the editor (either frontend or backend) */
+    codeSelection?: AppCodeSelectionElement;
+    /** Function to clear the code selection */
+    clearCodeSelection?: () => void;
 }
-/** Schema for a table in a datatable */
-export interface DataTableTableSchema {
-    schema: string;
-    table: string;
-    columns: Record<string, {
-        type: string;
-        required: boolean;
-    }>;
-}
-/** Full datatable info including schema */
-export interface DataTableInfo {
-    name: string;
-    tables: DataTableTableSchema[];
+/**
+ * Datatable schema matching the backend's DataTableSchema type.
+ * Hierarchical structure: schema_name -> table_name -> column_name -> compact_type
+ * Compact type format: 'type[?][=default]' where ? means nullable (e.g. 'int4', 'text?', 'int4?=0')
+ */
+export interface DataTableSchema {
+    datatable_name: string;
+    schemas: Record<string, Record<string, Record<string, string>>>;
+    error?: string;
 }
 export interface AppAIChatHelpers {
     listFrontendFiles: () => string[];
@@ -78,7 +117,7 @@ export interface AppAIChatHelpers {
     /** Lint all frontend files and backend runnables, returns errors and warnings */
     lint: () => LintResult;
     /** Get all datatables configured in the app with their schemas */
-    getDatatables: () => Promise<DataTableInfo[]>;
+    getDatatables: () => Promise<DataTableSchema[]>;
     /** Get unique datatable names configured in the app (for UI policy selector) */
     getAvailableDatatableNames: () => string[];
     /** Execute a SQL query on a datatable. Optionally specify newTable to register a newly created table. */
@@ -90,7 +129,9 @@ export interface AppAIChatHelpers {
         result?: Record<string, any>[];
         error?: string;
     }>;
+    /** Add a table to the app's whitelisted tables (called when user selects a table via @) */
+    addTableToWhitelist: (datatableName: string, schemaName: string, tableName: string) => void;
 }
 export declare const getAppTools: () => Tool<AppAIChatHelpers>[];
 export declare function prepareAppSystemMessage(customPrompt?: string): ChatCompletionSystemMessageParam;
-export declare function prepareAppUserMessage(instructions: string, selectedContext?: SelectedContext): ChatCompletionUserMessageParam;
+export declare function prepareAppUserMessage(instructions: string, selectedContext?: SelectedContext, additionalContext?: ContextElement[]): ChatCompletionUserMessageParam;