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

feature(code-box): Can copy code and load responses
2025-07-18 14:00:48 +00:00 · 2023-06-25 22:18:45 -04:00 · 2023-06-25 22:18:45 -04:00 · 12302fb271
commit 12302fb271
parent 1d3bcb2078 b6d3e4f6e0
3 changed files with 360 additions and 321 deletions
--- a/README.md
+++ b/README.md
@ -1,10 +1,6 @@
 # gpt-contextfiles

-** currently in development, if you'll like to contribute or provide any feedback check out the [link](https://github.com/Iheuzio/gpt-contextfiles/issues) **
-
-I was annoyed with copying responses into chatgpt and other LLMs for debugging my code across files, so I decided to make an extension that will do that.
-
-You simply right click each file you want to pass through, check or uncheck the checkbox, then enter your question and pass along the response over the api to your LLM.
+> if you'll like to contribute or provide any feedback check out the [link](https://github.com/Iheuzio/gpt-contextfiles/issues)

 This extension uses the openai api, there are many models avaliable:

@ -14,7 +10,11 @@ https://openai.com/pricing

 If you wish to change the model, you must change the model in the extension.js file

-https://platform.openai.com/docs/models/gpt-3-5
+# Examples
+
+Demo of how to use the extension:
+![](./images/demo-program.gif)
+

 # Installation

@ -31,13 +31,8 @@ Refresh -> refreshes the window so that all new files will be available for that
 - Right click to add files to the context window
 - Click on the extension addon to open the context window, refresh to update the files to check.
 - Select the files uses checkboxes
- After submit is pressed, wait until the question disappears, this means the query is processed by openai and was fully sent
- Click `API Response` to view your query
-
-# Examples
-
-Demo of how to use the extension:
-![](./images/demo-program.gif)
+- Wait for response to be returned
+- Copy the code (orange portion) and paste it into your code editor

 # How it works

--- a/extension.js
+++ b/extension.js
@ -185,6 +185,7 @@ function getWebviewContent(apiResponse = '', question = '') {

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