feature(copy-code): can copy code

This commit is contained in:
Christopher 2023-06-25 20:43:26 -04:00
parent 1d3bcb2078
commit 77769738c7

View File

@ -185,6 +185,7 @@ function getWebviewContent(apiResponse = '', question = '') {
return ` return `
<html> <html>
<head> <head>
<style> <style>
.panel { .panel {
@ -366,7 +367,8 @@ function getWebviewContent(apiResponse = '', question = '') {
font-size: 14px; font-size: 14px;
} }
.active, .collapsible:hover { .active,
.collapsible:hover {
background-color: #555; background-color: #555;
} }
@ -415,22 +417,34 @@ function getWebviewContent(apiResponse = '', question = '') {
background-color: #313131; 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> </style>
</head> </head>
<body class="panel"> <body class="panel">
<h1>GPT Context</h1> <h1>GPT Context</h1>
<form id="questionForm"> <form id="questionForm">
<div class="form-group"> <div class="form-group">
<label for="question">Enter your question:</label> <input type="text" id="question" name="question" placeholder="Enter your question:">
<input type="text" id="question" name="question" placeholder="Enter your question" required>
<div class="button-options"> <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="clearSelectedFiles()">Clear</button>
<button type="button" onclick="refreshSelectedFiles()">Refresh</button> <button type="button" onclick="refreshSelectedFiles()">Refresh</button>
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
<div class="collapsible" onclick="toggleApiResponse()"> <div class="collapsible" onclick="toggleApiResponse()" id="alert-response">
API Response API Response
</div> </div>
<div class="content" id="api-response"> <div class="content" id="api-response">
@ -441,7 +455,7 @@ function getWebviewContent(apiResponse = '', question = '') {
apiResponse ? ` apiResponse ? `
<div id="rendered"> <div id="rendered">
<p id="responses"> <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> </p>
</div> </div>
` : null ` : null
@ -457,6 +471,42 @@ function getWebviewContent(apiResponse = '', question = '') {
<script> <script>
const vscode = acquireVsCodeApi(); const vscode = acquireVsCodeApi();
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'
});
}
}
// 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) { function toggleFileSelection(uri) {
vscode.postMessage({ vscode.postMessage({
command: 'toggleFileSelection', command: 'toggleFileSelection',
@ -496,8 +546,11 @@ function getWebviewContent(apiResponse = '', question = '') {
const form = document.getElementById('questionForm'); const form = document.getElementById('questionForm');
form.addEventListener('submit', event => { function submitQuestionApi() {
event.preventDefault(); event.preventDefault();
if (document.getElementById('question').value === '' || document.getElementById('question').value === null) {
return;
}
const question = document.getElementById('question').value; const question = document.getElementById('question').value;
const checkboxes = document.querySelectorAll('input[type="checkbox"]'); const checkboxes = document.querySelectorAll('input[type="checkbox"]');
const selectedUris = []; const selectedUris = [];
@ -512,9 +565,10 @@ function getWebviewContent(apiResponse = '', question = '') {
text: question, text: question,
selectedUris: selectedUris selectedUris: selectedUris
}); });
}); }
</script> </script>
</body> </body>
</html> </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');
} }
}); });
} }