tener('message', async event => { document.body.scrollIntoView(false); const message = event.data; let chatContainer; let spanElements; switch (message.command) { case 'userMessage': chatContainer = document.getElementById('chat-container'); chatContainer.innerHTML = chatContainer.innerHTML + messageUserContainer(message); break; case 'thinking': chatContainer = document.getElementById('chat-container'); chatContainer.innerHTML = chatContainer.innerHTML + thinkingContainer(message.thinkID); thinkingContainerAddElements(message); break; case 'response': // Hide thinking var thinkContainer = document.getElementById(`think-${message.thinkID}`); thinkContainer.style.display = 'none'; // Load message response chatContainer = document.getElementById('chat-container'); chatContainer.innerHTML = chatContainer.innerHTML + messageGptContainer(message.thinkID); currentID = message.thinkID; currentMessage = message.message.message; // document.getElementById("gpt-" + currentID).innerHTML += currentMessage.charAt(0); messageGptContainerAddElements(message); await typeWriter(); i = 1; break; case 'clearQuestion': question = ""; var questionContainer = document.getElementById(`askQuestion`); questionContainer.value = ""; break; case 'enable': var cardsContainer = document.getElementById(`cards-container`); cardsContainer.style.cursor = 'auto'; var explainFile = document.getElementById(`explainFile`); explainFile.style.cursor = 'pointer'; explainFile.style.pointerEvents = 'auto'; var explainResults = document.getElementById(`explainResults`); explainResults.style.cursor = 'pointer'; explainResults.style.pointerEvents = 'auto'; var explainRemediations = document.getElementById(`explainRemediations`); explainRemediations.style.cursor = 'pointer'; explainRemediations.style.pointerEvents = 'auto'; var askQuestion = document.getElementById(`askQuestion`); askQuestion.style.cursor = 'pointer'; askQuestion.style.pointerEvents = 'auto'; var userQuestion = document.getElementById(`userQuestion`); userQuestion.disabled = false; userQuestion.style.cursor = 'pointer'; break; case 'disable': var cardsContainerDis = document.getElementById(`cards-container`); cardsContainerDis.style.cursor = 'not-allowed'; var explainFileDis = document.getElementById(`explainFile`); explainFileDis.style.pointerEvents = 'none'; var explainResultsDis = document.getElementById(`explainResults`); explainResultsDis.style.pointerEvents = 'none'; var explainRemediationsDis = document.getElementById(`explainRemediations`); explainRemediationsDis.style.pointerEvents = 'none'; var userQuestionDis = document.getElementById(`userQuestion`); userQuestionDis.disabled = true; userQuestionDis.style.cursor = 'not-allowed'; break; case 'enableSast': var userQuestion = document.getElementById(`userQuestion`); userQuestion.disabled = false; userQuestion.style.cursor = 'pointer'; break; case 'disableSast': var userQuestionDis = document.getElementById(`userQuestion`); userQuestionDis.disabled = true; userQuestionDis.style.cursor = 'not-allowed'; break; case 'showGptPanel': var innerBodySast = document.getElementById(`innerBodySast`); innerBodySast.style.display = 'block'; innerBodySast.innerHTML = `
`; askQuestionListener(); backTopButton(); break; } document.body.scrollIntoView(false); const paragraphs = document.querySelectorAll('.animated-text'); paragraphs.forEach((paragraph) => { paragraph.addEventListener('animationend', () => { paragraph.classList.remove('animated-text'); }); }); }); function thinkingContainer(thinkID) { thinkID = parseInt(thinkID); let html = `
AI Security Champion

Thinking ...

`; return html; } function thinkingContainerAddElements(message){ var messageIcon = message.icon.external ? message.icon.external : message.icon; var iconUrl = new URL(messageIcon); var iconImage = document.createElement("img"); iconImage.setAttribute('src',iconUrl); iconImage.setAttribute('class','avatar'); iconImage.setAttribute('alt','Avatar'); var imageSpan=document.getElementById('aiSecurityChampionImageDiv-'+message.thinkID); imageSpan.insertBefore(iconImage,imageSpan.firstChild); } function messageGptContainer(id) { id = parseInt(id); let html = `
AI Security Champion

`; return html; } function messageGptContainerAddElements(message){ var messageGptMessageIcon = message.icon.external ? message.icon.external : message.icon; var msgContainerIconUrl = new URL(messageGptMessageIcon); var messageContainerIconImage = document.createElement("img"); messageContainerIconImage.setAttribute('src',msgContainerIconUrl.toString()); messageContainerIconImage.setAttribute('class','avatar'); messageContainerIconImage.setAttribute('alt','Avatar'); var messageContainerImageDiv=document.getElementById('messageGptContainerIconDiv-'+message.thinkID); messageContainerImageDiv.insertBefore(messageContainerIconImage,messageContainerImageDiv.firstChild); } function messageUserContainer(message) { var cardDiv = document.createElement('div'); cardDiv.setAttribute('class','card'); cardDiv.setAttribute('style','border:none;background:#6769725c;margin-top:0.5em;'); var cardBodyDiv = document.createElement('div'); cardBodyDiv.setAttribute('class','card-body'); var imageRowDiv = document.createElement('div'); imageRowDiv.setAttribute('class','row'); var messageUserContainerImageDiv = document.createElement('div'); messageUserContainerImageDiv.setAttribute('class','col'); var messageUserContainerIconUrl = new URL("https://" + message.icon.authority + message.icon.path); var messageUserContainerIconImage = document.createElement("img"); messageUserContainerIconImage.setAttribute('src',messageUserContainerIconUrl); messageUserContainerIconImage.setAttribute('class','avatar'); messageUserContainerIconImage.setAttribute('alt','Avatar'); messageUserContainerImageDiv.appendChild(messageUserContainerIconImage); var user=document.createTextNode(' '+message.message.user+' '); messageUserContainerImageDiv.appendChild(user); imageRowDiv.appendChild(messageUserContainerImageDiv); var messageRowDiv = document.createElement('div'); messageRowDiv.setAttribute('class','row'); messageRowDiv.setAttribute('style','margin-top:0.8em'); var messageDiv = document.createElement('div'); messageDiv.setAttribute('class','col'); var messageUserContainerPara=document.createElement('p'); var msg=document.createTextNode(' '+message.message.message+' '); messageUserContainerPara.appendChild(msg); messageDiv.appendChild(messageUserContainerPara); messageRowDiv.appendChild(messageDiv); cardBodyDiv.appendChild(imageRowDiv); cardBodyDiv.appendChild(messageRowDiv); cardDiv.appendChild(cardBodyDiv); return cardDiv.outerHTML; } document.querySelectorAll("[id^='gpt-settings']").forEach(element => { element.addEventListener('click', () => { vscode.postMessage({ command: 'openSettings', }); }); }); backTopButton(); function backTopButton() { // Go back to the top button let mybutton = document.getElementById("btn-back-to-top"); // When the user scrolls down 20px from the top, the button appears window.onscroll = function () { if (mybutton) { scrollFunction(mybutton); } }; // When the user clicks on the button, scroll back to the top if (mybutton) { mybutton.addEventListener("click", backToTop); } } function scrollFunction(mybutton) { if ( document.body.scrollTop > 20 || document.documentElement.scrollTop > 20 ) { mybutton.style.display = "block"; } else { mybutton.style.display = "none"; } } function backToTop() { window.scrollTo({ top: 0, behavior: 'smooth' }); } function askQuestionListener() { document.querySelectorAll("[id^='askQuestion']").forEach(element => { element.addEventListener('change', (e) => { // @ts-ignore question = e.target.value; }); element.addEventListener('keypress', (e) => { var userQuestionDis = document.getElementById(`userQuestion`); // case the user presses enter then we send the message but only if it is not waiting for a response from gpt if (e.key === 'Enter' && !e.altKey && userQuestionDis.style.cursor !== 'not-allowed' && e.target.value.length > 0) { vscode.postMessage({ command: 'userQuestion', question: e.target.value }); } // case the user presses alt enter then we add a new line if (e.key === 'Enter' && e.altKey && e.target.value.length > 0) { e.target.value += "\n"; } }); }); document.querySelectorAll("[id^='userQuestion']").forEach(element => { element.addEventListener('click', () => { if (question.length > 0) { vscode.postMessage({ command: 'userQuestion', question: question }); } }); }); } }());ØA —Eoúô