stylistic changes

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);
       };

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`;
   }

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);

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;
@@ -175,7 +175,6 @@
              display: flex;
              align-items: stretch;
             
-             
         }
 
         .bot-message:hover {