diff --git a/index.js b/index.js index 171c923a686d68a18d03b6a9f3155c97336f1c39..31f29fb6fc8babd8bceb4f2dfbeda31640856600 100644 --- a/index.js +++ b/index.js @@ -90,7 +90,6 @@ inputElement.addEventListener('input', function (event) { window.focus(); /** open the answer field in chat view for selected panel */ - console.log("inside", output.question); resultLink.onclick = function () { linkAndClick(output.question); }; diff --git a/modules/feedback.js b/modules/feedback.js index a7b54eb168fa8b56d4ebb0884da752708ab0ecb6..40f13bb6b5727d30e0e9b7911e3cd4442345241a 100644 --- a/modules/feedback.js +++ b/modules/feedback.js @@ -15,22 +15,25 @@ export function submitFeedback(query, bestAnswers, feedback) { .join("\n\n"); - if (feedback === 'up') { + if (feedback === 'good') { subject = 'Positive Feedback: FAQ Search Feature'; message = `Hello, \nI used your FAQ search feature and was pleased with the result. \nI also have some additional suggestions: ... - \nBest Tokens:\n\n${bestAnswersAsString}\nFeedback: ${feedback}\nTimestamp: ${timestamp}\nQuery: ${query} + \nDetails below: + \nYou asked: ${query} + \nMost fitting responses:\n\n${bestAnswersAsString}\nFeedback: ${feedback}\nTimestamp: ${timestamp} \nKeep it up! \nBest regards`; - } else if (feedback === 'down') { + } else if (feedback === 'bad') { subject = 'Negative Feedback: FAQ Search Feature'; message = `Hello, \nI tried used FAQ search feature, and unfortunately, I was not satisfied with this result. \nI also have some additional suggestions: ... - Detail below: - \nBest Tokens: ${bestAnswersAsString}\nFeedback: ${feedback}\nTimestamp: ${timestamp}\nQuery: ${query} + \nDetails below: + \nYou asked: ${query} + \nMost fitting responses: ${bestAnswersAsString}\nFeedback: ${feedback}\nTimestamp: ${timestamp} \nI hope this feedback lets you improve the experience. \nBest regards`; } diff --git a/modules/ui.js b/modules/ui.js index 42907bc8fe51c79bb7dfd2d7205c8c3d52df22e1..32d7305ff1096454ae3248db71e263ceb1ef3451 100644 --- a/modules/ui.js +++ b/modules/ui.js @@ -15,7 +15,6 @@ export function appendMessage(content, className, linkId = null, akkordeonId = n messageContainer.className = 'bot-message-container'; const numberBox = document.createElement('div'); - numberBox.textContent = "⦿"; numberBox.className = 'number-box'; const messageDiv = document.createElement('div'); @@ -23,14 +22,15 @@ export function appendMessage(content, className, linkId = null, akkordeonId = n messageDiv.className = className; const panelDiv = document.createElement('div'); - panelDiv.textContent = '➜'; + panelDiv.innerHTML = '<i class="fa-solid fa-down-long"></i>'; panelDiv.className = 'info-panel'; panelDiv.setAttribute('data-question', encodeURIComponent(content)); - messageDiv.onclick = function () { - copyToClipboard(content); - }; + messageDiv.onclick = function(event) { + event.stopPropagation(); + panelDiv.click(); + } panelDiv.onclick = function (event) { @@ -39,9 +39,12 @@ export function appendMessage(content, className, linkId = null, akkordeonId = n let nextElem = messageContainer.nextElementSibling; if (nextElem && nextElem.classList.contains('answer-container')) { nextElem.remove(); + panelDiv.innerHTML = '<i class="fa-solid fa-down-long"></i>'; panelDiv.classList.remove('active'); + return; } + panelDiv.innerHTML = '<i class="fa-solid fa-up-long"></i>'; let highlightToken = answer.replace(bestToken, `<span class="highlight">${bestToken}</span>`); @@ -52,6 +55,10 @@ export function appendMessage(content, className, linkId = null, akkordeonId = n messageContainer.parentNode.insertBefore(answerContainer, messageContainer.nextSibling); panelDiv.classList.add('active'); + setTimeout(() => { + answerContainer.scrollIntoView({ behavior: 'smooth', block: 'start' }); + }, 250); + } @@ -99,48 +106,6 @@ export function sendMessage(worker) { } } -window.copyToClipboard = copyToClipboard; - -export function copyToClipboard(text) { - - window.navigator.clipboard.writeText(text) - .then(() => { - copySuccsess(); - }) -} - -/** show user that clipboard action was successful */ -let currentConfirm = null; -let showTimeoutId = null; -let hideTimeoutId = null; -let removeTimeoutId = null; - -function copySuccsess() { - - if (currentConfirm) { - clearTimeout(showTimeoutId); - clearTimeout(hideTimeoutId); - clearTimeout(removeTimeoutId); - currentConfirm.remove(); - } - - currentConfirm = document.createElement('div'); - currentConfirm.innerText = 'Question copied to clipboard!'; - currentConfirm.classList.add('confirm'); - document.body.appendChild(currentConfirm); - - showTimeoutId = setTimeout(() => { - currentConfirm.classList.add('visible'); - }, 10); - - hideTimeoutId = setTimeout(() => { - currentConfirm.classList.remove('visible'); - removeTimeoutId = setTimeout(() => { - currentConfirm.remove(); - currentConfirm = null; - }, 500); - }, 2000); -} /** new feedback buttons with font-awesome style */ export function drawFeedbackButtons(query, bestTokens) { @@ -155,7 +120,7 @@ export function drawFeedbackButtons(query, bestTokens) { plusButton.innerHTML = '<i class="fa-solid fa-thumbs-up"></i>'; plusButton.className = 'feedback-button thumbs-up'; plusButton.onclick = function () { - submitFeedback(query, bestTokens, 'up'); + submitFeedback(query, bestTokens, 'good'); }; @@ -164,7 +129,7 @@ export function drawFeedbackButtons(query, bestTokens) { minusButton.className = 'feedback-button thumbs-down'; minusButton.onclick = function () { - submitFeedback(query, bestTokens, 'down'); + submitFeedback(query, bestTokens, 'bad'); }; feedbackContainer.appendChild(plusButton); diff --git a/styles.css b/styles.css index 9ec13c62aa87a586c65056d9a21302ecb0ec2171..63c4c9e9590f73a7226b48e3b37dcc632accb905 100644 --- a/styles.css +++ b/styles.css @@ -92,7 +92,7 @@ align-self: flex-start; background-color: #003865; color: white; - margin-left: 52px; + margin-left: 40px; margin: 10px 2; max-width: 60%; word-wrap: break-word; @@ -174,8 +174,7 @@ .bot-message-container { display: flex; align-items: stretch; - - + } .bot-message:hover {