User:Srinibha23/wikiwomen.js

var chatbotHTML = ` .toggle-chatbot { position: fixed; bottom: 20px; left: 20px; z-index: 9999; padding: 10px; background-color: rgb(141, 163, 225); 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 { margin-top: 80px; width: 300px; height: 280px; border: 1px solid #ccc; padding: 10px; background-color: #fff; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); }           #chat-messages { height:200px; overflow-y: scroll; padding: 10px; }           .outer { border-radius: 10px; padding: 10px 20px; 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: #007bff; color: #fff; overflow-wrap:anywhere; }           .bot-message .message-label { background-color: #f3f3f3; color: #444; overflow-wrap:anywhere; }           #user-input { width: calc(100% - 65px); padding: 8px 10px; border: 1px solid #ccc; border-radius: 20px; outline: none; margin: 10px; }           #send-button { width: 60px; margin: 10px; border: none; border-radius: 20px; background-color: rgb(141, 163, 225); color: #fff; cursor: pointer; outline: none; }           .chatbot-window { position: fixed; bottom: 70px; 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://a536-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;  } });