mirror of
https://github.com/Iheuzio/gpt-contextfiles.git
synced 2025-07-18 14:00:48 +00:00
Iheuzio
GitHub
commit
b7c24aebbb
21
README.md
21
README.md
@ -1,10 +1,6 @@
|
||||
# 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) **
|
||||
|
||||
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.
|
||||
> 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:
|
||||
|
||||
@ -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
|
||||
|
||||
https://platform.openai.com/docs/models/gpt-3-5
|
||||
# Examples
|
||||
|
||||
Demo of how to use the extension:
|
||||
|
||||
|
||||
|
||||
# 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
|
||||
- Click on the extension addon to open the context window, refresh to update the files to check.
|
||||
- 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
|
||||
- Click `API Response` to view your query
|
||||
|
||||
# Examples
|
||||
|
||||
Demo of how to use the extension:
|
||||
|
||||
- Wait for response to be returned
|
||||
- Copy the code (orange portion) and paste it into your code editor
|
||||
|
||||
# How it works
|
||||
|
||||
|
||||
662
extension.js
662
extension.js
@ -184,304 +184,341 @@ function getWebviewContent(apiResponse = '', question = '') {
|
||||
.join('');
|
||||
|
||||
return `
|
||||
<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 {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
resize: both;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.button {
|
||||
flex-grow: 1;
|
||||
background-color: #007acc;
|
||||
color: #fff;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
outline: none;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#response {
|
||||
border: 1px solid #000;
|
||||
background-color: #e0e0e0;
|
||||
padding: 10px;
|
||||
margin-top: 20px;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
#file-list {
|
||||
margin-top: 20px;
|
||||
border
|
||||
}
|
||||
<html>
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 20px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
margin-bottom: 5px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.form-group input[type="text"] {
|
||||
padding: 10px;
|
||||
font-size: 14px;
|
||||
border: none;
|
||||
outline: none;
|
||||
background-color: #2d2d2d;
|
||||
color: #d4d4d4;
|
||||
}
|
||||
|
||||
.form-group input[type="text"]::placeholder {
|
||||
color: #d4d4d4;
|
||||
}
|
||||
|
||||
.form-group .button-options {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.form-group .button-options button {
|
||||
padding: 10px;
|
||||
font-size: 14px;
|
||||
border: none;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
background-color: #007acc;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.form-group .button-options button:hover {
|
||||
background-color: #005f8c;
|
||||
}
|
||||
|
||||
.form-group .button-options button:active {
|
||||
background-color: #004d73;
|
||||
}
|
||||
|
||||
.form-group .button-options button:focus {
|
||||
box-shadow: 0 0 0 2px rgba(0, 122, 204, 0.5);
|
||||
}
|
||||
|
||||
.file-list {
|
||||
margin-top: 20px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.file-list h2 {
|
||||
margin-bottom: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.file-list .file-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 5px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.file-list .file-item input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.file-list .file-item label {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.file-list .file-item .file-path {
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.file-list .file-item .file-path:hover {
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.file-list .file-item .file-path:active {
|
||||
color: #007acc;
|
||||
}
|
||||
|
||||
.file-list .file-item .file-path:focus {
|
||||
box-shadow: 0 0 0 2px rgba(0, 122, 204, 0.5);
|
||||
}
|
||||
|
||||
.collapsible {
|
||||
background-color: #2d2d2d;
|
||||
color: #d4d4d4;
|
||||
cursor: pointer;
|
||||
padding: 10px;
|
||||
width: 100%;
|
||||
border: none;
|
||||
outline: none;
|
||||
text-align: left;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.collapsible:hover {
|
||||
background-color: #3c3c3c;
|
||||
}
|
||||
|
||||
.collapsible:active {
|
||||
background-color: #4c4c4c;
|
||||
}
|
||||
|
||||
.collapsible:focus {
|
||||
box-shadow: 0 0 0 2px rgba(0, 122, 204, 0.5);
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 0 10px;
|
||||
display: none;
|
||||
overflow: hidden;
|
||||
background-color: #f1f1f1;
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.content p {
|
||||
margin-top: 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.active, .collapsible:hover {
|
||||
background-color: #555;
|
||||
}
|
||||
|
||||
.active:after {
|
||||
content: "\\2212";
|
||||
}
|
||||
|
||||
.collapsible:after {
|
||||
content: "\\002B";
|
||||
color: #d4d4d4;
|
||||
font-weight: bold;
|
||||
float: right;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.active:after {
|
||||
content: "\\2212";
|
||||
}
|
||||
|
||||
.collapsible:after {
|
||||
content: "\\002B";
|
||||
color: #d4d4d4;
|
||||
font-weight: bold;
|
||||
float: right;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
#rendered {
|
||||
background-color: #2d2d2d;
|
||||
word-wrap: wrap;
|
||||
margin-top: 20px;
|
||||
border: 1px solid white;
|
||||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#question-rep {
|
||||
font-weight: bold;
|
||||
background-color: #2d2d2d;
|
||||
word-wrap: wrap;
|
||||
border: 1px solid white;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
div#api-response.content.active {
|
||||
background-color: #313131;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body class="panel">
|
||||
<h1>GPT Context</h1>
|
||||
<form id="questionForm">
|
||||
<div class="form-group">
|
||||
<label for="question">Enter your question:</label>
|
||||
<input type="text" id="question" name="question" placeholder="Enter your question" required>
|
||||
<div class="button-options">
|
||||
<button type="submit">Submit</button>
|
||||
<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 {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
resize: both;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.button {
|
||||
flex-grow: 1;
|
||||
background-color: #007acc;
|
||||
color: #fff;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
outline: none;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#response {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
#file-list {
|
||||
margin-top: 20px;
|
||||
border
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 20px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
margin-bottom: 5px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.form-group input[type="text"] {
|
||||
padding: 10px;
|
||||
font-size: 14px;
|
||||
border: none;
|
||||
outline: none;
|
||||
background-color: #2d2d2d;
|
||||
color: #d4d4d4;
|
||||
}
|
||||
|
||||
.form-group input[type="text"]::placeholder {
|
||||
color: #d4d4d4;
|
||||
}
|
||||
|
||||
.form-group .button-options {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.form-group .button-options button {
|
||||
padding: 10px;
|
||||
font-size: 14px;
|
||||
border: none;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
background-color: #007acc;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.form-group .button-options button:hover {
|
||||
background-color: #005f8c;
|
||||
}
|
||||
|
||||
.form-group .button-options button:active {
|
||||
background-color: #004d73;
|
||||
}
|
||||
|
||||
.form-group .button-options button:focus {
|
||||
box-shadow: 0 0 0 2px rgba(0, 122, 204, 0.5);
|
||||
}
|
||||
|
||||
.file-list {
|
||||
margin-top: 20px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.file-list h2 {
|
||||
margin-bottom: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.file-list .file-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 5px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.file-list .file-item input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.file-list .file-item label {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.file-list .file-item .file-path {
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.file-list .file-item .file-path:hover {
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.file-list .file-item .file-path:active {
|
||||
color: #007acc;
|
||||
}
|
||||
|
||||
.file-list .file-item .file-path:focus {
|
||||
box-shadow: 0 0 0 2px rgba(0, 122, 204, 0.5);
|
||||
}
|
||||
|
||||
.collapsible {
|
||||
background-color: #2d2d2d;
|
||||
color: #d4d4d4;
|
||||
cursor: pointer;
|
||||
padding: 10px;
|
||||
width: 100%;
|
||||
border: none;
|
||||
outline: none;
|
||||
text-align: left;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.collapsible:hover {
|
||||
background-color: #3c3c3c;
|
||||
}
|
||||
|
||||
.collapsible:active {
|
||||
background-color: #4c4c4c;
|
||||
}
|
||||
|
||||
.collapsible:focus {
|
||||
box-shadow: 0 0 0 2px rgba(0, 122, 204, 0.5);
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 0 10px;
|
||||
display: none;
|
||||
overflow: hidden;
|
||||
background-color: #f1f1f1;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.content p {
|
||||
margin-top: 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.active,
|
||||
.collapsible:hover {
|
||||
background-color: #555;
|
||||
}
|
||||
|
||||
.active:after {
|
||||
content: "\\2212";
|
||||
}
|
||||
|
||||
.collapsible:after {
|
||||
content: "\\002B";
|
||||
color: #d4d4d4;
|
||||
font-weight: bold;
|
||||
float: right;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.active:after {
|
||||
content: "\\2212";
|
||||
}
|
||||
|
||||
.collapsible:after {
|
||||
content: "\\002B";
|
||||
color: #d4d4d4;
|
||||
font-weight: bold;
|
||||
float: right;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
#rendered {
|
||||
background-color: #2d2d2d;
|
||||
word-wrap: wrap;
|
||||
margin-top: 20px;
|
||||
border: 1px solid white;
|
||||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#question-rep {
|
||||
font-weight: bold;
|
||||
background-color: #2d2d2d;
|
||||
word-wrap: wrap;
|
||||
border: 1px solid white;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
div#api-response.content.active {
|
||||
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>
|
||||
</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="refreshSelectedFiles()">Refresh</button>
|
||||
</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">${apiResponse}</p>
|
||||
</div>
|
||||
` : null
|
||||
}
|
||||
</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>
|
||||
<div class="file-list">
|
||||
${fileList ? fileList : '<p class="no-files">No files selected</p>'}
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
const vscode = acquireVsCodeApi();
|
||||
</div>
|
||||
<script>
|
||||
|
||||
const vscode = acquireVsCodeApi();
|
||||
|
||||
if (${apiResponse !== ''}){
|
||||
toggleApiResponse();
|
||||
}
|
||||
|
||||
function toggleFileSelection(uri) {
|
||||
vscode.postMessage({
|
||||
command: 'toggleFileSelection',
|
||||
uri: uri
|
||||
});
|
||||
}
|
||||
|
||||
function clearSelectedFiles() {
|
||||
vscode.postMessage({
|
||||
command: 'clearSelectedFiles'
|
||||
});
|
||||
}
|
||||
|
||||
function refreshSelectedFiles() {
|
||||
vscode.postMessage({
|
||||
command: 'refreshFiles'
|
||||
});
|
||||
}
|
||||
|
||||
function 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) {
|
||||
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');
|
||||
var response = document.getElementById('responses');
|
||||
if(response === null || response === 'null') {
|
||||
if (response === null) {
|
||||
return;
|
||||
}
|
||||
apiResponse.classList.toggle('active');
|
||||
@ -495,30 +532,33 @@ function getWebviewContent(apiResponse = '', question = '') {
|
||||
collapsible.classList.add('active');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const form = document.getElementById('questionForm');
|
||||
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>
|
||||
`;
|
||||
|
||||
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>
|
||||
|
||||
</html>
|
||||
`;
|
||||
}
|
||||
|
||||
|
||||
@ -558,6 +598,8 @@ function activate(context) {
|
||||
webviewView.webview.html = getWebviewContent();
|
||||
} else if (message.command === 'submitQuestion') {
|
||||
await handleQuestionSubmission(webviewView, message.text, message.selectedUris);
|
||||
} else if (message.command === 'codeCopied') {
|
||||
vscode.window.showInformationMessage('Code copied to clipboard');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 MiB After Width: | Height: | Size: 4.6 MiB |
@ -2,7 +2,7 @@
|
||||
"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.1.3",
|
||||
"version": "0.2.0",
|
||||
"engines": {
|
||||
"vscode": "^1.79.0"
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user