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 `
<html>
<head>
<style>
.panel {
@ -358,7 +359,7 @@ function getWebviewContent(apiResponse = '', question = '') {
display: none;
overflow: hidden;
background-color: #f1f1f1;
width:100%;
width: 100%;
}
.content p {
@ -366,7 +367,8 @@ function getWebviewContent(apiResponse = '', question = '') {
font-size: 14px;
}
.active, .collapsible:hover {
.active,
.collapsible:hover {
background-color: #555;
}
@ -415,22 +417,34 @@ 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>
</div>
<div class="form-group">
<div class="collapsible" onclick="toggleApiResponse()">
<div class="collapsible" onclick="toggleApiResponse()" id="alert-response">
API Response
</div>
<div class="content" id="api-response">
@ -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
@ -457,6 +471,42 @@ function getWebviewContent(apiResponse = '', question = '') {
<script>
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) {
vscode.postMessage({
command: 'toggleFileSelection',
@ -479,7 +529,7 @@ function getWebviewContent(apiResponse = '', question = '') {
function toggleApiResponse() {
const apiResponse = document.getElementById('api-response');
var response = document.getElementById('responses');
if(response === null) {
if (response === null) {
return;
}
apiResponse.classList.toggle('active');
@ -496,8 +546,11 @@ 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 +565,10 @@ function getWebviewContent(apiResponse = '', question = '') {
text: question,
selectedUris: selectedUris
});
});
}
</script>
</body>
</html>
`;
}
@ -556,6 +610,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');
}
});
}