diff --git a/modules/feedback.js b/modules/feedback.js old mode 100644 new mode 100755 index 40f13bb6b5727d30e0e9b7911e3cd4442345241a..897dad817cc3cb4ece2ceaf00d94113493f04968 --- a/modules/feedback.js +++ b/modules/feedback.js @@ -1,49 +1,23 @@ -/** open mail client of user with prewritten message and stats */ +/** feedback now opens a Google Form prefilled with our parameters */ export function submitFeedback(query, bestAnswers, feedback) { - /** temporary mail adress, adjust if needed */ - const feedbackAdress = 'huepfen-richtlinie.7r@icloud.com'; - const timestamp = new Date().toISOString(); - let subject = ''; - let message = ''; + const url = 'https://docs.google.com/forms/d/e/1FAIpQLScv6hLxUZN42pZYkW28FL3WkXZbL_dzdGo0sE-LdeJbIzTi2g/viewform?usp=pp_url'; const bestAnswersAsString = Object.entries(bestAnswers) - .map(([question, token]) => `> Question: ${question} \n > Answer: ${token}\n`) - .join("\n\n"); - - - 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: ... - \nDetails below: - \nYou asked: ${query} - \nMost fitting responses:\n\n${bestAnswersAsString}\nFeedback: ${feedback}\nTimestamp: ${timestamp} - \nKeep it up! - \nBest regards`; - - } 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: ... - \nDetails below: - \nYou asked: ${query} - \nMost fitting responses: ${bestAnswersAsString}\nFeedback: ${feedback}\nTimestamp: ${timestamp} - \nI hope this feedback lets you improve the experience. - \nBest regards`; - } - - - const newSubject = encodeURIComponent(subject); - const body = encodeURIComponent(message); - const mailtoLink = `mailto:${feedbackAdress}?subject=${newSubject}&body=${body}`; - - window.location.href = mailtoLink; -} + .map(([question, token]) => `> Question: ${question}\n> Answer: ${token}`) + .join('\n\n'); + + const encodedQuery = encodeURIComponent(query); + const encodedBestAnswers = encodeURIComponent(bestAnswersAsString); + const formFeedback = `entry.293085603=${feedback}`; + const formQuery = `entry.430302024=${encodedQuery}`; + const formAnswer = `entry.1738087812=${encodedBestAnswers}`; + + const newUrl = `${url}&${formFeedback}&${formQuery}&${formAnswer}`; + window.open(newUrl, '_blank'); +} diff --git a/modules/ui.js b/modules/ui.js old mode 100644 new mode 100755 index e46a55d1691449169116e7cbe8ba2b327b3d4df3..80d9bee18fdf8f59887a02dd6171cd3d52115851 --- a/modules/ui.js +++ b/modules/ui.js @@ -99,14 +99,14 @@ 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, 'good'); + submitFeedback(query, bestTokens, 'Yes'); }; const minusButton = document.createElement('button'); minusButton.innerHTML = '<i class="fa-solid fa-thumbs-down"></i>'; minusButton.className = 'feedback-button thumbs-down'; minusButton.onclick = function () { - submitFeedback(query, bestTokens, 'bad'); + submitFeedback(query, bestTokens, 'No'); }; feedbackContainer.appendChild(plusButton); diff --git a/styles.css b/styles.css old mode 100644 new mode 100755 index 9d7f811801add3e5756c5bc176e0e8a7111bacb5..e7b8229293c6830179360ffd53e3ab5ac9df4570 --- a/styles.css +++ b/styles.css @@ -1,13 +1,13 @@ body { - font-family: Arial, sans-serif; + font-family: Arial, sans-serif; } #chatbox { position: sticky; - max-height: 900px; + max-height: 1200px; overflow: hidden; display: flex; - flex-direction: column; + flex-direction: column; } #chatbox-title { @@ -29,7 +29,7 @@ left: 10px; padding: 10px; display: flex; - max-height: 300px; + max-height: 500px; flex-direction: column; overflow-x: hidden; z-index: -3; @@ -89,7 +89,8 @@ color: white; margin-left: 40px; margin: 10px 2; - max-width: 60%; + max-width: 75%; + font-size: 18px; word-wrap: break-word; cursor: default; opacity: 0; @@ -117,9 +118,9 @@ padding: 50px; border-radius: 4px; font-size: 14px; - max-width: 50%; + max-width: 50%; vertical-align: top; - margin-right: 20px; + margin-right: 20px; } .bot-message { @@ -129,10 +130,11 @@ margin-left: 10px; margin: 10px 2; max-width: 60%; + font-size: 17px; word-wrap: break-word; text-align: middle; z-index: 100; - cursor: pointer; + cursor: pointer; } .bot-intro { @@ -143,12 +145,12 @@ margin: 10px 2; max-width: 60%; word-wrap: break-word; - text-align: middle; + text-align: middle; } .bot-message-container { display: flex; - align-items: stretch; + align-items: stretch; } .bot-message:hover {