windmill-components 1.623.2 → 1.655.0

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

@@ -8,7 +8,7 @@ import { aiChatManager, AIMode } from './AIChatManager.svelte';
 import { twMerge } from 'tailwind-merge';
 import Portal from '../../Portal.svelte';
 import { zIndexes } from '../../../zIndexes';
-import { tick } from 'svelte';
+import { tick, untrack } from 'svelte';
 let { availableContext, selectedContext = $bindable([]), disabled = false, isFirstMessage = false, placeholder, initialInstructions = '', editingMessageIndex = null, onEditEnd = () => { }, className = '', onClickOutside = () => { }, onSendRequest = undefined, showContext = true, bottomRightSnippet, onKeyDown = undefined } = $props();
 // Generate mode-specific placeholder
 const modePlaceholder = $derived.by(() => {
@@ -37,7 +37,7 @@ const modePlaceholder = $derived.by(() => {
 });
 let contextTextareaComponent = $state();
 let instructionsTextareaComponent = $state();
-let instructions = $state(initialInstructions);
+let instructions = $state(untrack(() => initialInstructions));
 // App mode @ mention state
 let showAppContextTooltip = $state(false);
 let appContextTooltipWord = $state('');
@@ -66,17 +66,24 @@ function clickOutside(node) {
     };
 }
 function addContextToSelection(contextElement) {
-    if (selectedContext &&
-        availableContext &&
-        !selectedContext.find((c) => c.type === contextElement.type && c.title === contextElement.title) &&
-        availableContext.find((c) => c.type === contextElement.type && c.title === contextElement.title)) {
-        selectedContext = [...selectedContext, contextElement];
-        // If it's a datatable table, add it to the app's whitelisted tables
-        if (contextElement.type === 'app_datatable' &&
-            aiChatManager.mode === AIMode.APP &&
-            aiChatManager.appAiChatHelpers) {
-            aiChatManager.appAiChatHelpers.addTableToWhitelist(contextElement.datatableName, contextElement.schemaName, contextElement.tableName);
-        }
+    if (!selectedContext || !availableContext)
+        return;
+    const alreadySelected = selectedContext.find((c) => c.type === contextElement.type && c.title === contextElement.title);
+    if (alreadySelected)
+        return;
+    // Workspace items are fetched on-demand and not in availableContext,
+    // so skip the availableContext check for them
+    const isWorkspaceItem = contextElement.type === 'workspace_script' || contextElement.type === 'workspace_flow';
+    if (!isWorkspaceItem &&
+        !availableContext.find((c) => c.type === contextElement.type && c.title === contextElement.title)) {
+        return;
+    }
+    selectedContext = [...selectedContext, contextElement];
+    // If it's a datatable table, add it to the app's whitelisted tables
+    if (contextElement.type === 'app_datatable' &&
+        aiChatManager.mode === AIMode.APP &&
+        aiChatManager.appAiChatHelpers) {
+        aiChatManager.appAiChatHelpers.addTableToWhitelist(contextElement.datatableName, contextElement.schemaName, contextElement.tableName);
     }
 }
 function sendRequest() {
@@ -271,22 +278,30 @@ $effect(() => {
 		{#if showContext}
 			<div class="flex flex-row gap-1 mb-1 overflow-scroll pt-2 no-scrollbar">
 				<Popover>
-					<svelte:fragment slot="trigger">
-						<div
-							class="border rounded-md px-1 py-0.5 font-normal text-primary text-xs hover:bg-surface-hover bg-surface"
-							>@</div
-						>
-					</svelte:fragment>
-					<svelte:fragment slot="content" let:close>
-						<AvailableContextList
-							{availableContext}
-							{selectedContext}
-							onSelect={(element) => {
-								addContextToSelection(element)
-								close()
-							}}
-						/>
-					</svelte:fragment>
+					{#snippet trigger()}
+									
+							<div
+								class="border rounded-md px-1 py-0.5 font-normal text-primary text-xs hover:bg-surface-hover bg-surface"
+								>@</div
+							>
+						
+									{/snippet}
+					{#snippet content({ close })}
+									
+							<AvailableContextList
+								{availableContext}
+								{selectedContext}
+								onSelect={(element) => {
+									addContextToSelection(element)
+									close()
+								}}
+								onSelectWorkspaceItem={(element) => {
+									addContextToSelection(element)
+									close()
+								}}
+							/>
+						
+									{/snippet}
 				</Popover>
 				{#each selectedContext as element}
 					<ContextElementBadge
@@ -322,22 +337,26 @@ $effect(() => {
 		{#if showContext}
 			<div class="flex flex-row gap-1 mb-1 overflow-scroll pt-2 no-scrollbar">
 				<Popover>
-					<svelte:fragment slot="trigger">
-						<div
-							class="border rounded-md px-1 py-0.5 font-normal text-primary text-xs hover:bg-surface-hover bg-surface"
-							>@</div
-						>
-					</svelte:fragment>
-					<svelte:fragment slot="content" let:close>
-						<AppAvailableContextList
-							{availableContext}
-							{selectedContext}
-							onSelect={(element) => {
-								addContextToSelection(element)
-								close()
-							}}
-						/>
-					</svelte:fragment>
+					{#snippet trigger()}
+											
+							<div
+								class="border rounded-md px-1 py-0.5 font-normal text-primary text-xs hover:bg-surface-hover bg-surface"
+								>@</div
+							>
+						
+											{/snippet}
+					{#snippet content({ close })}
+											
+							<AppAvailableContextList
+								{availableContext}
+								{selectedContext}
+								onSelect={(element) => {
+									addContextToSelection(element)
+									close()
+								}}
+							/>
+						
+											{/snippet}
 				</Popover>
 				{#each selectedContext as element (element.type + '-' + element.title)}
 					<ContextElementBadge

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

@@ -19,7 +19,7 @@ import { chatState, DEFAULT_SIZE, triggerablesByAi } from './sharedChatState.sve
 import { prepareApiSystemMessage, prepareApiUserMessage } from './api/core';
 import { getAnthropicCompletion, parseAnthropicCompletion } from './anthropic';
 import { getOpenAIResponsesCompletion, parseOpenAIResponsesCompletion } from './openai-responses';
-import { getCurrentModel, getCombinedCustomPrompt } from '../../../aiStore';
+import { getCurrentModel, tryGetCurrentModel, getCombinedCustomPrompt } from '../../../aiStore';
 // 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;
 const MAX_TOKENS_HARD_LIMIT = 5000;
@@ -158,11 +158,13 @@ class AIChatManager {
         }
     }
     changeMode(mode, pendingPrompt, options) {
+        if (mode === AIMode.SCRIPT && !tryGetCurrentModel())
+            return;
         this.mode = mode;
         this.pendingPrompt = pendingPrompt ?? '';
         if (mode === AIMode.SCRIPT) {
-            const customPrompt = getCombinedCustomPrompt(mode);
             const currentModel = getCurrentModel();
+            const customPrompt = getCombinedCustomPrompt(mode);
             const lang = this.scriptEditorOptions?.lang ?? 'bun';
             const context = this.contextManager.getSelectedContext();
             this.systemMessage = prepareScriptSystemMessage(currentModel, lang, {}, customPrompt);
@@ -408,6 +410,7 @@ class AIChatManager {
             console.log('chatRequest error', err);
             console.error('chatRequest error', err);
             callbacks.onMessageEnd();
+            this.cancelLoadingTools('Error');
             if (!abortController.signal.aborted) {
                 throw err;
             }
@@ -656,18 +659,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';
@@ -714,11 +706,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 = [];
@@ -950,5 +937,18 @@ class AIChatManager {
             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/AssistantMessage.svelte

@@ -2,7 +2,7 @@
 import { gfmPlugin } from 'svelte-exmarkdown/gfm';
 import CodeDisplay from './script/CodeDisplay.svelte';
 import LinkRenderer from './LinkRenderer.svelte';
-export let message;
+let { message } = $props();
 </script>
 
 <div

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

@@ -1,21 +1,7 @@
 import type { DisplayMessage } from './shared';
-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;
-}
-declare const AssistantMessage: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     message: DisplayMessage;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type AssistantMessage = InstanceType<typeof AssistantMessage>;
+}
+declare const AssistantMessage: import("svelte").Component<Props, {}, "">;
+type AssistantMessage = ReturnType<typeof AssistantMessage>;
 export default AssistantMessage;

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/ChatMode.svelte

@@ -11,39 +11,43 @@ import { aiChatManager, AIMode } from './AIChatManager.svelte';
 		).length < 2}
 		class="max-w-full"
 	>
-		<svelte:fragment slot="trigger">
-			<div
-				class="text-primary text-xs flex flex-row items-center font-normal gap-0.5 border px-1 rounded-lg"
-			>
-				<span class={`truncate`}>
-					{aiChatManager.mode.charAt(0).toUpperCase() + aiChatManager.mode.slice(1)} mode
-				</span>
-				{#if Object.keys(aiChatManager.allowedModes).filter((k) => aiChatManager.allowedModes[k]).length > 1}
-					<div class="shrink-0">
-						<ChevronDown size={16} />
-					</div>
-				{/if}
-			</div>
-		</svelte:fragment>
-		<svelte:fragment slot="content" let:close>
-			<div class="flex flex-col gap-1 p-1 min-w-24">
-				{#each Object.values(AIMode) as possibleMode}
-					{#if aiChatManager.allowedModes[possibleMode]}
-						<button
-							class={twMerge(
-								'text-left text-xs hover:bg-surface-hover rounded-md p-1 font-normal',
-								aiChatManager.mode === possibleMode && 'bg-surface-hover'
-							)}
-							onclick={() => {
-								aiChatManager.changeMode(possibleMode)
-								close()
-							}}
-						>
-							{possibleMode.charAt(0).toUpperCase() + possibleMode.slice(1)} mode
-						</button>
+		{#snippet trigger()}
+			
+				<div
+					class="text-primary text-xs flex flex-row items-center font-normal gap-0.5 border px-1 rounded-lg"
+				>
+					<span class={`truncate`}>
+						{aiChatManager.mode.charAt(0).toUpperCase() + aiChatManager.mode.slice(1)} mode
+					</span>
+					{#if Object.keys(aiChatManager.allowedModes).filter((k) => aiChatManager.allowedModes[k]).length > 1}
+						<div class="shrink-0">
+							<ChevronDown size={16} />
+						</div>
 					{/if}
-				{/each}
-			</div>
-		</svelte:fragment>
+				</div>
+			
+			{/snippet}
+		{#snippet content({ close })}
+			
+				<div class="flex flex-col gap-1 p-1 min-w-24">
+					{#each Object.values(AIMode) as possibleMode}
+						{#if aiChatManager.allowedModes[possibleMode]}
+							<button
+								class={twMerge(
+									'text-left text-xs hover:bg-surface-hover rounded-md p-1 font-normal',
+									aiChatManager.mode === possibleMode && 'bg-surface-hover'
+								)}
+								onclick={() => {
+									aiChatManager.changeMode(possibleMode)
+									close()
+								}}
+							>
+								{possibleMode.charAt(0).toUpperCase() + possibleMode.slice(1)} mode
+							</button>
+						{/if}
+					{/each}
+				</div>
+			
+			{/snippet}
 	</Popover>
 </div>

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

@@ -1,4 +1,5 @@
-<script lang="ts">import { Popover } from '../../meltComponents';
+<script lang="ts">import { untrack } from 'svelte';
+import { Popover } from '../../meltComponents';
 import { Loader2, X } from 'lucide-svelte';
 import { ContextIconMap } from './context';
 import { Highlight } from 'svelte-highlight';
@@ -9,7 +10,7 @@ import ObjectViewer from '../../propertyPicker/ObjectViewer.svelte';
 import HighlightCode from '../../HighlightCode.svelte';
 import FlowModuleIcon from '../../flows/FlowModuleIcon.svelte';
 let { contextElement, deletable = false, onDelete } = $props();
-const icon = ContextIconMap[contextElement.type];
+const icon = ContextIconMap[untrack(() => contextElement).type];
 let showDelete = $state(false);
 const isDeletable = $derived(deletable && contextElement.deletable !== false);
 </script>
@@ -51,13 +52,10 @@ const isDeletable = $derived(deletable && contextElement.deletable !== false);
 		{:else if contextElement.type === 'db'}
 			<div class="p-2 max-w-96 max-h-[300px] text-xs overflow-auto">
 				{#if contextElement.schema && contextElement.schema.lang === 'graphql'}
-					{#await import('../../GraphqlSchemaViewer.svelte')}
+					{#await Promise.all([import('../../GraphqlSchemaViewer.svelte'), formatGraphqlSchema(contextElement.schema.schema)])}
 						<Loader2 class="animate-spin" />
-					{:then Module}
-						<Module.default
-							code={formatGraphqlSchema(contextElement.schema.schema)}
-							class="h-full"
-						/>
+					{:then [Module, code]}
+						<Module.default {code} class="h-full" />
 					{/await}
 				{:else if contextElement.schema}
 					<ObjectViewer json={formatSchema(contextElement.schema)} pureViewer collapseLevel={1} />