Chatbot routes and css fix

frontend/index.html

@@ -26,13 +26,13 @@
                 left: 0;
                 pointer-events: none;
                 z-index: 99999999;
-                /* Stays on top of all elements */
+
             }
 
-    /* Chatbot styles */
+
     .chatbot-container {
         position: relative;
-        bottom: 20px; /* Adjust as needed */
+        bottom: 20px;
         right: 20px;
         z-index: 100;
     }
@@ -56,7 +56,7 @@
     .chatbox {
         display: none;
         position: fixed;
-        bottom: 90px; /* Position above the bottom of the viewport */
+        bottom: 90px; 
         right: 20px;
         width: 300px;
         background-color: #f9f9f9;
@@ -215,9 +215,9 @@ <h3>Saarthi</h3>
         userMessages.forEach((message) => {
             const cleanedMessage = message.trim().toLowerCase().replace(/[?,.!]/g, ''); // Remove punctuation
             if (cleanedMessage in responses) {
-                chatOutput.innerHTML += `<p>${responses[cleanedMessage]}</p>`;
+                chatOutput.innerHTML += <p>${responses[cleanedMessage]}</p>;
             } else if (cleanedMessage) {
-                chatOutput.innerHTML += `<p>I'm sorry, I don't have an answer for that.</p>`;
+                chatOutput.innerHTML += <p>I'm sorry, I don't have an answer for that.</p>;
             }
         });
 
@@ -306,4 +306,4 @@ <h3>Saarthi</h3>
             animateCircles();
         </script>
 </body>
-</html>
+</html>

frontend/src/Pages/Herosection.jsx

@@ -14,7 +14,7 @@ import HamburgerMenu from './hamburger';
 import contributor from './contributor';
 import contributorsvg from '../assets/svg/contributor.svg';
 import chatbotsvg from '../assets/svg/chatbot.svg';
-
+import Chatbot from '../components/chatbot';
 const Herosection = () => {
     const navigate = useNavigate();
 
@@ -45,9 +45,7 @@ const Herosection = () => {
     const ContributorCLick = () => {
         navigate('/contributors'); // Navigates to the login page
     }
-    const ChatbotCLick = () => {
-        navigate('/chatbot'); // Navigates to the login page
-    }
+
 
     return (
         <>
@@ -99,13 +97,11 @@ const Herosection = () => {
             </div>
             <div type="submit" onClick={ContributorCLick} className='fixed right-0 z-50 flex flex-col items-center justify-center py-8 m-4 my-auto rounded-full cursor-pointer bottom-16'><img src={contributorsvg} alt="" srcset="" className="bg-blue-200 border-2 border-blue-200 rounded-full w-[64px] h-[64px] p-2" /> <h1 className='font-bold text-black'>Contributors</h1></div>
 
-            <div className='fixed bottom-0 right-0 z-50 m-4 cursor-pointer'>
-                <img src={chatbotsvg} alt="chatbot" onClick={ChatbotCLick} className='w-16 h-16' />
-                <h1 className='font-bold text-black'>Saarthi</h1></div>
+          <Chatbot/>
 
 
         </>
     );
 };
 
-export default Herosection;
+export default Herosection;

frontend/src/components/chatbot.css

@@ -0,0 +1,86 @@
+.chatbot-container {
+    position: fixed;
+    display: flex;
+    flex-direction: column;
+    right: 20px;
+    z-index: 1000;
+  }
+
+  .chatbot {
+    --tw-bg-opacity: 1;
+    background-color: rgb(191 219 254 / var(--tw-bg-opacity));
+    border-radius: 50%;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    width: 60px;
+    height: 60px;
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .chatbot img {
+    width: 40px;
+    height: 40px;
+  }
+
+  .chatbox {
+    background-color: #f1f1f1;
+    border: 1px solid #ccc;
+    border-radius: 10px;
+    width: 300px;
+    position: absolute;
+    bottom: 70px;
+    right: 0;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    display: flex;
+    flex-direction: column;
+    padding: 15px;
+  }
+
+  .chatbox h3 {
+    margin: 0;
+    padding-bottom: 10px;
+    text-align: center;
+  }
+
+  .chat-output {
+    flex-grow: 1;
+    background-color: #fff;
+    border-radius: 5px;
+    padding: 10px;
+    margin-bottom: 10px;
+    overflow-y: auto;
+    max-height: 200px;
+  }
+
+  .chat-output p {
+    margin: 5px 0;
+    padding: 5px 10px;
+    background-color: #e0e0e0;
+    border-radius: 5px;
+  }
+
+  #chatInput {
+    resize: none;
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    margin-bottom: 10px;
+  }
+
+  #sendMessage {
+    --tw-bg-opacity: 1;
+    background-color: rgb(59 130 246 / var(--tw-bg-opacity));
+    color: white;
+    border: none;
+    padding: 10px;
+    border-radius: 5px;
+    cursor: pointer;
+  }
+
+  #sendMessage:hover {
+    --tw-bg-opacity: 2;
+    background-color: rgb(28 97 211 / var(--tw-bg-opacity));
+
+  }

frontend/src/components/chatbot.jsx

@@ -1,9 +1,79 @@
-import React from 'react'
+import React, { useState } from 'react';
+import './chatbot.css'; // Import the CSS file
+import chatbotsvg from '../assets/svg/chatbot.svg'; // Import the chatbot icon
+
+const Chatbot = () => {
+  const [chatboxOpen, setChatboxOpen] = useState(false);
+  const [chatInput, setChatInput] = useState('');
+  const [chatOutput, setChatOutput] = useState([]);
+  const [welcomeMessageDisplayed, setWelcomeMessageDisplayed] = useState(false);
+
+  const responses = {
+    "can you help me navigate to platform 5": "You can easily navigate to Platform 5 using Navigation in the menu. Anything else I can help you with?",
+    "yes where can i find luggage storage facilities": "You can check the availability of cloakrooms in booking and book the same.",
+    "hello": "Hi there! How can I help you today?",
+    // Add more responses as needed
+  };
+
+  const handleChatIconClick = () => {
+    setChatboxOpen(!chatboxOpen);
+
+    if (!welcomeMessageDisplayed && !chatboxOpen) {
+      setChatOutput([...chatOutput, "Hi I am Saarthi, your Platform Guide. How can I help you today?"]);
+      setWelcomeMessageDisplayed(true);
+    }
+  };
+
+  const handleSendMessage = () => {
+    if (chatInput.trim()) {
+      const userMessages = chatInput.trim().split(/[?.!]+/); // Split input by sentence terminators
+      let updatedChatOutput = [];
+
+      userMessages.forEach((message) => {
+        const cleanedMessage = message.trim().toLowerCase().replace(/[?,.!]/g, ''); // Clean input
+        if (cleanedMessage in responses) {
+          updatedChatOutput.push(responses[cleanedMessage]);
+        } else {
+          updatedChatOutput.push("I'm sorry, I don't have an answer for that.");
+        }
+      });
+
+      setChatOutput([...chatOutput, ...updatedChatOutput]);
+      setChatInput(''); // Clear input
+    }
+  };
 
-const chatbot = () => {
   return (
-    <div>chatbot</div>
-  )
-}
+    <div className="chatbot-container">
+      <div className="chatbot" id="chatbotIcon" onClick={handleChatIconClick}>
+        <img src={chatbotsvg} alt="Chatbot Icon" />
+        <br/>
+
+
+      </div>
+
+      {chatboxOpen && (
+        <div className="chatbox" id="chatbox">
+
+          <div id="chatOutput" className="chat-output">
+            {chatOutput.map((message, index) => (
+              <p key={index}>{message}</p>
+            ))}
+          </div>
+          <textarea
+            id="chatInput"
+            rows="4"
+            placeholder="Type your message..."
+            value={chatInput}
+            onChange={(e) => setChatInput(e.target.value)}
+          />
+          <button id="sendMessage" onClick={handleSendMessage}>
+            Send
+          </button>
+        </div>
+      )}
+    </div>
+  );
+};
 
-export default chatbot
+export default Chatbot;