cbartos/gpt-contextfiles
1
0
Fork 0
mirror of https://github.com/Iheuzio/gpt-contextfiles.git synced 2025-07-18 14:00:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

feature(copy-code): can copy code

Browse Source
This commit is contained in:
Christopher 2023-06-25 20:43:26 -04:00
parent 1d3bcb2078
commit 77769738c7
1 changed files with 365 additions and 309 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

588
extension.js
View File

@ -184,302 +184,352 @@ function getWebviewContent(apiResponse = '', question = '') {
.join(''); .join('');
return ` return `
<html> <html>
<head>
<style>
.panel {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 50%;
height: 100%;
margin: 0 auto;
background-color: #1e1e1e;
color: #d4d4d4;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.textbox { <head>
width: 100%; <style>
height: 200px; .panel {
resize: both; display: flex;
padding: 10px; flex-direction: column;
} align-items: center;
justify-content: center;
width: 50%;
height: 100%;
margin: 0 auto;
background-color: #1e1e1e;
color: #d4d4d4;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.buttons { .textbox {
display: flex; width: 100%;
justify-content: space-between; height: 200px;
width: 50%; resize: both;
} padding: 10px;
}
.button { .buttons {
flex-grow: 1; display: flex;
background-color: #007acc; justify-content: space-between;
color: #fff; width: 50%;
padding: 10px; }
text-align: center;
cursor: pointer;
border: none;
outline: none;
font-size: 14px;
}
#response { .button {
white-space: pre-wrap; flex-grow: 1;
} background-color: #007acc;
color: #fff;
padding: 10px;
text-align: center;
cursor: pointer;
border: none;
outline: none;
font-size: 14px;
}
#file-list { #response {
margin-top: 20px; white-space: pre-wrap;
border }
}
.form-group { #file-list {
display: flex; margin-top: 20px;
flex-direction: column; border
margin-bottom: 20px; }
width: 100%;
}
.form-group label { .form-group {
margin-bottom: 5px; display: flex;
font-size: 14px; flex-direction: column;
} margin-bottom: 20px;
width: 100%;
}
.form-group input[type="text"] { .form-group label {
padding: 10px; margin-bottom: 5px;
font-size: 14px; font-size: 14px;
border: none; }
outline: none;
background-color: #2d2d2d;
color: #d4d4d4;
}
.form-group input[type="text"]::placeholder { .form-group input[type="text"] {
color: #d4d4d4; padding: 10px;
} font-size: 14px;
border: none;
outline: none;
background-color: #2d2d2d;
color: #d4d4d4;
}
.form-group .button-options { .form-group input[type="text"]::placeholder {
display: flex; color: #d4d4d4;
justify-content: space-between; }
margin-top: 10px;
}
.form-group .button-options button { .form-group .button-options {
padding: 10px; display: flex;
font-size: 14px; justify-content: space-between;
border: none; margin-top: 10px;
outline: none; }
cursor: pointer;
background-color: #007acc;
color: #fff;
}
.form-group .button-options button:hover { .form-group .button-options button {
background-color: #005f8c; padding: 10px;
} font-size: 14px;
border: none;
outline: none;
cursor: pointer;
background-color: #007acc;
color: #fff;
}
.form-group .button-options button:active { .form-group .button-options button:hover {
background-color: #004d73; background-color: #005f8c;
} }
.form-group .button-options button:focus { .form-group .button-options button:active {
box-shadow: 0 0 0 2px rgba(0, 122, 204, 0.5); background-color: #004d73;
} }
.file-list { .form-group .button-options button:focus {
margin-top: 20px; box-shadow: 0 0 0 2px rgba(0, 122, 204, 0.5);
width: 100%; }
}
.file-list h2 { .file-list {
margin-bottom: 10px; margin-top: 20px;
font-size: 14px; width: 100%;
} }
.file-list .file-item { .file-list h2 {
display: flex; margin-bottom: 10px;
align-items: center; font-size: 14px;
margin-bottom: 5px; }
font-size: 14px;
}
.file-list .file-item input[type="checkbox"] { .file-list .file-item {
margin-right: 5px; display: flex;
} align-items: center;
margin-bottom: 5px;
font-size: 14px;
}
.file-list .file-item label { .file-list .file-item input[type="checkbox"] {
margin-bottom: 0; margin-right: 5px;
} }
.file-list .file-item .file-path { .file-list .file-item label {
overflow-wrap: break-word; margin-bottom: 0;
} }
.file-list .file-item .file-path:hover { .file-list .file-item .file-path {
text-decoration: underline; overflow-wrap: break-word;
cursor: pointer; }
}
.file-list .file-item .file-path:active { .file-list .file-item .file-path:hover {
color: #007acc; text-decoration: underline;
} cursor: pointer;
}
.file-list .file-item .file-path:focus { .file-list .file-item .file-path:active {
box-shadow: 0 0 0 2px rgba(0, 122, 204, 0.5); color: #007acc;
} }
.collapsible { .file-list .file-item .file-path:focus {
background-color: #2d2d2d; box-shadow: 0 0 0 2px rgba(0, 122, 204, 0.5);
color: #d4d4d4; }
cursor: pointer;
padding: 10px;
width: 100%;
border: none;
outline: none;
text-align: left;
font-size: 14px;
}
.collapsible:hover { .collapsible {
background-color: #3c3c3c; background-color: #2d2d2d;
} color: #d4d4d4;
cursor: pointer;
padding: 10px;
width: 100%;
border: none;
outline: none;
text-align: left;
font-size: 14px;
}
.collapsible:active { .collapsible:hover {
background-color: #4c4c4c; background-color: #3c3c3c;
} }
.collapsible:focus { .collapsible:active {
box-shadow: 0 0 0 2px rgba(0, 122, 204, 0.5); background-color: #4c4c4c;
} }
.content { .collapsible:focus {
padding: 0 10px; box-shadow: 0 0 0 2px rgba(0, 122, 204, 0.5);
display: none; }
overflow: hidden;
background-color: #f1f1f1;
width:100%;
}
.content p { .content {
margin-top: 0; padding: 0 10px;
font-size: 14px; display: none;
} overflow: hidden;
background-color: #f1f1f1;
width: 100%;
}
.active, .collapsible:hover { .content p {
background-color: #555; margin-top: 0;
} font-size: 14px;
}
.active:after { .active,
content: "\\2212"; .collapsible:hover {
} background-color: #555;
}
.collapsible:after { .active:after {
content: "\\002B"; content: "\\2212";
color: #d4d4d4; }
font-weight: bold;
float: right;
margin-left: 5px;
}
.active:after { .collapsible:after {
content: "\\2212"; content: "\\002B";
} color: #d4d4d4;
font-weight: bold;
float: right;
margin-left: 5px;
}
.collapsible:after { .active:after {
content: "\\002B"; content: "\\2212";
color: #d4d4d4; }
font-weight: bold;
float: right;
margin-left: 5px;
}
#rendered { .collapsible:after {
background-color: #2d2d2d; content: "\\002B";
word-wrap: wrap; color: #d4d4d4;
margin-top: 20px; font-weight: bold;
border: 1px solid white; float: right;
border-radius: 5px; margin-left: 5px;
padding: 10px; }
}
#question-rep { #rendered {
font-weight: bold; background-color: #2d2d2d;
background-color: #2d2d2d; word-wrap: wrap;
word-wrap: wrap; margin-top: 20px;
border: 1px solid white; border: 1px solid white;
border-radius: 5px; border-radius: 5px;
} padding: 10px;
}
div#api-response.content.active { #question-rep {
background-color: #313131; font-weight: bold;
} background-color: #2d2d2d;
word-wrap: wrap;
border: 1px solid white;
border-radius: 5px;
}
</style> div#api-response.content.active {
</head> background-color: #313131;
<body class="panel"> }
<h1>GPT Context</h1>
<form id="questionForm"> #code-block {
<div class="form-group"> padding: 0;
<label for="question">Enter your question:</label> background: none;
<input type="text" id="question" name="question" placeholder="Enter your question" required> border: none;
<div class="button-options"> font: inherit;
<button type="submit">Submit</button> color: inherit;
cursor: pointer;
outline: inherit;
margin: 0;
width: 100%;
text-align: left;
}
</style>
</head>
<body class="panel">
<h1>GPT Context</h1>
<form id="questionForm">
<div class="form-group">
<input type="text" id="question" name="question" placeholder="Enter your question:">
<div class="button-options">
<button type="submit" onclick="submitQuestionApi()">Submit</button>
<button type="button" onclick="clearSelectedFiles()">Clear</button> <button type="button" onclick="clearSelectedFiles()">Clear</button>
<button type="button" onclick="refreshSelectedFiles()">Refresh</button> <button type="button" onclick="refreshSelectedFiles()">Refresh</button>
</div> </div>
</div>
<div class="form-group">
<div class="collapsible" onclick="toggleApiResponse()">
API Response
</div>
<div class="content" id="api-response">
<div id="question-rep">
<p>${question ? '> ' + question : null}</p>
</div>
${
apiResponse ? `
<div id="rendered">
<p id="responses">
<pre id="response">${apiResponse.replace(/```([^```]+)```/g, '<code>$1</code>')}</pre>
</p>
</div>
` : null
}
</div>
</div> </div>
<div class="form-group"> <div class="form-group">
<div class="collapsible" onclick="toggleApiResponse()" id="alert-response">
API Response
</div>
<div class="content" id="api-response">
<div id="question-rep">
<p>${question ? '> ' + question : null}</p>
</div>
${
apiResponse ? `
<div id="rendered">
<p id="responses">
<pre id="response">${apiResponse.replace(/```([^```]+)```/g, '<button onclick="copyCode()" id="code-block"><code>$1</code></button>')}</pre>
</p>
</div>
` : null
}
</div>
</div>
<div class="form-group">
<label for="selected-files">Selected Files:</label> <label for="selected-files">Selected Files:</label>
<div class="file-list"> <div class="file-list">
${fileList ? fileList : '<p class="no-files">No files selected</p>'} ${fileList ? fileList : '<p class="no-files">No files selected</p>'}
</div> </div>
</div> </div>
<script> <script>
const vscode = acquireVsCodeApi(); const vscode = acquireVsCodeApi();
function toggleFileSelection(uri) { function copyCode() {
vscode.postMessage({ event.preventDefault();
command: 'toggleFileSelection', const codeBlocks = document.getElementsByTagName('code');
uri: uri const selectedCodeBlock = event.target.closest('code');
});
}
function clearSelectedFiles() { if (selectedCodeBlock) {
vscode.postMessage({ const codeText = selectedCodeBlock.innerText;
command: 'clearSelectedFiles' const dummyTextArea = document.createElement('textarea');
}); dummyTextArea.value = codeText;
} document.body.appendChild(dummyTextArea);
dummyTextArea.select();
document.execCommand('copy');
document.body.removeChild(dummyTextArea);
function refreshSelectedFiles() { vscode.postMessage({
vscode.postMessage({ command: 'codeCopied'
command: 'refreshFiles' });
}); }
} }
function toggleApiResponse() { // Add an event listener to detect changes in apiResponse
window.addEventListener('DOMContentLoaded', () => {
const observer = new MutationObserver(() => {
if (apiResponse !== null) {
const alert = document.getElementById('alert-response');
alert.style.backgroundColor = '#4CAF50';
}
});
observer.observe(document, {
childList: true,
subtree: true
});
});
function toggleFileSelection(uri) {
vscode.postMessage({
command: 'toggleFileSelection',
uri: uri
});
}
function clearSelectedFiles() {
vscode.postMessage({
command: 'clearSelectedFiles'
});
}
function refreshSelectedFiles() {
vscode.postMessage({
command: 'refreshFiles'
});
}
function toggleApiResponse() {
const apiResponse = document.getElementById('api-response'); const apiResponse = document.getElementById('api-response');
var response = document.getElementById('responses'); var response = document.getElementById('responses');
if(response === null) { if (response === null) {
return; return;
} }
apiResponse.classList.toggle('active'); apiResponse.classList.toggle('active');
@ -495,28 +545,32 @@ function getWebviewContent(apiResponse = '', question = '') {
} }
const form = document.getElementById('questionForm'); const form = document.getElementById('questionForm');
form.addEventListener('submit', event => { function submitQuestionApi() {
event.preventDefault(); event.preventDefault();
const question = document.getElementById('question').value; if (document.getElementById('question').value === '' || document.getElementById('question').value === null) {
const checkboxes = document.querySelectorAll('input[type="checkbox"]'); return;
const selectedUris = []; }
checkboxes.forEach(checkbox => { const question = document.getElementById('question').value;
if (checkbox.checked) { const checkboxes = document.querySelectorAll('input[type="checkbox"]');
const uri = checkbox.getAttribute('data-uri'); const selectedUris = [];
selectedUris.push(uri); checkboxes.forEach(checkbox => {
} if (checkbox.checked) {
}); const uri = checkbox.getAttribute('data-uri');
vscode.postMessage({ selectedUris.push(uri);
command: 'submitQuestion', }
text: question, });
selectedUris: selectedUris vscode.postMessage({
}); command: 'submitQuestion',
}); text: question,
</script> selectedUris: selectedUris
</body> });
</html> }
`; </script>
</body>
</html>
`;
} }
@ -556,6 +610,8 @@ function activate(context) {
webviewView.webview.html = getWebviewContent(); webviewView.webview.html = getWebviewContent();
} else if (message.command === 'submitQuestion') { } else if (message.command === 'submitQuestion') {
await handleQuestionSubmission(webviewView, message.text, message.selectedUris); await handleQuestionSubmission(webviewView, message.text, message.selectedUris);
} else if (message.command === 'codeCopied') {
vscode.window.showInformationMessage('Code copied to clipboard');
} }
}); });
} }