Merge pull request #29 from Iheuzio/feature/copy-code

feature(copy-code): add a copy, button improved ui
This commit is contained in:
Iheuzio 2023-06-26 17:49:25 -04:00 committed by GitHub
commit 7af3e2b332
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -98,7 +98,7 @@ async function handleQuestionSubmission(panel, question, selectedUris) {
// Call OpenAI API with the question and file contents // Call OpenAI API with the question and file contents
try { try {
const chatCompletion = await openai.createChatCompletion({ const chatCompletion = await openai.createChatCompletion({
model: "gpt-3.5-turbo-16k", model: "gpt-3.5-turbo",
messages: [ messages: [
{ role: "system", content: "Answer the coding questions, only provide the code and documentation, explaining the solution after providing the code." }, { role: "system", content: "Answer the coding questions, only provide the code and documentation, explaining the solution after providing the code." },
{ role: "user", content: question + "\n" + fileContents}, { role: "user", content: question + "\n" + fileContents},
@ -418,17 +418,41 @@ function getWebviewContent(apiResponse = '', question = '') {
} }
#code-block { #code-block {
padding: 0; padding: 10px 0 10px 10px;
background: none; padding-
border-radius: 5px;
background-color: black;
border: none; border: none;
font: inherit; font: inherit;
color: inherit; color: inherit;
cursor: pointer; cursor: pointer;
outline: inherit; outline: inherit;
margin: 0;
width: 100%; width: 100%;
text-align: left; 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> </style>
</head> </head>
@ -455,7 +479,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, '<button onclick="copyCode()" id="code-block"><code>$1</code></button>')}</pre> <pre id="response">${apiResponse.replace(/```([^```]+)```/g, '<div id="code-block"><code>$1</code><button onclick="copyCode(event)" id="copy-button">copy</button></div>')}</pre>
</p> </p>
</div> </div>
` : null ` : null
@ -476,13 +500,12 @@ function getWebviewContent(apiResponse = '', question = '') {
toggleApiResponse(); toggleApiResponse();
} }
function copyCode() { function copyCode(event) {
event.preventDefault(); event.preventDefault();
const codeBlocks = document.getElementsByTagName('code'); const codeBlock = event.target.parentNode.querySelector('code');
const selectedCodeBlock = event.target.closest('code');
if (selectedCodeBlock) { if (codeBlock) {
const codeText = selectedCodeBlock.innerText; const codeText = codeBlock.innerText;
const dummyTextArea = document.createElement('textarea'); const dummyTextArea = document.createElement('textarea');
dummyTextArea.value = codeText; dummyTextArea.value = codeText;
document.body.appendChild(dummyTextArea); document.body.appendChild(dummyTextArea);