wordpressCode.html

<div id="google_translate_element"></div>
<div id="chatbot-wrapper">
  <!-- Sidebar for previous chats -->
  <!-- Main Chat Interface -->
  <div id="chatbot-container">
    <div id="chat-messages"></div>
    <form id="chat-form">
      <input
        type="text"
        id="chat-query"
        placeholder="Type your message..."
        autocomplete="off"
        required
      />
      <button id="submit_button" type="submit">Send</button>
    </form>
  </div>
</div>

<script>
  <!-- Loads the chatbot Q&A data from a JSON file hosted online -->
  async function loadChatbotData() {
    const jsonURL =
      "https://sites.udel.edu/cis-advisor/files/2025/04/QnA_3.json";
    try {
      const response = await fetch(jsonURL);
      if (!response.ok)
        throw new Error(`HTTP error! Status: ${response.status}`);
      return await response.json();
    } catch (error) {
      console.error("Error loading JSON:", error);
      return [];
    }
  }
  // Sends the user prompt and Q&A data to the Gemini API and returns the chatbot's response
  async function fetchAIResponse(prompt, jsonData) {
    const apiKey = "AIzaSyA6rEeWJneX7uSwHc1B7TEvUI8eMXyBtvM"; // Replace with your actual API key
    const apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-flash:generateContent?key=${apiKey}`;

    const context = `You are a Q&A chatbot for the University of Delaware graduate computer science department. Here is some Q&A data: ${JSON.stringify(
      jsonData
    )}. Use this data to answer the following query: ${prompt}`;

    const requestData = {
      contents: [{ parts: [{ text: context }] }],
    };

    try {
      const response = await fetch(apiUrl, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(requestData),
      });

      const data = await response.json();
      if (data.candidates?.[0]?.content?.parts?.[0]?.text) {
        return data.candidates[0].content.parts[0].text;
      } else if (data.error) {
        console.error("API Error:", data.error);
        return `Error: ${data.error.message || "An unknown error occurred."}`;
      } else {
        return "Sorry, the API did not return a valid response.";
      }
    } catch (error) {
      console.error("Error fetching AI response:", error);
      return "There was an error processing your request. Please try again later.";
    }
  }
  // Initializes the chatbot: loads data and sets up form submission behavior

  async function initializeChatbot() {
    const data = await loadChatbotData();

    document
      .getElementById("chat-form")
      .addEventListener("submit", async (event) => {
        event.preventDefault();
        const query = document.getElementById("chat-query").value.trim();
        if (!query) return;

        addMessage(query, "user-message");
        document.getElementById("chat-query").value = "";

        const answer = await fetchAIResponse(query, data);
        addMessage(answer, "bot-message");
      });
  }
  // Adds a message (either user or bot) to the chat window
  function addMessage(text, className) {
    const chatMessages = document.getElementById("chat-messages");
    const message = document.createElement("div");
    message.className = `message ${className}`;
    message.textContent = text;
    chatMessages.appendChild(message);
    chatMessages.scrollTop = chatMessages.scrollHeight;
  }

  document.addEventListener("DOMContentLoaded", initializeChatbot);
</script>
<script src="script.js"></script>
<script type="text/javascript">
  function googleTranslateElementInit() {
    new google.translate.TranslateElement(
      { pageLanguage: "en" },
      "google_translate_element"
    );
  }
</script>
<script
  type="text/javascript"
  src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"
></script>
<style>
  /* Ensure the chatbot doesn't interfere with header/footer */
  /* Chat Form */
  #chat-form {
      display: flex;
      align-items: center;
      gap: 10px; /* Space between input and button */
      padding: 10px;
      background: #ffffff;
      border-top: 1px solid #ddd;
  }

  /* Chat Input Box */
  #chat-query {
      flex: 1; /* Expands to fill available space */
      font-size: 16px;
      padding: 12px;
      border: 2px solid #ccc;
      border-radius: 8px;
      outline: none;
      transition: all 0.3s ease;
  }

  #chat-query:focus {
      border-color: #0073aa;
      box-shadow: 0 0 5px rgba(0, 115, 170, 0.5);
  }

  /* Send Button */
  #submit_button {
      background: #00539f;
      color: white;
      font-size: 16px;
      font-weight: bold;
      border: none;
      padding: 12px 20px;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.3s ease;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }

  #submit_button:hover {
      transform: scale(1.05);
  }

  #submit_button:active {
      transform: scale(0.98);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  }

  /* Chatbot Wrapper */
  #chatbot-wrapper {
      display: flex;
      width: 90%;
      max-width: 1000px;
      height: 75vh;
      border-radius: 10px;
      overflow: hidden;
      background: #ffffff;
      box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
      margin: 20px auto;
  }

  /* Chatbot Container */
  #chatbot-container {
      flex: 1;
      display: flex;
      flex-direction: column;
      height: 100%;
      background: #ffffff;
  }

  /* Chat Messages Container */
  #chat-messages {
      flex: 1;
      padding: 15px;
      overflow-y: auto;
      background-color: #f9f9f9;
      display: flex;
      flex-direction: column;
      gap: 10px;
  }

  /* Message Bubbles */
  .message {
      max-width: 75%;
      padding: 12px 16px;
      border-radius: 20px;
      font-size: 14px;
      line-height: 1.5;
      word-wrap: break-word;
      box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
      display: inline-block;
      position: relative;
  }

  /* Bot Message */
  .bot-message {
      align-self: flex-start;
      background: #e9eff6;
      color: #333;
      border-top-left-radius: 5px;
  }

  /* User Message */
  .user-message {
      align-self: flex-end;
      background: #0073aa;
      color: white;
      border-top-right-radius: 5px;
  }

  /* Add a small tail to the message bubbles */
  .bot-message::after,
  .user-message::after {
      content: "";
      position: absolute;
      bottom: 0;
      width: 10px;
      height: 10px;
      background: inherit;
  }

  /* Bot Message Tail */
  .bot-message::after {
      left: -5px;
      clip-path: polygon(100% 0, 0 100%, 100% 100%);
  }

  /* User Message Tail */
  .user-message::after {
      right: -5px;
      clip-path: polygon(0 0, 100% 100%, 0 100%);
  }

  /* Responsive Fixes */
  @media (max-width: 768px) {
      #chatbot-wrapper {
          flex-direction: column;
          height: auto;
      }

      #chat-form {
          flex-direction: row; /* Ensures button and input remain in a row */
      }

      #chat-query {
          font-size: 14px;
          padding: 10px;
      }

      #submit_button {
          font-size: 14px;
          padding: 10px 16px;
      }
  }
</style>