diff --git a/README.md b/README.md index 62955bf..e88f208 100644 --- a/README.md +++ b/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: diff --git a/extension.js b/extension.js index 7302d59..fce9444 100644 --- a/extension.js +++ b/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; + } + @@ -455,7 +479,7 @@ function getWebviewContent(apiResponse = '', question = '') { apiResponse ? `

- 

${apiResponse.replace(/```([^```]+)```/g, '')}
+ 
${apiResponse.replace(/```([^```]+)```/g, '
$1
')}

` : 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' }); diff --git a/images/copy-image.png b/images/copy-image.png new file mode 100644 index 0000000..688cd71 Binary files /dev/null and b/images/copy-image.png differ diff --git a/images/demo-program.gif b/images/demo-program.gif index 79e2dfb..97df67a 100644 Binary files a/images/demo-program.gif and b/images/demo-program.gif differ diff --git a/images/extension.png b/images/extension.png new file mode 100644 index 0000000..da505ab Binary files /dev/null and b/images/extension.png differ diff --git a/images/gpt-banner.jpg b/images/gpt-banner.jpg new file mode 100644 index 0000000..5290e99 Binary files /dev/null and b/images/gpt-banner.jpg differ diff --git a/images/gpt-icon.jpg b/images/gpt-icon.jpg index ca4f93c..a499938 100644 Binary files a/images/gpt-icon.jpg and b/images/gpt-icon.jpg differ diff --git a/images/gpt-icon.png b/images/gpt-icon.png new file mode 100644 index 0000000..381160f Binary files /dev/null and b/images/gpt-icon.png differ diff --git a/package-lock.json b/package-lock.json index ce8b9b7..d65b31e 100644 --- a/package-lock.json +++ b/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" }, diff --git a/package.json b/package.json index 5fa6f19..079acbb 100644 --- a/package.json +++ b/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" } diff --git a/vsc-extension-quickstart.md b/vsc-extension-quickstart.md deleted file mode 100644 index fdc7d97..0000000 --- a/vsc-extension-quickstart.md +++ /dev/null @@ -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).