Added ai based chatbot which will guide in user friendly way

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,14 +16,15 @@ 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 />
         <div className="grow p-8 pt-24">
           <Cursor />
           {children}
           <ScrollToTop />
+          <AiChatbot />
         </div>
         <Footer />
       </main>

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;

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>