Merge pull request #30 from Iheuzio/dev

Release 0.2.1

README.md

@@ -1,5 +1,7 @@
 # gpt-contextfiles
 
+![gpt-contextfiles viewport](extension.png)
+
 > if you'll like to contribute or provide any feedback check out the [link](https://github.com/Iheuzio/gpt-contextfiles/issues)
 
 This extension uses the openai api, there are many models avaliable:
@@ -28,13 +30,15 @@ Submit -> Submits the query to the api
 
 Refresh -> refreshes the window so that all new files will be available for that session.
 
-Click -> Click the orange code and then paste it in your editor for fast coding
-
 - Right click to add files to the context window
 - Click on the extension addon to open the context window, refresh to update the files to check.
 - Select the files uses checkboxes
 - Wait for response to be returned
 
+Other features:
+![Copy button demonstration](copy-image.png)
+- Click copy to to copy the snippet of code into your file for fast coding
+
 # How it works
 
 We can select two files we want to pass through, however we can uncheck one of them for later debugging and enter our question:

extension.js

@@ -193,7 +193,7 @@ function getWebviewContent(apiResponse = '', question = '') {
                 flex-direction: column;
                 align-items: center;
                 justify-content: center;
-                width: 50%;
+                width: 90%;
                 height: 100%;
                 margin: 0 auto;
                 background-color: #1e1e1e;
@@ -418,17 +418,41 @@ function getWebviewContent(apiResponse = '', question = '') {
             }
     
             #code-block {
-                padding: 0;
-                background: none;
+                padding: 10px 0 10px 10px; 
+                padding-
+                border-radius: 5px;
+                background-color: black;
                 border: none;
                 font: inherit;
                 color: inherit;
                 cursor: pointer;
                 outline: inherit;
-                margin: 0;
                 width: 100%;
                 text-align: left;
+                display: inline-block;
+                position: relative;
             }
+
+            #copy-button {
+                padding: 5px;
+                border-radius: 5px;
+                background-color: #007acc;
+                border: none;
+                font: inherit;
+                color: #fff;
+                cursor: pointer;
+                outline: inherit;
+                margin: 5px;
+                position: absolute;
+                top: 0;
+                right: 0;
+            }
+
+            #copy-button:hover {
+                background-color: #fff;
+                color: #000;
+            }
+
         </style>
     </head>
     
@@ -455,7 +479,7 @@ function getWebviewContent(apiResponse = '', question = '') {
                     apiResponse ? `
                     <div id="rendered">
                         <p id="responses">
-                            <pre id="response">${apiResponse.replace(/```([^```]+)```/g, '<button onclick="copyCode()" id="code-block"><code>$1</code></button>')}</pre>
+                            <pre id="response">${apiResponse.replace(/```([^```]+)```/g, '<div  id="code-block"><code>$1</code><button onclick="copyCode(event)" id="copy-button">copy</button></div>')}</pre>
                         </p>
                     </div>
                     ` : null
@@ -476,20 +500,19 @@ function getWebviewContent(apiResponse = '', question = '') {
                     toggleApiResponse();
                 }
 
-                function copyCode() {
+                function copyCode(event) {
                     event.preventDefault();
-                    const codeBlocks = document.getElementsByTagName('code');
-                    const selectedCodeBlock = event.target.closest('code');
-    
-                    if (selectedCodeBlock) {
-                        const codeText = selectedCodeBlock.innerText;
+                    const codeBlock = event.target.parentNode.querySelector('code');
+                
+                    if (codeBlock) {
+                        const codeText = codeBlock.innerText;
                         const dummyTextArea = document.createElement('textarea');
                         dummyTextArea.value = codeText;
                         document.body.appendChild(dummyTextArea);
                         dummyTextArea.select();
                         document.execCommand('copy');
                         document.body.removeChild(dummyTextArea);
-    
+                
                         vscode.postMessage({
                             command: 'codeCopied'
                         });

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "gpt-contextfiles",
-  "version": "0.0.1",
+  "version": "0.2.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "gpt-contextfiles",
-      "version": "0.0.1",
+      "version": "0.2.1",
       "dependencies": {
         "openai": "^3.3.0"
       },

package.json

@@ -1,8 +1,8 @@
 {
   "name": "gpt-contextfiles",
   "displayName": "GPT-ContextFiles",
-  "description": "Choose the files to pass into GPT to provide a question with multiple files (doesn't check context)",
-  "version": "0.2.0",
+  "description": "Choose the files to pass into GPT to provide a question with multiple files",
+  "version": "0.2.1",
   "engines": {
     "vscode": "^1.79.0"
   },
@@ -22,7 +22,12 @@
     "testing",
     "debugging",
     "files",
-    "api"
+    "api",
+    "snippets",
+    "openai",
+    "vscode",
+    "extension",
+    "chatbot"
   ],
   "relatedTags": [
     "Artificial Intelligence",
@@ -115,6 +120,6 @@
     "type": "git",
     "url": "https://github.com/Iheuzio/gpt-contextfiles/"
   },
-  "icon": "images/gpt-icon.jpg",
+  "icon": "images/gpt-icon.png",
   "publisher": "Iheuzio"
 }

vsc-extension-quickstart.md

@@ -1,41 +0,0 @@
-# Welcome to your VS Code Extension
-
-## What's in the folder
-
-* This folder contains all of the files necessary for your extension.
-* `package.json` - this is the manifest file in which you declare your extension and command.
-  * The sample plugin registers a command and defines its title and command name. With this information VS Code can show the command in the command palette. It doesn’t yet need to load the plugin.
-* `extension.js` - this is the main file where you will provide the implementation of your command.
-  * The file exports one function, `activate`, which is called the very first time your extension is activated (in this case by executing the command). Inside the `activate` function we call `registerCommand`.
-  * We pass the function containing the implementation of the command as the second parameter to `registerCommand`.
-
-## Get up and running straight away
-
-* Press `F5` to open a new window with your extension loaded.
-* Run your command from the command palette by pressing (`Ctrl+Shift+P` or `Cmd+Shift+P` on Mac) and typing `Hello World`.
-* Set breakpoints in your code inside `extension.js` to debug your extension.
-* Find output from your extension in the debug console.
-
-## Make changes
-
-* You can relaunch the extension from the debug toolbar after changing code in `extension.js`.
-* You can also reload (`Ctrl+R` or `Cmd+R` on Mac) the VS Code window with your extension to load your changes.
-
-## Explore the API
-
-* You can open the full set of our API when you open the file `node_modules/@types/vscode/index.d.ts`.
-
-## Run tests
-
-* Open the debug viewlet (`Ctrl+Shift+D` or `Cmd+Shift+D` on Mac) and from the launch configuration dropdown pick `Extension Tests`.
-* Press `F5` to run the tests in a new window with your extension loaded.
-* See the output of the test result in the debug console.
-* Make changes to `src/test/suite/extension.test.js` or create new test files inside the `test/suite` folder.
-  * The provided test runner will only consider files matching the name pattern `**.test.ts`.
-  * You can create folders inside the `test` folder to structure your tests any way you want.
-
-## Go further
-
- * [Follow UX guidelines](https://code.visualstudio.com/api/ux-guidelines/overview) to create extensions that seamlessly integrate with VS Code's native interface and patterns.
- * [Publish your extension](https://code.visualstudio.com/api/working-with-extensions/publishing-extension) on the VS Code extension marketplace.
- * Automate builds by setting up [Continuous Integration](https://code.visualstudio.com/api/working-with-extensions/continuous-integration).