Merge pull request #300 from PraveenUppar/Chatbot-update

Updated chatbot close button

frontend/src/components/chatbot.jsx

@@ -1,25 +1,30 @@
-import React, { useState } from 'react';
-import './chatbot.css'; // Import the CSS file
-import chatbotsvg from '../assets/svg/chatbot.svg'; // Import the chatbot icon
+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 [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?",
+    "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?"]);
+      setChatOutput([
+        ...chatOutput,
+        "Hi I am Saarthi, your Platform Guide. How can I help you today?",
+      ]);
       setWelcomeMessageDisplayed(true);
     }
   };
@@ -30,7 +35,10 @@ const Chatbot = () => {
       let updatedChatOutput = [];
 
       userMessages.forEach((message) => {
-        const cleanedMessage = message.trim().toLowerCase().replace(/[?,.!]/g, ''); // Clean input
+        const cleanedMessage = message
+          .trim()
+          .toLowerCase()
+          .replace(/[?,.!]/g, ""); // Clean input
         if (cleanedMessage in responses) {
           updatedChatOutput.push(responses[cleanedMessage]);
         } else {
@@ -39,22 +47,23 @@ const Chatbot = () => {
       });
 
       setChatOutput([...chatOutput, ...updatedChatOutput]);
-      setChatInput(''); // Clear input
+      setChatInput(""); // Clear input
     }
   };
 
+  const handleCloseChat = () => {
+    setChatboxOpen(false); // Close the chatbox
+  };
+
   return (
     <div className="chatbot-container">
       <div className="chatbot" id="chatbotIcon" onClick={handleChatIconClick}>
         <img src={chatbotsvg} alt="Chatbot Icon" />
-        <br/>
-
-
+        <br />
       </div>
-   
+
       {chatboxOpen && (
         <div className="chatbox" id="chatbox">
-
           <div id="chatOutput" className="chat-output">
             {chatOutput.map((message, index) => (
               <p key={index}>{message}</p>
@@ -70,10 +79,13 @@ const Chatbot = () => {
           <button id="sendMessage" onClick={handleSendMessage}>
             Send
           </button>
+          <button className="close-button" onClick={handleCloseChat}>
+            Close
+          </button>
         </div>
       )}
     </div>
   );
 };
 
-export default Chatbot;
+export default Chatbot;