<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Chatbot Playground</title>
    <link
      href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"
      rel="stylesheet"
    />
    <style>
      .chat-body {
        width: 550px;
        margin: 50px auto;
      }
      .card-body {
        background-color: #333;
        color: #fff;
        border-radius: 10px;
      }
      .server-message {
        background-color: #444;
        padding: 10px;
        margin: 10px;
        border-radius: 10px;
      }
      .client-message {
        background-color: #555;
        padding: 10px;
        margin: 10px;
        border-radius: 10px;
      }
      .form-inline {
        display: flex;
        justify-content: space-between;
      }
      .form-control {
        width: 80%;
        background-color: #333;
        color: #fff;
        border: none;
        border-radius: 5px;
        padding: 10px;
        margin-right: 10px;
      }
      #send {
        background-color: #4c4cff;
        color: #fff;
        border: none;
        border-radius: 5px;
        padding: 10px 20px;
      }
      .form-message {
        margin-top: 10px;
      }
    </style>
    <script>
      var endpoint = "ws://localhost:8000/ws";
      var ws = new WebSocket(endpoint);
      // Receive message from server word by word. Display the words as they are received.
      ws.onmessage = function (event) {
        var messages = document.getElementById("messages");
        var data = JSON.parse(event.data);
        if (data.sender === "bot") {
          if (data.message_type === "start") {
            var header = document.getElementById("header");
            header.innerHTML = "Computing answer...";
            var div = document.createElement("div");
            div.className = "server-message";
            var p = document.createElement("p");
            p.innerHTML = "<strong>" + "Chatbot: " + "</strong>";
            div.appendChild(p);
            messages.appendChild(div);
          } else if (data.message_type === "stream") {
            var header = document.getElementById("header");
            header.innerHTML = "Chatbot is typing...";
            var p = messages.lastChild.lastChild;
            if (data.message === "\n") {
              p.innerHTML += "<br>";
            } else {
              p.innerHTML += data.message;
            }
          } else if (data.message_type === "info") {
            var header = document.getElementById("header");
            header.innerHTML = data.message;
          } else if (data.message_type === "end") {
            var header = document.getElementById("header");
            header.innerHTML = "Ask a question";
            var button = document.getElementById("send");
            button.innerHTML = "Send";
            button.disabled = false;
          } else if (data.message_type === "error") {
            var header = document.getElementById("header");
            header.innerHTML = "Ask a question";
            var button = document.getElementById("send");
            button.innerHTML = "Send";
            button.disabled = false;
            var p = messages.lastChild.lastChild;
            p.innerHTML += data.message;
          }
        } else {
          var div = document.createElement("div");
          div.className = "client-message";
          var p = document.createElement("p");
          p.innerHTML = "<strong>" + "You: " + "</strong>";
          p.innerHTML += data.message;
          div.appendChild(p);
          messages.appendChild(div);
        }
        // Scroll to the bottom of the chat
        messages.scrollTop = messages.scrollHeight;
      };
      // Send message to server
      function sendMessage(event) {
        event.preventDefault();
        var message = document.getElementById("messageText").value;
        if (message === "") {
          return;
        }
        ws.send(message);
        document.getElementById("messageText").value = "";

        // Turn the button into a loading button
        var button = document.getElementById("send");
        button.innerHTML = "Loading...";
        button.disabled = true;
      }
    </script>
  </head>
  <body class="bg-black">
    <div class="chat-body card">
      <div class="card-body p-5">
        <h3 class="card-title text-center text-xl font-medium">
          Chatbot Playground
        </h3>
        <h4 class="card-text text-center text-sm" id="header">
          Ask a question
        </h4>
        <hr class="border-gray-500 mb-5" style="margin-top: 20px" />
        <div
          id="messages"
          class="overflow-auto"
          style="max-height: 500px"
        ></div>
        <form
          action=""
          class="form-inline mt-5"
          id="chat-form"
          onsubmit="sendMessage(event)"
        >
          <input
            type="text"
            class="form-control"
            placeholder="Write your question"
            id="messageText"
          />
          <button id="send" type="submit" class="btn btn-primary">Send</button>
        </form>
      </div>
    </div>
  </body>
</html>