Merge pull request #6 from Iheuzio/dev

Release v1

README.md

@@ -8,7 +8,7 @@ You simply right click each file you want to pass through, check or uncheck the
 
 # Installation
 
-Not done yet
+Add your api key to `OPENAI_API_KEY` for your windows/linux environment variable (tested with system variable)
 
 # Features
 
@@ -18,7 +18,7 @@ Submit -> Submits the query to the api
 
 Refresh -> refreshes the window so that all new files will be available for that session.
 
-User must ctrl+p and click on the `Open GPT Context Window` option and then add files (before or after), then input the question. 
+User must ctrl+shift+p and click on the `Open GPT Context Panel` option and then add files (before or after), then input the question. 
 
 # Examples
 
@@ -38,7 +38,6 @@ Selected Files:
 
 Expected Ouput:
 
-```
+`
 The window.alert() method is a built-in JavaScript function that displays an alert box with a specified message and an OK button. In this case, the message is "Hello World!".
-```
+`
-

extension.js

@@ -1,11 +1,23 @@
 const vscode = require('vscode');
-const path = require('path');
+const { Configuration, OpenAIApi } = require("openai");
+
+// move these into the script so that instead of echoing the question and the contents,
+// it will echo the question, followed by the answer from the response when the submit button is pressed.
+const configuration = new Configuration({
+    apiKey: process.env.OPENAI_API_KEY,
+});
+
+const openai = new OpenAIApi(configuration);
 
 // Represents a file item in the file explorer
 class FileItem {
-    constructor(uri, checked) {
+    constructor(uri, selected = false) {
         this.uri = uri;
-        this.checked = checked || false;
+        this.selected = selected;
+    }
+
+    toggleSelected() {
+        this.selected = !this.selected;
     }
 }
 
@@ -17,7 +29,6 @@ class FileDataProvider {
     constructor() {
         this._onDidChangeTreeData = new vscode.EventEmitter();
         this.onDidChangeTreeData = this._onDidChangeTreeData.event;
-        this.filterPatterns = ['*.*']; // Default filter pattern
     }
 
     refresh() {
@@ -27,8 +38,7 @@ class FileDataProvider {
     getTreeItem(element) {
         return {
             label: element.uri.fsPath,
-            collapsibleState: vscode.TreeItemCollapsibleState.None,
+            collapsibleState: vscode.TreeItemCollapsibleState.None
-            checked: element.checked
         };
     }
 
@@ -36,57 +46,31 @@ class FileDataProvider {
         if (element) {
             return [];
         }
-        return selectedFiles;
-    }
 
-    setFilter(filter) {
+        // Return only the selected files
-        this.filterPatterns = filter.split(',').map(pattern => pattern.trim());
+        return selectedFiles.filter(file => file.selected);
-        this.refresh();
-    }
-
-    filterFiles(files) {
-        return files.filter(file => {
-            const extension = path.extname(file.uri.fsPath);
-            return this.filterPatterns.some(pattern => {
-                const regex = new RegExp(pattern.replace(/\./g, '\\.').replace(/\*/g, '.*'));
-                return regex.test(extension);
-            });
-        });
     }
 }
 
 // Command for adding files to gpt-contextfiles
 const addFilesCommand = vscode.commands.registerCommand('extension.addFilesToGPTContext', () => {
-  const workspaceFolders = vscode.workspace.workspaceFolders;
+    const editor = vscode.window.activeTextEditor;
-  if (workspaceFolders && workspaceFolders.length > 0) {
+    if (editor) {
-      const workspacePath = workspaceFolders[0].uri.fsPath;
+        const uri = editor.document.uri;
-      vscode.workspace.findFiles('**/*', '', 1000).then(files => {
+        const existingFileIndex = selectedFiles.findIndex(file => file.uri.fsPath === uri.fsPath);
-          const fileItems = files.map(file => new FileItem(file));
+
-          selectedFiles.splice(0, selectedFiles.length, ...fileItems);
+        if (existingFileIndex !== -1) {
-          fileDataProvider.refresh();
+            // File already exists, remove it from the list
-      });
+            selectedFiles.splice(existingFileIndex, 1);
-  }
+        } else {
+            // Add the file to the list with selected state
+            selectedFiles.push(new FileItem(uri, true));
+        }
+
+        fileDataProvider.refresh();
+    }
 });
 
-// Refresh the file list when workspace changes (file creation, deletion, renaming)
-vscode.workspace.onDidChangeWorkspaceFolders(() => {
-  vscode.commands.executeCommand('extension.addFilesToGPTContext');
-});
-
-vscode.workspace.onDidCreateFiles(() => {
-  vscode.commands.executeCommand('extension.addFilesToGPTContext');
-});
-
-vscode.workspace.onDidDeleteFiles(() => {
-  vscode.commands.executeCommand('extension.addFilesToGPTContext');
-});
-
-vscode.workspace.onDidRenameFiles(() => {
-  vscode.commands.executeCommand('extension.addFilesToGPTContext');
-});
-
-
-
 const fileDataProvider = new FileDataProvider();
 
 // Command for displaying the webview panel
@@ -102,133 +86,180 @@ const openGPTContextPanelCommand = vscode.commands.registerCommand('extension.op
 
     panel.webview.html = getWebviewContent();
 
-    panel.webview.onDidReceiveMessage(message => {
+    panel.webview.onDidReceiveMessage(async message => {
         if (message.command === 'submitQuestion') {
             const question = message.text;
-            const selectedFilePaths = selectedFiles
+            const selectedUris = message.selectedUris;
-                .filter(file => file.checked)
-                .map(file => file.uri.fsPath);
 
-            const fileContents = selectedFilePaths
+            // Update the selectedFiles array based on the selectedUris
-                .map(filePath => {
+            selectedFiles.forEach(file => {
-                    const document = vscode.workspace.textDocuments.find(doc => doc.uri.fsPath === filePath);
+                file.selected = selectedUris.includes(file.uri.fsPath);
+            });
+
+            fileDataProvider.refresh();
+
+            const fileContents = selectedFiles
+                .filter(file => file.selected)
+                .map(file => {
+                    const document = vscode.workspace.textDocuments.find(doc => doc.uri.fsPath === file.uri.fsPath);
                     if (document) {
                         const lines = document.getText().split('\n');
-                        return `${filePath}\n${lines.join('\n')}`;
+                        const formattedLines = lines.map(line => `\t${line}`).join('\n');
+                        return `${file.uri.fsPath}:\n\`\`\`\n${formattedLines}\n\`\`\``;
                     }
                     return '';
                 })
                 .join('\n\n');
 
-            panel.webview.html = getWebviewContent(fileContents, question);
+            // Call OpenAI API with the question and file contents
-        } else if (message.command === 'fileSelectionChanged') {
+            try {
-            const { filePath, checked } = message;
+                const chatCompletion = await openai.createChatCompletion({
-            const file = selectedFiles.find(file => file.uri.fsPath === filePath);
+                    model: "gpt-3.5-turbo",
-            if (file) {
+                    messages: [
-                file.checked = checked;
+                        { role: "system", content: "Answer the coding questions, only provide the code and documentation, explaining the solution after providing the code." },
+                        { role: "user", content: question },
+                        { role: "assistant", content: fileContents }
+                    ],
+                });
+
+                // Extract the answer from the OpenAI response
+                const answer = chatCompletion.data.choices[0].message.content;
+
+                // Update the webview content to display only the OpenAI response
+                panel.webview.html = getWebviewContent(answer, question);
+            } catch (error) {
+                // Handle any errors from the OpenAI API
+                console.error("Failed to get OpenAI response:", error);
+                panel.webview.html = getWebviewContent(`Failed to get response from OpenAI API. Error: ${error.message}`, question);
             }
-        } else if (message.command === 'filterFiles') {
+        } else if (message.command === 'toggleFileSelection') {
-            const { filter } = message;
+            const uri = message.uri;
-            fileDataProvider.setFilter(filter);
+            const file = selectedFiles.find(file => file.uri.fsPath === uri);
+            if (file) {
+                file.toggleSelected();
+                fileDataProvider.refresh();
+            }
+        } else if (message.command === 'clearSelectedFiles') {
+            const clearedFiles = selectedFiles.filter(file => file.selected === false);
+            selectedFiles.length = 0; // Clear the array
+            clearedFiles.forEach(file => {
+                fileDataProvider.refresh();
+            });
+            panel.webview.html = getWebviewContent();
+        } else if (message.command === 'refreshFiles') {
+            fileDataProvider.refresh();
+            panel.webview.html = getWebviewContent();
         }
     });
 });
 
+
+// Command for refreshing the selected files
+const refreshSelectedFilesCommand = vscode.commands.registerCommand('extension.refreshSelectedFiles', () => {
+    fileDataProvider.refresh();
+});
+
+// Command for clearing the selected files
+const clearSelectedFilesCommand = vscode.commands.registerCommand('extension.clearSelectedFiles', () => {
+    selectedFiles.forEach(file => {
+        file.selected = false;
+    });
+    fileDataProvider.refresh();
+});
+
+// Command for refreshing all files
+const refreshFilesCommand = vscode.commands.registerCommand('extension.refreshFiles', () => {
+    fileDataProvider.refresh();
+});
+
 // Helper function to generate the HTML content for the webview panel
-function getWebviewContent(fileContents, question) {
+function getWebviewContent(apiResponse = '', question = '') {
-    const fileItems = fileDataProvider
+    const fileList = selectedFiles
-        .filterFiles(selectedFiles)
+        .map(
-        .map(file => `
+            file =>
-            <div>
+                `<div><input type="checkbox" data-uri="${file.uri.fsPath}" ${
-                <input type="checkbox" id="${file.uri.fsPath}" name="file" value="${file.uri.fsPath}" ${file.checked ? 'checked' : ''}>
+                    file.selected ? 'checked' : ''
-                <label for="${file.uri.fsPath}">${file.uri.fsPath}</label>
+                } onchange="toggleFileSelection('${file.uri.fsPath}')" /> ${file.uri.fsPath}</div>`
-            </div>
+        )
-        `)
+        .join('');
-        .join('\n');
 
     return `
-        <html>
+      <html>
-        <body>
+      <body>
-            <h1>GPT Context</h1>
+          <h1>GPT Context</h1>
-            <form id="questionForm">
+          <form id="questionForm">
-                <label for="question">Enter your question:</label>
+              <div>
-                <input type="text" id="question" name="question" required>
+                  <label for="question">Enter your question:</label>
-                <button type="submit">Submit</button>
+                  <input type="text" id="question" name="question" required>
-            </form>
+                  <button type="submit">Submit</button>
-            <div>
+                  <button type="button" onclick="clearSelectedFiles()">Clear</button>
-                <h3>Select Files:</h3>
+                  <button type="button" onclick="refreshSelectedFiles()">Refresh</button>
-                <div>
+              </div>
-                    <label for="filter">Filter:</label>
+              <div>
-                    <input type="text" id="filter" name="filter" value="${fileDataProvider.filterPatterns.join(', ')}">
+                <div><pre>${question ? question : ''}</pre></div>
-                    <button id="applyFilter">Apply</button>
+                ${
-                </div>
+                    apiResponse ? `<div><pre>${apiResponse}</pre></div>` : ''
-                ${fileItems}
+                }
-            </div>
+              </div>
-            ${
+              <div>
-                fileContents ? `<div><pre>${fileContents}</pre></div>` : ''
+                  <h2>Selected Files:</h2>
-            }
+                  ${fileList}
-            <div><pre>${question ? question : ''}</pre></div>
+              </div>
-            <script>
+              <script>
-                const vscode = acquireVsCodeApi();
+                  const vscode = acquireVsCodeApi();
 
-                const form = document.getElementById('questionForm');
+                  function toggleFileSelection(uri) {
-                form.addEventListener('submit', event => {
+                      vscode.postMessage({
-                    event.preventDefault();
+                          command: 'toggleFileSelection',
-                    const question = document.getElementById('question').value;
+                          uri: uri
-                    vscode.postMessage({
+                      });
-                        command: 'submitQuestion',
+                  }
-                        text: question
-                    });
-                });
 
-                const fileCheckboxes = document.querySelectorAll('input[name="file"]');
+                  function clearSelectedFiles() {
-                fileCheckboxes.forEach(checkbox => {
+                      vscode.postMessage({
-                    checkbox.addEventListener('change', event => {
+                          command: 'clearSelectedFiles'
-                        const filePath = event.target.value;
+                      });
-                        const checked = event.target.checked;
+                  }
-                        vscode.postMessage({
-                            command: 'fileSelectionChanged',
-                            filePath: filePath,
-                            checked: checked
-                        });
-                    });
-                });
 
-                const applyFilterButton = document.getElementById('applyFilter');
+                  function refreshSelectedFiles() {
-                applyFilterButton.addEventListener('click', () => {
+                      vscode.postMessage({
-                    const filterInput = document.getElementById('filter');
+                          command: 'refreshFiles'
-                    const filterValue = filterInput.value;
+                      });
-                    vscode.postMessage({
+                  }
-                        command: 'filterFiles',
+
-                        filter: filterValue
+                  const form = document.getElementById('questionForm');
-                    });
+                  form.addEventListener('submit', event => {
-                });
+                      event.preventDefault();
-            </script>
+                      const question = document.getElementById('question').value;
-        </body>
+                      const checkboxes = document.querySelectorAll('input[type="checkbox"]');
-        </html>
+                      const selectedUris = [];
-    `;
+                      checkboxes.forEach(checkbox => {
+                          if (checkbox.checked) {
+                              const uri = checkbox.getAttribute('data-uri');
+                              selectedUris.push(uri);
+                          }
+                      });
+                      vscode.postMessage({
+                          command: 'submitQuestion',
+                          text: question,
+                          selectedUris: selectedUris
+                      });
+                  });
+              </script>
+          </body>
+          </html>
+      `;
 }
 
+
 // Activates the extension
 function activate(context) {
-    // Register the file data provider
-    vscode.window.registerTreeDataProvider('gpt-contextfiles', fileDataProvider);
-
-    // Register the commands
     context.subscriptions.push(addFilesCommand);
     context.subscriptions.push(openGPTContextPanelCommand);
-
+    context.subscriptions.push(refreshSelectedFilesCommand);
-    // Refresh the file data provider when a file is added or removed from the workspace
+    context.subscriptions.push(clearSelectedFilesCommand);
-    vscode.workspace.onDidChangeWorkspaceFolders(() => {
+    context.subscriptions.push(refreshFilesCommand);
-        fileDataProvider.refresh();
+    vscode.window.registerTreeDataProvider('selectedFiles', fileDataProvider);
-    });
-
-    // Refresh the file data provider when a file is created, deleted, or renamed within the workspace
-    vscode.workspace.onDidChangeTextDocument(() => {
-        fileDataProvider.refresh();
-    });
 }
 
-module.exports = {
+exports.activate = activate;
-    activate
-};

package-lock.json

@@ -7,6 +7,9 @@
     "": {
       "name": "gpt-contextfiles",
       "version": "0.0.1",
+      "dependencies": {
+        "openai": "^3.3.0"
+      },
       "devDependencies": {
         "@types/glob": "^8.1.0",
         "@types/mocha": "^10.0.1",
@@ -305,6 +308,19 @@
       "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
       "dev": true
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
+    "node_modules/axios": {
+      "version": "0.26.1",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.26.1.tgz",
+      "integrity": "sha512-fPwcX4EvnSHuInCMItEhAGnaSEXRBjtzh9fOtsE6E1G6p7vl7edEeZe11QHf18+6+9gR5PbKV/sGKNaD8YaMeA==",
+      "dependencies": {
+        "follow-redirects": "^1.14.8"
+      }
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -453,6 +469,17 @@
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
       "dev": true
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -514,6 +541,14 @@
       "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
       "dev": true
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/diff": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/diff/-/diff-5.0.0.tgz",
@@ -800,6 +835,38 @@
       "integrity": "sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==",
       "dev": true
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.2",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
+      "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -1203,6 +1270,25 @@
         "node": ">=10"
       }
     },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -1371,6 +1457,15 @@
         "wrappy": "1"
       }
     },
+    "node_modules/openai": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/openai/-/openai-3.3.0.tgz",
+      "integrity": "sha512-uqxI/Au+aPRnsaQRe8CojU0eCR7I0mBiKjD3sNMzY6DaC1ZVrc85u98mtJW6voDug8fgGN+DIZmTDxTthxb7dQ==",
+      "dependencies": {
+        "axios": "^0.26.0",
+        "form-data": "^4.0.0"
+      }
+    },
     "node_modules/optionator": {
       "version": "0.9.1",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz",

package.json

@@ -16,24 +16,32 @@
   "main": "./extension.js",
   "contributes": {
     "commands": [
-        {
+      {
-            "command": "extension.addFilesToGPTContext",
+        "command": "extension.addFilesToGPTContext",
-            "title": "Add Files to GPT Context",
+        "title": "Add Files to GPT Context",
-            "category": "Explorer"
+        "category": "Explorer"
-        },
+      },
-        {
+      {
-            "command": "extension.openGPTContextPanel",
+        "command": "extension.openGPTContextPanel",
-            "title": "Open GPT Context Panel"
+        "title": "Open GPT Context Panel"
-        }
+      },
+      {
+        "command": "extension.refreshSelectedFiles",
+        "title": "Refresh Selected Files"
+      },
+      {
+        "command": "extension.clearSelectedFiles",
+        "title": "Clear Selected Files"
+      }
     ],
     "menus": {
-        "explorer/context": [
+      "explorer/context": [
-            {
+        {
-                "when": "resourceLangId == javascript",
+          "when": "resourceLangId == javascript",
-                "command": "extension.addFilesToGPTContext",
+          "command": "extension.addFilesToGPTContext",
-                "group": "navigation"
+          "group": "navigation"
-            }
+        }
-        ]
+      ]
     }
   },
   "scripts": {
@@ -42,15 +50,17 @@
     "test": "node ./test/runTest.js"
   },
   "devDependencies": {
-    "@types/vscode": "^1.79.0",
     "@types/glob": "^8.1.0",
     "@types/mocha": "^10.0.1",
     "@types/node": "20.2.5",
+    "@types/vscode": "^1.79.0",
+    "@vscode/test-electron": "^2.3.2",
     "eslint": "^8.41.0",
     "glob": "^8.1.0",
     "mocha": "^10.2.0",
-    "typescript": "^5.1.3",
+    "typescript": "^5.1.3"
-    "@vscode/test-electron": "^2.3.2"
+  },
+  "dependencies": {
+    "openai": "^3.3.0"
   }
-  
 }