var chatContainer = document.createElement("div");
          chatContainer.id = "chatbot-chat-container";
          document.body.appendChild(chatContainer);
          const el = document.querySelector("#chatbot-chat-container")
          const shadow = el.attachShadow({ mode: "open" });
          shadow.innerHTML =  `<style>
    .chatbot-shadow-container * {
    box-sizing: border-box;
    line-height: normal;
    }

    .chatbot-shadow-container {
    font-family: Tahoma, sans-serif;
    }

    .chatbot-chat-toggle {
    background-color: #024da8;
    color: white;
    position: fixed;
    right: 10px;
    bottom: 10px;
    padding: 10px 15px;
    border-radius: 50px;
    cursor: pointer;
    display: flex;
    }

    .chatbot-chat-icon {
    width: 23px;
    margin-right: 5px;
    }

    .chatbot-close-icon {
    cursor: pointer;
    }



    /* Consent view style */

    input.chatbot-input-style {
    height: 44px;
    width: 100%;
    border: 2px solid #dadada;
    color: black;
    border-radius: 5px;
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 0 15px;
    }

    input.chatbot-input-style::placeholder {
    color: #dadada;
    }

    .chatbot-checkbox-container label {
    display: block;
    margin-bottom: 10px;
    }

    .chatbot-checkbox-container input[type="checkbox"] {
    margin-right: 5px;
    }

    .chatbot-checkbox-container p {
    margin-top: 5px;
    font-size: 0.9em;
    }

    .chatbot-consent-text {
    font-size: 8px;
    margin-top: 5px;
    color: #C4C1C1;
    }

    button.chatbot-start-chat-btn {
    background: #024da8;
    height: 50px;
    border: 0;
    border-radius: 24px;
    padding: 10px 20px;
    color: white;
    position: absolute;
    right: 0;
    bottom: 0;
    margin-right: 20px;
    margin-bottom: 20px;
    cursor: pointer;
    font-size: 17px;
    }

    .chatbot-checkbox-option {
    font-size: 10px;
    }

    #chatbot-chat-body.visible {
    opacity: 1;
    max-height: 1000px;
    }

    .chatbot-information-text {
    font-size: 12px;
    padding-top: 25px;
    margin-bottom: 0;
    }

    #chatbot-consent {
    padding: 10px 18px;
    }




    /* Chat body style */
    #chatbot-chat-body {
    overflow: auto;
    max-height: 0;
    opacity: 0;
    transition: opacity 0.5s, max-height 0.5s ease-out;
    max-width: 384px;
    border-radius: 15px;
    position: fixed;
    bottom: 60px;
    right: 10px;
    background-color: white;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    z-index: 100000;
    }

    #chatbot-header {
        padding: 8px 15px;
        color: white;
        background-color: #024da8;
        height: 48px;
        display: flex;
        align-items: center;
        font-weight: bold;
        justify-content: space-between;
    }

    #chatbot-main {
        min-height: 400px;
    }


    .chatbot-shadow {
        position: absolute;
        top: -10px;
        left: 0;
        width: 100%;
        height: 10px;
        background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 1%, rgba(255, 255, 255, 0) 100%);
    }

    .chatbot-chat-messages {
        overflow-y: scroll;
        height: 350px;
        padding: 10px 18px;
    }

    .chatbot-chat-messages::-webkit-scrollbar {
        display: none;
    }

    .chatbot-message {
        margin-bottom: 10px;
    }

    .chatbot-message.chatbot-sent {
        text-align: right;
    }

    .chatbot-message.chatbot-received {
        text-align: left;
    }

    .chatbot-message .chatbot-message-content {
        display: inline-block;
        max-width: 86%;
        padding: 10px;
        border-radius: 20px;
        background-color: #f1f0f0;
    }

    .chatbot-message.chatbot-sent .chatbot-message-content {
        background-color: #024da8;
        color: white;
        font-size: 12px;
    }

    .chatbot-message.chatbot-received .chatbot-message-content {
        background-color: transparent;
        border: 1px solid #dadada;
        color: #8d8d8d;
        font-size: 12px;
    }


    .chatbot-input-container textarea {
        line-height: 18px;
        height: 22px;
        font-size: 13px;
        scrollbar-width: none;
        resize: none;
        flex-grow: 1;
        border: 0;
        font-family: Tahoma, sans-serif;
        background-color: unset;
        padding: unset;
    }

    .chatbot-input-container textarea:focus {
        outline: none;
        box-shadow: none;
    }

    #chatbot-message-input::placeholder {
        font-family: Tahoma, sans-serif;
        font-size: 13px;
        color: #dadada !important;
    }

    #chatbot-send-message-button {
        background-color: transparent;
        border: 0;
        cursor: pointer;
        display: flex;
        padding: unset;
        box-shadow: unset;
    }

    #chatbot-send-message-button img {
        width: 16px;
    }

    #chatbot-send-message-button:disabled {
        cursor: not-allowed;
    }

    .chatbot-message-content p {
        margin: 0;
        word-wrap: break-word;
    }


    
    .chatbot-container {
        display: flex;
        flex-direction: column;
        overflow: hidden;
        flex-grow: 1;
    }

    .chatbot-content {
        flex-grow: 1;
        overflow-y: auto;
        background-color: white;
    }


    .chatbot-footer {
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        width: 100%;
        overflow: hidden;
    }

    .chatbot-footer-header {
        display: flex;
        align-items: center;
        background-color: transparent;
        overflow-x: auto;
        overflow-y: hidden;
        flex-shrink: 0;
    }

    .chatbot-footer-content {
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding: 16px;
        border-top: 1px solid #e5e7eb;
        background-color: #f3f4f6;
    }


    .chatbot-input-container {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 4px 16px;
        background-color: white;
        border-radius: 80px;
        border: 1px solid #d1d5db;
        cursor: text;
        width: 100%;
    }

    .chatbot-footer-note {
        display: flex;
        justify-content: center;
        padding-bottom: 16px;
        background-color: #f3f4f6;
        color: #4b5563;
        font-size: 12px;
    }

    #suggested-questions-container {
        padding: 5px 18px;
        border-top: 2px solid #f4f4f4;
    }

    .chatbot-suggested-question-chip {
        background-color: #f4f4f4;
        color: #000;
        padding: 5px 10px;
        border-radius: 4px;
        margin: 5px;
        cursor: pointer;
        font-size: 12px;
        display: inline-block;
    }

    .chatbot-suggested-question-chip:hover {
        background-color: #1a5db3;
        color: white;
    }

    .chatbot-suggested-question-chip p {
        margin: 0;
    }


    .chatbot-botTyping>div {
        width: 10px;
        height: 10px;
        background-color: #024da8;
        border-radius: 100%;
        display: inline-block;
        -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
        animation: sk-bouncedelay 1.4s infinite ease-in-out both;
        margin-right: 5px;
    }

    .chatbot-botTyping .chatbot-bounce1,
    .chatbot-botTyping .chatbot-bounce2,
    .chatbot-botTyping .chatbot-bounce3 {
        animation: bounce 1.4s infinite ease-in-out both;
    }

    .chatbot-botTyping .chatbot-bounce1 {
        animation-delay: -0.32s;
    }

    .chatbot-botTyping .chatbot-bounce2 {
        animation-delay: -0.16s;
    }

    .chatbot-botTyping .chatbot-bounce3 {
        animation-delay: 0s;
    }


    .chatbot-fade-in {
        animation: fadeIn 0.5s ease-out;
    }

    .chatbot-avatar {
        width: 25px;
        margin-right: 10px;
    }



    @media screen and (max-width: 500px) {
    #chatbot-chat-body {
        max-width: unset;
        right: 0;
        bottom: 0;
        height: 100%;
        margin: 5px;
        overscroll-behavior: contain;
    }
    .chatbot-chat-messages{
        height: 100% !important;
    }
    #chatbot-chat-body.chatbot-visible {
        max-height: 100vh !important;
    }
    #chatbot-main{
        height: calc(100vh - 48px);
    }
    
    #chatbot-onBoarding{
        height: 100%;
    }
    .chatbot-container{
        height: 100%;
    }
    }



    /* KeyFrames */
    @keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
    }


    @keyframes bounce {

    0%,
    80%,
    100% {
        transform: scale(0);
    }

    40% {
        transform: scale(1.0);
    }
    }
</style> <div class="chatbot-shadow-container"><div class="chatbot-chat-toggle"><img class="chatbot-chat-icon" src="https://chatbot.r2u.it/frontend/public/assets/svg/noun-chat-6973649.svg"/><span> Chat</span></div><div id="chatbot-chat-body"><div id="chatbot-header"><span class="chatbot-header-title">Chat</span><img class="chatbot-close-icon" src="https://chatbot.r2u.it/frontend/public/assets/svg/noun-less-4984256.svg"/></div><div id="chatbot-main"><div id="chatbot-onBoarding"><div role="presentation" tabindex="0" class="chatbot-container"><div class="chatbot-content"><div class="chatbot-chat-messages" id="chatbot-chat-messages"></div></div><div class="chatbot-footer"><div class="chatbot-footer-header"><div id="chatbot-chip-container"></div></div><div class="chatbot-footer-content"><div class="chatbot-input-container"><textarea id="chatbot-message-input" placeholder="Fai una domanda..."></textarea><button id="chatbot-send-message-button" onclick="getMessageAndSend()"><img src="https://chatbot.r2u.it/frontend/public/assets/svg/sendBlack-01.svg"/></button></div></div><div class="chatbot-footer-note"><span>BETA VERSION</span></div></div></div></div><div id="chatbot-consent"><p class="chatbot-information-text">Questa chatbot virtuale è una sperimentazione attivata dall'Università degli Studi Roma Tre con l'obiettivo di migliorare l'interazione offrendo un supporto rapido ed efficiente. Per ottenere i migliori risultati, ti consigliamo di formulare le richieste nel modo più chiaro e dettagliato possibile.</p><form class="chatbot-chat-form"><input type="text" class="chatbot-input-style" name="name" placeholder="Nome" required/><div class="chatbot-checkbox-container"><label class="chatbot-checkbox-option"><input type="checkbox" name="consent"/>Consenso al miglioramento del servizio con anonimo<p class="chatbot-consent-text">Con la presente, acconsento al fatto che la conversazione che sto avendo con questo modello di intelligenza artificiale possa essere utilizzata per migliorare il servizio stesso, nel rispetto del mio anonimato.</p></label></div><button type="submit" class="chatbot-start-chat-btn">Inizia chat</button></form></div></div></div></div>`;
          



const apiPath = "https://chatbot.r2u.it/api" + "/api/v1/chatbot/";

const onBoardingDiv = shadow.getElementById("chatbot-onBoarding");
const toggleButton = shadow.querySelector(".chatbot-chat-toggle");
const mainDiv = shadow.getElementById("chatbot-chat-body");
const closeIconChat = shadow.querySelector(".chatbot-close-icon");

var anonymousConsent = null;

const faqUsed = [];


onBoardingDiv.style.display = "none";

const consentDiv = shadow.getElementById("chatbot-consent");
const consentForm = consentDiv.querySelector(".chatbot-form");

var avatar = null;

async function initializeChat() {
  await getAvatar();
  skipConsentForm();

  showReceivedTextMessage(
    "<p>Ciao, sono l'assistente virtuale dell'Università degli Studi Roma Tre. Come posso aiutarti oggi?</p>"
  );
}


initializeChat();


toggleButton.addEventListener("click", () => {
  mainDiv.classList.toggle("visible");
});

closeIconChat.addEventListener("click", () => {
  mainDiv.classList.remove("visible");
});

const chatForm = shadow.querySelector(".chatbot-chat-form");

chatForm.addEventListener("submit", function (event) {
  event.preventDefault(); // Previene il comportamento di default del form

  // Raccoglie i valori degli input
  const formData = new FormData(chatForm);
  formData.get("consent") == "on" ? anonymousConsent = true : anonymousConsent = false;

  const data = {
    firstName: formData.get("name"),
    consentToAnonymousImprovement: anonymousConsent
  };

  fetch(apiPath + "contacts", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "X-API-KEY": "f1628f45-283e-4e35-b26c-a2c732f803aa",
    },
    body: JSON.stringify(data),
  })
    .then((response) => {
      if (response.ok) {
        getFaq("iscrizione");
        return response.json();
      } else {
        throw new Error("Errore nella richiesta");
      }
    })
    .then((data) => {
      onBoardingDiv.style.display = "block";
      consentDiv.style.display = "none";
    })
    .catch((error) => {
      console.error("Error:", error);
    });
});

let isSendingMessage = false;

const messageInputElement = shadow.getElementById("chatbot-message-input");

messageInputElement.addEventListener("keydown", function (event) {
  if (event.key === "Enter" && !event.shiftKey) {
    event.preventDefault();
    if (!isSendingMessage) {
      getMessageAndSend();
    }
  }
});

function getMessageAndSend() {
    sendMessage(shadow.getElementById("chatbot-message-input").value.trim());
}


async function sendMessage(messageInput) {
  if (isSendingMessage || messageInput === "") {
    return;
  }

  shadow.getElementById("chatbot-send-message-button").disabled = true;
  isSendingMessage = true;
  showSentMessage(messageInput);
  showBotTyping();

  const { threadId } = getSessionStorageItems();
  let runId = null;
  const data = { content: messageInput };

  try {
    let response;
    if (threadId == undefined) {
      data.consentToAnonymousImprovement = anonymousConsent;
      response = await fetch(apiPath + "thread", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          "X-API-KEY": "f1628f45-283e-4e35-b26c-a2c732f803aa",
        },
        body: JSON.stringify(data),
      });
    } else {
      response = await fetch(apiPath + "thread/" + threadId + "/message", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          "X-API-KEY": "f1628f45-283e-4e35-b26c-a2c732f803aa",
        },
        body: JSON.stringify(data),
      });
    }

    if (!response.ok) {
      throw new Error("Network response was not ok");
    }

    const responseData = await response.json();
    if (threadId == undefined) {
      sessionStorage.setItem("thread_id", responseData.thread_id);
    }
    if (responseData.answer_type == "faq"){
        setTimeout(() => {
        hideBotTyping();
        isSendingMessage = false;
        shadow.getElementById("chatbot-send-message-button").disabled = false;
        showReceivedTextMessage(responseData.answer_content);
        getFaq(responseData.tags);
        }, 1000);
        
    }else{
        runId = responseData.run_id;
        pollForMessages(runId);
    }
  } catch (error) {
    console.error("Error:", error);
    hideBotTyping();
    showReceivedTextMessage(
      "<p>Si è verificato un errore, riprova più tardi.</p>"
    );
    isSendingMessage = false;
    shadow.getElementById("chatbot-send-message-button").disabled = false;
  }
}




async function receiveMessage(runId) {
    const { threadId } = getSessionStorageItems();
  
    try {
      const response = await fetch(
        apiPath + "thread/" + threadId + "/run/" + runId + "/messages",
        {
          method: "GET",
          headers: {
            "Content-Type": "application/json",
            "X-API-KEY": "f1628f45-283e-4e35-b26c-a2c732f803aa",
          },
        }
      );
  
      const data = await response.json();
  
      return data;
    } catch (error) {
      console.error("Error:", error);
      return { error: true };
    }
  }

async function pollForMessages(runId, interval = 2000) {
    let data;
    do {
      data = await receiveMessage(runId);
      if (data && data.messages && data.messages.length > 0) {
        showReceivedTextMessage(data.messages[0].content[0].text.value.response);
        if (data.messages[0].content[0].text.value.tags) {
          getFaq(data.messages[0].content[0].text.value.tags);
        }
        break;
      }
      await new Promise(resolve => setTimeout(resolve, interval));
    } while (true);
  
    if (data.error) {
      showReceivedTextMessage("<p>Si è verificato un errore, riprova più tardi.</p>");
    }
  
    hideBotTyping();
    isSendingMessage = false;
    shadow.getElementById("chatbot-send-message-button").disabled = false;
  }
  
function getSessionStorageItems() {
  return {
    threadId: sessionStorage.getItem("thread_id"),
    runId: sessionStorage.getItem("run_id"),
  };
}

function showBotTyping() {
  const botTypingHTML =
    '<div class="chatbot-botTyping"><div class="chatbot-bounce1"></div><div class="chatbot-bounce2"></div><div class="chatbot-bounce3"></div></div>';
  showLoadingDots(botTypingHTML);
}

function hideBotTyping() {
  const botTyping = shadow.getElementById("chatbot-typingBot");
  if (botTyping) botTyping.remove();
}

function showSentMessage(message) {
  var chatMessages = shadow.getElementById("chatbot-chat-messages");
  var messageDiv = document.createElement("div");
  messageDiv.classList.add("chatbot-message", "chatbot-sent");
  var messageContent = document.createElement("div");
  messageContent.classList.add("chatbot-message-content");

  var messageText = document.createElement("p");
  messageText.textContent = message;
  messageContent.appendChild(messageText);

  messageDiv.appendChild(messageContent);
  chatMessages.appendChild(messageDiv);

  chatMessages.scrollTop = chatMessages.scrollHeight;

  shadow.getElementById("chatbot-message-input").value = "";
}

function showReceivedTextMessage(message) {
  var chatMessages = shadow.getElementById("chatbot-chat-messages");
  var messageDiv = document.createElement("div");
  messageDiv.classList.add("chatbot-message", "chatbot-received");
  var messageContent = document.createElement("div");
  messageContent.classList.add("chatbot-message-content");

  var avatarImg = document.createElement("img");
  avatarImg.src = avatar;
  avatarImg.classList.add("chatbot-avatar");
  messageDiv.appendChild(avatarImg);

  /*     var messageText = document.createElement('p');
        messageText.textContent = message;
        messageContent.appendChild(messageText); */

  messageContent.innerHTML = message;

  messageContent.classList.add("chatbot-fade-in");
  messageDiv.appendChild(messageContent);
  chatMessages.appendChild(messageDiv);

  /*  typeLineByLine('.chatbot-received .message-content p', 50);  */

  // Scroll automatico verso il basso quando si aggiunge un nuovo messaggio
  chatMessages.scrollTop = chatMessages.scrollHeight;
}

function showLoadingDots(htmlDots) {
  var chatMessages = shadow.getElementById("chatbot-chat-messages");
  var messageDiv = document.createElement("div");
  messageDiv.setAttribute("id", "chatbot-typingBot");
  messageDiv.classList.add("chatbot-message", "chatbot-received");
  var messageContent = document.createElement("div");
  messageContent.classList.add("chatbot-message-content");
  messageContent.innerHTML = htmlDots;
  messageDiv.appendChild(messageContent);
  chatMessages.appendChild(messageDiv);
  // Scroll automatico verso il basso quando si aggiunge un nuovo messaggio
  chatMessages.scrollTop = chatMessages.scrollHeight;
}

function typeLineByLine(selector, typingSpeed = 200) {
  // Seleziona solo l'ultimo elemento corrispondente al selettore
  const lines = shadow.querySelectorAll(selector);
  const lastLine = lines[lines.length - 1];
  if (!lastLine) return;

  let currentChar = 0;
  const originalText = lastLine.textContent;

  lastLine.textContent = "";
  lastLine.style.display = "inline";

  function typeNextChar() {
    if (currentChar < originalText.length) {
      lastLine.textContent = originalText.substring(0, currentChar + 1);
      currentChar++;
      setTimeout(typeNextChar, typingSpeed);
    }
  }

  typeNextChar();
}

function skipConsentForm() {
  const { threadId } = getSessionStorageItems();
  if (threadId) {
    onBoardingDiv.style.display = "block";
    consentDiv.style.display = "none";
    showAllMessages();
  }
}

async function showAllMessages() {
  const { threadId } = getSessionStorageItems();

  if (threadId == undefined) {
    getFaq("iscrizione");
    return;
  }

  try {
    const response = await fetch(apiPath + "thread/" + threadId + "/messages", {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
        "X-API-KEY": "f1628f45-283e-4e35-b26c-a2c732f803aa",
      },
    });

    if (!response.ok) {
      throw new Error("Errore nella richiesta");
    }

    const data = await response.json();
    if (data.messages.length == 0) getFaq("iscrizione");
    data.messages.forEach((message) => {
      if (message.role == "user") {
        showSentMessage(message.content[0].text.value.response);
      } else {
        showReceivedTextMessage(message.content[0].text.value.response);
      }
    });
  } catch (error) {
    console.error("Error:", error);
  }
}


function showSuggestedQuestions(questions) {

    const container = shadow.getElementById("chatbot-chip-container");
    const oldChips = shadow.getElementById("chatbot-suggested-questions-container");
    
    if (questions.length == 0) {
        container.innerHTML = "";
        return
    }


    container.innerHTML = ""; // Clear previous questions
    const chipContainer = document.createElement("div");
    chipContainer.setAttribute("id","suggested-questions-container")
    container.appendChild(chipContainer); 

    questions.forEach((element) => {

        const chip = document.createElement("div");
        chip.classList.add("chatbot-suggested-question-chip");

        var chipText = document.createElement("p");
        chipText.textContent = element.question;
        chip.appendChild(chipText);
        chipContainer.appendChild(chip);
        chip.addEventListener("click", () => {
            sendMessage(element.question).then(() => {
                faqUsed.push(element.id);
                if(oldChips) oldChips.innerHTML = "";
            });
            
        });
    });
}


async function getFaq(tag= null) {
    try {
        let url = apiPath + "faq";
            if (tag) {
                url += "?tags="+tag;
            }
        const response = await fetch(url, {
            method: "GET",
            headers: {
                "Content-Type": "application/json",
                "X-API-KEY": "f1628f45-283e-4e35-b26c-a2c732f803aa",
            },
        });

        if (!response.ok) {
            throw new Error("Errore nella richiesta");
        }
        
        const data = await response.json();
        const unusedElements = [];
        data.content.forEach(element => {
            if (element.id && !faqUsed.includes(element.id)) {
                unusedElements.push(element);
            }
        });
        const shuffledData = unusedElements.sort(() => 0.5 - Math.random());
        const selectedData = shuffledData.slice(0, 3);
        showSuggestedQuestions(selectedData);
    } catch (error) {
        console.error("Error:", error);
    }
}

async function getAvatar() {
  try {
    const response = await fetch(apiPath + "configurations/avatar", {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
        "X-API-KEY": "f1628f45-283e-4e35-b26c-a2c732f803aa",
      },
    });

    if (!response.ok) {
      throw new Error("Errore nella richiesta");
    }

    const data = await response.text();
    avatar = data ||  "https://chatbot.r2u.it/frontend" + "/public/assets/img/avatar.png"; 
   
  } catch (error) {
    console.error("Error:", error);
    avatar =  "https://chatbot.r2u.it/frontend" + "/public/assets/img/avatar.png";  
  }
}