test.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Campus Online</title>
</head>
<style>
  /* FAQ Container */
  .faq-container {
    max-width: 300px;
    margin: 5px;
  }

  /* FAQ List */
  .faq-list {
    list-style: none;
    padding: 10px;
    background-color: #f4f4f4;
    border-radius: 10px;
  }

  /* FAQ Item */
  .faq-item {
    margin-bottom: 10px;
    font-style: calc(1.5em + 1vw);
    font-family: sans-serif;
    font-size: smaller;
  }

  /* Question */
  .question {
    font-size: 15px;
    padding: 2px;
    cursor: pointer;
    border-radius: 5px;
  }

  /* Answer */
  .answer {
    padding: 2px;
    font-size: 15px;
    background-color: #85d6ff;
    display: none;
    border-radius: 2px;
  }

  /* Show Answer */
  .answer.show {
    display: block;
  }

  /* Chat Container */
  /* Chat Container */
  .chat-container {
    position: fixed;
    bottom: 60px;
    right: 20px;
    z-index: 9998;
    width: 340px;
    height: 490px;

    border: 1px solid #ccc;
    border-radius: 10px;
    overflow: hidden;
    background-color: #ffffff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }

  /* Chat Box */
  .chat-box {
    height: calc(100% - 75px);
    /* Adjust height for input and button */
    overflow-y: auto;
    padding: 10px;
    


  }

  /* Input Container */
  .input-container {
    margin-top: -5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 5px;
    text-align: center;
    font-size: 12px;
    justify-content: space-around;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f2f4f4;
  }

  /* User Input */
  .heading {
    background-color: #f4f4f4;
    padding: 5px;
    margin: 7px;

    border-radius: 5px;
  }
</style>


<body>



  <div class="chat-container" id="chat-container">
    <div class="chat-box" id="chat-box">
      <img src="img/campus.svg" style="width: 100px; height: 100px; margin-left:100px; ">
      <br>
      <div class="heading">
        <div style=" font-family: Verdana, sans-serif; font-size: 17px; color: #0088cc; cursor:pointer;">&nbsp;&nbsp;Ask a
          question</div>
        <div style=" font-family: Verdana, sans-serif; font-size: 12px; color: black; cursor:pointer;">&nbsp;&nbsp;&nbsp;Our bot and team
          can Help</div>

       
      </div>
      <div class="faq-container">
        <ul class="faq-list">
          <div style=" font-family: Verdana, sans-serif; font-size: 16px; color: #0088cc;">&nbsp;Frequently Asked
            Questions</div>
          <li class="faq-item">
            <div class="question"><br>how can i promote my club event on this platform?
            </div>
            <div class="answer">contact campus online and get your club admin login details to post your updates</div>
          </li>
          <li class="faq-item">
            <div class="question">How can I trust you?</div>
            <div class="answer">Answer 1</div>
          </li>
          <li class="faq-item">
            <div class="question">How long will it take for my order to arrive?</div>
            <div class="answer">Answer 2</div>
          </li>
          <li class="faq-item">
            <div class="question">Are the products on your website authentic?</div>
            <div class="answer">Answer 3</div>
          </li>
        </ul>
      </div>
    </div>
    <div class="input-container">
    <p id="home-btn">
  <svg xmlns="http://www.w3.org/2000/svg" width="23" height="23" fill="currentColor" class="bi bi-house-heart-fill" viewBox="0 0 16 16">
    <path d="M7.293 1.5a1 1 0 0 1 1.414 0L11 3.793V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v3.293l2.354 2.353a.5.5 0 0 1-.708.707L8 2.207 1.354 8.853a.5.5 0 1 1-.708-.707z" />
    <path d="m14 9.293-6-6-6 6V13.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5zm-6-.811c1.664-1.673 5.825 1.254 0 5.018-5.825-3.764-1.664-6.691 0-5.018" />
  </svg><br>Home
</p>

      <p><svg xmlns="http://www.w3.org/2000/svg" width="23" height="23" fill="currentColor" class="bi bi-chat-heart-fill" viewBox="0 0 16 16">
          <path d="M8 15c4.418 0 8-3.134 8-7s-3.582-7-8-7-8 3.134-8 7c0 1.76.743 3.37 1.97 4.6-.097 1.016-.417 2.13-.771 2.966-.079.186.074.394.273.362 2.256-.37 3.597-.938 4.18-1.234A9 9 0 0 0 8 15m0-9.007c1.664-1.711 5.825 1.283 0 5.132-5.825-3.85-1.664-6.843 0-5.132" />
        </svg><br>Messages</p>
      <p><svg xmlns="http://www.w3.org/2000/svg" width="23" height="23" fill="currentColor" class="bi bi-question-circle-fill" viewBox="0 0 16 16">
          <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M5.496 6.033h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286a.237.237 0 0 0 .241.247m2.325 6.443c.61 0 1.029-.394 1.029-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94 0 .533.425.927 1.01.927z" />
        </svg><br>Help</p>
      <!-- <input type="text" id="user-input" placeholder="Type your message...">
        <button id="send-btn">Send</button> -->

    </div>
    <br>
  </div>
<script>
  // Purpose: To add chatbot functionality to the website
document.addEventListener("DOMContentLoaded", function () {
    console.log("JavaScript code is being executed!");

  const faqItems = document.querySelectorAll(".faq-item");
  const chatContainer = document.getElementById("chat-container");
  const chatBox = document.getElementById("chat-box");
  const askQuestionHeading = document.querySelector(".heading");
  const homeButton = document.getElementById("home-btn");

  // Store the original content of the chat box
  const originalContent = chatBox.innerHTML;

  // Function to clear chat box content
  function clearChatBox() {
    chatBox.innerHTML = ""; // Clear chat box content
  }

  // Clear chat box content and initiate chatbot when "Ask a question" heading is clicked
  askQuestionHeading.addEventListener("click", function () {
    clearChatBox();
    // Add your chatbot functionality here
    // For example, you can append the chatbot HTML structure
    const chatbotHTML = `
        <style>
      
        /* Chatbox */
        .chatbox {
          height: auto;
          overflow-y: auto;
          padding: 15px;
        }
        
        /* Chat Input */


        
        .chat-input {
          display: flex;
          align-items: center;
          background-color: f4f4f4;
          position: absolute;
          bottom: 78px;
          padding-left: 37px;
          padding-right: 48px;
          margin-left: -10px;
          padding-top: 5px;
        
       
     
        }
        
        .chatinput {
       width: 240px;
       font-size: 14px;
       height: 37px  !important;
       font-family:sans-serif;
       border: 1px solid #ddd !important;
       border-radius:10px 0 0 10px;
       margin-right: 10px;
       border-color: #ddd !important;
       outline: none !important; /* This removes the outline that appears on focus */
}

        
        .nek {
          border: 1px solid #ddd;
          height: 38px;
          weight: 120px;
          margin-left:-10px;
         
          padding: 10px
          font-size: 16px;
          color: white;
          align-items: center;
        
          font-size: 10px;
          display: flex;
          justify-content: center;
        
          background-color: #4CAF50;
          border-radius: 0 10px 10px 0;
          cursor: pointer;
          transition: background-color 0.3s, color 0.3s;

}

.nek:hover {
  background-color: red;
  
}
        
       .chatincoming {
          display: flex;
          align-items: center;
          margin-bottom: 15px;
          padding: 6px;
         
          border-radius: 7px;
          font-size: 15px;
        }
        .chatincoming {
          display: flex;
          align-items: center;
          margin-bottom: 15px;
          padding: 6px;
          background-color: #f4f4f4;
          border-radius: 7px;
          font-size: 14px;
        }
        
        </style>
        
       
        
        <div class="chatbot">
        
          <div class="chatbox">
        <div class="chatincoming">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-robot" viewBox="0 0 16 16">
  <path d="M6 12.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5M3 8.062C3 6.76 4.235 5.765 5.53 5.886a26.6 26.6 0 0 0 4.94 0C11.765 5.765 13 6.76 13 8.062v1.157a.93.93 0 0 1-.765.935c-.845.147-2.34.346-4.235.346s-3.39-.2-4.235-.346A.93.93 0 0 1 3 9.219zm4.542-.827a.25.25 0 0 0-.217.068l-.92.9a25 25 0 0 1-1.871-.183.25.25 0 0 0-.068.495c.55.076 1.232.149 2.02.193a.25.25 0 0 0 .189-.071l.754-.736.847 1.71a.25.25 0 0 0 .404.062l.932-.97a25 25 0 0 0 1.922-.188.25.25 0 0 0-.068-.495c-.538.074-1.207.145-1.98.189a.25.25 0 0 0-.166.076l-.754.785-.842-1.7a.25.25 0 0 0-.182-.135"/>
  <path d="M8.5 1.866a1 1 0 1 0-1 0V3h-2A4.5 4.5 0 0 0 1 7.5V8a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1v1a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-1a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1v-.5A4.5 4.5 0 0 0 10.5 3h-2zM14 7.5V13a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V7.5A3.5 3.5 0 0 1 5.5 4h5A3.5 3.5 0 0 1 14 7.5"/>
</svg><br>
          <p>Hi there 👋<br>How can I help you today?</p>
        </div>
      </div>
      <div class="chat-input">
        <input class="chatinput" placeholder="Enter a message..." spellcheck="false" required></input>
        <span id="send-btn" class="nek"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-file-arrow-up-fill" viewBox="0 0 16 16">
  <path d="M12 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2M7.5 6.707 6.354 7.854a.5.5 0 1 1-.708-.708l2-2a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 6.707V10.5a.5.5 0 0 1-1 0z"/>
</svg></span>
      </div
        `;
    chatBox.insertAdjacentHTML("beforeend", chatbotHTML);

    const chatbotToggler = document.querySelector(".chatbot-toggler");
    const closeBtn = document.querySelector(".close-btn");
    const chatbox = document.querySelector(".chatbox");
    const chatInput = document.querySelector(".chat-input input");
    const sendChatBtn = document.querySelector(".chat-input span");

    let userMessage = null; // Variable to store user's message
    const API_KEY = "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"; // Paste your API key here
    const inputInitHeight = chatInput.scrollHeight;

    const createChatLi = (message, className) => {
      // Create a chat <li> element with passed message and className
      const chatLi = document.createElement("p");
      chatLi.classList.add("chat", `${className}`);
      let chatContent =
        className === "outgoing"
          ? `<div class="chattincoming"><p></p></div>`
          : `<div class="chatincoming"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-robot" viewBox="0 0 16 16">
  <path d="M6 12.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5M3 8.062C3 6.76 4.235 5.765 5.53 5.886a26.6 26.6 0 0 0 4.94 0C11.765 5.765 13 6.76 13 8.062v1.157a.93.93 0 0 1-.765.935c-.845.147-2.34.346-4.235.346s-3.39-.2-4.235-.346A.93.93 0 0 1 3 9.219zm4.542-.827a.25.25 0 0 0-.217.068l-.92.9a25 25 0 0 1-1.871-.183.25.25 0 0 0-.068.495c.55.076 1.232.149 2.02.193a.25.25 0 0 0 .189-.071l.754-.736.847 1.71a.25.25 0 0 0 .404.062l.932-.97a25 25 0 0 0 1.922-.188.25.25 0 0 0-.068-.495c-.538.074-1.207.145-1.98.189a.25.25 0 0 0-.166.076l-.754.785-.842-1.7a.25.25 0 0 0-.182-.135"/>
  <path d="M8.5 1.866a1 1 0 1 0-1 0V3h-2A4.5 4.5 0 0 0 1 7.5V8a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1v1a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-1a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1v-.5A4.5 4.5 0 0 0 10.5 3h-2zM14 7.5V13a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V7.5A3.5 3.5 0 0 1 5.5 4h5A3.5 3.5 0 0 1 14 7.5"/>
</svg> &nbsp;<p></p></div>`;
      chatLi.innerHTML = chatContent;
      chatLi.querySelector("p").textContent = message;
      return chatLi; // return chat <li> element
    };

    const generateResponse = (chatElement) => {
      const API_URL = "https://api.openai.com/v1/chat/completions";
      const messageElement = chatElement.querySelector("p");

      // Define the properties and message for the API request
      const requestOptions = {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${API_KEY}`,
        },
        body: JSON.stringify({
          model: "gpt-3.5-turbo",
          messages: [{ role: "user", content: userMessage }],
        }),
      };

      // Send POST request to API, get response and set the reponse as paragraph text
      fetch(API_URL, requestOptions)
        .then((res) => res.json())
        .then((data) => {
          messageElement.textContent = data.choices[0].message.content.trim();
        })
        .catch(() => {
          messageElement.classList.add("error");
          messageElement.textContent =
            "Oops! Something went wrong. Please try again.";
        })
        .finally(() => chatbox.scrollTo(0, chatbox.scrollHeight));
    };

    const handleChat = () => {
      userMessage = chatInput.value.trim(); // Get user entered message and remove extra whitespace
      if (!userMessage) return;

      // Clear the input input and set its height to default
      chatInput.value = "";
      chatInput.style.height = `${inputInitHeight}px`;

      // Append the user's message to the chatbox
      chatbox.appendChild(createChatLi(userMessage, "outgoing"));
      chatbox.scrollTo(0, chatbox.scrollHeight);

      setTimeout(() => {
        // Display "Thinking..." message while waiting for the response
        const incomingChatLi = createChatLi("Thinking...", "incoming");
        chatbox.appendChild(incomingChatLi);
        chatbox.scrollTo(0, chatbox.scrollHeight);
        generateResponse(incomingChatLi);
      }, 600);
    };

    chatInput.addEventListener("input", () => {
      // Adjust the height of the input input based on its content
      chatInput.style.height = `${inputInitHeight}px`;
      chatInput.style.height = `${chatInput.scrollHeight}px`;
    });

    chatInput.addEventListener("keydown", (e) => {
      // If Enter key is pressed without Shift key and the window
      // width is greater than 800px, handle the chat
      if (e.key === "Enter" && !e.shiftKey && window.innerWidth > 800) {
        e.preventDefault();
        handleChat();
      }
    });

    sendChatBtn.addEventListener("click", handleChat);
    // closeBtn.addEventListener("click", () => document.body.classList.remove("show-chatbot"));
    chatbotToggler.addEventListener("click", () =>
      document.body.classList.toggle("show-chatbot")
    );
  });

  homeButton.addEventListener("click", function () {
    chatBox.innerHTML = originalContent; // Restore original content
  });

  // FAQ Toggle Functionality
  faqItems.forEach((item) => {
    const question = item.querySelector(".question");
    const answer = item.querySelector(".answer");

    question.addEventListener("mouseover", function () {
      answer.classList.add("show");
    });

    question.addEventListener("mouseout", function () {
      answer.classList.remove("show");
    });
  });

  // Add scrollbar to the chat box
  chatBox.scrollTop = 0;
});

  </script>

</body>

</html>