Merge pull request #15 from Iheuzio/feature/sidebar

feature(sidebar): Renders webpanel on the side

extension.js

@@ -73,6 +73,51 @@ const addFilesCommand = vscode.commands.registerCommand('extension.addFilesToGPT
 
 const fileDataProvider = new FileDataProvider();
 
+// Function to handle question submission
+async function handleQuestionSubmission(panel, question, 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
+        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);
+    }
+}
+
 // Command for displaying the webview panel
 const openGPTContextPanelCommand = vscode.commands.registerCommand('extension.openGPTContextPanel', () => {
     const panel = vscode.window.createWebviewPanel(
@@ -88,50 +133,7 @@ const openGPTContextPanelCommand = vscode.commands.registerCommand('extension.op
 
     panel.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
-                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);
-            }
+            await handleQuestionSubmission(panel, message.text, message.selectedUris);
         } else if (message.command === 'toggleFileSelection') {
             const uri = message.uri;
             const file = selectedFiles.find(file => file.uri.fsPath === uri);
@@ -260,6 +262,41 @@ 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 === '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();
+            } else if (message.command === 'submitQuestion') {
+                await handleQuestionSubmission(webviewView, message.text, message.selectedUris);
+            }
+        });
+    }
+};
+
+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 .",