templates/index.html

{% extends 'layout.html' %} {% block content %}
<div class="container" id="app-ui">
  <div class="sidebar">
    <h2 style="color: inherit">Chat History</h2>
    <ul id="chat-history">
      {% for chat in chat_history %}
      <li>User: {{ chat.user }}<br />Bot: {{ chat.bot }}</li>
      {% endfor %}
    </ul>
  </div>
  <div class="chatbox">
    <h2 style="color: inherit">Chat</h2>
    <div id="messages">
      {% for chat in chat_history %}
      <p class="user-message"><strong>User:</strong> {{ chat.user }}</p>
      <p class="bot-response"><strong>Bot:</strong> {{ chat.bot }}</p>
      {% endfor %}
    </div>
    <form id="chat-form">
      <input
        type="text"
        id="message"
        name="message"
        placeholder="Type your message..."
      />
      <button type="submit">Send</button>
    </form>
  </div>

  <!--Theme button-->
  <div
    class="dropdown position-fixed top-0 end-0 mb-3 me-3 bd-mode-toggle"
    style="margin-top: 10px; margin-right: 10px"
  >
    <button
      class="btn py-2 d-flex align-items-center"
      id="bd-theme"
      type="button"
      aria-expanded="false"
      data-bs-toggle="dropdown"
      aria-label="Toggle theme (auto)"
      style="color: inherit"
    >
      <!--dropdown-toggle-->
      Theme
      <span class="visually-hidden" id="bd-theme-text">Toggle theme</span>
    </button>
    <ul
      class="dropdown-menu dropdown-menu-end shadow"
      aria-labelledby="bd-theme-text"
    >
      <li>
        <button
          type="button"
          class="dropdown-item d-flex align-items-center"
          data-bs-theme-value="light"
          aria-pressed="false"
          id="lt"
        >
          Light
        </button>
      </li>
      <li>
        <button
          type="button"
          class="dropdown-item d-flex align-items-center"
          data-bs-theme-value="dark"
          aria-pressed="false"
          id="dt"
        >
          Dark
        </button>
      </li>
    </ul>
  </div>
</div>

<script>
  document
    .getElementById("chat-form")
    .addEventListener("submit", function (event) {
      event.preventDefault();
      const message = document.getElementById("message").value;
      if (message.trim() == "") {
        alert(
          "Prompt cannot be empty. Please enter a prompt to generate a response."
        );
      } else {
        fetch("/send_message", {
          method: "POST",
          headers: {
            "Content-Type": "application/x-www-form-urlencoded",
          },
          body: `message=${message}`,
        })
          .then((response) => response.json())
          .then((data) => {
            const chatHistory = document.getElementById("chat-history");
            chatHistory.innerHTML = "";
            data.chat_history.forEach((chat) => {
              const listItem = document.createElement("li");
              listItem.innerHTML = `User: ${chat.user}<br>Bot: ${chat.bot}`;
              chatHistory.appendChild(listItem);
            });

            const messagesDiv = document.getElementById("messages");
            messagesDiv.innerHTML = "";
            data.chat_history.forEach((chat) => {
              const userMessage = document.createElement("p");
              userMessage.classList.add("user-message");
              userMessage.innerHTML = `<strong>User:</strong> ${chat.user}`;
              const botResponse = document.createElement("p");
              botResponse.classList.add("bot-response");
              botResponse.innerHTML = `<strong>Bot:</strong> ${chat.bot}`;
              messagesDiv.appendChild(userMessage);
              messagesDiv.appendChild(botResponse);
            });

            document.getElementById("message").value = "";
          });
      }
    });

  function SetDarkTheme() {
    var body = document.body;
    body.classList.remove("text-bg-light");
    body.classList.add("text-bg-dark");
    var ui = document.getElementById("app-ui");
    ui.classList.remove("text-bg-light");
    ui.classList.add("text-bg-dark");
    // Store the theme preference in Local Storage
    localStorage.setItem("theme", "dark");
  }

  function SetLightTheme() {
    var body = document.body;
    body.classList.add("text-bg-light");
    body.classList.remove("text-bg-dark");
    var ui = document.getElementById("app-ui");
    ui.classList.add("text-bg-light");
    ui.classList.remove("text-bg-dark");
    // Store the theme preference in Local Storage
    localStorage.setItem("theme", "light");
  }

  function applyThemePreference() {
    var themePreference = localStorage.getItem("theme");
    if (themePreference === "light") {
      SetLightTheme();
    } else {
      SetDarkTheme();
    }
  }

  // Add event listeners to the buttons
  document.getElementById("lt").addEventListener("click", SetLightTheme);
  document.getElementById("dt").addEventListener("click", SetDarkTheme);

  // Call applyThemePreference on page load
  applyThemePreference();
</script>
{% endblock %}