windmill-components 1.532.0 → 1.537.1

package/package/components/common/button/model.d.ts

@@ -1,7 +1,7 @@
 export declare const BUTTON_COLORS: readonly ["blue", "red", "dark", "light", "green", "gray", "none"];
 export declare namespace ButtonType {
     type Size = 'xs3' | 'xs2' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-    type Color = string;
+    type Color = 'blue' | 'red' | 'dark' | 'light' | 'green' | 'gray' | 'none' | 'marine' | 'nord';
     type Variant = 'contained' | 'border' | 'divider';
     type Target = '_self' | '_blank';
     type Element = HTMLButtonElement | HTMLAnchorElement;

package/package/components/common/drawer/Disposable.svelte

@@ -1,17 +1,11 @@
-<script lang="ts" context="module">export let openedDrawers = [];
+<script lang="ts" module>export let openedDrawers = $state({ val: [] });
 </script>
 
-<script lang="ts">import { createDispatcherIfMounted } from '../../../createDispatcherIfMounted';
-import { zIndexes } from '../../../zIndexes';
-import { createEventDispatcher } from 'svelte';
-export let open = false;
-export let id = (Math.random() + 1).toString(36).substring(10);
-export let preventEscape = false;
-if (open) {
-    openedDrawers.push(id);
-}
-export let initialOffset = 0;
-let offset = initialOffset;
+<script lang="ts">import { zIndexes } from '../../../zIndexes';
+import { untrack } from 'svelte';
+let { open = $bindable(false), id = (Math.random() + 1).toString(36).substring(10), preventEscape = false, initialOffset = 0, children, onOpen, onClose } = $props();
+let offset = $state(initialOffset);
+let zIndex = $derived(zIndexes.disposables + offset);
 export function toggleDrawer() {
     if (!open) {
         openDrawer();
@@ -21,26 +15,28 @@ export function toggleDrawer() {
     }
 }
 export function openDrawer() {
-    open = true;
-    offset = openedDrawers.length - 1;
-    if (openedDrawers.includes(id)) {
-        return;
+    if (!open) {
+        open = true;
+        if (openedDrawers.val.includes(id)) {
+            return;
+        }
+        offset = openedDrawers.val.length - 1;
+        openedDrawers.val.push(id);
     }
-    openedDrawers.push(id);
 }
 export function closeDrawer() {
-    open = false;
-    offset = initialOffset;
-    // remove the last opened drawer
-    openedDrawers = openedDrawers.filter((drawer) => drawer !== id);
+    if (open) {
+        open = false;
+        offset = initialOffset;
+        // remove the last opened drawer
+        openedDrawers.val = openedDrawers.val.filter((drawer) => drawer !== id);
+    }
 }
 export function isOpen() {
     return open;
 }
-const dispatch = createEventDispatcher();
-const dispatchIfMounted = createDispatcherIfMounted(dispatch);
 function handleClickAway(e) {
-    const last = openedDrawers[openedDrawers.length - 1];
+    const last = openedDrawers.val[openedDrawers.val.length - 1];
     if (last === id) {
         e.stopPropagation();
         closeDrawer();
@@ -50,9 +46,10 @@ function onKeyDown(event) {
     if (open) {
         switch (event.key) {
             case 'Escape':
-                if ((id == openedDrawers[openedDrawers.length - 1] || openedDrawers.length == 0) &&
+                if ((id == openedDrawers.val[openedDrawers.val.length - 1] ||
+                    openedDrawers.val.length == 0) &&
                     !preventEscape) {
-                    openedDrawers.pop();
+                    openedDrawers.val.pop();
                     event.preventDefault();
                     event.stopPropagation();
                     event.stopImmediatePropagation();
@@ -62,10 +59,34 @@ function onKeyDown(event) {
         }
     }
 }
-$: zIndex = zIndexes.disposables + offset;
-$: dispatchIfMounted(open ? 'open' : 'close');
+if (open) {
+    openedDrawers.val.push(id);
+}
+let wasEverOpen = false;
+let lastOpen = open;
+$effect.pre(() => {
+    if (open === untrack(() => lastOpen)) {
+        return;
+    }
+    lastOpen = open;
+    if (open) {
+        // console.log('open', id, wasEverOpen)
+        wasEverOpen = true;
+        onOpen?.();
+    }
+    else if (untrack(() => wasEverOpen)) {
+        // console.log('close', id)
+        onClose?.();
+    }
+});
 </script>
 
-<svelte:window on:keydown={onKeyDown} />
+<svelte:window onkeydown={onKeyDown} />
 
-<slot {handleClickAway} {zIndex} {closeDrawer} {open} />
+{@render children?.({
+	handleClickAway,
+	zIndex,
+	closeDrawer,
+	open,
+	isTop: openedDrawers.val[openedDrawers.val.length - 1] == id
+})}

package/package/components/common/drawer/Disposable.svelte.d.ts

@@ -1,52 +1,20 @@
-export declare let openedDrawers: string[];
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const Disposable: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+export declare let openedDrawers: {
+    val: string[];
+};
+interface Props {
     open?: boolean;
-    id?: string;
+    id?: any;
     preventEscape?: boolean;
     initialOffset?: number;
-    toggleDrawer?: () => void;
-    openDrawer?: () => void;
-    closeDrawer?: () => void;
-    isOpen?: () => boolean;
-}, {
-    default: {
-        handleClickAway: (e: any) => void;
-        zIndex: number;
-        closeDrawer: () => void;
-        open: boolean;
-    };
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {
-        handleClickAway: (e: any) => void;
-        zIndex: number;
-        closeDrawer: () => void;
-        open: boolean;
-    };
-}, {
+    children?: import('svelte').Snippet<[any]>;
+    onOpen?: () => void;
+    onClose?: () => void;
+}
+declare const Disposable: import("svelte").Component<Props, {
     toggleDrawer: () => void;
     openDrawer: () => void;
     closeDrawer: () => void;
     isOpen: () => boolean;
-}, string>;
-type Disposable = InstanceType<typeof Disposable>;
+}, "open">;
+type Disposable = ReturnType<typeof Disposable>;
 export default Disposable;

package/package/components/common/drawer/Drawer.svelte

@@ -1,9 +1,9 @@
-<script lang="ts">import { onMount, createEventDispatcher } from 'svelte';
+<script lang="ts">import { onMount, createEventDispatcher, untrack } from 'svelte';
 import { BROWSER } from 'esm-env';
 import Disposable from './Disposable.svelte';
 import ConditionalPortal from './ConditionalPortal.svelte';
 import { chatState } from '../../copilot/chat/sharedChatState.svelte';
-let { open = $bindable(undefined), duration = 0.3, placement = 'right', size = '600px', alwaysOpen = false, shouldUsePortal = true, offset = 0, preventEscape = false, disableChatOffset = false, class: clazz = '', positionClass = undefined, children } = $props();
+let { open = $bindable(undefined), duration = 0.3, placement = 'right', size = '600px', alwaysOpen = false, shouldUsePortal = true, offset = 0, preventEscape = false, disableChatOffset = false, class: clazz = '', positionClass = undefined, children: children_render } = $props();
 if (open === undefined) {
     open = false;
 }
@@ -16,10 +16,12 @@ export function openDrawer() {
     disposable?.openDrawer();
 }
 export function closeDrawer() {
+    if (open) {
+        setTimeout(() => {
+            dispatch('afterClose');
+        }, durationMs);
+    }
     disposable?.closeDrawer();
-    setTimeout(() => {
-        dispatch('afterClose');
-    }, durationMs);
 }
 export function isOpen() {
     return open;
@@ -39,7 +41,10 @@ $effect(() => {
     scrollLock(open ?? false);
 });
 $effect(() => {
-    open ? openDrawer() : closeDrawer();
+    open;
+    untrack(() => {
+        open ? openDrawer() : closeDrawer();
+    });
 });
 let timeout = $state(true);
 $effect(() => {
@@ -48,7 +53,6 @@ $effect(() => {
 onMount(() => {
     mounted = true;
 });
-const children_render = $derived(children);
 const aiChatOpen = $derived(chatState.size > 0);
 </script>
 
@@ -57,11 +61,11 @@ const aiChatOpen = $derived(chatState.size > 0);
 		initialOffset={offset}
 		bind:open
 		bind:this={disposable}
-		on:open
-		on:close
+		onOpen={() => dispatch('open')}
+		onClose={() => dispatch('close')}
 		{preventEscape}
 	>
-		{#snippet children({ handleClickAway, zIndex })}
+		{#snippet children({ handleClickAway, zIndex, isTop })}
 			<aside
 				class="drawer windmill-app windmill-drawer {clazz ?? ''} {positionClass ?? ''} {aiChatOpen
 					? 'respect-global-chat'
@@ -76,7 +80,7 @@ const aiChatOpen = $derived(chatState.size > 0);
 				<div class="overlay {positionClass ?? ''}" onclick={handleClickAway}></div>
 				<div class="panel {placement} {positionClass}" class:size>
 					{#if open || !timeout || alwaysOpen}
-						{@render children_render?.({ open })}
+						{@render children_render?.({ open, isTop })}
 					{/if}
 				</div>
 			</aside>

package/package/components/copilot/MetadataGen.svelte

@@ -16,6 +16,7 @@ const promptConfigs = {
 You are a helpful AI assistant. You generate very brief summaries from scripts.
 The summaries need to be as short as possible (maximum 8 words) and only give a global idea. Do not specify the programming language. Do not use any punctation. Avoid using prepositions and articles.
 Examples: List the commits of a GitHub repository, Divide a number by 16, etc..
+**Return only the summary, no other text.**
 `,
         user: `
 Generate a very short summary for the script below:
@@ -32,6 +33,7 @@ These descriptions are used to explain to other users what the script does and h
 Be as short as possible to give a global idea, maximum 3-4 sentences.
 All scripts export an asynchronous function called main, do not include it in the description.
 Do not describe how to call it either.
+**Return only the description, no other text.**
 `,
         user: `
 Generate a description for the script below:
@@ -45,6 +47,7 @@ Generate a description for the script below:
         system: `
 			You are a helpful AI assistant. You generate very brief summaries from scripts.
 The summaries need to be as short as possible (maximum 8 words) and only give a global idea. Do not use any punctation. Avoid using prepositions and articles.
+**Return only the summary, no other text.**
 `,
         user: `
 Summarize the flow below in one very short sentence without punctation:
@@ -57,6 +60,7 @@ You are a helpful AI assistant. You generate descriptions from flow.
 These descriptions are used to explain to other users what the flow does and how to use it.
 Be as short as possible to give a global idea, maximum 3-4 sentences.
 Do not include line breaks.
+**Return only the description, no other text.**
 `,
         user: `
 Generate a description for the flow below:
@@ -65,13 +69,15 @@ Generate a description for the flow below:
     },
     agentToolFunctionName: {
         system: `
-You are a helpful AI assistant. You generate function names from scripts.
-These function names will be used by an AI agent to call this tool.
+You are a helpful AI assistant. You generate tool names from scripts.
+These tool names will be used by an AI agent to call this tool.
+It has to be based on the script code content not on the main function name.
 It has to respect the following regex: /[a-zA-Z0-9_]+/
 Examples: generate_image, classify_image, summarize_text, etc.
+**Return only the tool name, no other text.**
 `,
         user: `
-Generate a function name for the script below:
+Generate a tool name for the script below:
 {code}`,
         placeholderName: 'code'
     }
@@ -290,6 +296,11 @@ onDestroy(() => {
 			on:focus={() => (focused = true)}
 			on:blur={() => (focused = false)}
 		/>
+		{#if promptConfigName === 'agentToolFunctionName' && !validateToolName(content ?? '')}
+			<div class="text-3xs text-red-400 absolute -bottom-4">
+				Invalid tool name, should only contain letters, numbers and underscores
+			</div>
+		{/if}
 	{/if}
 	<!-- <slot {updateFocus} {active} {generatedContent} classNames={active ? '!indent-[8.8rem]' : ''} /> -->
 </div>

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

@@ -100,7 +100,6 @@ $effect(() => {
 								addContextToSelection(element)
 								close()
 							}}
-							categorize
 						/>
 					</svelte:fragment>
 				</Popover>

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

@@ -12,10 +12,9 @@ import { getCompletion, getModelContextWindow } from '../lib';
 import { dfs } from '../../flows/previousResults';
 import { getStringError } from './utils';
 import { untrack } from 'svelte';
-import { copilotSessionModel } from '../../../stores';
+import { getCurrentModel } from '../../../stores';
 import { askTools, prepareAskSystemMessage, prepareAskUserMessage } from './ask/core';
 import { chatState, DEFAULT_SIZE, triggerablesByAi } from './sharedChatState.svelte';
-import { get } from 'svelte/store';
 import { prepareApiSystemMessage, prepareApiUserMessage } from './api/core';
 // If the estimated token usage is greater than the model context window - the threshold, we delete the oldest message
 const MAX_TOKENS_THRESHOLD_PERCENTAGE = 0.05;
@@ -83,7 +82,8 @@ class AIChatManager {
             }
             return acc;
         }, 0);
-        const modelContextWindow = getModelContextWindow(get(copilotSessionModel)?.model ?? '');
+        const model = getCurrentModel();
+        const modelContextWindow = getModelContextWindow(model.model);
         return (estimatedTokens >
             modelContextWindow -
                 Math.max(modelContextWindow * MAX_TOKENS_THRESHOLD_PERCENTAGE, MAX_TOKENS_HARD_LIMIT));

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

@@ -1,16 +1,18 @@
 <script lang="ts">import FlowModuleIcon from '../../flows/FlowModuleIcon.svelte';
 import BarsStaggered from '../../icons/BarsStaggered.svelte';
 import { ContextIconMap } from './context';
-import { ArrowLeft, Diff, Database, Code, ChevronRight } from 'lucide-svelte';
-const { availableContext, selectedContext, onSelect, showAllAvailable = false, stringSearch = '', selectedIndex = 0, categorize = false } = $props();
+import { ArrowLeft, Diff, Database, ChevronRight } 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
 const categories = [
     { id: 'diffs', label: 'Diffs', icon: Diff },
     { id: 'modules', label: 'Modules', icon: BarsStaggered },
-    { id: 'databases', label: 'Databases', icon: Database },
-    { id: 'code', label: 'Code', icon: Code }
+    { id: 'databases', label: 'Databases', icon: Database }
 ];
 const filteredAvailableContext = $derived(availableContext.filter((context) => {
     const filtered = (showAllAvailable ||
@@ -23,8 +25,7 @@ const contextByCategory = $derived.by(() => {
     const grouped = {
         diffs: [],
         modules: [],
-        databases: [],
-        code: []
+        databases: []
     };
     filteredAvailableContext.forEach((context) => {
         if (context.type === 'diff')
@@ -33,82 +34,149 @@ const contextByCategory = $derived.by(() => {
             grouped.modules.push(context);
         else if (context.type === 'db')
             grouped.databases.push(context);
-        else if (context.type === 'code')
-            grouped.code.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;
 }
 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;
+    }
+});
 </script>
 
-<div class="flex flex-col gap-1 text-tertiary text-xs p-1 pr-0 min-w-24 max-h-48 overflow-y-scroll">
-	{#if categorize}
-		{#if currentView === 'categories'}
-			{#each categories as category}
-				{@const itemCount = contextByCategory[category.id].length}
-				{@const Icon = category.icon}
-				{#if itemCount > 0}
-					<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"
-						onclick={() => handleCategoryClick(category.id)}
-					>
-						<Icon size={16} />
-						<span class="flex-1">{category.label}</span>
-						<ChevronRight size={16} />
-					</button>
-				{/if}
-			{/each}
-			{#if categories.every((cat) => contextByCategory[cat.id].length === 0)}
-				<div class="text-center text-tertiary 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-tertiary text-xs py-2">No items in this category</div>
-			{:else}
-				{#each currentCategoryItems as element}
-					{@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"
-						onclick={() => {
-							onSelect(element)
-							currentView = 'categories' // Go back to categories after selection
-						}}
-					>
-						{#if element.type === 'flow_module'}
-							<FlowModuleIcon module={element as FlowModule} size={16} />
-						{:else if Icon}
-							<Icon size={16} />
-						{/if}
-						<span class="truncate">
-							{element.type === 'diff' || element.type === 'flow_module'
-								? element.title.replace(/_/g, ' ')
-								: element.title}
-						</span>
-					</button>
-				{/each}
-			{/if}
-		{/if}
-	{:else}
+<div
+	class="flex flex-col gap-1 text-tertiary 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}
 			{@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 ===
-				selectedIndex
+				itemSelectedIndex
 					? 'bg-surface-hover'
 					: ''}"
 				onclick={() => {
@@ -127,5 +195,63 @@ function handleBackClick() {
 				</span>
 			</button>
 		{/each}
+		{#if filteredAvailableContext.length === 0}
+			<div class="text-center text-tertiary text-xs py-2">No matching context</div>
+		{/if}
+	{:else if currentView === 'categories'}
+		<!-- Categories view -->
+		{#each availableCategories as category, i}
+			{@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-tertiary 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-tertiary text-xs py-2">No items in this category</div>
+		{:else}
+			{#each currentCategoryItems as element, i}
+				{@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 element.type === 'flow_module'}
+						<FlowModuleIcon module={element as FlowModule} size={16} />
+					{:else if Icon}
+						<Icon size={16} />
+					{/if}
+					<span class="truncate">
+						{element.type === 'diff' ? element.title.replace(/_/g, ' ') : element.title}
+					</span>
+				</button>
+			{/each}
+		{/if}
 	{/if}
 </div>

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

@@ -3,10 +3,10 @@ interface Props {
     availableContext: ContextElement[];
     selectedContext: ContextElement[];
     onSelect: (element: ContextElement) => void;
+    setShowing?: (showing: boolean) => void;
     showAllAvailable?: boolean;
     stringSearch?: string;
-    selectedIndex?: number;
-    categorize?: boolean;
+    onViewChange?: (newNumber: number) => void;
 }
 declare const AvailableContextList: import("svelte").Component<Props, {}, "">;
 type AvailableContextList = ReturnType<typeof AvailableContextList>;