windmill-components 1.531.1 → 1.532.0

package/package/components/ArgInput.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">import { preventDefault, stopPropagation, createBubbler } from 'svelte/legacy';
 const bubble = createBubbler();
-import { setInputCat as computeInputCat, debounce, emptyString, getSchemaFromProperties } from '../utils';
+import { setInputCat as computeInputCat, debounce, emptySchema, emptyString, getSchemaFromProperties } from '../utils';
 import { DollarSign, Plus, X, Check, Loader2, ExternalLink } from 'lucide-svelte';
 import { createEventDispatcher, onDestroy, onMount, tick, untrack } from 'svelte';
 import { fade } from 'svelte/transition';
@@ -28,6 +28,8 @@ import MultiSelect from './select/MultiSelect.svelte';
 import { safeSelectItems } from './select/utils.svelte';
 import S3ArgInput from './common/fileUpload/S3ArgInput.svelte';
 import { base } from '../base';
+import { workspaceStore } from '../stores';
+import { getJsonSchemaFromResource } from './schema/jsonSchemaResource.svelte';
 let { label = '', value = $bindable(), defaultValue = $bindable(undefined), description = $bindable(undefined), format = $bindable(undefined), contentEncoding = undefined, type = undefined, oneOf = $bindable(undefined), required = false, pattern = $bindable(undefined), valid = $bindable(undefined), enum_ = $bindable(undefined), disabled = false, itemsType = $bindable(undefined), displayHeader = true, properties = $bindable(undefined), nestedRequired = undefined, autofocus = null, compact = false, password = false, pickForField = $bindable(undefined), variableEditor = undefined, itemPicker = undefined, noMargin = false, extra = {}, minW = true, prettifyHeader = false, resourceTypes, disablePortal = false, showSchemaExplorer = false, simpleTooltip = undefined, customErrorMessage = undefined, onlyMaskPassword = false, nullable = false, title = $bindable(undefined), placeholder = $bindable(undefined), order = $bindable(undefined), editor = $bindable(undefined), orderEditable = false, shouldDispatchChanges = false, noDefaultOnSelectFirst = false, helperScript = undefined, otherArgs = {}, lightHeader = false, diffStatus = undefined, hideNested = false, nestedParent = undefined, nestedClasses = '', displayType = true, css = undefined, appPath = undefined, computeS3ForceViewerPolicies = undefined, workspace = undefined, actions } = $props();
 $effect(() => {
     if (description == undefined) {
@@ -488,6 +490,47 @@ onDestroy(() => {
 				{appPath}
 				{computeS3ForceViewerPolicies}
 			/>
+		{:else if inputCat == 'object' && format == 'json-schema'}
+			{#await import('./EditableSchemaForm.svelte')}
+				<Loader2 class="animate-spin" />
+			{:then Module}
+				<Module.default
+					bind:schema={
+						() =>
+							value && typeof value === 'object' && !Array.isArray(value) ? value : emptySchema(),
+						(v) => {
+							value = v
+						}
+					}
+					isFlowInput
+					editTab="inputEditor"
+					noPreview
+					addPropertyInEditorTab
+				/>
+			{/await}
+		{:else if inputCat == 'object' && format?.startsWith('jsonschema-')}
+			{#await getJsonSchemaFromResource(format.substring('jsonschema-'.length), workspace ?? $workspaceStore ?? '')}
+				<Loader2 class="animate-spin" />
+			{:then schema}
+				{#if !schema || !schema.properties}
+					{#await import('./JsonEditor.svelte')}
+						<Loader2 class="animate-spin" />
+					{:then Module}
+						<Module.default code={JSON.stringify(value, null, 2)} bind:value />
+					{/await}
+				{:else}
+					<div class="py-4 pr-2 pl-6 border rounded-md w-full">
+						<SchemaForm
+							{onlyMaskPassword}
+							{disablePortal}
+							{disabled}
+							{prettifyHeader}
+							{schema}
+							bind:args={value}
+						/>
+					</div>
+				{/if}
+			{/await}
 		{:else if inputCat == 'list' && !isListJson}
 			<div class="w-full flex gap-4">
 				<div class="w-full">

package/package/components/EditableSchemaForm.svelte

@@ -24,9 +24,10 @@ import { deepEqual } from 'fast-equals';
 import { tweened } from 'svelte/motion';
 import Section from './Section.svelte';
 import Editor from './Editor.svelte';
+import AddPropertyV2 from './schema/AddPropertyV2.svelte';
 // export let openEditTab: () => void = () => {}
 const dispatch = createEventDispatcher();
-let { schema = $bindable(), hiddenArgs = [], args = $bindable(undefined), shouldHideNoInputs = false, noVariablePicker = false, flexWrap = false, uiOnly = false, isFlowInput = false, noPreview = false, jsonEnabled = true, isAppInput = false, displayWebhookWarning = false, onlyMaskPassword = false, dndType = undefined, editTab, previewSchema = undefined, editPanelInitialSize = undefined, editPanelSize = $bindable(0), diff = {}, disableDnd = false, shouldDispatchChanges = false, isValid = $bindable(true), customUi = undefined, pannelExtraButtonWidth = 0, class: clazz = '', dynSelectCode = $bindable(), dynSelectLang = $bindable(), showDynSelectOpt = false, openEditTab, addProperty, runButton, extraTab } = $props();
+let { schema = $bindable(), hiddenArgs = [], args = $bindable(undefined), shouldHideNoInputs = false, noVariablePicker = false, flexWrap = false, uiOnly = false, isFlowInput = false, noPreview = false, jsonEnabled = true, isAppInput = false, displayWebhookWarning = false, onlyMaskPassword = false, dndType = undefined, editTab, previewSchema = undefined, editPanelInitialSize = undefined, editPanelSize = $bindable(0), diff = {}, disableDnd = false, shouldDispatchChanges = false, isValid = $bindable(true), customUi = undefined, pannelExtraButtonWidth = 0, class: clazz = '', dynSelectCode = $bindable(), dynSelectLang = $bindable(), showDynSelectOpt = false, addPropertyInEditorTab = false, openEditTab, addProperty, runButton, extraTab } = $props();
 $effect.pre(() => {
     if (args == undefined) {
         args = {};
@@ -390,22 +391,31 @@ function updateDynSelectCode(functionName, lang = 'bun') {
 				{:else}
 					<!-- WIP -->
 					{#if jsonEnabled && customUi?.jsonOnly != true}
-						<div class="w-full p-3 flex justify-end">
-							<Toggle
-								bind:checked={jsonView}
-								label="JSON View"
-								size="xs"
-								options={{
-									right: 'JSON editor',
-									rightTooltip:
-										'Arguments can be edited either using the wizard, or by editing their JSON Schema.'
-								}}
-								lightMode
-								on:change={() => {
-									schemaString = JSON.stringify(schema, null, '\t')
-									editor?.setCode(schemaString)
-								}}
-							/>
+						<div class="w-full p-3 flex gap-4 justify-end items-center">
+							{#if addPropertyInEditorTab}
+								<AddPropertyV2 bind:schema on:change>
+									{#snippet trigger()}
+										<Button color="light" size="xs" iconOnly startIcon={{ icon: Plus }} />
+									{/snippet}
+								</AddPropertyV2>
+							{/if}
+							<div class="shrink-0">
+								<Toggle
+									bind:checked={jsonView}
+									label="JSON View"
+									size="xs"
+									options={{
+										right: 'JSON editor',
+										rightTooltip:
+											'Arguments can be edited either using the wizard, or by editing their JSON Schema.'
+									}}
+									lightMode
+									on:change={() => {
+										schemaString = JSON.stringify(schema, null, '\t')
+										editor?.setCode(schemaString)
+									}}
+								/>
+							</div>
 						</div>
 					{/if}
 
@@ -536,7 +546,6 @@ function updateDynSelectCode(functionName, lang = 'bun') {
 																					const isS3 = v == 'S3'
 																					const isOneOf = v == 'oneOf'
 																					const isDynSelect = v == 'dynselect'
-
 																					const emptyProperty = {
 																						contentEncoding: undefined,
 																						enum_: undefined,

package/package/components/EditableSchemaForm.svelte.d.ts

@@ -31,6 +31,7 @@ interface Props {
     dynSelectCode?: string | undefined;
     dynSelectLang?: ScriptLang | undefined;
     showDynSelectOpt?: boolean;
+    addPropertyInEditorTab?: boolean;
     openEditTab?: import('svelte').Snippet;
     addProperty?: import('svelte').Snippet;
     runButton?: import('svelte').Snippet;

package/package/components/Editor.svelte

@@ -114,7 +114,7 @@ import { getDbSchemas } from './apps/components/display/dbtable/utils';
 // import EditorTheme from './EditorTheme.svelte'
 let divEl = $state(null);
 let editor = $state(null);
-let { code = $bindable(), cmdEnterAction = undefined, formatAction = undefined, automaticLayout = true, websocketAlive = $bindable(), shouldBindKey = true, fixedOverflowWidgets = true, path = undefined, yContent = undefined, awareness = undefined, folding = false, args = undefined, useWebsockets = true, small = false, scriptLang, disabled = false, lineNumbersMinChars = 3, files = {}, extraLib = undefined, changeTimeout = 500, loadAsync = false, key = undefined, class: clazz = undefined } = $props();
+let { code = $bindable(), cmdEnterAction = undefined, formatAction = undefined, automaticLayout = true, websocketAlive = $bindable(), shouldBindKey = true, fixedOverflowWidgets = true, path = undefined, yContent = undefined, awareness = undefined, folding = false, args = undefined, useWebsockets = true, small = false, scriptLang, disabled = false, lineNumbersMinChars = 3, files = {}, extraLib = undefined, changeTimeout = 500, loadAsync = false, key = undefined, class: clazz = undefined, moduleId = undefined } = $props();
 $effect.pre(() => {
     if (websocketAlive == undefined) {
         websocketAlive = {
@@ -1077,7 +1077,7 @@ async function loadMonaco() {
                 (selection.startLineNumber !== selection.endLineNumber ||
                     selection.startColumn !== selection.endColumn);
             if (hasSelection && selectedLines) {
-                aiChatManager.addSelectedLinesToContext(selectedLines, selection.startLineNumber, selection.endLineNumber);
+                aiChatManager.addSelectedLinesToContext(selectedLines, selection.startLineNumber, selection.endLineNumber, moduleId);
             }
             else {
                 aiChatManager.toggleOpen();

package/package/components/Editor.svelte.d.ts

@@ -31,6 +31,7 @@ interface Props {
     loadAsync?: boolean;
     key?: string | undefined;
     class?: string | undefined;
+    moduleId?: 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> & {

package/package/components/EditorBar.svelte

@@ -31,7 +31,7 @@ import S3FilePicker from './S3FilePicker.svelte';
 import DucklakeIcon from './icons/DucklakeIcon.svelte';
 import FlowInlineScriptAiButton from './copilot/FlowInlineScriptAIButton.svelte';
 import ScriptGen from './copilot/ScriptGen.svelte';
-let { lang, editor, websocketAlive, iconOnly = false, validCode = true, kind = 'script', template = 'script', collabMode = false, collabLive = false, collabUsers = [], scriptPath = undefined, diffEditor = undefined, args, noHistory = false, saveToWorkspace = false, customUi = {}, lastDeployedCode = undefined, diffMode = false, showHistoryDrawer = $bindable(false), right, openAiChat = false } = $props();
+let { lang, editor, websocketAlive, iconOnly = false, validCode = true, kind = 'script', template = 'script', collabMode = false, collabLive = false, collabUsers = [], scriptPath = undefined, diffEditor = undefined, args, noHistory = false, saveToWorkspace = false, customUi = {}, lastDeployedCode = undefined, diffMode = false, showHistoryDrawer = $bindable(false), right, openAiChat = false, moduleId = undefined } = $props();
 let contextualVariablePicker = $state();
 let variablePicker = $state();
 let resourcePicker = $state();
@@ -870,7 +870,7 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 
 			{#if customUi?.aiGen != false}
 				{#if openAiChat}
-					<FlowInlineScriptAiButton />
+					<FlowInlineScriptAiButton {moduleId} />
 				{:else}
 					<ScriptGen {editor} {diffEditor} {lang} {iconOnly} {args} />
 				{/if}

package/package/components/EditorBar.svelte.d.ts

@@ -33,6 +33,7 @@ interface Props {
     showHistoryDrawer?: boolean;
     right?: import('svelte').Snippet;
     openAiChat?: boolean;
+    moduleId?: 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> & {

package/package/components/FieldHeader.svelte

@@ -38,7 +38,7 @@ export let simpleTooltipIconClass = '';
 	{/if}
 
 	{#if displayType}
-		{#if format && !format.startsWith('resource')}
+		{#if format && !format.startsWith('resource') && !format.startsWith('jsonschema-')}
 			<span class="text-xs italic ml-2 text-tertiary dark:text-indigo-400">
 				{format}
 			</span>

package/package/components/ModuleTest.svelte

@@ -129,7 +129,10 @@ modulesTestStates.states[mod.id] = {
 			}
 		}
 	}
-	bind:job={modulesTestStates.states[mod.id].testJob}
+	bind:job={
+		() => modulesTestStates.states[mod.id]?.testJob,
+		(v) => modulesTestStates.states[mod.id] && (modulesTestStates.states[mod.id].testJob = v)
+	}
 	loadPlaceholderJobOnStart={{
 		type: 'QueuedJob',
 		id: '',

package/package/components/ResourceEditor.svelte

@@ -18,6 +18,7 @@ import GfmMarkdown from './GfmMarkdown.svelte';
 import TestTriggerConnection from './triggers/TestTriggerConnection.svelte';
 import GitHubAppIntegration from './GitHubAppIntegration.svelte';
 import Button from './common/button/Button.svelte';
+import { clearJsonSchemaResourceCache } from './schema/jsonSchemaResource.svelte';
 let { canSave = $bindable(true), resource_type = $bindable(undefined), path = $bindable(''), newResource = false, hidePath = false, onChange, defaultValues = undefined } = $props();
 let isValid = $state(true);
 let jsonError = $state('');
@@ -64,6 +65,9 @@ export async function editResource() {
             path: resourceToEdit.path,
             requestBody: { path, value: args, description }
         });
+        if (resourceToEdit.resource_type === 'json_schema') {
+            clearJsonSchemaResourceCache(resourceToEdit.path, $workspaceStore);
+        }
         sendUserToast(`Updated resource at ${path}`);
         dispatch('refresh', path);
     }

package/package/components/ScriptEditor.svelte

@@ -162,6 +162,7 @@ export async function inferSchema(code, nlang, resetArgs = false) {
 onMount(() => {
     inferSchema(code);
     loadPastTests();
+    aiChatManager.saveAndClear();
     aiChatManager.changeMode(AIMode.SCRIPT);
 });
 setLicense();

package/package/components/StringTypeNarrowing.svelte.d.ts

@@ -15,6 +15,6 @@ interface Props {
     overrideAllowKindChange?: boolean;
     originalType?: string | undefined;
 }
-declare const StringTypeNarrowing: import("svelte").Component<Props, {}, "password" | "disableCreate" | "pattern" | "format" | "enum_" | "enumLabels" | "contentEncoding" | "customErrorMessage" | "dateFormat" | "minRows" | "disableVariablePicker">;
+declare const StringTypeNarrowing: import("svelte").Component<Props, {}, "password" | "disableCreate" | "pattern" | "format" | "enum_" | "enumLabels" | "contentEncoding" | "customErrorMessage" | "minRows" | "disableVariablePicker" | "dateFormat">;
 type StringTypeNarrowing = ReturnType<typeof StringTypeNarrowing>;
 export default StringTypeNarrowing;

package/package/components/copilot/FlowInlineScriptAIButton.svelte

@@ -6,6 +6,7 @@ import { ExternalLink, WandSparkles } from 'lucide-svelte';
 import { base } from '../../base';
 import { twMerge } from 'tailwind-merge';
 import { aiChatManager, AIMode } from './chat/AIChatManager.svelte';
+const { moduleId } = $props();
 const aiChatScriptModeClasses = $derived(aiChatManager.mode === AIMode.SCRIPT && aiChatManager.isOpen
     ? 'dark:bg-violet-900 bg-violet-100'
     : '');
@@ -18,7 +19,7 @@ const aiChatScriptModeClasses = $derived(aiChatManager.mode === AIMode.SCRIPT &&
 		btnClasses={twMerge('!px-2', aiChatScriptModeClasses)}
 		{onClick}
 		iconOnly
-		title="Open AI chat in script mode"
+		title="Open AI chat"
 		startIcon={{ icon: WandSparkles, classes: 'text-violet-800 dark:text-violet-400' }}
 	/>
 {/snippet}
@@ -26,7 +27,8 @@ const aiChatScriptModeClasses = $derived(aiChatManager.mode === AIMode.SCRIPT &&
 {#if $copilotInfo.enabled}
 	{@render button(() => {
 		aiChatManager.openChat()
-		aiChatManager.changeMode(AIMode.SCRIPT)
+		const availableContext = aiChatManager.contextManager.getAvailableContext()
+		aiChatManager.contextManager.setSelectedModuleContext(moduleId, availableContext)
 	})}
 {:else}
 	<Popover

package/package/components/copilot/FlowInlineScriptAIButton.svelte.d.ts

@@ -1,3 +1,6 @@
-declare const FlowInlineScriptAiButton: import("svelte").Component<Record<string, never>, {}, "">;
+interface Props {
+    moduleId?: string;
+}
+declare const FlowInlineScriptAiButton: import("svelte").Component<Props, {}, "">;
 type FlowInlineScriptAiButton = ReturnType<typeof FlowInlineScriptAiButton>;
 export default FlowInlineScriptAiButton;

package/package/components/copilot/autocomplete/Autocompletor.js

@@ -128,9 +128,7 @@ export class Autocompletor {
                     ]
                 };
             },
-            // @ts-ignore
             disposeInlineCompletions: () => { },
-            freeInlineCompletions: () => { }
         });
         this.#cursorDisposable = editor.onDidChangeCursorPosition(async (e) => {
             deletionsCues.clear();

package/package/components/copilot/chat/AIChat.svelte

@@ -47,7 +47,7 @@ $effect(() => {
     aiChatManager.listenForDbSchemasChanges($dbSchemas);
 });
 $effect(() => {
-    aiChatManager.listenForScriptEditorContextChange($dbSchemas, $workspaceStore, $copilotSessionModel);
+    aiChatManager.listenForContextChange($dbSchemas, $workspaceStore, $copilotSessionModel);
 });
 $effect(() => {
     aiChatManager.updateMode(untrack(() => aiChatManager.mode));
@@ -80,9 +80,7 @@ $effect(() => {
 	pastChats={historyManager.getPastChats()}
 	bind:selectedContext={
 		() => aiChatManager.contextManager.getSelectedContext(),
-		(sc) => {
-			aiChatManager.scriptEditorOptions && aiChatManager.contextManager.setSelectedContext(sc)
-		}
+		(sc) => aiChatManager.contextManager.setSelectedContext(sc)
 	}
 	availableContext={aiChatManager.contextManager.getAvailableContext()}
 	messages={aiChatManager.currentReply

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

@@ -33,7 +33,7 @@ let contextTextareaComponent = $state();
 let instructionsTextareaComponent = $state();
 let instructions = $state(initialInstructions);
 export function focusInput() {
-    if (aiChatManager.mode === AIMode.SCRIPT) {
+    if (aiChatManager.mode === AIMode.SCRIPT || aiChatManager.mode === AIMode.FLOW) {
         contextTextareaComponent?.focus();
     }
     else {
@@ -82,7 +82,7 @@ $effect(() => {
 </script>
 
 <div use:clickOutside class="relative">
-	{#if aiChatManager.mode === AIMode.SCRIPT}
+	{#if aiChatManager.mode === AIMode.SCRIPT || aiChatManager.mode === AIMode.FLOW}
 		{#if showContext}
 			<div class="flex flex-row gap-1 mb-1 overflow-scroll pt-2 no-scrollbar">
 				<Popover>
@@ -100,6 +100,7 @@ $effect(() => {
 								addContextToSelection(element)
 								close()
 							}}
+							categorize
 						/>
 					</svelte:fragment>
 				</Popover>
@@ -107,7 +108,7 @@ $effect(() => {
 					<ContextElementBadge
 						contextElement={element}
 						deletable
-						on:delete={() => {
+						onDelete={() => {
 							selectedContext = selectedContext?.filter(
 								(c) => c.type !== element.type || c.title !== element.title
 							)

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

@@ -53,6 +53,7 @@ class AIChatManager {
     tools = $state([]);
     helpers = $state(undefined);
     scriptEditorOptions = $state(undefined);
+    flowOptions = $state(undefined);
     scriptEditorApplyCode = $state(undefined);
     scriptEditorShowDiffMode = $state(undefined);
     flowAiChatHelpers = $state(undefined);
@@ -61,7 +62,7 @@ class AIChatManager {
     aiChatInput = $state(null);
     confirmationCallback = $state(undefined);
     allowedModes = $derived({
-        script: this.scriptEditorOptions !== undefined,
+        script: this.flowAiChatHelpers === undefined && this.scriptEditorOptions !== undefined,
         flow: this.flowAiChatHelpers !== undefined,
         navigator: true,
         ask: true,
@@ -507,7 +508,7 @@ class AIChatManager {
         }
         try {
             const oldSelectedContext = this.contextManager?.getSelectedContext() ?? [];
-            if (this.mode === AIMode.SCRIPT) {
+            if (this.mode === AIMode.SCRIPT || this.mode === AIMode.FLOW) {
                 this.contextManager?.updateContextOnRequest(options);
             }
             this.loading = true;
@@ -527,7 +528,9 @@ class AIChatManager {
                 {
                     role: 'user',
                     content: this.instructions,
-                    contextElements: this.mode === AIMode.SCRIPT ? oldSelectedContext : undefined,
+                    contextElements: this.mode === AIMode.SCRIPT || this.mode === AIMode.FLOW
+                        ? oldSelectedContext
+                        : undefined,
                     snapshot,
                     index: this.messages.length // matching with actual messages index. not -1 because it's not yet added to the messages array
                 }
@@ -545,7 +548,7 @@ class AIChatManager {
             };
             switch (this.mode) {
                 case AIMode.FLOW:
-                    userMessage = prepareFlowUserMessage(oldInstructions, this.flowAiChatHelpers.getFlowAndSelectedId());
+                    userMessage = prepareFlowUserMessage(oldInstructions, this.flowAiChatHelpers.getFlowAndSelectedId(), oldSelectedContext);
                     break;
                 case AIMode.NAVIGATOR:
                     userMessage = prepareNavigatorUserMessage(oldInstructions);
@@ -672,12 +675,14 @@ class AIChatManager {
         this.contextManager?.setFixContext();
         this.sendRequest();
     };
-    addSelectedLinesToContext = (lines, startLine, endLine) => {
+    addSelectedLinesToContext = (lines, startLine, endLine, moduleId) => {
         if (!this.open) {
             this.toggleOpen();
         }
-        this.changeMode(AIMode.SCRIPT);
-        this.contextManager?.addSelectedLinesToContext(lines, startLine, endLine);
+        if (!moduleId) {
+            this.changeMode(AIMode.SCRIPT);
+        }
+        this.contextManager?.addSelectedLinesToContext(lines, startLine, endLine, moduleId);
         this.focusInput();
     };
     saveAndClear = async () => {
@@ -712,10 +717,16 @@ class AIChatManager {
             isPreprocessor: moduleId === 'preprocessor'
         });
     };
-    listenForScriptEditorContextChange = (dbSchemas, workspaceStore, copilotSessionModel) => {
-        if (this.scriptEditorOptions) {
+    listenForContextChange = (dbSchemas, workspaceStore, copilotSessionModel) => {
+        if (this.mode === AIMode.SCRIPT && this.scriptEditorOptions) {
             this.contextManager.updateAvailableContext(this.scriptEditorOptions, dbSchemas, workspaceStore ?? '', !copilotSessionModel?.model.endsWith('/thinking'), untrack(() => this.contextManager.getSelectedContext()));
         }
+        else if (this.mode === AIMode.FLOW && this.flowOptions) {
+            this.contextManager.updateAvailableContextForFlow(this.flowOptions, dbSchemas, workspaceStore ?? '', !copilotSessionModel?.model.endsWith('/thinking'), untrack(() => this.contextManager.getSelectedContext()));
+        }
+        if (this.scriptEditorOptions) {
+            this.contextManager.setScriptOptions(this.scriptEditorOptions);
+        }
     };
     listenForDbSchemasChanges = (dbSchemas) => {
         this.displayMessages = ContextManager.updateDisplayMessages(untrack(() => this.displayMessages), dbSchemas);
@@ -792,6 +803,7 @@ class AIChatManager {
         else {
             this.scriptEditorOptions = undefined;
         }
+        untrack(() => this.contextManager?.setSelectedModuleContext(selectedId, untrack(() => this.contextManager.getAvailableContext())));
         return () => {
             this.scriptEditorOptions = undefined;
         };

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

@@ -1,39 +1,130 @@
-<script lang="ts">import { ContextIconMap } from './context';
-const { availableContext, selectedContext, onSelect, showAllAvailable = false, stringSearch = '', selectedIndex = 0 } = $props();
-// Define priority map for context types
-const typePriority = {
-    code: 1,
-    diff: 2,
-    default: 3
-};
-const actualAvailableContext = $derived(availableContext
-    .filter((c) => (showAllAvailable ||
-    !selectedContext.some((sc) => sc.type === c.type && sc.title === c.title)) &&
-    (!stringSearch || c.title.toLowerCase().includes(stringSearch.toLowerCase())))
-    .sort((a, b) => {
-    const priorityA = typePriority[a.type] || typePriority.default;
-    const priorityB = typePriority[b.type] || typePriority.default;
-    return priorityA - priorityB;
+<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();
+// Current view state: 'categories' or specific category type
+let currentView = $state('categories');
+// 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 }
+];
+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 = {
+        diffs: [],
+        modules: [],
+        databases: [],
+        code: []
+    };
+    filteredAvailableContext.forEach((context) => {
+        if (context.type === 'diff')
+            grouped.diffs.push(context);
+        else if (context.type === 'flow_module')
+            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] : []);
+function handleCategoryClick(categoryId) {
+    currentView = categoryId;
+}
+function handleBackClick() {
+    currentView = 'categories';
+}
 </script>
 
-<div class="flex flex-col gap-1 text-tertiary text-xs p-1 min-w-24 max-h-48 overflow-y-scroll">
-	{#if actualAvailableContext.length === 0}
-		<div class="text-center text-tertiary text-xs">No available context</div>
+<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}
-		{#each actualAvailableContext as element, i}
+		{#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 {i ===
+				class="hover:bg-surface-hover rounded-md p-1 text-left flex flex-row gap-1 items-center font-normal transition-colors {i ===
 				selectedIndex
 					? 'bg-surface-hover'
 					: ''}"
-				onclick={() => onSelect(element)}
+				onclick={() => {
+					onSelect(element)
+				}}
 			>
-				{#if Icon}
+				{#if element.type === 'flow_module'}
+					<FlowModuleIcon module={element as FlowModule} size={16} />
+				{:else if Icon}
 					<Icon size={16} />
 				{/if}
-				{element.type === 'diff' ? element.title.replace(/_/g, ' ') : element.title}
+				<span class="truncate">
+					{element.type === 'diff' || element.type === 'flow_module'
+						? element.title.replace(/_/g, ' ')
+						: element.title}
+				</span>
 			</button>
 		{/each}
 	{/if}

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

@@ -6,6 +6,7 @@ interface Props {
     showAllAvailable?: boolean;
     stringSearch?: string;
     selectedIndex?: number;
+    categorize?: boolean;
 }
 declare const AvailableContextList: import("svelte").Component<Props, {}, "">;
 type AvailableContextList = ReturnType<typeof AvailableContextList>;