Merge pull request #23 from SachinAkash01/main

Integrate Chatbots with the Interface
iServeSL · May 2, 2024 · 10139fe · 10139fe
2 parents 68380eb + ceba13d
commit 10139fe
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 18 deletions.
diff --git a/iServeSL/src/components/OnlineSupportContent.jsx b/iServeSL/src/components/OnlineSupportContent.jsx
@@ -11,25 +11,59 @@ const Chatbot = () => {
     navigate("/dashboard");
   };
 
-  const [loading, setLoading] = useState(true);
-  const [messages, setMessages] = useState([
-    new Message({
-      id: 1,
-      message: "Hello, Welcome to iServeSL! How may I help you today?",
-    }), // Initial message
-  ]);
+  // Load messages from session storage if available, otherwise use initial message
+  const [messages, setMessages] = useState(
+    JSON.parse(sessionStorage.getItem("chatMessages")) || [
+      new Message({
+        id: 1,
+        message: "Hello, Welcome to iServeSL! How may I help you today?",
+      }),
+    ]
+  );
   const [input, setInput] = useState("");
   const chatFeedRef = useRef(null);
 
   const handleInput = (e) => {
     setInput(e.target.value);
   };
 
-  const handleSend = () => {
+  const handleSend = async () => {
     if (input.trim() !== "") {
-      const newMessage = new Message({ id: 0, message: input });
-      setMessages([...messages, newMessage]);
+      const userMessage = new Message({ id: 0, message: input });
+      setMessages((prevMessages) => [...prevMessages, userMessage]); // Preserve previous messages and add new user message
       setInput("");
+
+      try {
+        const response = await fetch(
+          "http://localhost:5005/webhooks/rest/webhook",
+          {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              sender: "user1",
+              message: input,
+            }),
+          }
+        );
+
+        if (!response.ok) {
+          throw new Error("Network response was not ok");
+        }
+
+        const responseData = await response.json();
+        const botResponse = responseData[0].text;
+
+        const botMessage = new Message({
+          id: 1,
+          message: botResponse,
+        });
+
+        setMessages((prevMessages) => [...prevMessages, botMessage]); // Preserve previous messages and add new bot message
+      } catch (error) {
+        console.error("Error:", error);
+      }
     }
   };
 
@@ -40,10 +74,8 @@ const Chatbot = () => {
   };
 
   useEffect(() => {
-    // Simulate loading effect
-    setTimeout(() => {
-      setLoading(false);
-    }, 1500);
+    // Save messages to session storage whenever messages state changes
+    sessionStorage.setItem("chatMessages", JSON.stringify(messages));
 
     // Scroll down chat feed after messages update
     if (chatFeedRef.current) {
@@ -52,8 +84,7 @@ const Chatbot = () => {
   }, [messages]);
 
   return (
-    <div className={`content-feedback ${loading ? "loading" : ""}`}>
-      {loading && <div className="loading-overlay">Loading...</div>}
+    <div className="content-feedback">
       <div className="content--header">
         <h1 className="header--title">
           <span onClick={dashboardNavigate} style={{ cursor: "pointer" }}>

diff --git a/iServeSL/src/components/Sidebar.jsx b/iServeSL/src/components/Sidebar.jsx
@@ -38,11 +38,10 @@ const Sidebar = () => {
   };
 
   const handleLogout = () => {
-    // Performs logout actions by clearing cookies
     Cookies.remove("jwtToken");
     Cookies.remove("email");
+    sessionStorage.removeItem("chatMessages");
 
-    // Navigate to the login page after logout
     loginNavigate();
   };