Use VS Code native file dialog for AI panel attachments

Author: VellummyilumVinoth

workspaces/ballerina/ballerina-core/src/rpc-types/ai-panel/index.ts

@@ -75,6 +75,8 @@ import {
     SetMcpToolsEnabledRequest,
     McpLoadErrorsDTO,
     AgentsMdFileInfoDTO,
+    SelectContextFilesRequest,
+    Attachment,
 } from "./interfaces";
 
 export interface AIPanelAPI {
@@ -185,4 +187,8 @@ export interface AIPanelAPI {
     getMcpLoadErrors: () => Promise<McpLoadErrorsDTO>;
     getAgentsMdFileInfo: () => Promise<AgentsMdFileInfoDTO>;
     openOrCreateAgentsMd: () => Promise<void>;
+    // ==================================
+    // File Attachment via VS Code Dialog
+    // ==================================
+    selectContextFiles: (params: SelectContextFilesRequest) => Promise<Attachment[]>;
 }

workspaces/ballerina/ballerina-core/src/rpc-types/ai-panel/interfaces.ts

@@ -241,6 +241,11 @@ export interface ExistingFunction {
 // ==================================
 // Attachment-Related Interfaces
 // ==================================
+export interface SelectContextFilesRequest {
+    command: Command | null;
+    skillCommand?: SkillCommand;
+}
+
 export interface Attachment {
     name: string;
     path?: string

workspaces/ballerina/ballerina-core/src/rpc-types/ai-panel/rpc-type.ts

@@ -76,6 +76,8 @@ import {
     AgentsMdFileInfoDTO,
     ParseSkillFileRequest,
     ParseSkillFileResponse,
+    SelectContextFilesRequest,
+    Attachment,
 } from "./interfaces";
 import { RequestType, NotificationType } from "vscode-messenger-common";
 
@@ -162,3 +164,4 @@ export const mcpLoadErrorsChanged: NotificationType<McpLoadErrorsDTO> = { method
 export const getAgentsMdFileInfo: RequestType<void, AgentsMdFileInfoDTO> = { method: `${_preFix}/getAgentsMdFileInfo` };
 export const openOrCreateAgentsMd: RequestType<void, void> = { method: `${_preFix}/openOrCreateAgentsMd` };
 export const agentsMdFileInfoChanged: NotificationType<AgentsMdFileInfoDTO> = { method: `${_preFix}/agentsMdFileInfoChanged` };
+export const selectContextFiles: RequestType<SelectContextFilesRequest, Attachment[]> = { method: `${_preFix}/selectContextFiles` };

workspaces/ballerina/ballerina-extension/src/rpc-managers/ai-panel/rpc-handler.ts

@@ -137,6 +137,8 @@ import {
     OpenMcpConfigRequest,
     getAgentsMdFileInfo,
     openOrCreateAgentsMd,
+    selectContextFiles,
+    SelectContextFilesRequest,
 } from "@wso2/ballerina-core";
 import { workspace } from 'vscode';
 import { Messenger } from "vscode-messenger";
@@ -233,6 +235,7 @@ export function registerAiPanelRpcHandlers(messenger: Messenger) {
     messenger.onRequest(getMcpLoadErrors, () => rpcManger.getMcpLoadErrors());
     messenger.onRequest(getAgentsMdFileInfo, () => rpcManger.getAgentsMdFileInfo());
     messenger.onRequest(openOrCreateAgentsMd, () => rpcManger.openOrCreateAgentsMd());
+    messenger.onRequest(selectContextFiles, (args: SelectContextFilesRequest) => rpcManger.selectContextFiles(args));
 
     // Push updates to the webview whenever the set of running services changes.
     runningServicesManager.onChange = (services) => {

workspaces/ballerina/ballerina-extension/src/rpc-managers/ai-panel/rpc-manager.ts

@@ -24,8 +24,11 @@ import {
     AIPanelPrompt,
     AbortAIGenerationRequest,
     AddFilesToProjectRequest,
+    Attachment,
+    AttachmentStatus,
     CheckpointInfo,
     Command,
+    SkillCommand,
     DocGenerationRequest,
     GenerateAgentCodeRequest,
     GenerateOpenAPIRequest,
@@ -40,6 +43,7 @@ import {
     RestoreCheckpointRequest,
     SemanticDiffRequest,
     SemanticDiffResponse,
+    SelectContextFilesRequest,
     SubmitFeedbackRequest,
     TestGenerationMentions,
     UIChatMessage,
@@ -1273,4 +1277,40 @@ User reverted the last made changes. The files have been restored to the state b
         }
     }
 
+    async selectContextFiles(params: SelectContextFilesRequest): Promise<Attachment[]> {
+        const projectPath = StateMachine.context().projectPath;
+        const defaultUri = projectPath ? vscode.Uri.file(projectPath) : vscode.Uri.file(os.homedir());
+
+        const uris = await vscode.window.showOpenDialog({
+            canSelectMany: true,
+            canSelectFiles: true,
+            canSelectFolders: false,
+            defaultUri,
+            openLabel: "Attach",
+        });
+
+        if (!uris || uris.length === 0) {
+            return [];
+        }
+
+        const MAX_FILE_SIZE = 5 * 1024 * 1024;
+        const isDataMapper = params.skillCommand === SkillCommand.DataMap || params.command === Command.TypeCreator;
+
+        return Promise.all(uris.map(async (uri) => {
+            const filePath = uri.fsPath;
+            const name = path.basename(filePath);
+            try {
+                const stat = await fs.promises.stat(filePath);
+                if (stat.size > MAX_FILE_SIZE) {
+                    return { name, status: AttachmentStatus.FileSizeExceeded };
+                }
+                const content = isDataMapper
+                    ? (await fs.promises.readFile(filePath)).toString("base64")
+                    : await fs.promises.readFile(filePath, "utf-8");
+                return { name, content, status: AttachmentStatus.Success };
+            } catch {
+                return { name, status: AttachmentStatus.UnknownError };
+            }
+        }));
+    }
 }

workspaces/ballerina/ballerina-rpc-client/src/rpc-clients/ai-panel/rpc-client.ts

@@ -155,6 +155,9 @@ import {
     SetMcpToolsEnabledRequest,
     McpLoadErrorsDTO,
     AgentsMdFileInfoDTO,
+    selectContextFiles,
+    SelectContextFilesRequest,
+    Attachment,
 } from "@wso2/ballerina-core";
 import { HOST_EXTENSION } from "vscode-messenger-common";
 import { Messenger } from "vscode-messenger-webview";
@@ -479,4 +482,8 @@ export class AiPanelRpcClient implements AIPanelAPI {
     openOrCreateAgentsMd(): Promise<void> {
         return this._messenger.sendRequest(openOrCreateAgentsMd, HOST_EXTENSION);
     }
+
+    selectContextFiles(params: SelectContextFilesRequest): Promise<Attachment[]> {
+        return this._messenger.sendRequest(selectContextFiles, HOST_EXTENSION, params);
+    }
 }

workspaces/ballerina/ballerina-visualizer/src/views/AIPanel/components/AIChat/index.tsx

@@ -2283,6 +2283,8 @@ const AIChat: React.FC = () => {
                                 multiple: true,
                                 acceptResolver: acceptResolver,
                                 handleAttachmentSelection: handleAttachmentSelection,
+                                onAttachClick: (command, skillCommand) =>
+                                    rpcClient.getAiPanelRpcClient().selectContextFiles({ command, skillCommand }),
                             }}
                             suggestedCommandTemplates={footerSuggestedCommandTemplates}
                             inputPlaceholder={

workspaces/ballerina/ballerina-visualizer/src/views/AIPanel/components/AIChatInput/hooks/useAttachments.ts

@@ -17,12 +17,13 @@
  */
 
 import { useState, useRef, ChangeEvent } from "react";
-import { Attachment, Command, SkillCommand } from "@wso2/ballerina-core";
+import { Attachment, AttachmentStatus, Command, SkillCommand } from "@wso2/ballerina-core";
 
 export interface AttachmentOptions {
     multiple: boolean;
     acceptResolver: (command: Command | null, skillCommand?: SkillCommand) => string;
     handleAttachmentSelection: (e: ChangeEvent<HTMLInputElement>, command: Command | null, skillCommand?: SkillCommand) => Promise<Attachment[]>;
+    onAttachClick?: (command: Command | null, skillCommand?: SkillCommand) => Promise<Attachment[]>;
 }
 
 interface UseAttachmentsProps {
@@ -35,9 +36,30 @@ export function useAttachments({ attachmentOptions, activeCommand, activeSkillCo
     const [attachments, setAttachments] = useState<Attachment[]>([]);
     const fileInputRef = useRef<HTMLInputElement | null>(null);
 
-    // open file input
-    function handleAttachClick() {
-        if (fileInputRef.current) {
+    // open file picker
+    async function handleAttachClick() {
+        if (attachmentOptions.onAttachClick) {
+            try {
+                const results = await attachmentOptions.onAttachClick(activeCommand, activeSkillCommand);
+                setAttachments((prev) => {
+                    const updated = [...prev];
+                    results
+                        .filter((newFile) => newFile.status === AttachmentStatus.Success)
+                        .forEach((newFile) => {
+                            const existingIndex = updated.findIndex(
+                                (existing) => existing.name === newFile.name && existing.content === newFile.content
+                            );
+                            if (existingIndex !== -1) {
+                                updated.splice(existingIndex, 1);
+                            }
+                            updated.push(newFile);
+                        });
+                    return updated;
+                });
+            } catch (error) {
+                console.error("Failed to select context files", error);
+            }
+        } else if (fileInputRef.current) {
             fileInputRef.current.click();
         }
     }