cbartos/gpt-contextfiles
1
0
Fork 0
mirror of https://github.com/Iheuzio/gpt-contextfiles.git synced 2025-07-18 14:00:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #25 from Iheuzio/feature/box-code

Browse Source 
feature(code-box): Can copy code and load responses
This commit is contained in:
Iheuzio 2023-06-25 22:18:45 -04:00 committed by GitHub
commit 12302fb271
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 360 additions and 321 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
README.md
View File

@ -1,10 +1,6 @@
# gpt-contextfiles # gpt-contextfiles
** currently in development, if you'll like to contribute or provide any feedback check out the [link](https://github.com/Iheuzio/gpt-contextfiles/issues) ** > if you'll like to contribute or provide any feedback check out the [link](https://github.com/Iheuzio/gpt-contextfiles/issues)
I was annoyed with copying responses into chatgpt and other LLMs for debugging my code across files, so I decided to make an extension that will do that.
You simply right click each file you want to pass through, check or uncheck the checkbox, then enter your question and pass along the response over the api to your LLM.
This extension uses the openai api, there are many models avaliable: This extension uses the openai api, there are many models avaliable:
@ -14,7 +10,11 @@ https://openai.com/pricing
If you wish to change the model, you must change the model in the extension.js file If you wish to change the model, you must change the model in the extension.js file
https://platform.openai.com/docs/models/gpt-3-5 # Examples
Demo of how to use the extension:
![](./images/demo-program.gif)
# Installation # Installation
@ -31,13 +31,8 @@ Refresh -> refreshes the window so that all new files will be available for that
- Right click to add files to the context window - 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. - Click on the extension addon to open the context window, refresh to update the files to check.
- Select the files uses checkboxes - Select the files uses checkboxes
- After submit is pressed, wait until the question disappears, this means the query is processed by openai and was fully sent - Wait for response to be returned
- Click `API Response` to view your query - Copy the code (orange portion) and paste it into your code editor
# Examples
Demo of how to use the extension:
![](./images/demo-program.gif)
# How it works # How it works

64
extension.js
View File

@ -185,6 +185,7 @@ function getWebviewContent(apiResponse = '', question = '') {
return ` return `
<html> <html>
<head> <head>
<style> <style>
.panel { .panel {
@ -358,7 +359,7 @@ function getWebviewContent(apiResponse = '', question = '') {
display: none; display: none;
overflow: hidden; overflow: hidden;
background-color: #f1f1f1; background-color: #f1f1f1;
width:100%; width: 100%;
} }
.content p { .content p {
@ -366,7 +367,8 @@ function getWebviewContent(apiResponse = '', question = '') {
font-size: 14px; font-size: 14px;
} }
.active, .collapsible:hover { .active,
.collapsible:hover {
background-color: #555; background-color: #555;
} }
@ -415,16 +417,28 @@ function getWebviewContent(apiResponse = '', question = '') {
background-color: #313131; background-color: #313131;
} }
#code-block {
padding: 0;
background: none;
border: none;
font: inherit;
color: inherit;
cursor: pointer;
outline: inherit;
margin: 0;
width: 100%;
text-align: left;
}
</style> </style>
</head> </head>
<body class="panel"> <body class="panel">
<h1>GPT Context</h1> <h1>GPT Context</h1>
<form id="questionForm"> <form id="questionForm">
<div class="form-group"> <div class="form-group">
<label for="question">Enter your question:</label> <input type="text" id="question" name="question" placeholder="Enter your question:">
<input type="text" id="question" name="question" placeholder="Enter your question" required>
<div class="button-options"> <div class="button-options">
<button type="submit">Submit</button> <button type="submit" onclick="submitQuestionApi()">Submit</button>
<button type="button" onclick="clearSelectedFiles()">Clear</button> <button type="button" onclick="clearSelectedFiles()">Clear</button>
<button type="button" onclick="refreshSelectedFiles()">Refresh</button> <button type="button" onclick="refreshSelectedFiles()">Refresh</button>
</div> </div>
@ -441,7 +455,7 @@ function getWebviewContent(apiResponse = '', question = '') {
apiResponse ? ` apiResponse ? `
<div id="rendered"> <div id="rendered">
<p id="responses"> <p id="responses">
<pre id="response">${apiResponse.replace(/```([^```]+)```/g, '<code>$1</code>')}</pre> <pre id="response">${apiResponse.replace(/```([^```]+)```/g, '<button onclick="copyCode()" id="code-block"><code>$1</code></button>')}</pre>
</p> </p>
</div> </div>
` : null ` : null
@ -455,8 +469,33 @@ function getWebviewContent(apiResponse = '', question = '') {
</div> </div>
</div> </div>
<script> <script>
const vscode = acquireVsCodeApi(); const vscode = acquireVsCodeApi();
if (${apiResponse !== ''}){
toggleApiResponse();
}
function copyCode() {
event.preventDefault();
const codeBlocks = document.getElementsByTagName('code');
const selectedCodeBlock = event.target.closest('code');
if (selectedCodeBlock) {
const codeText = selectedCodeBlock.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'
});
}
}
function toggleFileSelection(uri) { function toggleFileSelection(uri) {
vscode.postMessage({ vscode.postMessage({
command: 'toggleFileSelection', command: 'toggleFileSelection',
@ -479,7 +518,7 @@ function getWebviewContent(apiResponse = '', question = '') {
function toggleApiResponse() { function toggleApiResponse() {
const apiResponse = document.getElementById('api-response'); const apiResponse = document.getElementById('api-response');
var response = document.getElementById('responses'); var response = document.getElementById('responses');
if(response === null) { if (response === null) {
return; return;
} }
apiResponse.classList.toggle('active'); apiResponse.classList.toggle('active');
@ -494,10 +533,12 @@ function getWebviewContent(apiResponse = '', question = '') {
} }
} }
const form = document.getElementById('questionForm'); const form = document.getElementById('questionForm');
form.addEventListener('submit', event => { function submitQuestionApi() {
event.preventDefault(); event.preventDefault();
if (document.getElementById('question').value === '' || document.getElementById('question').value === null) {
return;
}
const question = document.getElementById('question').value; const question = document.getElementById('question').value;
const checkboxes = document.querySelectorAll('input[type="checkbox"]'); const checkboxes = document.querySelectorAll('input[type="checkbox"]');
const selectedUris = []; const selectedUris = [];
@ -512,9 +553,10 @@ function getWebviewContent(apiResponse = '', question = '') {
text: question, text: question,
selectedUris: selectedUris selectedUris: selectedUris
}); });
}); }
</script> </script>
</body> </body>
</html> </html>
`; `;
} }
@ -556,6 +598,8 @@ function activate(context) {
webviewView.webview.html = getWebviewContent(); webviewView.webview.html = getWebviewContent();
} else if (message.command === 'submitQuestion') { } else if (message.command === 'submitQuestion') {
await handleQuestionSubmission(webviewView, message.text, message.selectedUris); await handleQuestionSubmission(webviewView, message.text, message.selectedUris);
} else if (message.command === 'codeCopied') {
vscode.window.showInformationMessage('Code copied to clipboard');
} }
}); });
} }

BIN
images/demo-program.gif
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.4 MiB

After

Width:  |  Height:  |  Size: 4.6 MiB