From 28f3b1f4553608232e15a10593a1e12b3b9ca5d2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Konrad=20V=C3=B6lkel?= <konrad.voelkel@hhu.de>
Date: Fri, 28 Feb 2025 16:16:44 +0100
Subject: [PATCH] stylistic changes
---
index.js | 1 -
modules/feedback.js | 13 ++++++----
modules/ui.js | 63 ++++++++++-----------------------------------
styles.css | 5 ++--
4 files changed, 24 insertions(+), 58 deletions(-)
diff --git a/index.js b/index.js
index 171c923..31f29fb 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 a7b54eb..40f13bb 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 42907bc..32d7305 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 9ec13c6..63c4c9e 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 {
--
GitLab