Compare commits

...

47 Commits
0.1.3 ... main

Author SHA1 Message Date
Christopher
a1a8c44824 Release 0.2.3 2023-07-03 13:54:20 -04:00
Iheuzio
8261a1291e
Merge pull request #39 from Iheuzio/dev
Release 0.2.3
2023-07-03 13:51:42 -04:00
Iheuzio
f96b85d43c
Merge pull request #38 from Iheuzio/fix/display-html
fix(display-html): html is now properly displayed
2023-07-03 13:45:41 -04:00
Christopher
1af14cabd3 update version 2023-07-03 13:45:09 -04:00
Christopher
08a84fbfcd fix(display-html): html is now properly displayed 2023-07-03 13:42:48 -04:00
Christopher
dd67a60fc7 Release 0.2.2 2023-06-27 13:27:11 -04:00
Iheuzio
dcbc1ff9de
Merge pull request #36 from Iheuzio/dev
Release 0.2.2
2023-06-27 13:23:19 -04:00
Christopher
fbf7632a4a Resized image 2023-06-27 13:22:25 -04:00
Iheuzio
4e29badfc3
Merge pull request #35 from Iheuzio/update/readme-fix
update(readme-fix): added new features to readme
2023-06-27 13:14:33 -04:00
Christopher
a22fff22c3 update(readme-fix): added new features to readme 2023-06-27 13:12:21 -04:00
Christopher
55af7f8c26 fix(render-style): Removed broken css 2023-06-27 12:59:56 -04:00
Iheuzio
95a11f8bf9
Merge pull request #34 from Iheuzio/fix/style-rendered
fix(style-rendered): padding around response
2023-06-27 12:42:15 -04:00
Christopher
d177199470 fix(style-rendered): padding around response 2023-06-27 12:40:23 -04:00
Iheuzio
6977f004d2
Merge pull request #33 from Iheuzio/fix/style-rendered
Fix/style rendered
2023-06-27 12:27:18 -04:00
Christopher
3dffeccaa9 fix(style-rendered): question now has extra margin 2023-06-27 12:26:26 -04:00
Christopher
384ac4fc80 fix(style-rendered): 98% scales better 2023-06-27 12:24:26 -04:00
Christopher
d8eb37e674 Removed unnecessary import 2023-06-27 12:15:27 -04:00
Christopher
f3fa6a3d0b fix(style-rendered): content looks better now 2023-06-27 12:14:39 -04:00
Iheuzio
fd9ac838c4
Merge pull request #32 from Iheuzio/fix/organize-files
Fix/organize files
2023-06-27 11:48:52 -04:00
Christopher
68a714b80a fix(organize-files): update readme to reflect src 2023-06-27 11:47:09 -04:00
Christopher
6994b23aa2 fix(organize-files): easier to debug under src 2023-06-27 11:46:24 -04:00
Christopher
330c18d2ab Fixed image size 2023-06-26 18:37:00 -04:00
Christopher
9122e019b2 resized image 2023-06-26 18:35:56 -04:00
Christopher
9e590955b4 Release 0.2.1 2023-06-26 18:32:18 -04:00
Iheuzio
7744e9e49e
Merge pull request #30 from Iheuzio/dev
Release 0.2.1
2023-06-26 18:29:11 -04:00
Christopher
5350ea703c minor fixes 2023-06-26 18:28:32 -04:00
Iheuzio
7af3e2b332
Merge pull request #29 from Iheuzio/feature/copy-code
feature(copy-code): add a copy, button improved ui
2023-06-26 17:49:25 -04:00
Christopher
3b793f329c feature(copy-code): add a copy, button improved ui 2023-06-26 17:48:16 -04:00
Iheuzio
c292129ab8
Merge pull request #28 from Iheuzio/update/logo
Update/logo
2023-06-26 16:00:58 -04:00
Christopher
ac9771b6b7 updated tags 2023-06-26 16:00:43 -04:00
Christopher
a299bbeb94 Update icon to look better 2023-06-26 15:53:20 -04:00
Christopher
bca9e9e5b2 Cropped gif 2023-06-25 23:46:43 -04:00
Christopher
c692fd359c Upgraded gif quality to 1080p 2023-06-25 23:43:26 -04:00
Christopher
ad0ca40c5a Merge branch 'main' of https://github.com/Iheuzio/gpt-contextfiles 2023-06-25 23:24:41 -04:00
Christopher
084ed925c6 improve quality of gif 2023-06-25 23:24:38 -04:00
Iheuzio
b9642e6e5b
Update README.md
fixed typo
2023-06-25 22:37:04 -04:00
Christopher
f9e3e6a3d0 Release 0.2.0 2023-06-25 22:24:32 -04:00
Iheuzio
b7c24aebbb
Merge pull request #26 from Iheuzio/dev
Release 0.2.0
2023-06-25 22:21:48 -04:00
Christopher
c858e19fab updated release version 2023-06-25 22:21:33 -04:00
Iheuzio
12302fb271
Merge pull request #25 from Iheuzio/feature/box-code
feature(code-box): Can copy code and load responses
2023-06-25 22:18:45 -04:00
Christopher
b6d3e4f6e0 updated the readme to reflect changes 2023-06-25 22:16:45 -04:00
Christopher
ca8829014b feature(auto-load): will now show the response 2023-06-25 22:10:29 -04:00
Christopher
77769738c7 feature(copy-code): can copy code 2023-06-25 20:43:26 -04:00
Iheuzio
1d3bcb2078
Merge pull request #24 from Iheuzio/update/readme
update(gif): Added new gif to reflect program
2023-06-25 19:47:16 -04:00
Christopher
ebdced8e7d update(gif): Added new gif to reflect program 2023-06-25 19:46:06 -04:00
Iheuzio
2392bc7099
Merge pull request #23 from Iheuzio/feature/format-code
Feature/format code
2023-06-25 19:38:15 -04:00
Christopher
42a578780f feature(formatted-code): Code is now formatted 2023-06-25 19:34:17 -04:00
19 changed files with 746 additions and 630 deletions

View File

@ -4,6 +4,52 @@ Version History
## [Unreleased]
## [Release 0.2.3]
## What's Changed
* fix(display-html): html is now properly displayed by @Iheuzio in https://github.com/Iheuzio/gpt-contextfiles/pull/38
* Release 0.2.3 by @Iheuzio in https://github.com/Iheuzio/gpt-contextfiles/pull/39
**Full Changelog**: https://github.com/Iheuzio/gpt-contextfiles/compare/0.2.2...0.2.3
## [Release 0.2.2]
## What's Changed
* Fix/organize files by @Iheuzio in https://github.com/Iheuzio/gpt-contextfiles/pull/32
* Fix/style rendered by @Iheuzio in https://github.com/Iheuzio/gpt-contextfiles/pull/33
* fix(style-rendered): padding around response by @Iheuzio in https://github.com/Iheuzio/gpt-contextfiles/pull/34
* update(readme-fix): added new features to readme by @Iheuzio in https://github.com/Iheuzio/gpt-contextfiles/pull/35
* Release 0.2.2 by @Iheuzio in https://github.com/Iheuzio/gpt-contextfiles/pull/36
**Full Changelog**: https://github.com/Iheuzio/gpt-contextfiles/compare/0.2.1...0.2.2
## [Release 0.2.1]
## What's Changed
* Update/logo by @Iheuzio in https://github.com/Iheuzio/gpt-contextfiles/pull/28
* feature(copy-code): add a copy, button improved ui by @Iheuzio in https://github.com/Iheuzio/gpt-contextfiles/pull/29
* Release 0.2.1 by @Iheuzio in https://github.com/Iheuzio/gpt-contextfiles/pull/30
**Full Changelog**: https://github.com/Iheuzio/gpt-contextfiles/compare/0.2.0...0.2.1
## [Release 0.2.0]
- Copy code
- Auto response
- Formatting
## What's Changed
* Feature/format code by @Iheuzio in https://github.com/Iheuzio/gpt-contextfiles/pull/23
* update(gif): Added new gif to reflect program by @Iheuzio in https://github.com/Iheuzio/gpt-contextfiles/pull/24
* feature(code-box): Can copy code and load responses by @Iheuzio in https://github.com/Iheuzio/gpt-contextfiles/pull/25
* Release 0.2.0 by @Iheuzio in https://github.com/Iheuzio/gpt-contextfiles/pull/26
**Full Changelog**: https://github.com/Iheuzio/gpt-contextfiles/compare/0.1.3...0.2.0
## [Release 0.1.3]
## What's Changed

View File

@ -1,10 +1,8 @@
# 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) **
![gpt-contextfiles viewport](./images/extension.png)
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:
@ -12,9 +10,13 @@ https://openai.com/pricing
> However, being orientated with managing files this project defaults to the 16k context with GPT-3.5-turbo-16k
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 `./src/gptContext.js` file
# Examples
Demo of how to use the extension:
![](./images/demo-program.gif)
https://platform.openai.com/docs/models/gpt-3-5
# Installation
@ -31,13 +33,13 @@ 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
- Wait for response to be returned
# Examples
Other features:
![Copy button demonstration](./images/copy-image.png)
- Click copy to to copy the snippet of code into your file for fast coding
Demo of how to use the extension:
![](./images/demo-program.gif)
![Copy individual code](./images/demo-copying-quotes.gif)
# How it works

View File

@ -1,571 +0,0 @@
const vscode = require('vscode');
const { Configuration, OpenAIApi } = require("openai");
// move these into the script so that instead of echoing the question and the contents,
// it will echo the question, followed by the answer from the response when the submit button is pressed.
const configuration = new Configuration({
apiKey: process.env.OPENAI_API_KEY,
});
const openai = new OpenAIApi(configuration);
// Represents a file item in the file explorer
class FileItem {
constructor(uri, selected = false) {
this.uri = uri;
this.selected = selected;
}
toggleSelected() {
this.selected = !this.selected;
}
}
// Represents the selected files in the file explorer
const selectedFiles = [];
// Tree data provider for the selected files
class FileDataProvider {
constructor() {
this._onDidChangeTreeData = new vscode.EventEmitter();
this.onDidChangeTreeData = this._onDidChangeTreeData.event;
}
refresh() {
this._onDidChangeTreeData.fire();
}
getTreeItem(element) {
return {
label: element.uri.fsPath,
collapsibleState: vscode.TreeItemCollapsibleState.None
};
}
getChildren(element) {
if (element) {
return [];
}
// Return only the selected files
return selectedFiles.filter(file => file.selected);
}
}
// Command for adding files to gpt-contextfiles
const addFilesCommand = vscode.commands.registerCommand('extension.addFilesToGPTContext', () => {
const editor = vscode.window.activeTextEditor;
if (editor) {
const uri = editor.document.uri;
const existingFileIndex = selectedFiles.findIndex(file => file.uri.fsPath === uri.fsPath);
if (existingFileIndex !== -1) {
// File already exists, remove it from the list
selectedFiles.splice(existingFileIndex, 1);
} else {
// Add the file to the list with selected state
selectedFiles.push(new FileItem(uri, true));
}
fileDataProvider.refresh();
}
});
const fileDataProvider = new FileDataProvider();
// Function to handle question submission
async function handleQuestionSubmission(panel, question, selectedUris) {
// Update the selectedFiles array based on the selectedUris
selectedFiles.forEach(file => {
file.selected = selectedUris.includes(file.uri.fsPath);
});
fileDataProvider.refresh();
const fileContents = selectedFiles
.filter(file => file.selected)
.map(file => {
const document = vscode.workspace.textDocuments.find(doc => doc.uri.fsPath === file.uri.fsPath);
if (document) {
const lines = document.getText().split('\n');
const formattedLines = lines.map(line => `\t${line}`).join('\n');
return `${file.uri.fsPath}:\n\`\`\`\n${formattedLines}\n\`\`\``;
}
return '';
})
.join('\n\n');
// Call OpenAI API with the question and file contents
try {
const chatCompletion = await openai.createChatCompletion({
model: "gpt-3.5-turbo-16k",
messages: [
{ role: "system", content: "Answer the coding questions, only provide the code and documentation, explaining the solution after providing the code." },
{ role: "user", content: question + "\n" + fileContents},
],
});
// Extract the answer from the OpenAI response
const answer = chatCompletion.data.choices[0].message.content;
// Update the webview content to display only the OpenAI response
panel.webview.html = getWebviewContent(answer, question);
} catch (error) {
// Handle any errors from the OpenAI API
console.error("Failed to get OpenAI response:", error);
panel.webview.html = getWebviewContent(`Failed to get response from OpenAI API. Error: ${error.message}`, question);
}
}
// Command for displaying the webview panel
const openGPTContextPanelCommand = vscode.commands.registerCommand('extension.openGPTContextPanel', () => {
const panel = vscode.window.createWebviewPanel(
'gptContextPanel',
'GPT Context',
vscode.ViewColumn.One,
{
enableScripts: true
}
);
panel.webview.html = getWebviewContent();
panel.webview.onDidReceiveMessage(async message => {
if (message.command === 'submitQuestion') {
await handleQuestionSubmission(panel, message.text, message.selectedUris);
} else if (message.command === 'toggleFileSelection') {
const uri = message.uri;
const file = selectedFiles.find(file => file.uri.fsPath === uri);
if (file) {
file.toggleSelected();
fileDataProvider.refresh();
}
} else if (message.command === 'clearSelectedFiles') {
const clearedFiles = selectedFiles.filter(file => file.selected === false);
selectedFiles.length = 0; // Clear the array
clearedFiles.forEach(file => {
fileDataProvider.refresh();
});
panel.webview.html = getWebviewContent();
} else if (message.command === 'refreshFiles') {
fileDataProvider.refresh();
panel.webview.html = getWebviewContent();
}
});
});
// Command for refreshing the selected files
const refreshSelectedFilesCommand = vscode.commands.registerCommand('extension.refreshSelectedFiles', () => {
fileDataProvider.refresh();
});
// Command for clearing the selected files
const clearSelectedFilesCommand = vscode.commands.registerCommand('extension.clearSelectedFiles', () => {
selectedFiles.forEach(file => {
file.selected = false;
});
fileDataProvider.refresh();
});
// Command for refreshing all files
const refreshFilesCommand = vscode.commands.registerCommand('extension.refreshFiles', () => {
fileDataProvider.refresh();
});
// Helper function to generate the HTML content for the webview panel
function getWebviewContent(apiResponse = '', question = '') {
const fileList = selectedFiles
.map(
file =>
`<div><input type="checkbox" data-uri="${file.uri.fsPath}" ${file.selected ? 'checked' : ''
} onchange="toggleFileSelection('${file.uri.fsPath}')" /> ${file.uri.fsPath}</div>`
)
.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
}
.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>
<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">
<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();
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') {
return;
}
apiResponse.classList.toggle('active');
const content = apiResponse;
const collapsible = apiResponse.previousElementSibling;
if (content.style.display === 'block') {
content.style.display = 'none';
collapsible.classList.remove('active');
} else {
content.style.display = 'block';
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>
`;
}
// Activates the extension
function activate(context) {
context.subscriptions.push(addFilesCommand);
context.subscriptions.push(openGPTContextPanelCommand);
context.subscriptions.push(refreshSelectedFilesCommand);
context.subscriptions.push(clearSelectedFilesCommand);
context.subscriptions.push(refreshFilesCommand);
vscode.window.registerTreeDataProvider('selectedFiles', fileDataProvider);
const provider = {
resolveWebviewView(webviewView) {
webviewView.webview.options = {
enableScripts: true
};
webviewView.webview.html = getWebviewContent();
webviewView.webview.onDidReceiveMessage(async message => {
if (message.command === 'toggleFileSelection') {
const uri = message.uri;
const file = selectedFiles.find(file => file.uri.fsPath === uri);
if (file) {
file.toggleSelected();
fileDataProvider.refresh();
}
} else if (message.command === 'clearSelectedFiles') {
const clearedFiles = selectedFiles.filter(file => file.selected === false);
selectedFiles.length = 0; // Clear the array
clearedFiles.forEach(file => {
fileDataProvider.refresh();
});
webviewView.webview.html = getWebviewContent();
} else if (message.command === 'refreshFiles') {
fileDataProvider.refresh();
webviewView.webview.html = getWebviewContent();
} else if (message.command === 'submitQuestion') {
await handleQuestionSubmission(webviewView, message.text, message.selectedUris);
}
});
}
};
context.subscriptions.push(vscode.window.registerWebviewViewProvider('gpt-context-sidebar', provider));
}
exports.activate = activate;

BIN
images/copy-image.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.3 MiB

After

Width:  |  Height:  |  Size: 13 MiB

BIN
images/extension.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

BIN
images/gpt-banner.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 43 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.9 KiB

After

Width:  |  Height:  |  Size: 36 KiB

BIN
images/gpt-icon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 97 KiB

4
package-lock.json generated
View File

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

View File

@ -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.1.3",
"description": "Choose the files to pass into GPT to provide a question with multiple files",
"version": "0.2.3",
"engines": {
"vscode": "^1.79.0"
},
@ -22,7 +22,12 @@
"testing",
"debugging",
"files",
"api"
"api",
"snippets",
"openai",
"vscode",
"extension",
"chatbot"
],
"relatedTags": [
"Artificial Intelligence",
@ -34,7 +39,7 @@
"onCommand:extension.openGPTContextPanel",
"onCommand:extension.gpt-context-sidebar"
],
"main": "./extension.js",
"main": "./src/extension.js",
"contributes": {
"commands": [
{
@ -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"
}

84
src/commands.js Normal file
View File

@ -0,0 +1,84 @@
const vscode = require('vscode');
const { selectedFiles, fileDataProvider, handleQuestionSubmission } = require('./gptContext');
const FileItem = require('./fileItem');
const { getWebviewContent } = require('./webviewPanel');
const addFilesCommand = vscode.commands.registerCommand('extension.addFilesToGPTContext', () => {
const editor = vscode.window.activeTextEditor;
if (editor) {
const uri = editor.document.uri;
const existingFileIndex = selectedFiles.findIndex(file => file.uri.fsPath === uri.fsPath);
if (existingFileIndex !== -1) {
// File already exists, remove it from the list
selectedFiles.splice(existingFileIndex, 1);
} else {
// Add the file to the list with selected state
selectedFiles.push(new FileItem(uri, true));
}
fileDataProvider.refresh();
}
});
const openGPTContextPanelCommand = vscode.commands.registerCommand('extension.openGPTContextPanel', () => {
const panel = vscode.window.createWebviewPanel(
'gptContextPanel',
'GPT Context',
vscode.ViewColumn.One,
{
enableScripts: true
}
);
panel.webview.html = getWebviewContent();
panel.webview.onDidReceiveMessage(async message => {
if (message.command === 'submitQuestion') {
await handleQuestionSubmission(panel, message.text, message.selectedUris);
} else if (message.command === 'toggleFileSelection') {
const uri = message.uri;
const file = selectedFiles.find(file => file.uri.fsPath === uri);
if (file) {
file.toggleSelected();
fileDataProvider.refresh();
}
} else if (message.command === 'clearSelectedFiles') {
const clearedFiles = selectedFiles.filter(file => file.selected === false);
selectedFiles.length = 0; // Clear the array
clearedFiles.forEach(file => {
fileDataProvider.refresh();
});
panel.webview.html = getWebviewContent();
} else if (message.command === 'refreshFiles') {
fileDataProvider.refresh();
panel.webview.html = getWebviewContent();
}
});
});
const refreshSelectedFilesCommand = vscode.commands.registerCommand('extension.refreshSelectedFiles', () => {
fileDataProvider.refresh();
});
// Command for clearing the selected files
const clearSelectedFilesCommand = vscode.commands.registerCommand('extension.clearSelectedFiles', () => {
selectedFiles.forEach(file => {
file.selected = false;
});
fileDataProvider.refresh();
});
// Command for refreshing all files
const refreshFilesCommand = vscode.commands.registerCommand('extension.refreshFiles', () => {
fileDataProvider.refresh();
});
module.exports = {
addFilesCommand,
openGPTContextPanelCommand,
refreshSelectedFilesCommand,
clearSelectedFilesCommand,
refreshFilesCommand
};

52
src/extension.js Normal file
View File

@ -0,0 +1,52 @@
const vscode = require('vscode');
const { addFilesCommand, openGPTContextPanelCommand, refreshSelectedFilesCommand, clearSelectedFilesCommand, refreshFilesCommand } = require('./commands');
const { getWebviewContent } = require('./webviewPanel');
const { selectedFiles, fileDataProvider, handleQuestionSubmission } = require('./gptContext');
function activate(context) {
context.subscriptions.push(addFilesCommand);
context.subscriptions.push(openGPTContextPanelCommand);
context.subscriptions.push(refreshSelectedFilesCommand);
context.subscriptions.push(clearSelectedFilesCommand);
context.subscriptions.push(refreshFilesCommand);
vscode.window.registerTreeDataProvider('selectedFiles', fileDataProvider);
const provider = {
resolveWebviewView(webviewView) {
webviewView.webview.options = {
enableScripts: true
};
webviewView.webview.html = getWebviewContent();
webviewView.webview.onDidReceiveMessage(async message => {
if (message.command === 'toggleFileSelection') {
const uri = message.uri;
const file = selectedFiles.find(file => file.uri.fsPath === uri);
if (file) {
file.toggleSelected();
fileDataProvider.refresh();
}
} else if (message.command === 'clearSelectedFiles') {
const clearedFiles = selectedFiles.filter(file => file.selected === false);
selectedFiles.length = 0; // Clear the array
clearedFiles.forEach(file => {
fileDataProvider.refresh();
});
webviewView.webview.html = getWebviewContent();
} else if (message.command === 'refreshFiles') {
fileDataProvider.refresh();
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');
}
});
}
};
context.subscriptions.push(vscode.window.registerWebviewViewProvider('gpt-context-sidebar', provider));
}
exports.activate = activate;

38
src/fileDataProvider.js Normal file
View File

@ -0,0 +1,38 @@
const vscode = require('vscode');
const FileItem = require('./fileItem.js');
// Represents the selected files in the file explorer
const selectedFiles = [];
// Tree data provider for the selected files
class FileDataProvider {
constructor() {
this._onDidChangeTreeData = new vscode.EventEmitter();
this.onDidChangeTreeData = this._onDidChangeTreeData.event;
}
refresh() {
this._onDidChangeTreeData.fire();
}
getTreeItem(element) {
return {
label: element.uri.fsPath,
collapsibleState: vscode.TreeItemCollapsibleState.None
};
}
getChildren(element) {
if (element) {
return [];
}
// Return only the selected files
return selectedFiles.filter(file => file.selected);
}
}
module.exports = {
FileDataProvider,
selectedFiles
};

12
src/fileItem.js Normal file
View File

@ -0,0 +1,12 @@
class FileItem {
constructor(uri, selected = false) {
this.uri = uri;
this.selected = selected;
}
toggleSelected() {
this.selected = !this.selected;
}
}
module.exports = FileItem;

63
src/gptContext.js Normal file
View File

@ -0,0 +1,63 @@
const vscode = require('vscode');
const { Configuration, OpenAIApi } = require("openai");
const FileDataProvider = require('./fileDataProvider');
const { getWebviewContent } = require('./webviewPanel');
const configuration = new Configuration({
apiKey: process.env.OPENAI_API_KEY,
});
const openai = new OpenAIApi(configuration);
const selectedFiles = FileDataProvider.selectedFiles;
const fileDataProvider = new FileDataProvider.FileDataProvider();
async function handleQuestionSubmission(panel, question, selectedUris) {
// Update the selectedFiles array based on the selectedUris
selectedFiles.forEach(file => {
file.selected = selectedUris.includes(file.uri.fsPath);
});
fileDataProvider.refresh();
const fileContents = selectedFiles
.filter(file => file.selected)
.map(file => {
const document = vscode.workspace.textDocuments.find(doc => doc.uri.fsPath === file.uri.fsPath);
if (document) {
const lines = document.getText().split('\n');
const formattedLines = lines.map(line => `\t${line}`).join('\n');
return `${file.uri.fsPath}:\n\`\`\`\n${formattedLines}\n\`\`\``;
}
return '';
})
.join('\n\n');
// Call OpenAI API with the question and file contents
try {
const chatCompletion = await openai.createChatCompletion({
model: "gpt-3.5-turbo-16k",
messages: [
{ role: "system", content: "Answer the coding questions, only provide the code and documentation, explaining the solution after providing the code. Put codeblocks inside ``` code ``` with file names above each snippet." },
{ role: "user", content: question + "\n" + fileContents},
],
});
// Extract the answer from the OpenAI response
const answer = chatCompletion.data.choices[0].message.content;
// Update the webview content to display only the OpenAI response
panel.webview.html = getWebviewContent(answer, question);
} catch (error) {
// Handle any errors from the OpenAI API
console.error("Failed to get OpenAI response:", error);
panel.webview.html = getWebviewContent(`Failed to get response from OpenAI API. Error: ${error.message}`, question);
}
}
module.exports = {
handleQuestionSubmission,
fileDataProvider,
selectedFiles
};

426
src/webviewPanel.js Normal file
View File

@ -0,0 +1,426 @@
const vscode = require('vscode');
const { selectedFiles } = require('./fileDataProvider');
function getWebviewContent(apiResponse = '', question = '') {
const fileList = selectedFiles
.map(
file =>
`<div><input type="checkbox" data-uri="${file.uri.fsPath}" ${file.selected ? 'checked' : ''
} onchange="toggleFileSelection('${file.uri.fsPath}')" /> ${file.uri.fsPath}</div>`
)
.join('');
return `
<html>
<head>
<style>
.panel {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 90%;
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;
background: #343434;
border-radius: 5px;
padding: 10px;
}
#file-list {
margin-top: 20px;
}
.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: 98%;
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: 98%;
}
.content p {
font-size: 14px;
margin: 0;
}
.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;
color: white;
}
#question-rep {
font-weight: bold;
background-color: #2d2d2d;
word-wrap: wrap;
border: 1px solid white;
border-radius: 5px;
padding: 10px;
margin-top: 20px;
}
div#api-response.content.active {
background-color: #313131;
}
#code-block {
padding: 10px 0 10px 10px;
border-radius: 5px;
background-color: black;
border: none;
font: inherit;
color: inherit;
cursor: pointer;
outline: inherit;
width: 98%;
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>
<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.replace(/</g, '&lt;').replace(/>/g, '&gt;'),
question ? '> ' + question : null
}</p>
</div>
${
apiResponse ? `
<div id="rendered">
<p id="responses">
<pre id="response">${
apiResponse = apiResponse.replace(/</g, '&lt;').replace(/>/g, '&gt;'),
apiResponse.replace(/```([^```]+)```/g, '<div id="code-block"><code>$1</code><button onclick="copyCode(event)" id="copy-button">copy</button></div>')
}</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();
if (${apiResponse !== ''}){
toggleApiResponse();
}
function copyCode(event) {
event.preventDefault();
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'
});
}
}
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) {
return;
}
apiResponse.classList.toggle('active');
const content = apiResponse;
const collapsible = apiResponse.previousElementSibling;
if (content.style.display === 'block') {
content.style.display = 'none';
collapsible.classList.remove('active');
} else {
content.style.display = 'block';
collapsible.classList.add('active');
}
}
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>
`;
}
module.exports = {
getWebviewContent
};

View File

@ -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 doesnt 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).