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

576
extension.js
View File

@ -184,302 +184,341 @@ function getWebviewContent(apiResponse = '', question = '') {
.join(''); .join('');
return ` return `
<html> <html>
<head>
<style>
.panel {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 50%;
height: 100%;
margin: 0 auto;
background-color: #1e1e1e;
color: #d4d4d4;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.textbox { <head>
width: 100%; <style>
height: 200px; .panel {
resize: both; display: flex;
padding: 10px; flex-direction: column;
} align-items: center;
justify-content: center;
width: 50%;
height: 100%;
margin: 0 auto;
background-color: #1e1e1e;
color: #d4d4d4;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.buttons { .textbox {
display: flex; width: 100%;
justify-content: space-between; height: 200px;
width: 50%; resize: both;
} padding: 10px;
}
.button { .buttons {
flex-grow: 1; display: flex;
background-color: #007acc; justify-content: space-between;
color: #fff; width: 50%;
padding: 10px; }
text-align: center;
cursor: pointer;
border: none;
outline: none;
font-size: 14px;
}
#response { .button {
white-space: pre-wrap; flex-grow: 1;
} background-color: #007acc;
color: #fff;
padding: 10px;
text-align: center;
cursor: pointer;
border: none;
outline: none;
font-size: 14px;
}
#file-list { #response {
margin-top: 20px; white-space: pre-wrap;
border }
}
.form-group { #file-list {
display: flex; margin-top: 20px;
flex-direction: column; border
margin-bottom: 20px; }
width: 100%;
}
.form-group label { .form-group {
margin-bottom: 5px; display: flex;
font-size: 14px; flex-direction: column;
} margin-bottom: 20px;
width: 100%;
}
.form-group input[type="text"] { .form-group label {
padding: 10px; margin-bottom: 5px;
font-size: 14px; font-size: 14px;
border: none; }
outline: none;
background-color: #2d2d2d;
color: #d4d4d4;
}
.form-group input[type="text"]::placeholder { .form-group input[type="text"] {
color: #d4d4d4; padding: 10px;
} font-size: 14px;
border: none;
outline: none;
background-color: #2d2d2d;
color: #d4d4d4;
}
.form-group .button-options { .form-group input[type="text"]::placeholder {
display: flex; color: #d4d4d4;
justify-content: space-between; }
margin-top: 10px;
}
.form-group .button-options button { .form-group .button-options {
padding: 10px; display: flex;
font-size: 14px; justify-content: space-between;
border: none; margin-top: 10px;
outline: none; }
cursor: pointer;
background-color: #007acc;
color: #fff;
}
.form-group .button-options button:hover { .form-group .button-options button {
background-color: #005f8c; padding: 10px;
} font-size: 14px;
border: none;
outline: none;
cursor: pointer;
background-color: #007acc;
color: #fff;
}
.form-group .button-options button:active { .form-group .button-options button:hover {
background-color: #004d73; background-color: #005f8c;
} }
.form-group .button-options button:focus { .form-group .button-options button:active {
box-shadow: 0 0 0 2px rgba(0, 122, 204, 0.5); background-color: #004d73;
} }
.file-list { .form-group .button-options button:focus {
margin-top: 20px; box-shadow: 0 0 0 2px rgba(0, 122, 204, 0.5);
width: 100%; }
}
.file-list h2 { .file-list {
margin-bottom: 10px; margin-top: 20px;
font-size: 14px; width: 100%;
} }
.file-list .file-item { .file-list h2 {
display: flex; margin-bottom: 10px;
align-items: center; font-size: 14px;
margin-bottom: 5px; }
font-size: 14px;
}
.file-list .file-item input[type="checkbox"] { .file-list .file-item {
margin-right: 5px; display: flex;
} align-items: center;
margin-bottom: 5px;
font-size: 14px;
}
.file-list .file-item label { .file-list .file-item input[type="checkbox"] {
margin-bottom: 0; margin-right: 5px;
} }
.file-list .file-item .file-path { .file-list .file-item label {
overflow-wrap: break-word; margin-bottom: 0;
} }
.file-list .file-item .file-path:hover { .file-list .file-item .file-path {
text-decoration: underline; overflow-wrap: break-word;
cursor: pointer; }
}
.file-list .file-item .file-path:active { .file-list .file-item .file-path:hover {
color: #007acc; text-decoration: underline;
} cursor: pointer;
}
.file-list .file-item .file-path:focus { .file-list .file-item .file-path:active {
box-shadow: 0 0 0 2px rgba(0, 122, 204, 0.5); color: #007acc;
} }
.collapsible { .file-list .file-item .file-path:focus {
background-color: #2d2d2d; box-shadow: 0 0 0 2px rgba(0, 122, 204, 0.5);
color: #d4d4d4; }
cursor: pointer;
padding: 10px;
width: 100%;
border: none;
outline: none;
text-align: left;
font-size: 14px;
}
.collapsible:hover { .collapsible {
background-color: #3c3c3c; background-color: #2d2d2d;
} color: #d4d4d4;
cursor: pointer;
padding: 10px;
width: 100%;
border: none;
outline: none;
text-align: left;
font-size: 14px;
}
.collapsible:active { .collapsible:hover {
background-color: #4c4c4c; background-color: #3c3c3c;
} }
.collapsible:focus { .collapsible:active {
box-shadow: 0 0 0 2px rgba(0, 122, 204, 0.5); background-color: #4c4c4c;
} }
.content { .collapsible:focus {
padding: 0 10px; box-shadow: 0 0 0 2px rgba(0, 122, 204, 0.5);
display: none; }
overflow: hidden;
background-color: #f1f1f1;
width:100%;
}
.content p { .content {
margin-top: 0; padding: 0 10px;
font-size: 14px; display: none;
} overflow: hidden;
background-color: #f1f1f1;
width: 100%;
}
.active, .collapsible:hover { .content p {
background-color: #555; margin-top: 0;
} font-size: 14px;
}
.active:after { .active,
content: "\\2212"; .collapsible:hover {
} background-color: #555;
}
.collapsible:after { .active:after {
content: "\\002B"; content: "\\2212";
color: #d4d4d4; }
font-weight: bold;
float: right;
margin-left: 5px;
}
.active:after { .collapsible:after {
content: "\\2212"; content: "\\002B";
} color: #d4d4d4;
font-weight: bold;
float: right;
margin-left: 5px;
}
.collapsible:after { .active:after {
content: "\\002B"; content: "\\2212";
color: #d4d4d4; }
font-weight: bold;
float: right;
margin-left: 5px;
}
#rendered { .collapsible:after {
background-color: #2d2d2d; content: "\\002B";
word-wrap: wrap; color: #d4d4d4;
margin-top: 20px; font-weight: bold;
border: 1px solid white; float: right;
border-radius: 5px; margin-left: 5px;
padding: 10px; }
}
#question-rep { #rendered {
font-weight: bold; background-color: #2d2d2d;
background-color: #2d2d2d; word-wrap: wrap;
word-wrap: wrap; margin-top: 20px;
border: 1px solid white; border: 1px solid white;
border-radius: 5px; border-radius: 5px;
} padding: 10px;
}
div#api-response.content.active { #question-rep {
background-color: #313131; font-weight: bold;
} background-color: #2d2d2d;
word-wrap: wrap;
border: 1px solid white;
border-radius: 5px;
}
</style> div#api-response.content.active {
</head> background-color: #313131;
<body class="panel"> }
<h1>GPT Context</h1>
<form id="questionForm"> #code-block {
<div class="form-group"> padding: 0;
<label for="question">Enter your question:</label> background: none;
<input type="text" id="question" name="question" placeholder="Enter your question" required> border: none;
<div class="button-options"> font: inherit;
<button type="submit">Submit</button> color: inherit;
cursor: pointer;
outline: inherit;
margin: 0;
width: 100%;
text-align: left;
}
</style>
</head>
<body class="panel">
<h1>GPT Context</h1>
<form id="questionForm">
<div class="form-group">
<input type="text" id="question" name="question" placeholder="Enter your question:">
<div class="button-options">
<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>
</div>
<div class="form-group">
<div class="collapsible" onclick="toggleApiResponse()">
API Response
</div>
<div class="content" id="api-response">
<div id="question-rep">
<p>${question ? '> ' + question : null}</p>
</div>
${
apiResponse ? `
<div id="rendered">
<p id="responses">
<pre id="response">${apiResponse.replace(/```([^```]+)```/g, '<code>$1</code>')}</pre>
</p>
</div>
` : null
}
</div>
</div> </div>
<div class="form-group"> <div class="form-group">
<div class="collapsible" onclick="toggleApiResponse()">
API Response
</div>
<div class="content" id="api-response">
<div id="question-rep">
<p>${question ? '> ' + question : null}</p>
</div>
${
apiResponse ? `
<div id="rendered">
<p id="responses">
<pre id="response">${apiResponse.replace(/```([^```]+)```/g, '<button onclick="copyCode()" id="code-block"><code>$1</code></button>')}</pre>
</p>
</div>
` : null
}
</div>
</div>
<div class="form-group">
<label for="selected-files">Selected Files:</label> <label for="selected-files">Selected Files:</label>
<div class="file-list"> <div class="file-list">
${fileList ? fileList : '<p class="no-files">No files selected</p>'} ${fileList ? fileList : '<p class="no-files">No files selected</p>'}
</div> </div>
</div> </div>
<script> <script>
const vscode = acquireVsCodeApi();
function toggleFileSelection(uri) { const vscode = acquireVsCodeApi();
vscode.postMessage({
command: 'toggleFileSelection',
uri: uri
});
}
function clearSelectedFiles() { if (${apiResponse !== ''}){
vscode.postMessage({ toggleApiResponse();
command: 'clearSelectedFiles' }
});
}
function refreshSelectedFiles() { function copyCode() {
vscode.postMessage({ event.preventDefault();
command: 'refreshFiles' const codeBlocks = document.getElementsByTagName('code');
}); const selectedCodeBlock = event.target.closest('code');
}
function toggleApiResponse() { 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) {
vscode.postMessage({
command: 'toggleFileSelection',
uri: uri
});
}
function clearSelectedFiles() {
vscode.postMessage({
command: 'clearSelectedFiles'
});
}
function refreshSelectedFiles() {
vscode.postMessage({
command: 'refreshFiles'
});
}
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,29 +533,32 @@ function getWebviewContent(apiResponse = '', question = '') {
} }
} }
const form = document.getElementById('questionForm');
function submitQuestionApi() {
event.preventDefault();
if (document.getElementById('question').value === '' || document.getElementById('question').value === null) {
return;
}
const question = document.getElementById('question').value;
const checkboxes = document.querySelectorAll('input[type="checkbox"]');
const selectedUris = [];
checkboxes.forEach(checkbox => {
if (checkbox.checked) {
const uri = checkbox.getAttribute('data-uri');
selectedUris.push(uri);
}
});
vscode.postMessage({
command: 'submitQuestion',
text: question,
selectedUris: selectedUris
});
}
</script>
</body>
const form = document.getElementById('questionForm'); </html>
form.addEventListener('submit', event => { `;
event.preventDefault();
const question = document.getElementById('question').value;
const checkboxes = document.querySelectorAll('input[type="checkbox"]');
const selectedUris = [];
checkboxes.forEach(checkbox => {
if (checkbox.checked) {
const uri = checkbox.getAttribute('data-uri');
selectedUris.push(uri);
}
});
vscode.postMessage({
command: 'submitQuestion',
text: question,
selectedUris: selectedUris
});
});
</script>
</body>
</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