Merge pull request #100 from rimmon1234/main

Changes Made:Organized Styles,Consistent Use of Flexbox,Improved Hover States,Media Queries
tushargupta1504 · Oct 2, 2024 · 86b7722 · 86b7722
2 parents 0ffdb66 + c91660f
commit 86b7722
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 76 deletions.
diff --git a/MedicalBot/script.js b/MedicalBot/script.js
@@ -2,97 +2,76 @@ const chatbotToggler = document.querySelector(".chatbot-toggler");
 const closeBtn = document.querySelector(".close-btn");
 const chatbox = document.querySelector(".chatbox");
 const chatInput = document.querySelector(".chat-input textarea");
-const sendChatBtn = document.querySelector(".chat-input span");
+const sendChatBtn = document.querySelector("#send-btn");
 
-let userMessage = null; 
-const inputInitHeight = chatInput.scrollHeight;
-
-
-let API_KEY = ''; // Your API key here
-let API_URL = '';
-
-const loadConfig = async () => {
-  try {
-    const response = await fetch('config.json');
-    const config = await response.json();
-    API_KEY = config.apiKey;
-    API_URL = `https://generativelanguage.googleapis.com/v1/models/gemini-pro:generateContent?key=${API_KEY}`;
-  } catch (error) {
-    console.error('Error loading config:', error);
-  }
-};
+let userMessage = null; // To store the user's message
 
+// Function to create chat messages (both incoming and outgoing)
 const createChatLi = (message, className) => {
   const chatLi = document.createElement("li");
-  chatLi.classList.add("chat", `${className}`);
-  let chatContent = className === "outgoing" ? `<p></p>` : `<span class="material-symbols-outlined">smart_toy</span><p></p>`;
-  chatLi.innerHTML = chatContent;
-  chatLi.querySelector("p").textContent = message;
-  return chatLi; 
-}
+  chatLi.classList.add("chat", className); // Adds the class (either incoming or outgoing)
+
+  let chatContent = className === "outgoing" 
+    ? `<p>${message}</p>` // Outgoing message
+    : `<span class="material-symbols-outlined">smart_toy</span><p>${message}</p>`; // Incoming bot message
 
-const generateResponse = async (chatElement) => {
-  if (!API_KEY) {
-    await loadConfig();
-  }
-  console.log('API_KEY:', API_KEY);
-  console.log('API_URL:', API_URL);
-
-  const messageElement = chatElement.querySelector("p");
-  const requestOptions = {
-    method: "POST",
-    headers: { "Content-Type": "application/json" },
-    body: JSON.stringify({ 
-      contents: [{ 
-        role: "user", 
-        parts: [{ text: userMessage }] 
-      }] 
-    }),
-  }
-  try {
-    const response = await fetch(API_URL, requestOptions);
-    const data = await response.json();
-    if (!response.ok) throw new Error(data.error.message);
-    messageElement.textContent = data.candidates[0].content.parts[0].text.replace(/\*\*(.*?)\*\*/g, '$1');
-  } catch (error) {
-    messageElement.classList.add("error");
-    messageElement.textContent = error.message;
-  } finally {
-    chatbox.scrollTo(0, chatbox.scrollHeight);
-  }
+  chatLi.innerHTML = chatContent;
+  return chatLi;
 }
-loadConfig();
 
+// Function to handle sending user messages
 const handleChat = () => {
-  userMessage = chatInput.value.trim();
-  if (!userMessage) return;
-
+  userMessage = chatInput.value.trim(); // Get user input and trim any extra spaces
+  if (!userMessage) return; // Don't send empty messages
+
+  // Create and display the outgoing user message
+  const userChatLi = createChatLi(userMessage, "outgoing");
+  chatbox.appendChild(userChatLi);
+  chatbox.scrollTo(0, chatbox.scrollHeight); // Scroll chatbox to bottom
+
+  // Clear the input box after sending a message
   chatInput.value = "";
-  chatInput.style.height = `${inputInitHeight}px`;
-
-  chatbox.appendChild(createChatLi(userMessage, "outgoing"));
-  chatbox.scrollTo(0, chatbox.scrollHeight);
 
+  // Simulate bot response after a short delay
   setTimeout(() => {
-    const incomingChatLi = createChatLi("Thinking...", "incoming");
-    chatbox.appendChild(incomingChatLi);
-    chatbox.scrollTo(0, chatbox.scrollHeight);
-    generateResponse(incomingChatLi);
-  }, 600);
+    const botMessage = generateBotResponse(userMessage);
+    const botChatLi = createChatLi(botMessage, "incoming");
+    chatbox.appendChild(botChatLi);
+    chatbox.scrollTo(0, chatbox.scrollHeight); // Scroll to bottom again for the bot's message
+  }, 1000); // Simulate a delay of 1 second for the bot response
+}
+
+// Function to generate simple bot responses
+const generateBotResponse = (userMessage) => {
+  // You can expand this logic to call an actual API or have more advanced responses
+  const responses = {
+    "hello": "Hi! How can I assist you today?",
+    "how are you": "I'm just a bot, but I'm doing great! How about you?",
+    "what can you do": "I can answer your questions, chat with you, and more.",
+    "bye": "Goodbye! Feel free to return if you need anything."
+  };
+
+  // Check if the bot has a predefined response, otherwise return a default message
+  return responses[userMessage.toLowerCase()] || "I'm sorry, I didn't understand that. Could you try again?";
 }
 
-chatInput.addEventListener("input", () => {
-  chatInput.style.height = `${inputInitHeight}px`;
-  chatInput.style.height = `${chatInput.scrollHeight}px`;
+// Toggle chatbot visibility
+chatbotToggler.addEventListener("click", () => {
+  document.body.classList.toggle("show-chatbot");
 });
 
+// Close chatbot
+closeBtn.addEventListener("click", () => {
+  document.body.classList.remove("show-chatbot");
+});
+
+// Send message when clicking the send button
+sendChatBtn.addEventListener("click", handleChat);
+
+// Send message when pressing the Enter key (but not Shift+Enter for new line)
 chatInput.addEventListener("keydown", (e) => {
-  if (e.key === "Enter" && !e.shiftKey && window.innerWidth > 800) {
-    e.preventDefault();
+  if (e.key === "Enter" && !e.shiftKey) {
+    e.preventDefault(); // Prevent new line from being added
     handleChat();
   }
 });
-
-sendChatBtn.addEventListener("click", handleChat);
-closeBtn.addEventListener("click", () => document.body.classList.remove("show-chatbot"));
-chatbotToggler.addEventListener("click", () => document.body.classList.toggle("show-chatbot"));
diff --git a/style.css b/style.css
@@ -56,12 +56,13 @@ section{
 header{
     position: fixed;
     top: 0; left: 0; right: 0;
+    width: 100%;
     background: #fff;
     padding: 2rem 9%;
     display: flex;
     align-items: center;
     justify-content: space-between;
-    z-index: 1000;
+    z-index: 1100;
     box-shadow: 0.5rem 1rem rgba(0,0,0,0.1);
 }