User:Srinibha23/wiki.js

var chatbotHTML = ` .toggle-chatbot { // box-shadow: 2px 2px 2px 2px #ccc8c8; position: fixed; bottom: 20px; left: 20px; z-index: 9999; padding: 8px; background-color: #BFBFBF; color: #fff; border: 1px solid; border-radius: 50%; cursor: pointer; transition: transform 0.3s ease-in-out; }           .toggle-chatbot:hover { transform: scale(1.1); }           #chat-container { font-size:14px; width: 300px; height: 520px; border: 1px solid #ccc; padding: 10px; background-color: #fff; border-radius: 3px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); }           #chat-messages { /* For webkit-based browsers (Chrome, Safari) */ scrollbar-width: thin; scrollbar-color: #888 #f1f1f1; /* thumb color track color */ /* For Firefox */ scrollbar-color: #888 #f1f1f1; }

/* For Edge */ -ms-overflow-style: none; /* IE and Edge */ }
 * 1) chat-messages {

width: 1px; }
 * 1) chat-messages::-webkit-scrollbar {

background: none; }
 * 1) chat-messages::-webkit-scrollbar-track {

background: #888; border-radius: 5px; }
 * 1) chat-messages::-webkit-scrollbar-thumb {

background: #888; }
 * 1) chat-messages::-ms-scrollbar-thumb {

#chat-messages { height:425px; overflow-y: scroll; padding: 10px; }           .outer { border-radius: 10px; padding: 5px 10px; display: flex; flex-direction: column; }           .user-message { display: flex; justify-content: flex-end; }           .bot-message { display: flex; justify-content: flex-start; }           .message-label { border-radius: 5px; padding: 8px 12px; display: inline-block; }           .user-message .message-label { background-color: #0063BF; color: #fff; overflow-wrap:anywhere; }           .bot-message .message-label { background-color: #f3f3f3; color: #444; overflow-wrap:anywhere; }           #user-input { width: calc(100% - 65px); padding: 6px 8px; border: 1px solid #ccc; border-radius: 3px; outline: none; margin: 10px; }           #send-button { background-color: #0063BF; /* Wikipedia theme color */ color: #fff; /* Text color */ border: none; margin:auto; margin-right:3px; border-radius: 5px; padding: 8px; cursor: pointer; transition: background-color 0.3s ease-in-out; }           .chatbot-window { position: fixed; bottom: 230px; left: 20px; width: 300px; height: 400px; border-radius: 2px; display: none; }              Send

  `;

document.body.insertAdjacentHTML("beforeend", chatbotHTML);

// Function to close the chatbot window $(document).ready(function {  function closeChatbot {    $("#chatbot-window").slideUp;  }

// Event listener for pressing the Escape key to close the chatbot window $(document).keyup(function (e) {   if (e.key === "Escape") {      closeChatbot;    }  });

// Event listener to close the chatbot window when clicking outside of it $(document).on("click", function (e) {    if (!$(e.target).closest("#toggle-chatbot, #chatbot-window").length) {      closeChatbot;    }  }); });

$(document).ready(function {  // Event listener for sending a message when clicking the send button  $("#send-button").click(function  { sendMessage; });

// Event listener for sending a message when pressing Enter key $("#user-input").keypress(function (event) {   if (event.which == 13) {      sendMessage;    }  });

// Function to send user input to the chatbot backend function sendMessage { var userInput = $("#user-input").val.trim; if (userInput !== "") { displayMessage(userInput, "user"); $("#user-input").val(""); sendUserInput(userInput); } }

// Function to send user input to the chatbot backend via fetch API function sendUserInput(input) { displayMessage("Retrieving data...", "bot-message"); fetch("https://b71c-185-15-56-1.ngrok-free.app/query", {     method: "POST",      headers: {        "Content-Type": "application/json",      },      body: JSON.stringify({ query: input }),    }) .then((response) => response.json) .then((data) => {       $("#chat-messages").children.last.remove;        displayMessage(data.response[0], "bot-message");      }) .catch((error) => {       console.error("Error:", error);      }); }

// Function to display a message function displayMessage(message, sender) { var messageClass = sender === "user" ? "user-message" : "bot-message"; var label = sender === "user" ? "You" : "Chatbot"; var messageElement = '  ' + message + " " +     "  ";    $("#chat-messages").append(messageElement); $("#chat-messages").scrollTop($("#chat-messages")[0].scrollHeight); } });

// displayMessage('Welcome to wiki!', 'bot-message');

// Toggling the chatbot window visibility var chatbotWindow = document.getElementById("chatbot-window"); var toggleChatbotButton = document.getElementById("toggle-chatbot"); toggleChatbotButton.addEventListener("click", function {  if ($("#chatbot-window").is(":visible")) {    $("#chatbot-window").slideUp;  } else {    $("#chatbot-window").slideDown;  } });