feature(sidebar): Renders webpanel on the side

extension.js

@@ -260,6 +260,84 @@ function activate(context) {
     context.subscriptions.push(clearSelectedFilesCommand);
     context.subscriptions.push(refreshFilesCommand);
     vscode.window.registerTreeDataProvider('selectedFiles', fileDataProvider);
+
+    const provider = {
+        resolveWebviewView(webviewView) {
+            webviewView.webview.options = {
+                enableScripts: true
+            };
+            webviewView.webview.html = getWebviewContent();
+            webviewView.webview.onDidReceiveMessage(async message => {
+                if (message.command === 'submitQuestion') {
+                    const question = message.text;
+                    const selectedUris = message.selectedUris;
+        
+                    // Update the selectedFiles array based on the selectedUris
+                    selectedFiles.forEach(file => {
+                        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');
+                                const formattedLines = lines.map(line => `\t${line}`).join('\n');
+                                return `${file.uri.fsPath}:\n\`\`\`\n${formattedLines}\n\`\`\``;
+                            }
+                            return '';
+                        })
+                        .join('\n\n');
+        
+                    // Call OpenAI API with the question and file contents
+                    try {
+                        const chatCompletion = await openai.createChatCompletion({
+                            model: "gpt-3.5-turbo-16k",
+                            messages: [
+                                { 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
+                        webviewView.webview.html = getWebviewContent(answer, question);
+                    } catch (error) {
+                        // Handle any errors from the OpenAI API
+                        console.error("Failed to get OpenAI response:", error);
+                        webviewView.webview.html = getWebviewContent(`Failed to get response from OpenAI API. Error: ${error.message}`, question);
+                    }
+                } else if (message.command === 'toggleFileSelection') {
+                    const uri = message.uri;
+                    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();
+                    });
+                    webviewView.webview.html = getWebviewContent();
+                } else if (message.command === 'refreshFiles') {
+                    fileDataProvider.refresh();
+                    webviewView.webview.html = getWebviewContent();
+                }
+            });
+        }
+    };
+    
+    context.subscriptions.push(vscode.window.registerWebviewViewProvider('gpt-context-sidebar', provider));
+    
 }
 
+
 exports.activate = activate;

images/files.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M2 11h1V6.99H2V11zm1-5.01V5.5l.5-.5h4.43l.43.25.43.75h5.71l.5.5v8l-.5.5h-11l-.5-.5V12H1.5l-.5-.5v-9l.5-.5h4.42l.44.25.43.75h5.71l.5.5V6l-1-.03V4H6.5l-.43-.25L5.64 3H2v2.99h1zm5.07.76L7.64 6H4v3h3.15l.41-.74L8 8h6V7H8.5l-.43-.25zM7.45 10H4v4h10V9H8.3l-.41.74-.44.26z"/></svg>

package.json

@@ -31,7 +31,8 @@
   ],
   "activationEvents": [
     "onCommand:extension.addFilesToGPTContext",
-    "onCommand:extension.openGPTContextPanel"
+    "onCommand:extension.openGPTContextPanel",
+    "onCommand:extension.gpt-context-sidebar"
   ],
   "main": "./extension.js",
   "contributes": {
@@ -54,6 +55,15 @@
         "title": "Clear Selected Files"
       }
     ],
+    "viewsContainers" : {
+      "activitybar": [
+        {
+          "id": "gpt-contextfiles-sidebar-view",
+          "title": "GPT Context",
+          "icon": "images/files.svg"
+        }
+      ]
+    },
     "menus": {
       "explorer/context": [
         {
@@ -70,8 +80,17 @@
           "name": "Selected Files",
           "when": "explorerResourceIsFolder && explorerViewletVisible"
         }
+      ],
+      "gpt-contextfiles-sidebar-view": [
+          {
+              "type": "webview",
+              "id": "gpt-context-sidebar",
+              "name": "GPTContextFiles",
+              "icon": "images/files.svg",
+              "contextualTitle": "GPTContext"
+          }
       ]
-    }
+  }
   },
   "scripts": {
     "lint": "eslint .",