Release 0.2.3

Release 0.2.3

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,31 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: "[BUG]"
+labels: ''
+assignees: ''
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Desktop (please complete the following information):**
+ - OS: [e.g. Linux, Windows]
+ - VSCode version
+
+**Additional context**
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,20 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: "[FEAT]"
+labels: ''
+assignees: ''
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

CHANGELOG.md

@@ -1,9 +1,114 @@
 # Change Log
 
-All notable changes to the "gpt-contextfiles" extension will be documented in this file.
-
-Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how to structure this file.
+Version History
 
 ## [Unreleased]
 
-- Initial release
+## [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
+* fix(explorer-context): Shows the add files context for any file by @Iheuzio in https://github.com/Iheuzio/gpt-contextfiles/pull/19
+* fix(assistant): Assistant would not answer reponse by @Iheuzio in https://github.com/Iheuzio/gpt-contextfiles/pull/20
+* Release 0.1.3 by @Iheuzio in https://github.com/Iheuzio/gpt-contextfiles/pull/21
+
+**Full Changelog**: https://github.com/Iheuzio/gpt-contextfiles/compare/0.1.2...0.1.3
+
+## [Release 0.1.2]
+
+## What's Changed
+* feature(tags): associate project with relative keywords by @Iheuzio in https://github.com/Iheuzio/gpt-contextfiles/pull/11
+* feature(categories): Expand into other categories related to this program by @Iheuzio in https://github.com/Iheuzio/gpt-contextfiles/pull/12
+* Update issue templates by @Iheuzio in https://github.com/Iheuzio/gpt-contextfiles/pull/13
+* Adding Guides by @Iheuzio in https://github.com/Iheuzio/gpt-contextfiles/pull/14
+* feature(sidebar): Renders webpanel on the side by @Iheuzio in https://github.com/Iheuzio/gpt-contextfiles/pull/15
+* fix(css): sidebar now has css by @Iheuzio in https://github.com/Iheuzio/gpt-contextfiles/pull/16
+* Release 0.1.2 by @Iheuzio in https://github.com/Iheuzio/gpt-contextfiles/pull/17
+
+
+**Full Changelog**: https://github.com/Iheuzio/gpt-contextfiles/compare/0.1.0...0.1.2
+
+## [Release 0.1.1]
+
+Swapped category from `other` to `Machine Learning` to better reflect use-case
+
+## What's Changed
+* fix(context-16k): model uses 16k tokens now by @Iheuzio in https://github.com/Iheuzio/gpt-contextfiles/pull/7
+* Fix/id not selected by @Iheuzio in https://github.com/Iheuzio/gpt-contextfiles/pull/8
+* Minor Fixes by @Iheuzio in https://github.com/Iheuzio/gpt-contextfiles/pull/9
+* fix(category): swapped category by @Iheuzio in https://github.com/Iheuzio/gpt-contextfiles/pull/10
+
+
+**Full Changelog**: https://github.com/Iheuzio/gpt-contextfiles/compare/0.0.1...0.1.1
+
+## [Release 0.1.0]
+
+## What's Changed
+* fix(context-16k): model uses 16k tokens now by @Iheuzio in https://github.com/Iheuzio/gpt-contextfiles/pull/7
+* Fix/id not selected by @Iheuzio in https://github.com/Iheuzio/gpt-contextfiles/pull/8
+* Minor Fixes by @Iheuzio in https://github.com/Iheuzio/gpt-contextfiles/pull/9
+
+
+**Full Changelog**: https://github.com/Iheuzio/gpt-contextfiles/compare/0.0.1...0.1
+
+## [Release 0.0.1]
+
+Still in development, requires a bit of testing.
+
+## What's Changed
+* fix(gpt-context): Fixes the layout and the options with the selected by @Iheuzio in https://github.com/Iheuzio/gpt-contextfiles/pull/1
+* fix(queries): Fixes the queries formatting by @Iheuzio in https://github.com/Iheuzio/gpt-contextfiles/pull/2
+* fix(selected-files): User can now select individual files to pass into the context using the checkboxes by @Iheuzio in https://github.com/Iheuzio/gpt-contextfiles/pull/3
+* Feature/openai api by @Iheuzio in https://github.com/Iheuzio/gpt-contextfiles/pull/4
+* fix(formatting): Files now formatted like it was previously when passed through by @Iheuzio in https://github.com/Iheuzio/gpt-contextfiles/pull/5
+* Release v1 by @Iheuzio in https://github.com/Iheuzio/gpt-contextfiles/pull/6
+
+## New Contributors
+* @Iheuzio made their first contribution in https://github.com/Iheuzio/gpt-contextfiles/pull/1
+
+**Full Changelog**: https://github.com/Iheuzio/gpt-contextfiles/commits/0.0.1

CODE_OF_CONDUCT.md

@@ -0,0 +1,46 @@
+# Code of Conduct
+
+## Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to make participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.
+
+## Our Standards
+
+Examples of behavior that contributes to creating a positive environment include:
+
+- Using welcoming and inclusive language
+- Being respectful of differing viewpoints and experiences
+- Gracefully accepting constructive criticism
+- Focusing on what is best for the community
+- Showing empathy towards other community members
+
+Examples of unacceptable behavior by participants include:
+
+- The use of sexualized language or imagery and unwelcome sexual attention or advances
+- Trolling, insulting/derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or electronic address, without explicit permission
+- Other conduct which could reasonably be considered inappropriate in a professional setting
+
+## Our Responsibilities
+
+Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
+
+Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
+
+## Scope
+
+This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team maintainers. All complaints will be reviewed and investigated and will result in a response that is deemed necessary and appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
+
+Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 2.0, available at [https://www.contributor-covenant.org/version/2/0/code_of_conduct.html][v2.0].
+
+[homepage]: https://www.contributor-covenant.org
+[v2.0]: https://www.contributor-covenant.org/version/2/0/code_of_conduct.html

CONTRIBUTING.md

@@ -0,0 +1,147 @@
+# Contributing to gpt-contextfiles
+
+Thanks for taking an interest in the project!
+
+All types of contributions are encouraged and valued. See the [Table of Contents](#table-of-contents) for different ways to help and details about how this project handles them. Please make sure to read the relevant section before making your contribution. It will make it a lot easier for us maintainers and smooth out the experience for all involved. The community looks forward to your contributions. 
+
+> And if you like the project, but just don't have time to contribute, that's fine. There are other easy ways to support the project and show your appreciation, which we would also be very happy about:
+> - Star the project
+> - Share it online
+> - Refer this project in your project's readme
+
+<!-- omit in toc -->
+## Table of Contents
+
+- [Code of Conduct](#code-of-conduct)
+- [I Have a Question](#i-have-a-question)
+- [I Want To Contribute](#i-want-to-contribute)
+  - [Reporting Bugs](#reporting-bugs)
+  - [Suggesting Enhancements](#suggesting-enhancements)
+  - [Your First Code Contribution](#your-first-code-contribution)
+  - [Improving The Documentation](#improving-the-documentation)
+- [Styleguides](#styleguides)
+  - [Commit Messages](#commit-messages)
+- [Join The Project Team](#join-the-project-team)
+
+
+## Code of Conduct
+
+This project and everyone participating in it is governed by the
+[gpt-contextfiles Code of Conduct](https://github.com/Iheuzio/gpt-contextfiles/blob/master/CODE_OF_CONDUCT.md).
+By participating, you are expected to uphold this code. Please report unacceptable behavior
+to any of the maintainers.
+
+
+## I Have a Question
+
+> If you want to ask a question, we assume that you have read the available [Documentation](https://github.com/Iheuzio/gpt-contextfiles/blob/main/README.md).
+
+Before you ask a question, it is best to search for existing [Issues](https://github.com/Iheuzio/gpt-contextfiles//issues) that might help you. In case you have found a suitable issue and still need clarification, you can write your question in this issue. It is also advisable to search the internet for answers first.
+
+If you then still feel the need to ask a question and need clarification, we recommend the following:
+
+- Open an [Issue](https://github.com/Iheuzio/gpt-contextfiles//issues/new).
+- Provide as much context as you can about what you're running into.
+- Provide project and platform versions (nodejs, npm, etc), depending on what seems relevant.
+
+Just remember to add the relevant tags and keep discussions specific to that category.
+
+## I Want To Contribute
+
+> When contributing to this project, you must agree that you have authored 100% of the content, that you have the necessary rights to the content and that the content you contribute may be provided under the project license.
+
+### Reporting Bugs
+
+<!-- omit in toc -->
+#### Before Submitting a Bug Report
+
+A good bug report shouldn't leave others needing to chase you up for more information. Therefore, we ask you to investigate carefully, collect information and describe the issue in detail in your report. Please complete the following steps in advance to help us fix any potential bug as fast as possible.
+
+- Make sure that you are using the latest version.
+- Determine if your bug is really a bug and not an error on your side e.g. using incompatible environment components/versions (Make sure that you have read the [documentation](https://github.com/Iheuzio/gpt-contextfiles/blob/main/README.md). If you are looking for support, you might want to check [this section](#i-have-a-question)).
+- To see if other users have experienced (and potentially already solved) the same issue you are having, check if there is not already a bug report existing for your bug or error in the [bug tracker](https://github.com/Iheuzio/gpt-contextfiles/issues?q=label%3Abug).
+- Collect information about the bug:
+  - Stack trace (Traceback)
+  - OS, Platform and Version (Windows, Linux, macOS, x86, ARM)
+  - Version of the interpreter, compiler, VSCode version, runtime environment, package manager, depending on what seems relevant.
+  - Possibly your input and the output
+  - Can you reliably reproduce the issue? And can you also reproduce it with older versions?
+  
+<!-- omit in toc -->
+#### How Do I Submit a Good Bug Report?
+
+> You must never report security related issues, vulnerabilities or bugs including sensitive information to the issue tracker, or elsewhere in public. Instead sensitive bugs must be sent to any of the maintainers.
+> You must encrypt any senseitive information found.
+
+We use GitHub issues to track bugs and errors. If you run into an issue with the project:
+
+- Open an [Issue](https://github.com/Iheuzio/gpt-contextfiles//issues/new). (Since we can't be sure at this point whether it is a bug or not, we ask you not to talk about a bug yet and not to label the issue.)
+- Explain the behavior you would expect and the actual behavior.
+- Please provide as much context as possible and describe the *reproduction steps* that someone else can follow to recreate the issue on their own. This usually includes your code. For good bug reports you should isolate the problem and create a reduced test case.
+- Provide the information you collected in the previous section.
+
+Once it's filed:
+
+- The project team will label the issue accordingly.
+- A team member will try to reproduce the issue with your provided steps. If there are no reproduction steps or no obvious way to reproduce the issue, the team will ask you for those steps and mark the issue as `needs-repro`. Bugs with the `needs-repro` tag will not be addressed until they are reproduced.
+- If the team is able to reproduce the issue, it will be marked `needs-fix`, as well as possibly other tags (such as `critical`), and the issue will be left to be [implemented by someone](#your-first-code-contribution).
+
+
+### Suggesting Enhancements
+
+This section guides you through submitting an enhancement suggestion for gpt-contextfiles, **including completely new features and minor improvements to existing functionality**. Following these guidelines will help maintainers and the community to understand your suggestion and find related suggestions.
+<!-- omit in toc -->
+#### Before Submitting an Enhancement
+
+- Make sure that you are using the latest version.
+- Read the [documentation](https://github.com/Iheuzio/gpt-contextfiles/blob/main/README.md) carefully and find out if the functionality is already covered, maybe by an individual configuration.
+- Perform a [search](https://github.com/Iheuzio/gpt-contextfiles//issues) to see if the enhancement has already been suggested. If it has, add a comment to the existing issue instead of opening a new one.
+- Find out whether your idea fits with the scope and aims of the project. It's up to you to make a strong case to convince the project's developers of the merits of this feature. Keep in mind that we want features that will be useful to the majority of our users and not just a small subset. 
+
+<!-- omit in toc -->
+#### How Do I Submit a Good Enhancement Suggestion?
+
+Enhancement suggestions are tracked as [GitHub issues](https://github.com/Iheuzio/gpt-contextfiles//issues).
+
+- Use a **clear and descriptive title** for the issue to identify the suggestion.
+- Provide a **step-by-step description of the suggested enhancement** in as many details as possible.
+- **Describe the current behavior** and **explain which behavior you expected to see instead** and why. At this point you can also tell which alternatives do not work for you.
+- You may want to **include screenshots and animated GIFs** which help you demonstrate the steps or point out the part which the suggestion is related to. You can use [this tool](https://www.cockos.com/licecap/) to record GIFs on macOS and Windows, and [this tool](https://github.com/colinkeenan/silentcast) or [this tool](https://github.com/GNOME/byzanz) on Linux. <!-- this should only be included if the project has a GUI -->
+- **Explain why this enhancement would be useful** to most gpt-contextfiles users. You may also want to point out the other projects that solved it better and which could serve as inspiration.
+
+<!-- You might want to create an issue template for enhancement suggestions that can be used as a guide and that defines the structure of the information to be included. If you do so, reference it here in the description. -->
+
+### Your First Code Contribution
+
+You can test natively in your specific IDE and require little time to intialize a test of your contribution.
+
+1. Open VSCode, clone into your forked version
+2. Edit your change, if it is a feature use feature/<Your feature>, if it is a fix use fix/<Your fix>
+3. Add a proper commit message feature(<Your feature>):short description, or if it is a fix: fix(<Your fix>): short description
+4. Issue a Pull Request with the same structure as your commit message
+5. Wait for another contributor or user to approve the request after it is proved to be working
+6. Merge it into the `dev` branch
+
+### Improving The Documentation
+
+If you notice the documentation lacking, you can start a PR and add a `fix` branch to update it
+
+## Styleguides
+  
+ Use the `prettier` extension to format the code
+  
+### Commit Messages
+
+Features:
+> feature(<Your feature>): short description
+  
+Fixes:
+> fix(<Your fix>): short description
+
+## Join The Project Team
+
+Upon contributing, you will be under the contributors in the next update for the version.
+
+<!-- omit in toc -->
+## Attribution
+This guide is based on the **contributing-gen**. [Make your own](https://github.com/bttger/contributing-gen)!

LICENSE.txt

@@ -174,19 +174,7 @@
       of your accepting any such warranty or additional liability.
 
    END OF TERMS AND CONDITIONS
-
-   APPENDIX: How to apply the Apache License to your work.
-
-      To apply the Apache License to your work, attach the following
-      boilerplate notice, with the fields enclosed by brackets "[]"
-      replaced with your own identifying information. (Don't include
-      the brackets!)  The text should be enclosed in the appropriate
-      comment syntax for the file format. We also recommend that a
-      file or class name and description of purpose be included on the
-      same "printed page" as the copyright notice for easier
-      identification within third-party archives.
-
-   Copyright [yyyy] [name of copyright owner]
+   Copyright [2023] [Christopher Bartos]
 
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.

README.md

@@ -1,10 +1,22 @@
 # 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.
+> 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:
+
+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 `./src/gptContext.js` file
+
+# Examples
+
+Demo of how to use the extension:
+![](./images/demo-program.gif)
 
-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.
 
 # Installation
 
@@ -18,9 +30,18 @@ Submit -> Submits the query to the api
 
 Refresh -> refreshes the window so that all new files will be available for that session.
 
-User must ctrl+shift+p and click on the `Open GPT Context Panel` option and then add files (before or after), then input the question. 
+- 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
 
-# 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
+
+![Copy individual code](./images/demo-copying-quotes.gif)
+
+# 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:
 
@@ -30,14 +51,11 @@ c:\dev\test\gpt-contextfiles-test\program.js:
 \```
 	window.alert("Hello World!")
 \```
+```
 
+Functions based on the principle of files passed into it
+```
 Selected Files:
 [x] c:\dev\test\gpt-contextfiles-test\program.js
 [ ] c:\dev\test\gpt-contextfiles-test\program2.js
 ```
-
-Expected Ouput:
-
-`
-The window.alert() method is a built-in JavaScript function that displays an alert box with a specified message and an OK button. In this case, the message is "Hello World!".
-`

extension.js

@@ -1,265 +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();
-
-// 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') {
-            const question = message.text;
-            const selectedUris = message.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 },
-                        { role: "assistant", content: 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);
-            }
-        } 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>
-      <body>
-          <h1>GPT Context</h1>
-          <form id="questionForm">
-              <div>
-                  <label for="question">Enter your question:</label>
-                  <input type="text" id="question" name="question" required>
-                  <button type="submit">Submit</button>
-                  <button type="button" onclick="clearSelectedFiles()">Clear</button>
-                  <button type="button" onclick="refreshSelectedFiles()">Refresh</button>
-              </div>
-              <div>
-                <div><pre>${question ? question : ''}</pre></div>
-                ${
-                    apiResponse ? `<div><pre>${apiResponse}</pre></div>` : ''
-                }
-              </div>
-              <div>
-                  <h2>Selected Files:</h2>
-                  ${fileList}
-              </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'
-                      });
-                  }
-
-                  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);
-}
-
-exports.activate = activate;

images/files.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M2 11h1V6.99H2V11zm1-5.01V5.5l.5-.5h4.43l.43.25.43.75h5.71l.5.5v8l-.5.5h-11l-.5-.5V12H1.5l-.5-.5v-9l.5-.5h4.42l.44.25.43.75h5.71l.5.5V6l-1-.03V4H6.5l-.43-.25L5.64 3H2v2.99h1zm5.07.76L7.64 6H4v3h3.15l.41-.74L8 8h6V7H8.5l-.43-.25zM7.45 10H4v4h10V9H8.3l-.41.74-.44.26z"/></svg>

package-lock.json

@@ -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"
       },

package.json

@@ -1,19 +1,45 @@
 {
   "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.1",
+  "description": "Choose the files to pass into GPT to provide a question with multiple files",
+  "version": "0.2.3",
   "engines": {
     "vscode": "^1.79.0"
   },
   "categories": [
-    "Machine Learning"
+    "Machine Learning",
+    "Debuggers",
+    "Formatters",
+    "Linters",
+    "Programming Languages",
+    "Testing",
+    "Snippets"
+  ],
+  "tags": [
+    "16k",
+    "GPT",
+    "ai",
+    "testing",
+    "debugging",
+    "files",
+    "api",
+    "snippets",
+    "openai",
+    "vscode",
+    "extension",
+    "chatbot"
+  ],
+  "relatedTags": [
+    "Artificial Intelligence",
+    "Natural Language Processing",
+    "Code editor"
   ],
   "activationEvents": [
     "onCommand:extension.addFilesToGPTContext",
-    "onCommand:extension.openGPTContextPanel"
+    "onCommand:extension.openGPTContextPanel",
+    "onCommand:extension.gpt-context-sidebar"
   ],
-  "main": "./extension.js",
+  "main": "./src/extension.js",
   "contributes": {
     "commands": [
       {
@@ -34,10 +60,19 @@
         "title": "Clear Selected Files"
       }
     ],
+    "viewsContainers" : {
+      "activitybar": [
+        {
+          "id": "gpt-contextfiles-sidebar-view",
+          "title": "GPT Context",
+          "icon": "images/files.svg"
+        }
+      ]
+    },
     "menus": {
       "explorer/context": [
         {
-          "when": "resourceLangId == javascript",
+          "when": "resourceIsFolder == false",
           "command": "extension.addFilesToGPTContext",
           "group": "navigation"
         }
@@ -50,8 +85,17 @@
           "name": "Selected Files",
           "when": "explorerResourceIsFolder && explorerViewletVisible"
         }
+      ],
+      "gpt-contextfiles-sidebar-view": [
+          {
+              "type": "webview",
+              "id": "gpt-context-sidebar",
+              "name": "Process Queries",
+              "icon": "images/files.svg",
+              "contextualTitle": "GPTContext"
+          }
       ]
-    }
+  }
   },
   "scripts": {
     "lint": "eslint .",
@@ -76,6 +120,6 @@
     "type": "git",
     "url": "https://github.com/Iheuzio/gpt-contextfiles/"
   },
-  "icon": "images/gpt-icon.jpg",
+  "icon": "images/gpt-icon.png",
   "publisher": "Iheuzio"
 }

src/commands.js

@@ -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
+};

src/extension.js

@@ -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;

src/fileDataProvider.js

@@ -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
+};

src/fileItem.js

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

src/gptContext.js

@@ -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
+};

src/webviewPanel.js

@@ -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
+};

vsc-extension-quickstart.md

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