windmill-components 1.531.1 → 1.537.1

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

@@ -1,40 +1,257 @@
-<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, 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 }
+];
+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: []
+    };
+    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);
+    });
+    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 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>
-	{:else}
-		{#each actualAvailableContext as element, i}
+<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 {i ===
-				selectedIndex
+				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)}
+				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 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,9 +3,10 @@ interface Props {
     availableContext: ContextElement[];
     selectedContext: ContextElement[];
     onSelect: (element: ContextElement) => void;
+    setShowing?: (showing: boolean) => void;
     showAllAvailable?: boolean;
     stringSearch?: string;
-    selectedIndex?: number;
+    onViewChange?: (newNumber: number) => void;
 }
 declare const AvailableContextList: import("svelte").Component<Props, {}, "">;
 type AvailableContextList = ReturnType<typeof AvailableContextList>;

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

@@ -6,32 +6,34 @@ import { json } from 'svelte-highlight/languages';
 import { twMerge } from 'tailwind-merge';
 import { formatGraphqlSchema, formatSchema } from '../../apps/components/display/dbtable/utils';
 import ObjectViewer from '../../propertyPicker/ObjectViewer.svelte';
-import { createEventDispatcher } from 'svelte';
 import HighlightCode from '../../HighlightCode.svelte';
-export let contextElement;
-export let deletable = false;
+import FlowModuleIcon from '../../flows/FlowModuleIcon.svelte';
+let { contextElement, deletable = false, onDelete } = $props();
 const icon = ContextIconMap[contextElement.type];
-let showDelete = false;
-const dispatch = createEventDispatcher();
+let showDelete = $state(false);
+const isDeletable = $derived(deletable && contextElement.deletable !== false);
 </script>
 
 <Popover>
-	<svelte:fragment slot="trigger">
+	{#snippet trigger()}
 		<div
 			class={twMerge(
 				'border rounded-md px-1 py-0.5 flex flex-row items-center gap-1 text-tertiary text-xs cursor-default hover:bg-surface-hover hover:cursor-pointer max-w-48 bg-surface'
 			)}
-			on:mouseenter={() => (showDelete = true)}
-			on:mouseleave={() => (showDelete = false)}
+			onmouseenter={() => (showDelete = true)}
+			onmouseleave={() => (showDelete = false)}
 			aria-label="Context element"
 			role="button"
 			tabindex={0}
 		>
-			<button on:click={() => dispatch('delete')} class:cursor-default={!deletable}>
-				{#if showDelete && deletable}
+			<button onclick={isDeletable ? onDelete : undefined} class:cursor-default={!isDeletable}>
+				{#if showDelete && isDeletable}
 					<X size={16} />
+				{:else if contextElement.type === 'flow_module' || contextElement.type === 'flow_module_code_piece'}
+					<FlowModuleIcon module={contextElement as FlowModule} size={16} />
 				{:else}
-					<svelte:component this={icon} size={16} />
+					{@const SvelteComponent = icon}
+					<SvelteComponent size={16} />
 				{/if}
 			</button>
 			<span class="truncate">
@@ -40,8 +42,8 @@ const dispatch = createEventDispatcher();
 					: contextElement.title}
 			</span>
 		</div>
-	</svelte:fragment>
-	<svelte:fragment slot="content">
+	{/snippet}
+	{#snippet content()}
 		{#if contextElement.type === 'error'}
 			<div class="max-w-96 max-h-[300px] text-xs overflow-auto">
 				<Highlight language={json} code={contextElement.content} class="w-full p-2" />
@@ -63,7 +65,7 @@ const dispatch = createEventDispatcher();
 					<div class="text-tertiary">Not loaded yet</div>
 				{/if}
 			</div>
-		{:else if contextElement.type === 'code' || contextElement.type === 'code_piece' || contextElement.type === 'diff'}
+		{:else if contextElement.type === 'code' || contextElement.type === 'code_piece' || contextElement.type === 'diff' || contextElement.type === 'flow_module_code_piece'}
 			<div class="max-w-96 max-h-[300px] text-xs overflow-auto">
 				<HighlightCode
 					language={contextElement.lang}
@@ -71,6 +73,20 @@ const dispatch = createEventDispatcher();
 					class="w-full p-2 "
 				/>
 			</div>
+		{:else if contextElement.type === 'flow_module'}
+			{#if contextElement.value.content}
+				<div class="p-2 max-w-96 max-h-[300px] text-xs overflow-auto">
+					<HighlightCode
+						language={contextElement.value.language}
+						code={contextElement.value.content}
+						class="w-full p-2 "
+					/>
+				</div>
+			{:else}
+				<div class="p-2 max-w-96 max-h-[300px] text-xs overflow-auto">
+					<div class="text-tertiary">{contextElement.title}</div>
+				</div>
+			{/if}
 		{/if}
-	</svelte:fragment>
+	{/snippet}
 </Popover>

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

@@ -1,24 +1,9 @@
 import { type ContextElement } from './context';
-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 ContextElementBadge: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     contextElement: ContextElement;
     deletable?: boolean;
-}, {
-    delete: CustomEvent<void>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type ContextElementBadge = InstanceType<typeof ContextElementBadge>;
+    onDelete?: () => void;
+}
+declare const ContextElementBadge: import("svelte").Component<Props, {}, "">;
+type ContextElementBadge = ReturnType<typeof ContextElementBadge>;
 export default ContextElementBadge;

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

@@ -1,7 +1,9 @@
-import { type ScriptLang } from '../../../gen';
+import { type Flow, type ScriptLang } from '../../../gen';
 import { type DBSchemas } from '../../../stores';
 import type { ContextElement } from './context';
+import type { FlowModule } from '../../../gen';
 import type { DisplayMessage } from './shared';
+import type { ExtendedOpenFlow } from '../../flows/types';
 export interface ScriptOptions {
     lang: ScriptLang | 'bunnative';
     code: string;
@@ -12,6 +14,13 @@ export interface ScriptOptions {
     lastDeployedCode?: string;
     diffMode: boolean;
 }
+export interface FlowOptions {
+    currentFlow: ExtendedOpenFlow;
+    lastDeployedFlow?: Flow;
+    path: string | undefined;
+    modules: FlowModule[];
+    lastSavedFlow?: Flow;
+}
 export default class ContextManager {
     private selectedContext;
     private availableContext;
@@ -21,11 +30,13 @@ export default class ContextManager {
     private refreshDbResources;
     private getSelectedDBSchema;
     private getContextCodePath;
+    updateAvailableContextForFlow(flowOptions: FlowOptions, dbSchemas: DBSchemas, workspace: string, toolSupport: boolean, currentlySelectedContext: ContextElement[]): Promise<void>;
     updateAvailableContext(scriptOptions: ScriptOptions, dbSchemas: DBSchemas, workspace: string, toolSupport: boolean, currentlySelectedContext: ContextElement[]): Promise<void>;
     getSelectedContext(): ContextElement[];
     setSelectedContext(newSelectedContext: ContextElement[]): void;
     getAvailableContext(): ContextElement[];
-    addSelectedLinesToContext(lines: string, startLine: number, endLine: number): void;
+    setScriptOptions(scriptOptions: ScriptOptions): void;
+    addSelectedLinesToContext(lines: string, startLine: number, endLine: number, moduleId?: string): void;
     setFixContext(): void;
     setAskAiContext(options: {
         withCode?: boolean;
@@ -36,4 +47,6 @@ export default class ContextManager {
         addBackCode?: boolean;
     }): void;
     static updateDisplayMessages(displayMessages: DisplayMessage[], dbSchemas: DBSchemas): DisplayMessage[];
+    setSelectedModuleContext(moduleId: string | undefined, availableContext: ContextElement[] | undefined): void;
+    clearContext(): void;
 }

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

@@ -33,14 +33,82 @@ export default class ContextManager {
             '.' +
             langToExt(scriptLangToEditorLang(scriptOptions.lang)));
     }
+    async updateAvailableContextForFlow(flowOptions, dbSchemas, workspace, toolSupport, currentlySelectedContext) {
+        try {
+            if (this.workspace !== workspace) {
+                await this.refreshDbResources(workspace);
+                this.workspace = workspace;
+            }
+            let newAvailableContext = [];
+            // Add diff context if we have a deployed flow version
+            const deployedFlowString = JSON.stringify(flowOptions.lastDeployedFlow, null, 2);
+            const savedFlowString = JSON.stringify(flowOptions.lastSavedFlow, null, 2);
+            const currentFlowString = JSON.stringify(flowOptions.currentFlow, null, 2);
+            if (currentFlowString && deployedFlowString && deployedFlowString !== currentFlowString) {
+                newAvailableContext.push({
+                    type: 'diff',
+                    title: 'diff_with_last_deployed_version',
+                    content: deployedFlowString,
+                    diff: diffLines(deployedFlowString, currentFlowString),
+                    lang: 'graphql' // irrelevant, but needed for the diff component
+                });
+            }
+            if (currentFlowString && savedFlowString && savedFlowString !== currentFlowString) {
+                newAvailableContext.push({
+                    type: 'diff',
+                    title: 'diff_with_last_saved_draft',
+                    content: savedFlowString,
+                    diff: diffLines(savedFlowString, currentFlowString),
+                    lang: 'graphql' // irrelevant, but needed for the diff component
+                });
+            }
+            for (const module of flowOptions.modules) {
+                newAvailableContext.push({
+                    type: 'flow_module',
+                    id: module.id,
+                    title: `${module.id}`,
+                    value: {
+                        language: 'language' in module.value ? module.value.language : 'bunnative',
+                        path: 'path' in module.value ? module.value.path : '',
+                        content: 'content' in module.value ? module.value.content : '',
+                        type: module.value.type
+                    }
+                });
+            }
+            if (toolSupport) {
+                for (const d of this.dbResources) {
+                    const loadedSchema = dbSchemas[d.path];
+                    newAvailableContext.push({
+                        type: 'db',
+                        title: d.path,
+                        // If the db is already fetched, add the schema to the context
+                        ...(loadedSchema ? { schema: loadedSchema } : {})
+                    });
+                }
+            }
+            let newSelectedContext = [...currentlySelectedContext];
+            // Filter selected context to only include available items
+            newSelectedContext = newSelectedContext
+                .filter((c) => newAvailableContext.some((ac) => ac.type === c.type && ac.title === c.title))
+                .map((c) => c.type === 'db' && dbSchemas[c.title]
+                ? {
+                    ...c,
+                    schema: dbSchemas[c.title]
+                }
+                : c);
+            this.availableContext = newAvailableContext;
+            this.selectedContext = newSelectedContext;
+        }
+        catch (err) {
+            console.error('Could not update available context for flow', err);
+        }
+    }
     async updateAvailableContext(scriptOptions, dbSchemas, workspace, toolSupport, currentlySelectedContext) {
         try {
-            let firstTime = !this.workspace;
             if (this.workspace !== workspace) {
                 await this.refreshDbResources(workspace);
                 this.workspace = workspace;
             }
-            this.scriptOptions = scriptOptions;
             let newAvailableContext = [
                 {
                     type: 'code',
@@ -89,16 +157,15 @@ export default class ContextManager {
                 ];
             }
             let newSelectedContext = [...currentlySelectedContext];
-            if (firstTime) {
-                newSelectedContext = [
-                    {
-                        type: 'code',
-                        title: this.getContextCodePath(scriptOptions) ?? '',
-                        content: scriptOptions.code,
-                        lang: scriptOptions.lang
-                    }
-                ];
-            }
+            newSelectedContext = [
+                {
+                    type: 'code',
+                    title: this.getContextCodePath(scriptOptions) ?? '',
+                    content: scriptOptions.code,
+                    lang: scriptOptions.lang,
+                    deletable: false
+                }
+            ];
             const db = this.getSelectedDBSchema(scriptOptions, dbSchemas);
             if (db &&
                 !newSelectedContext.find((c) => c.type === 'db' && db && c.title === db.resource) &&
@@ -144,22 +211,49 @@ export default class ContextManager {
     getAvailableContext() {
         return this.availableContext;
     }
-    addSelectedLinesToContext(lines, startLine, endLine) {
+    setScriptOptions(scriptOptions) {
+        this.scriptOptions = scriptOptions;
+    }
+    addSelectedLinesToContext(lines, startLine, endLine, moduleId) {
+        const title = moduleId ? `${moduleId} L${startLine}-L${endLine}` : `L${startLine}-L${endLine}`;
         if (!this.scriptOptions ||
-            this.selectedContext.find((c) => c.type === 'code_piece' && c.title === `L${startLine}-L${endLine}`)) {
+            this.selectedContext.find((c) => (c.type === 'code_piece' && c.title === title) ||
+                (c.type === 'flow_module_code_piece' && c.id === moduleId && c.title === title))) {
             return;
         }
-        this.selectedContext = [
-            ...this.selectedContext,
-            {
-                type: 'code_piece',
-                title: `L${startLine}-L${endLine}`,
-                startLine,
-                endLine,
-                content: lines,
-                lang: this.scriptOptions.lang
+        if (moduleId) {
+            const module = [...this.availableContext, ...this.selectedContext].find((c) => c.type === 'flow_module' && c.id === moduleId);
+            if (!module) {
+                console.error('Module not found', moduleId);
+                return;
             }
-        ];
+            this.selectedContext = [
+                ...this.selectedContext,
+                {
+                    type: 'flow_module_code_piece',
+                    id: moduleId,
+                    title: title,
+                    startLine,
+                    endLine,
+                    content: lines,
+                    lang: this.scriptOptions.lang,
+                    value: module.value
+                }
+            ];
+        }
+        else {
+            this.selectedContext = [
+                ...this.selectedContext,
+                {
+                    type: 'code_piece',
+                    title: title,
+                    startLine,
+                    endLine,
+                    content: lines,
+                    lang: this.scriptOptions.lang
+                }
+            ];
+        }
     }
     setFixContext() {
         const codeContext = this.availableContext.find((c) => c.type === 'code');
@@ -217,4 +311,20 @@ export default class ContextManager {
                 : undefined
         }));
     }
+    setSelectedModuleContext(moduleId, availableContext) {
+        if (availableContext && moduleId) {
+            const module = availableContext.find((c) => c.type === 'flow_module' && c.id === moduleId);
+            if (module &&
+                !this.selectedContext.find((c) => c.type === 'flow_module' && c.id === moduleId)) {
+                this.selectedContext = this.selectedContext.filter((c) => c.type !== 'flow_module');
+                this.selectedContext = [module, ...this.selectedContext];
+            }
+        }
+        else if (!moduleId) {
+            this.selectedContext = this.selectedContext.filter((c) => c.type !== 'flow_module');
+        }
+    }
+    clearContext() {
+        this.selectedContext = [];
+    }
 }