ui.js

import { submitFeedback } from "./feedback.js";

/** handle what needs to be displayed in chat container */
export function appendMessage(content, className, linkId = null, akkordeonId = null, bestToken = null, query = null, answer = null) {
  const messageContainer = document.createElement('div');
  
  if (className === 'user-message') {
    const messageDiv = document.createElement('div');
    messageDiv.textContent = content;
    messageDiv.className = className;
    messageContainer.appendChild(messageDiv);

  } else {
    
    messageContainer.className = 'bot-message-container';

    const numberBox = document.createElement('div');
    numberBox.className = 'number-box';
    
    const messageDiv = document.createElement('div');
    messageDiv.textContent = content;
    messageDiv.className = className;
    
    const panelDiv = document.createElement('div');
    panelDiv.innerHTML = '<i class="fa-solid fa-down-long"></i>';
    panelDiv.className = 'info-panel';
    panelDiv.setAttribute('data-question', encodeURIComponent(content));
    
    messageDiv.onclick = function(event) {
      event.stopPropagation();
      panelDiv.click();
    }
    
    panelDiv.onclick = function (event) {
      event.stopPropagation();
      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>`);
      
      const answerContainer = document.createElement('div');
      answerContainer.className = 'answer-container';
      answerContainer.innerHTML = highlightToken;
      
      messageContainer.parentNode.insertBefore(answerContainer, messageContainer.nextSibling);
      panelDiv.classList.add('active');
    }

    messageContainer.appendChild(numberBox);
    messageContainer.appendChild(messageDiv);
    messageContainer.appendChild(panelDiv);
  }

  const messagesDiv = document.getElementById('messages');
  messagesDiv.appendChild(messageContainer);
  messagesDiv.scrollTop = messagesDiv.scrollHeight;
}

/** gets query from input field and performs search */
export function sendMessage(worker) {
  const userInput = document.getElementById('user-input');
  const message = userInput.value.trim();