windmill-components 1.623.2 → 1.642.0

package/package/components/copilot/chat/AvailableContextList.svelte

@@ -1,19 +1,30 @@
 <script lang="ts">import FlowModuleIcon from '../../flows/FlowModuleIcon.svelte';
 import BarsStaggered from '../../icons/BarsStaggered.svelte';
+import { workspaceStore } from '../../../stores';
+import { workspaceRunnablesSearch, MAX_RUNNABLE_CONTENT_LENGTH } from './shared';
 import { ContextIconMap } from './context';
-import { ArrowLeft, Diff, Database, ChevronRight } from 'lucide-svelte';
-const { availableContext, selectedContext, onSelect, setShowing, showAllAvailable = false, stringSearch = '', onViewChange } = $props();
+import { ArrowLeft, Diff, Database, ChevronRight, Code2, Loader2 } from 'lucide-svelte';
+const { availableContext, selectedContext, onSelect, onSelectWorkspaceItem, 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);
+// Workspace search state
+let workspaceSearchQuery = $state('');
+let workspaceSearchResults = $state([]);
+let workspaceSearchLoading = $state(false);
+let searchInputElement = $state(undefined);
+let searchDebounceTimer = undefined;
 // Category definitions
 const categories = [
-    { id: 'diffs', label: 'Diffs', icon: Diff },
-    { id: 'modules', label: 'Modules', icon: BarsStaggered },
-    { id: 'databases', label: 'Databases', icon: Database }
+    { id: 'diffs', label: 'Diffs', icon: Diff, searchable: false },
+    { id: 'modules', label: 'Modules', icon: BarsStaggered, searchable: false },
+    { id: 'databases', label: 'Databases', icon: Database, searchable: false },
+    { id: 'scripts', label: 'Scripts', icon: Code2, searchable: true },
+    { id: 'flows', label: 'Flows', icon: BarsStaggered, searchable: true }
 ];
+const isSearchableView = $derived(currentView === 'scripts' || currentView === 'flows');
 const filteredAvailableContext = $derived(availableContext.filter((context) => {
     const filtered = (showAllAvailable ||
         !selectedContext.some((sc) => sc.type === context.type && sc.title === context.title)) &&
@@ -37,15 +48,18 @@ const contextByCategory = $derived.by(() => {
     });
     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));
+const currentCategoryItems = $derived(currentView !== 'categories' && !isSearchableView ? contextByCategory[currentView] : []);
+// Filter to only show categories with items (non-searchable) or always show (searchable)
+const availableCategories = $derived(categories.filter((cat) => cat.searchable || contextByCategory[cat.id]?.length > 0));
 // Report view changes
 $effect(() => {
     if (onViewChange) {
         if (currentView === 'categories') {
             onViewChange(availableCategories.length);
         }
+        else if (isSearchableView) {
+            onViewChange(workspaceSearchResults.length + 2); // +2 for back button and search input
+        }
         else {
             onViewChange(currentCategoryItems.length + 1);
         }
@@ -53,13 +67,134 @@ $effect(() => {
 });
 function handleCategoryClick(categoryId) {
     currentView = categoryId;
+    itemSelectedIndex = 0;
+    if (categoryId === 'scripts' || categoryId === 'flows') {
+        workspaceSearchQuery = '';
+        workspaceSearchResults = [];
+        searchWorkspaceItems('');
+        setTimeout(() => searchInputElement?.focus(), 0);
+    }
 }
 function handleBackClick() {
     currentView = 'categories';
     itemSelectedIndex = 0;
+    workspaceSearchQuery = '';
+    workspaceSearchResults = [];
+}
+async function searchWorkspaceItems(query) {
+    const workspace = $workspaceStore;
+    if (!workspace)
+        return;
+    workspaceSearchLoading = true;
+    try {
+        const type = currentView === 'scripts' ? 'scripts' : 'flows';
+        const results = await workspaceRunnablesSearch.search(query, workspace, type);
+        workspaceSearchResults = results.map((r) => ({
+            path: r.path,
+            summary: r.summary
+        }));
+    }
+    catch (err) {
+        console.error('Error searching workspace items', err);
+        workspaceSearchResults = [];
+    }
+    finally {
+        workspaceSearchLoading = false;
+    }
+}
+function handleSearchInput() {
+    if (searchDebounceTimer)
+        clearTimeout(searchDebounceTimer);
+    searchDebounceTimer = setTimeout(() => {
+        searchWorkspaceItems(workspaceSearchQuery);
+    }, 300);
+}
+async function handleWorkspaceItemSelect(path) {
+    const workspace = $workspaceStore;
+    if (!workspace || !onSelectWorkspaceItem)
+        return;
+    try {
+        if (currentView === 'scripts') {
+            const script = await workspaceRunnablesSearch.getScript(path, workspace);
+            const content = script.content ?? '';
+            const truncatedContent = content.length > MAX_RUNNABLE_CONTENT_LENGTH
+                ? content.slice(0, MAX_RUNNABLE_CONTENT_LENGTH) + '\n... (truncated)'
+                : content;
+            const element = {
+                type: 'workspace_script',
+                path: script.path,
+                title: script.path,
+                summary: script.summary,
+                language: script.language,
+                content: truncatedContent,
+                schema: script.schema,
+                deletable: true
+            };
+            onSelectWorkspaceItem(element);
+        }
+        else if (currentView === 'flows') {
+            const flow = await workspaceRunnablesSearch.getFlow(path, workspace);
+            const flowValue = JSON.stringify(flow.value, null, 2);
+            const truncatedValue = flowValue.length > MAX_RUNNABLE_CONTENT_LENGTH
+                ? flowValue.slice(0, MAX_RUNNABLE_CONTENT_LENGTH) + '\n... (truncated)'
+                : flowValue;
+            const element = {
+                type: 'workspace_flow',
+                path: flow.path,
+                title: flow.path,
+                summary: flow.summary,
+                description: flow.description || '',
+                value: truncatedValue,
+                schema: flow.schema,
+                deletable: true
+            };
+            onSelectWorkspaceItem(element);
+        }
+        currentView = 'categories';
+        workspaceSearchQuery = '';
+        workspaceSearchResults = [];
+    }
+    catch (err) {
+        console.error('Error fetching workspace item', err);
+    }
 }
 function handleKeyDown(e) {
-    if (stringSearch.length > 0) {
+    if (isSearchableView) {
+        // Navigation in workspace search view
+        if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            e.stopPropagation();
+            if (workspaceSearchResults.length > 0) {
+                itemSelectedIndex = (itemSelectedIndex + 1) % workspaceSearchResults.length;
+            }
+        }
+        else if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            e.stopPropagation();
+            if (workspaceSearchResults.length > 0) {
+                itemSelectedIndex =
+                    (itemSelectedIndex - 1 + workspaceSearchResults.length) %
+                        workspaceSearchResults.length;
+            }
+        }
+        else if (e.key === 'Enter') {
+            // Only select if not typing in the search input, or if results exist
+            if (workspaceSearchResults.length > 0) {
+                e.preventDefault();
+                e.stopPropagation();
+                const selectedItem = workspaceSearchResults[itemSelectedIndex];
+                if (selectedItem) {
+                    handleWorkspaceItemSelect(selectedItem.path);
+                }
+            }
+        }
+        else if (e.key === 'Escape') {
+            e.preventDefault();
+            e.stopPropagation();
+            handleBackClick();
+        }
+    }
+    else if (stringSearch.length > 0) {
         // Navigation in search view (flat list)
         if (e.key === 'ArrowDown') {
             e.preventDefault();
@@ -148,11 +283,13 @@ function handleKeyDown(e) {
         }
     }
 }
-// Listen for keyboard events
+// Listen for keyboard events + clean up debounce timer
 $effect(() => {
     document.addEventListener('keydown', handleKeyDown);
     return () => {
         document.removeEventListener('keydown', handleKeyDown);
+        if (searchDebounceTimer)
+            clearTimeout(searchDebounceTimer);
     };
 });
 $effect(() => {
@@ -164,9 +301,13 @@ $effect(() => {
 
 <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) =>
+	onmousedown={(e) => {
 		// avoids triggering onblur on the textinput and closing the tooltip
-		e.preventDefault()}
+		// but allow input elements to receive focus for the search input
+		if (!(e.target instanceof HTMLInputElement)) {
+			e.preventDefault()
+		}
+	}}
 	role="listbox"
 	tabindex={0}
 >
@@ -217,6 +358,68 @@ $effect(() => {
 		{#if availableCategories.length === 0}
 			<div class="text-center text-primary text-xs py-2">No available context</div>
 		{/if}
+	{:else if isSearchableView}
+		<!-- Workspace search view (scripts/flows) -->
+		<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>
+
+		<input
+			bind:this={searchInputElement}
+			bind:value={workspaceSearchQuery}
+			oninput={handleSearchInput}
+			type="text"
+			placeholder="Search {currentView}..."
+			class="w-full text-xs px-2 py-1 rounded-md border border-gray-200 dark:border-gray-700 bg-surface mb-1 outline-none focus:border-blue-500"
+		/>
+
+		{#if workspaceSearchLoading}
+			<div class="flex items-center justify-center py-2 gap-1">
+				<Loader2 size={14} class="animate-spin" />
+				<span class="text-xs text-secondary">Searching...</span>
+			</div>
+		{:else if workspaceSearchResults.length === 0}
+			<div class="text-center text-secondary text-xs py-2">
+				No results found
+			</div>
+		{:else}
+			{#each workspaceSearchResults as item, i}
+				{@const isAlreadySelected = selectedContext.some(
+					(c) =>
+						((c.type === 'workspace_script' && currentView === 'scripts') ||
+							(c.type === 'workspace_flow' && currentView === 'flows')) &&
+						c.title === item.path
+				)}
+				<button
+					class="hover:bg-surface-hover rounded-md p-1 text-left flex flex-col font-normal transition-colors {i ===
+					itemSelectedIndex
+						? 'bg-surface-hover'
+						: ''} {isAlreadySelected ? 'opacity-50' : ''}"
+					onclick={() => {
+						if (!isAlreadySelected) {
+							handleWorkspaceItemSelect(item.path)
+						}
+					}}
+					disabled={isAlreadySelected}
+				>
+					<div class="flex flex-row gap-1 items-center">
+						{#if currentView === 'scripts'}
+							<Code2 size={14} class="shrink-0" />
+						{:else}
+							<BarsStaggered size={14} class="shrink-0" />
+						{/if}
+						<span class="truncate">{item.path}</span>
+					</div>
+					{#if item.summary}
+						<span class="truncate text-secondary pl-5">{item.summary}</span>
+					{/if}
+				</button>
+			{/each}
+		{/if}
 	{:else}
 		<!-- Category items view -->
 		<button

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

@@ -3,6 +3,7 @@ interface Props {
     availableContext: ContextElement[];
     selectedContext: ContextElement[];
     onSelect: (element: ContextElement) => void;
+    onSelectWorkspaceItem?: (element: ContextElement) => void;
     setShowing?: (showing: boolean) => void;
     showAllAvailable?: boolean;
     stringSearch?: string;

package/package/components/copilot/chat/ContextTextarea.svelte

@@ -120,8 +120,10 @@ function getCaretCoordinates(element, position) {
 }
 function getHighlightedText(text) {
     return text.replace(/@[\w/.\-\[\]]+/g, (match) => {
-        const contextElement = availableContext.find((c) => c.title === match.slice(1));
-        if (contextElement) {
+        const title = match.slice(1);
+        const inContext = availableContext.find((c) => c.title === title) ||
+            selectedContext.find((c) => c.title === title);
+        if (inContext) {
             return `<span class="bg-black dark:bg-white text-white dark:text-black z-10">${match}</span>`;
         }
         return match;
@@ -259,6 +261,10 @@ export function focus() {
 		oninput={handleInput}
 		onblur={() => {
 			setTimeout(() => {
+				// Don't close if focus moved to inside the tooltip (e.g., search input)
+				if (tooltipElement?.contains(document.activeElement)) {
+					return
+				}
 				showContextTooltip = false
 			}, 200)
 		}}
@@ -285,6 +291,13 @@ export function focus() {
 				onSelect={(element) => {
 					handleContextSelection(element)
 				}}
+				onSelectWorkspaceItem={(element) => {
+					onAddContext(element)
+					updateInstructionsWithContext(element)
+					showContextTooltip = false
+					// Refocus the textarea since focus may have been on the search input
+					setTimeout(() => textarea?.focus(), 0)
+				}}
 				showAllAvailable={true}
 				stringSearch={contextTooltipWord.slice(1)}
 				onViewChange={(newNumber) => {

package/package/components/copilot/chat/__tests__/app/variants/streamlined.js

@@ -50,7 +50,7 @@ For inline scripts, the code must have a \`main\` function as its entrypoint.
 - \`lint()\`: Lint all files. Returns errors/warnings grouped by frontend/backend.
 
 ### Discovery
-- \`list_workspace_runnables(query, type?)\`: Search workspace scripts and flows
+- \`search_workspace(query, type)\`: Search workspace scripts and flows
 - \`search_hub_scripts(query)\`: Search hub scripts
 
 ## Backend Runnable Configuration

package/package/components/copilot/chat/__tests__/flow/variants/minimal-single-tool.js

@@ -72,7 +72,8 @@ const MINIMAL_SINGLE_TOOL_SYSTEM_PROMPT = `You are a helpful assistant that crea
 
 **Code & Scripts:**
 - **Get language-specific coding instructions** → \`get_instructions_for_code_generation\` (call BEFORE writing code)
-- **Find workspace scripts** → \`search_scripts\`
+- **Find workspace scripts and flows** → \`search_workspace\`
+- **Get details of a specific script or flow** → \`get_runnable_details\`
 - **Find Windmill Hub scripts** → \`search_hub_scripts\`
 
 **Testing:**
@@ -298,7 +299,8 @@ Example: Before writing TypeScript/Bun code, call \`get_instructions_for_code_ge
 ### Creating Flows
 
 1. **Search for existing scripts first** (unless user explicitly asks to write from scratch):
-   - First: \`search_scripts\` to find workspace scripts
+   - First: \`search_workspace\` to find workspace scripts and flows
+   - Use \`get_runnable_details\` to inspect a specific script or flow (inputs, description, code)
    - Then: \`search_hub_scripts\` (only consider highly relevant results)
    - Only create raw scripts if no suitable script is found
 

package/package/components/copilot/chat/app/core.js

@@ -1,8 +1,5 @@
 import { z } from 'zod';
-import { createSearchHubScriptsTool, createToolDef } from '../shared';
-import { FlowService, ScriptService } from '../../../../gen';
-import uFuzzy from '@leeoniya/ufuzzy';
-import { emptyString } from '../../../../utils';
+import { createSearchHubScriptsTool, createToolDef, createSearchWorkspaceTool, createGetRunnableDetailsTool } from '../shared';
 import { aiChatManager } from '../AIChatManager.svelte';
 // ============= Utility =============
 /** Maximum characters per file in get_files tool */
@@ -94,70 +91,6 @@ const getExecDatatableSqlToolDef = memo(() => createToolDef(getExecDatatableSqlS
 // ============= Selected Context Tool =============
 const getGetSelectedContextSchema = memo(() => z.object({}));
 const getGetSelectedContextToolDef = memo(() => createToolDef(getGetSelectedContextSchema(), 'get_selected_context', 'Get information about what is currently selected in the app editor. Returns the type of selection (frontend file or backend runnable) and the path/key of the selected item.'));
-// ============= Workspace Runnables Search =============
-const getListWorkspaceRunnablesSchema = memo(() => z.object({
-    query: z.string().describe('The search query to find workspace scripts and flows'),
-    type: z
-        .enum(['all', 'scripts', 'flows'])
-        .describe('Filter by type: "scripts" for scripts only, "flows" for flows only, "all" for both. Defaults to "all".')
-}));
-const getListWorkspaceRunnablesToolDef = memo(() => createToolDef(getListWorkspaceRunnablesSchema(), 'list_workspace_runnables', 'Search for workspace scripts and flows by query. Returns fully qualified paths that can be used in backend runnables.'));
-class WorkspaceRunnablesSearch {
-    uf;
-    workspace = undefined;
-    scripts = undefined;
-    flows = undefined;
-    constructor() {
-        this.uf = new uFuzzy();
-    }
-    async initScripts(workspace) {
-        if (this.scripts === undefined || this.workspace !== workspace) {
-            this.scripts = await ScriptService.listScripts({ workspace });
-            this.workspace = workspace;
-        }
-    }
-    async initFlows(workspace) {
-        if (this.flows === undefined || this.workspace !== workspace) {
-            this.flows = await FlowService.listFlows({ workspace });
-            this.workspace = workspace;
-        }
-    }
-    async searchScripts(query, workspace) {
-        await this.initScripts(workspace);
-        const scripts = this.scripts;
-        if (!scripts)
-            return [];
-        const results = this.uf.search(scripts.map((s) => (emptyString(s.summary) ? s.path : s.summary + ' (' + s.path + ')')), query.trim());
-        return (results[2]?.map((id) => ({
-            type: 'script',
-            path: scripts[id].path,
-            summary: scripts[id].summary
-        })) ?? []);
-    }
-    async searchFlows(query, workspace) {
-        await this.initFlows(workspace);
-        const flows = this.flows;
-        if (!flows)
-            return [];
-        const results = this.uf.search(flows.map((f) => (emptyString(f.summary) ? f.path : f.summary + ' (' + f.path + ')')), query.trim());
-        return (results[2]?.map((id) => ({
-            type: 'flow',
-            path: flows[id].path,
-            summary: flows[id].summary
-        })) ?? []);
-    }
-    async search(query, workspace, type = 'all') {
-        const results = [];
-        if (type === 'all' || type === 'scripts') {
-            results.push(...(await this.searchScripts(query, workspace)));
-        }
-        if (type === 'all' || type === 'flows') {
-            results.push(...(await this.searchFlows(query, workspace)));
-        }
-        return results;
-    }
-}
-const workspaceRunnablesSearch = new WorkspaceRunnablesSearch();
 // ============= Lint Result Formatting =============
 function formatLintMessages(messages) {
     let result = '';
@@ -369,7 +302,7 @@ export const getAppTools = memo(() => [
             });
             const lintResult = await helpers.setBackendRunnable(parsedArgs.key, runnable);
             toolCallbacks.setToolStatus(toolId, {
-                content: `Backend runnable '${parsedArgs.key}' analyzed`,
+                content: `Backend runnable '${parsedArgs.key}' set successfully.`,
                 result: 'Success'
             });
             return formatLintResultResponse(`Backend runnable '${parsedArgs.key}' has been set successfully.`, lintResult);
@@ -411,21 +344,8 @@ export const getAppTools = memo(() => [
         }
     },
     // Search tools
-    {
-        def: getListWorkspaceRunnablesToolDef(),
-        fn: async ({ args, workspace, toolId, toolCallbacks }) => {
-            const parsedArgs = getListWorkspaceRunnablesSchema().parse(args);
-            const type = parsedArgs.type ?? 'all';
-            toolCallbacks.setToolStatus(toolId, {
-                content: `Searching workspace ${type} for "${parsedArgs.query}"...`
-            });
-            const results = await workspaceRunnablesSearch.search(parsedArgs.query, workspace, type);
-            toolCallbacks.setToolStatus(toolId, {
-                content: `Found ${results.length} workspace runnables matching "${parsedArgs.query}"`
-            });
-            return JSON.stringify(results, null, 2);
-        }
-    },
+    createSearchWorkspaceTool(),
+    createGetRunnableDetailsTool(),
     // Hub scripts search (reuse from shared)
     createSearchHubScriptsTool(false),
     // Data table tools
@@ -562,7 +482,8 @@ For inline scripts, the code must have a \`main\` function as its entrypoint.
 - \`lint()\`: Lint all files. Returns errors/warnings grouped by frontend/backend. Use this to check for issues after making changes.
 
 ### Discovery
-- \`list_workspace_runnables(query, type?)\`: Search workspace scripts and flows
+- \`search_workspace(query, type)\`: Search workspace scripts and flows
+- \`get_runnable_details(path, type)\`: Get details (summary, description, schema, content) of a specific script or flow
 - \`search_hub_scripts(query)\`: Search hub scripts
 
 ### Data Tables
@@ -709,7 +630,7 @@ When you are using the windmill-client, do not forget that as id for variables o
 3. Make changes using \`set_frontend_file\` and \`set_backend_runnable\`. These return lint diagnostics.
 4. Use \`lint()\` at the end to check for and fix any remaining errors
 
-When creating a new app, use \`list_workspace_runnables\` or \`search_hub_scripts\` to find existing scripts/flows to reuse.
+When creating a new app, use \`search_workspace\` or \`search_hub_scripts\` to find existing scripts/flows to reuse.
 
 `;
     // Add datatable creation policy context

package/package/components/copilot/chat/context.js

@@ -1,4 +1,5 @@
 import { Code, Database, TriangleAlert, Diff, FileCode, Code2, TextSelect, Table2 } from 'lucide-svelte';
+import BarsStaggered from '../../icons/BarsStaggered.svelte';
 import {} from '../../../stores';
 import {} from 'diff';
 export const ContextIconMap = {
@@ -10,6 +11,8 @@ export const ContextIconMap = {
     app_frontend_file: FileCode,
     app_backend_runnable: Code2,
     app_code_selection: TextSelect,
-    app_datatable: Table2
+    app_datatable: Table2,
+    workspace_script: Code2,
+    workspace_flow: BarsStaggered
     // flow_module type is handled with FlowModuleIcon
 };