Summary: This project is a web-based chatbot application integrated w…

…ith OpenAI's GPT-4 for user interaction. The app allows users to send and receive messages, with the chat history being saved locally in the browser using localStorage. Users can view their past conversations in the History page, which stores and displays previous chats along with timestamps. The app is designed with responsive styling and supports dark/light modes for a customizable experience.

Description:
This project includes:

A chatbot interface where users can chat with an AI-powered bot.
The ability to save chat history locally in the browser.
A History page where users can view past conversations.
Dark mode toggle for better user experience.
Integration with Firebase for authentication (login/logout).

package.json

@@ -19,14 +19,15 @@
     "react": "^18.3.1",
     "react-chartjs-2": "^5.2.0",
     "react-dom": "^18.3.1",
+    "react-icons": "^5.4.0",
     "react-minimal-pie-chart": "^8.4.1",
     "react-router-dom": "^7.0.1",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
-    "predeploy":"npm run build",
-    "deploy":"gh-pages -d build",
+    "predeploy": "npm run build",
+    "deploy": "gh-pages -d build",
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",

src/App.js

@@ -4,6 +4,9 @@ import Signup from "./components/Singup";
 import Login from "./components/Login";
 import Chatbot from "./components/Chatbot";
 import SavedMessages from "./components/Chatbot/SavedMessages";
+import FavouriteMessages from "./components/Chatbot/Favourite";
+import History from "./components/Chatbot/History";
+
 
 function App() {
   const user = localStorage.getItem("token");
@@ -19,6 +22,8 @@ function App() {
         <Route path="/" element={<Navigate replace to="/login" />} />
       )}
       <Route path="/SavedMessages" exact element={<SavedMessages />} />
+      <Route path="/favourite" element={<FavouriteMessages />} />
+      <Route path="/history" exact element={<History />} />
       <Route path="/signup" exact element={<Signup />} />
       <Route path="/login" exact element={<Login />} />
     </Routes>

src/components/Chatbot/Favourite.jsx

@@ -1,25 +1,85 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
-import styles from "./styles.module.css";
+import Navbar from "./Navbar"; // استيراد الـ Navbar
+import styles from "./Favourite.module.css"; // استخدام CSS خاص بـ Favourite
+import { FaTrash, FaSave } from "react-icons/fa"; // استخدام أيقونات Font Awesome
 
-const Favourite = () => {
-  const favouriteMessages = JSON.parse(localStorage.getItem("favouriteMessages")) || [];
+const FavouriteMessages = () => {
   const navigate = useNavigate();
+  const [favouriteMessages, setFavouriteMessages] = useState([]);
+
+  // تحميل الرسائل المفضلة من localStorage عند تحميل الصفحة
+  useEffect(() => {
+    const storedMessages = JSON.parse(localStorage.getItem("favouriteMessages")) || [];
+    setFavouriteMessages(storedMessages);
+  }, []);
+
+  // حذف رسالة مفضلة
+  const handleDeleteMessage = (index) => {
+    const updatedMessages = favouriteMessages.filter((_, i) => i !== index);
+    setFavouriteMessages(updatedMessages);
+    localStorage.setItem("favouriteMessages", JSON.stringify(updatedMessages));
+  };
+
+  // حفظ الرسالة (هنا قد تحتاج لإضافة وظيفة إضافية مثل نقل الرسالة لقسم آخر أو تنفيذ إجراء معين)
+  const handleSaveMessage = (index) => {
+    const messageToSave = favouriteMessages[index];
+    console.log("Message saved:", messageToSave);
+    // إضافة منطق لحفظ الرسالة إذا لزم الأمر
+  };
+
+  // مسح كل الرسائل المفضلة
+  const handleClearAllMessages = () => {
+    setFavouriteMessages([]);
+    localStorage.removeItem("favouriteMessages");
+  };
 
   return (
-    <div className={styles.pageContainer}>
-      <h2>Favourite Messages</h2>
-      {favouriteMessages.length > 0 ? (
-        favouriteMessages.map((msg, index) => (
-          <div key={index} className={styles.messageCard}>
-            <p>{msg.text}</p>
+    <div>
+      <Navbar />
+
+      <div className={styles.pageContainer}>
+        <h2 className={styles.title}>Favourite Messages</h2>
+        {favouriteMessages.length > 0 ? (
+          <div className={styles.messageTable}>
+            <div className={styles.tableHeader}>
+              <div className={styles.columnHeader}>Favourite Messages</div>
+              <div className={styles.columnHeader}>Actions</div>
+            </div>
+            {favouriteMessages.map((msg, index) => (
+              <div key={index} className={styles.messageRow}>
+                <div className={styles.messageText}>{msg.text}</div>
+                <div className={styles.actionIcons}>
+                  <button
+                    className={styles.deleteButton}
+                    onClick={() => handleDeleteMessage(index)}
+                  >
+                    <FaTrash />
+                  </button>
+                  <button
+                    className={styles.saveButton}
+                    onClick={() => handleSaveMessage(index)}
+                  >
+                    <FaSave />
+                  </button>
+                </div>
+              </div>
+            ))}
           </div>
-        ))
-      ) : (
-        <p>No favourite messages yet.</p>
-      )}
+        ) : (
+          <p className={styles.noMessages}>No favourite messages yet.</p>
+        )}
+        <div className={styles.buttonsContainer}>
+          <button className={styles.backButton} onClick={() => navigate("/chatbot")}>
+            Back to Home
+          </button>
+          <button className={styles.clearButton} onClick={handleClearAllMessages}>
+            Clear All Messages
+          </button>
+        </div>
+      </div>
     </div>
   );
 };
 
-export default Favourite;
+export default FavouriteMessages;

src/components/Chatbot/Favourite.module.css

@@ -0,0 +1,135 @@
+/* Page Container */
+.pageContainer {
+  padding: 20px;
+  font-family: Arial, sans-serif;
+}
+
+/* Title */
+.title {
+  text-align: center;
+  font-size: 28px;
+  margin-bottom: 20px;
+  color: #333;
+}
+
+/* Message Table */
+.messageTable {
+  width: 100%;
+  margin-top: 20px;
+}
+
+/* Table Header */
+.tableHeader {
+  display: flex;
+  padding: 20px;
+  background-color: #f1f1f1;
+  border-radius: 8px;
+  justify-content: space-between;
+  margin-bottom: 10px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.columnHeader {
+  font-weight: bold;
+  width: 48%;
+  text-align: center;
+  color: #555;
+}
+
+/* Message Row */
+.messageRow {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+  padding: 15px;
+  background-color: #fff;
+  border-radius: 8px;
+  border: 1px solid #ddd;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  transition: transform 0.3s, box-shadow 0.3s;
+}
+
+.messageRow:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+/* Message Text */
+.messageText {
+  width: 48%;
+  padding: 10px;
+  background-color: #f9f9f9;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  transition: background-color 0.3s;
+}
+
+.messageText:hover {
+  background-color: #eaeaea;
+}
+
+/* Action Icons */
+.actionIcons {
+  width: 48%;
+  display: flex;
+  justify-content: center;
+  gap: 15px;
+}
+
+.deleteButton, .saveButton {
+  background: none;
+  border: none;
+  font-size: 22px;
+  cursor: pointer;
+  transition: color 0.3s, transform 0.3s;
+}
+
+.deleteButton:hover, .saveButton:hover {
+  color: #ff4d4d;
+  transform: scale(1.2);
+}
+
+.saveButton:hover {
+  color: #45a049;
+}
+
+
+/* Buttons Container */
+.buttonsContainer {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 30px;
+}
+
+.backButton, .clearButton {
+  padding: 12px 25px;
+  background-color: #4CAF50;
+  color: white;
+  border-radius: 8px;
+  border: none;
+  cursor: pointer;
+  font-size: 16px;
+  transition: background-color 0.3s, transform 0.3s;
+}
+
+.backButton:hover, .clearButton:hover {
+  background-color: #45a049;
+  transform: scale(1.05);
+}
+
+.clearButton {
+  background-color: #f44336;
+}
+
+.clearButton:hover {
+  background-color: #e53935;
+}
+
+/* No Messages */
+.noMessages {
+  text-align: center;
+  color: #777;
+  font-size: 18px;
+  font-style: italic;
+}