Merge pull request #215 from J-B-Mugundh/main

Implemented Local Storage to Persist Chat History of AgroTech AI Chatbot Across Page Reloads

frontend/src/pages/ChatBot.jsx

@@ -1,15 +1,32 @@
 import React, { useState, useRef, useEffect } from 'react';
+import { FaUser, FaRobot } from 'react-icons/fa';
+import bgHero from "../assets/bgHero.png";
 
 function ChatBot() {
   const [userPrompt, setUserPrompt] = useState('');
   const [chatHistory, setChatHistory] = useState([]);
   const chatHistoryRef = useRef(null);
   const [showScrollToTop, setShowScrollToTop] = useState(false);
 
+  // Function to load chat history from localStorage
+  const loadChatHistory = () => {
+    const savedChatHistory = localStorage.getItem('chatHistory');
+    if (savedChatHistory) {
+      setChatHistory(JSON.parse(savedChatHistory));
+    }
+  };
+
+  // Function to save chat history to localStorage
+  const saveChatHistory = (history) => {
+    localStorage.setItem('chatHistory', JSON.stringify(history));
+  };
+
   const sendMessage = async () => {
     if (userPrompt.trim() === '') return;
 
-    setChatHistory((prevHistory) => [...prevHistory, { role: 'user', content: userPrompt }]);
+    const updatedHistory = [...chatHistory, { role: 'user', content: userPrompt }];
+    setChatHistory(updatedHistory);
+    saveChatHistory(updatedHistory);  // Save updated history to localStorage
 
     const response = await fetch('https://agrotech-chatbot.onrender.com/AgroTech-ChatBot', {
       method: 'POST',
@@ -24,10 +41,12 @@ function ChatBot() {
         .replace(/\d\.\s/g, '<li>')
         .replace(/\n/g, '</li>');
 
-      setChatHistory((prevHistory) => [
-        ...prevHistory,
+      const updatedAssistantHistory = [
+        ...updatedHistory,
         { role: 'assistant', content: formattedResponse },
-      ]);
+      ];
+      setChatHistory(updatedAssistantHistory);
+      saveChatHistory(updatedAssistantHistory);  // Save updated history to localStorage
     }
 
     setUserPrompt('');
@@ -40,6 +59,7 @@ function ChatBot() {
     }
   };
 
+  // Function to scroll to the bottom of the chat
   const scrollToBottom = () => {
     if (chatHistoryRef.current) {
       chatHistoryRef.current.scrollTop = chatHistoryRef.current.scrollHeight;
@@ -54,25 +74,42 @@ function ChatBot() {
     setShowScrollToTop(chatHistory.length > 0);
   }, [chatHistory]);
 
+  // Load chat history from localStorage when the component mounts
+  useEffect(() => {
+    loadChatHistory();
+  }, []);
+
   return (
-    <div className='max-w-full mt-16 mx-auto px-4 pb-10 pt-5 sm:px-6 lg:px-8'>
-      <h1 className="text-2xl text-center text-green-500 font-bold ">AgroTech AI ChatBot</h1>
+    <div className='flex flex-col h-screen p-5' style={{ backgroundImage: `url(${bgHero})` }}>
+      <h1 className="text-2xl text-center text-green-500 font-bold mb-6">AgroTech AI ChatBot</h1>
       <div
-        className='flex flex-col overflow-y-auto p-2 border-2 border-green-500 rounded-lg mt-6 mb-2'
+        className='flex-1 overflow-y-auto p-2 border border-green-700 rounded-lg mb-2 mt-16'
         ref={chatHistoryRef}
       >
         {chatHistory.map((message, index) => (
           <div
             key={index}
-            className={`p-2 m-1 rounded-xl w-fit max-w-[80%] text-white ${
-              message.role === 'user'
-                ? 'bg-green-600 self-start rounded-tr-none'
-                : 'bg-green-600 self-end rounded-tl-none'
+            className={`flex items-start mb-2 ${
+              message.role === 'user' ? 'flex-row-reverse' : 'flex-row'
             }`}
-            dangerouslySetInnerHTML={{
-              __html: `<strong>${message.role === 'user' ? 'You' : 'Assistant'}:</strong> ${message.content}`,
-            }}
-          />
+          >
+            {/* Adding user and assistant icons without text */}
+            {message.role === 'user' ? (
+              <FaUser className='text-black text-2xl ml-2' />
+            ) : (
+              <FaRobot className='text-black text-2xl mr-2' />
+            )}
+            <div
+              className={`p-2 m-1 rounded-xl w-fit max-w-[80%] text-white ${
+                message.role === 'user'
+                  ? 'bg-green-700 rounded-tr-none self-end'
+                  : 'bg-green-800 rounded-tl-none self-start'
+              }`}
+              dangerouslySetInnerHTML={{
+                __html: message.content,
+              }}
+            />
+          </div>
         ))}
       </div>
 
@@ -97,5 +134,3 @@ function ChatBot() {
 }
 
 export default ChatBot;
-
-