From 9f4cb15d1bd8bb160106b8d1841ac8fd80abee6c Mon Sep 17 00:00:00 2001 From: Sai pradyumna Goud Chiragoni <143107589+Saipradyumnagoud@users.noreply.github.com> Date: Sun, 21 Jul 2024 11:08:03 +0530 Subject: [PATCH] added Live chat --- src/App.js | 6 +- src/components/ChatBox.js | 33 +++++++++ src/components/Footer.js | 32 ++++----- src/pages/Live-chat.js | 141 -------------------------------------- 4 files changed, 53 insertions(+), 159 deletions(-) create mode 100644 src/components/ChatBox.js delete mode 100644 src/pages/Live-chat.js diff --git a/src/App.js b/src/App.js index 397d95e..1ea4663 100644 --- a/src/App.js +++ b/src/App.js @@ -1,3 +1,5 @@ +// src/App.js + import React from "react"; import { Route, Routes } from "react-router-dom"; import Home from "./pages/Home"; @@ -22,11 +24,13 @@ import ForgotPassword from "./pages/Forgotpassword.js"; import ResetPassword from "./pages/ResetPassword.js"; import ProgressBar from "./components/ProgressBar.js"; import FAQs from "./components/Faq/Faq.js"; +import ChatBox from "./components/ChatBox"; // Import the ChatBox component const App = () => { return ( <> + {/* Include the ChatBox component */} } /> } /> @@ -60,4 +64,4 @@ const App = () => { ); }; -export default App; \ No newline at end of file +export default App; diff --git a/src/components/ChatBox.js b/src/components/ChatBox.js new file mode 100644 index 0000000..a201f74 --- /dev/null +++ b/src/components/ChatBox.js @@ -0,0 +1,33 @@ +// src/components/ChatBox.js +import React, { useEffect } from "react"; + +const ChatBox = () => { + useEffect(() => { + // Append the script to the document head + const script1 = document.createElement("script"); + script1.innerHTML = ` + window.embeddedChatbotConfig = { + chatbotId: "I234O6GJ96ZT6cH1ZUkWM", + domain: "www.chatbase.co" + }; + `; + document.head.appendChild(script1); + + const script2 = document.createElement("script"); + script2.src = "https://www.chatbase.co/embed.min.js"; + script2.setAttribute("chatbotId", "I234O6GJ96ZT6cH1ZUkWM"); + script2.setAttribute("domain", "www.chatbase.co"); + script2.defer = true; + document.head.appendChild(script2); + + return () => { + // Clean up the scripts when the component unmounts + document.head.removeChild(script1); + document.head.removeChild(script2); + }; + }, []); + + return null; // No need to render anything +}; + +export default ChatBox; diff --git a/src/components/Footer.js b/src/components/Footer.js index 3266b00..ca2aa4f 100644 --- a/src/components/Footer.js +++ b/src/components/Footer.js @@ -1,10 +1,15 @@ import React from "react"; -import { Link, useLocation } from "react-router-dom"; +import { Link, useNavigate } from "react-router-dom"; const emailAddress = 'SmartSaver@gmail.com'; const Footer = () => { - const { pathname } = useLocation(); + const navigate = useNavigate(); + + const handleLiveChatClick = (e) => { + e.preventDefault(); + navigate('/chat'); // Update the route if needed + }; return ( <> @@ -117,9 +122,9 @@ const Footer = () => {
  • - + Live Chat - +
  • @@ -170,33 +175,26 @@ const Footer = () => { - - + - + - - + @@ -207,4 +205,4 @@ const Footer = () => { ); }; -export default Footer; \ No newline at end of file +export default Footer; diff --git a/src/pages/Live-chat.js b/src/pages/Live-chat.js deleted file mode 100644 index 85b1ed3..0000000 --- a/src/pages/Live-chat.js +++ /dev/null @@ -1,141 +0,0 @@ -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 ( - <> - - -
    -
    -
    -

    Live Chat

    -

    - Chat with our team and get instant support. -

    -
    - -
    -

    - Start a Chat -

    -

    - Connect with us live and get your questions answered. -

    - -
    -
    - - setName(e.target.value)} - /> -
    -
    - - -
    -
    - -
    -
    -
    - -
    -

    - Chat Messages -

    -
    - {messages.map((msg, index) => ( -
    -

    {msg.name}

    -

    {msg.message}

    -

    - {new Date(msg.timestamp).toLocaleString()} -

    -
    - ))} -
    -
    -
    -
    -