lollms-webui/static/js/main.js

function update_main(){
  const chatWindow = document.getElementById('chat-window');
  const chatForm = document.getElementById('chat-form');
  const userInput = document.getElementById('user-input');
  
  userInput.addEventListener('keydown', function(event) {
    if (event.shiftKey && event.key === 'Enter') {
      event.preventDefault();
      userInput.style.height = userInput.scrollHeight + 'px';
      userInput.value += '\n';
    }
    });

  chatForm.addEventListener('submit', event => {
      event.preventDefault();
      console.log("Submitting")
  
      // get user input and clear input field
      message = userInput.value;
      userInput.value = '';
      
      // add user message to chat window
      const sendbtn = document.querySelector("#submit-input")
      const waitAnimation = document.querySelector("#wait-animation")
      sendbtn.style.display="none";
      waitAnimation.style.display="block";
      console.log("Sending message to bot")

      user_msg = addMessage('',message, 0, 0, can_edit=true);
      bot_msg = addMessage('', '', 0, 0, can_edit=true);

      fetch('/bot', {
          method: 'POST',
          headers: {
              'Content-Type': 'application/json'
          },
          body: JSON.stringify({ message })
      }).then(function(response) {
          const stream = new ReadableStream({
              start(controller) {
                  const reader = response.body.getReader();
                  function push() {
                      reader.read().then(function(result) {
                          if (result.done) {
                              sendbtn.style.display="block";
                              waitAnimation.style.display="none";
                              console.log(result)
                              controller.close();
                              return;
                          }
                          controller.enqueue(result.value);
                          push();
                      })
                  }
                  push();
              }
          });
          const textDecoder = new TextDecoder();
          const readableStreamDefaultReader = stream.getReader();
          let entry_counter = 0
          function readStream() {
              readableStreamDefaultReader.read().then(function(result) {
                  if (result.done) {
                      return;
                  }
  
                  text = textDecoder.decode(result.value);
  
                  // The server will first send a json containing information about the message just sent
                  if(entry_counter==0)
                  {
                    // We parse it and
                    infos = JSON.parse(text);

                    user_msg.setSender(infos.user);
                    user_msg.setMessage(infos.message);
                    user_msg.setID(infos.id);
                    bot_msg.setSender(infos.bot);
                    bot_msg.setID(infos.response_id);

                    bot_msg.messageTextElement;
                    bot_msg.hiddenElement;
                    entry_counter ++;
                  }
                  else{
                    entry_counter ++;   
                    prefix = "FINAL:";
                    if(text.startsWith(prefix)){
                        text = text.substring(prefix.length);
                        bot_msg.hiddenElement.innerHTML         = text
                        bot_msg.messageTextElement.innerHTML    = text
                    }
                    else{
                    // For the other enrtries, these are just the text of the chatbot
                    for (const char of text) {
                        txt = bot_msg.hiddenElement.innerHTML;
                        if (char != '\f') {
                            txt += char
                            bot_msg.hiddenElement.innerHTML         = txt;
                            bot_msg.messageTextElement.innerHTML    = txt;
                        }

                    // scroll to bottom of chat window
                    chatWindow.scrollTop = chatWindow.scrollHeight;
                    }

                    }
                  }
  
                  readStream();
              });
          }
          readStream();
      });
  
  });  
}