From 5172f02f351757cfbbdc7797f98fef15d49dd8d2 Mon Sep 17 00:00:00 2001
From: Sawan <sawankushwah457@gmail.com>
Date: Tue, 29 Oct 2024 19:46:15 +0530
Subject: [PATCH] Added ai based chatbot which will guide in user friendly way

---
 webmasterlog/src/components/MainContent.tsx   |  4 +-
 .../src/components/shared/AiChatbot.tsx       | 39 +++++++++++++++++++
 .../src/components/shared/ScrollToTop.tsx     |  4 +-
 3 files changed, 44 insertions(+), 3 deletions(-)
 create mode 100644 webmasterlog/src/components/shared/AiChatbot.tsx

diff --git a/webmasterlog/src/components/MainContent.tsx b/webmasterlog/src/components/MainContent.tsx
index 8d0a7ccb..d1996dcc 100644
--- a/webmasterlog/src/components/MainContent.tsx
+++ b/webmasterlog/src/components/MainContent.tsx
@@ -7,6 +7,7 @@ import Header from "./shared/Header";
 import Footer from "./shared/Footer";
 import Cursor from "./shared/Cursor";
 import ProgressBar from "./shared/ProgressBar";
+import AiChatbot from "./shared/AiChatbot";
 
 const MainContent = ({ children }: { children: React.ReactNode }) => {
   const context = useSidebarContext();
@@ -15,7 +16,7 @@ const MainContent = ({ children }: { children: React.ReactNode }) => {
 
   return (
     <>
-      <ProgressBar/>
+      <ProgressBar />
       <Sidebar />
       <main className={`grid w-full h-full transition-all duration-300 ${isSidebarOpen ? 'pl-[245px]' : 'pl-[75px]'}`}>
         <Header />
@@ -23,6 +24,7 @@ const MainContent = ({ children }: { children: React.ReactNode }) => {
           <Cursor />
           {children}
           <ScrollToTop />
+          <AiChatbot />
         </div>
         <Footer />
       </main>
diff --git a/webmasterlog/src/components/shared/AiChatbot.tsx b/webmasterlog/src/components/shared/AiChatbot.tsx
new file mode 100644
index 00000000..7ac7593d
--- /dev/null
+++ b/webmasterlog/src/components/shared/AiChatbot.tsx
@@ -0,0 +1,39 @@
+"use client"
+import React, { useEffect } from "react";
+
+// Extend the window interface to include embeddedChatbotConfig
+declare global {
+    interface Window {
+        embeddedChatbotConfig: {
+            chatbotId: string;
+            domain: string;
+        };
+    }
+}
+
+const AiChatbot: React.FC = () => {
+    useEffect(() => {
+        const script = document.createElement("script");
+        script.src = "https://www.chatbase.co/embed.min.js";
+        script.async = true;
+        script.defer = true;
+        script.setAttribute("chatbotId", "YJ6lehRmu3_unZYXxrD1h");
+        script.setAttribute("domain", "www.chatbase.co");
+
+        document.body.appendChild(script);
+
+        // Define the chatbot config after the script is added
+        window.embeddedChatbotConfig = {
+            chatbotId: "YJ6lehRmu3_unZYXxrD1h",
+            domain: "www.chatbase.co",
+        };
+
+        return () => {
+            document.body.removeChild(script); // Clean up the script when component unmounts
+        };
+    }, []);
+
+    return null; // This component doesn't render any visible elements
+};
+
+export default AiChatbot;
diff --git a/webmasterlog/src/components/shared/ScrollToTop.tsx b/webmasterlog/src/components/shared/ScrollToTop.tsx
index be21bb1f..692caa83 100644
--- a/webmasterlog/src/components/shared/ScrollToTop.tsx
+++ b/webmasterlog/src/components/shared/ScrollToTop.tsx
@@ -16,7 +16,7 @@ const ScrollToTop = () => {
 
   const smoothScrollToTop = () => {
     const scrollY = window.pageYOffset;
-    const scrollStep = Math.max(10, Math.floor(scrollY / 20)); 
+    const scrollStep = Math.max(10, Math.floor(scrollY / 20));
     if (scrollY > 0) {
       window.scrollBy(0, -scrollStep);
       requestAnimationFrame(smoothScrollToTop);
@@ -33,7 +33,7 @@ const ScrollToTop = () => {
       {isVisible && (
         <Button
           onClick={() => requestAnimationFrame(smoothScrollToTop)}
-          className="fixed bottom-4 right-4 p-3 bg-blue-500 text-white rounded-full shadow-md hover:bg-blue-600 transition"
+          className="fixed bottom-4 right-20 p-3 bg-blue-500 text-white rounded-full shadow-md hover:bg-blue-600 transition"
         >
           ↑
         </Button>