From b9e7c83642a80fc585ca5ddbf420552ef1af7258 Mon Sep 17 00:00:00 2001
From: Sai pradyumna Goud Chiragoni
 <143107589+Saipradyumnagoud@users.noreply.github.com>
Date: Thu, 18 Jul 2024 21:34:01 +0530
Subject: [PATCH] added live chat

---
 package-lock.json        |   7 +-
 src/App.js               |   2 +-
 src/components/Footer.js |   4 +-
 src/pages/Live-chat.js   | 141 +++++++++++++++++++++++++++++++++++++++
 4 files changed, 148 insertions(+), 6 deletions(-)
 create mode 100644 src/pages/Live-chat.js

diff --git a/package-lock.json b/package-lock.json
index 05c0a63..3696c4b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18023,9 +18023,10 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.5.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.3.tgz",
-      "integrity": "sha512-/hreyEujaB0w76zKo6717l3L0o/qEUtRgdvUBvlkhoWeOVMjMuHNHk0BRBzikzuGDqNmPQbg5ifMEqsHLiIUcQ==",
+      "version": "4.9.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
+      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
+      "license": "Apache-2.0",
       "peer": true,
       "bin": {
         "tsc": "bin/tsc",
diff --git a/src/App.js b/src/App.js
index a504447..397d95e 100644
--- a/src/App.js
+++ b/src/App.js
@@ -60,4 +60,4 @@ const App = () => {
   );
 };
 
-export default App;
+export default App;
\ No newline at end of file
diff --git a/src/components/Footer.js b/src/components/Footer.js
index 217cb00..3266b00 100644
--- a/src/components/Footer.js
+++ b/src/components/Footer.js
@@ -117,7 +117,7 @@ const Footer = () => {
                   </Link>
                 </li>
                 <li>
-                  <Link to="/live-chat" className="text-gray-600 hover:text-gray-800">
+                  <Link to="../pages/Live-chat.js" className="text-gray-600 hover:text-gray-800">
                     Live Chat
                   </Link>
                 </li>
@@ -207,4 +207,4 @@ const Footer = () => {
   );
 };
 
-export default Footer;
+export default Footer;
\ No newline at end of file
diff --git a/src/pages/Live-chat.js b/src/pages/Live-chat.js
new file mode 100644
index 0000000..85b1ed3
--- /dev/null
+++ b/src/pages/Live-chat.js
@@ -0,0 +1,141 @@
+import React, { useState, useEffect } from "react";
+import Navbar from "../components/Navbar";
+import Footer from "../components/Footer";
+import { ToastContainer, toast } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
+
+const LiveChat = () => {
+  const [name, setName] = useState("");
+  const [message, setMessage] = useState("");
+  const [messages, setMessages] = useState([]);
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    const chatMessage = { name, message, timestamp: new Date().toISOString() };
+
+    try {
+      const response = await fetch("https://smartserver-scbe.onrender.com/chat", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(chatMessage),
+      });
+
+      const data = await response.json();
+
+      if (response.ok) {
+        toast.success("Message sent!");
+        setMessages([...messages, chatMessage]);
+        setMessage("");
+      } else {
+        toast.error(data.message || "Error sending message");
+      }
+    } catch (error) {
+      toast.error("Server error. Please try again later.");
+    }
+  };
+
+  useEffect(() => {
+    const fetchMessages = async () => {
+      try {
+        const response = await fetch("https://smartserver-scbe.onrender.com/chat");
+        const data = await response.json();
+
+        if (response.ok) {
+          setMessages(data);
+        } else {
+          toast.error("Error fetching messages");
+        }
+      } catch (error) {
+        toast.error("Server error. Please try again later.");
+      }
+    };
+
+    fetchMessages();
+  }, []);
+
+  return (
+    <>
+      <Navbar />
+      <ToastContainer />
+      <div className="min-h-screen bg-gray-100 p-6 flex flex-col items-center">
+        <div className="container mx-auto">
+          <header className="text-center mb-6">
+            <h1 className="text-4xl font-bold">Live Chat</h1>
+            <p className="text-gray-600 mt-2">
+              Chat with our team and get instant support.
+            </p>
+          </header>
+
+          <div className="max-w-md mx-auto bg-white shadow-2xl rounded-lg p-6">
+            <h2 className="text-2xl font-bold text-center text-green-700 mb-4">
+              Start a Chat
+            </h2>
+            <p className="text-center text-gray-600 mb-6">
+              Connect with us live and get your questions answered.
+            </p>
+
+            <form onSubmit={handleSubmit}>
+              <div className="mb-4">
+                <label htmlFor="name" className="block text-gray-700">
+                  <i className="fas fa-user"></i> Name
+                </label>
+                <input
+                  type="text"
+                  id="name"
+                  className="w-full mt-2 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring focus:border-green-300"
+                  placeholder="Name"
+                  value={name}
+                  onChange={(e) => setName(e.target.value)}
+                />
+              </div>
+              <div className="mb-4">
+                <label htmlFor="message" className="block text-gray-700">
+                  <i className="fas fa-comment"></i> Message
+                </label>
+                <textarea
+                  id="message"
+                  rows="4"
+                  className="w-full mt-2 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring focus:border-green-300"
+                  placeholder="Message"
+                  value={message}
+                  onChange={(e) => setMessage(e.target.value)}
+                ></textarea>
+              </div>
+              <div className="text-center">
+                <button
+                  type="submit"
+                  className="px-4 py-2 bg-green-600 text-white font-semibold rounded-md hover:bg-green-700 focus:outline-none focus:ring"
+                >
+                  Send
+                </button>
+              </div>
+            </form>
+          </div>
+
+          <div className="mt-6 max-w-2xl mx-auto bg-white shadow-2xl rounded-lg p-6">
+            <h2 className="text-2xl font-bold text-center text-green-700 mb-4">
+              Chat Messages
+            </h2>
+            <div className="h-64 overflow-y-scroll">
+              {messages.map((msg, index) => (
+                <div key={index} className="mb-4">
+                  <p className="text-gray-800 font-bold">{msg.name}</p>
+                  <p className="text-gray-600">{msg.message}</p>
+                  <p className="text-gray-400 text-sm">
+                    {new Date(msg.timestamp).toLocaleString()}
+                  </p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+      <Footer />
+    </>
+  );
+};
+
+export default LiveChat;