From 8ecd268b4a39a2d6760711ca65f1e9cc164c0d6b Mon Sep 17 00:00:00 2001
From: AswaniBolisetti <aswanibolisetti@gmail.com>
Date: Sat, 26 Oct 2024 11:55:49 +0530
Subject: [PATCH] enhanced scroll buttons

---
 src/components/chatbot.jsx     |  8 ++++++-
 src/css/BottomToTop.module.css | 15 ++++++++-----
 src/css/TopToBottom.module.css | 22 +++++++++++--------
 src/css/custom.css             |  9 ++++++++
 src/pages/index.js             | 40 +++++++++++++++++-----------------
 5 files changed, 58 insertions(+), 36 deletions(-)

diff --git a/src/components/chatbot.jsx b/src/components/chatbot.jsx
index 23186a9d2..456d3dee6 100644
--- a/src/components/chatbot.jsx
+++ b/src/components/chatbot.jsx
@@ -4,7 +4,13 @@ const ChatbotScript = () => {
   useEffect(() => {
     window.embeddedChatbotConfig = {
       chatbotId: "lb8tTNFhXryOebzVM1edo",
-      domain: "www.chatbase.co"
+      domain: "www.chatbase.co",
+      customStyles: {
+        position: 'fixed',
+        left: '20px',
+        bottom: '20px',
+        zIndex: '1000', // Ensures it stays on top of other elements
+      }
     };
 
     const script = document.createElement('script');
diff --git a/src/css/BottomToTop.module.css b/src/css/BottomToTop.module.css
index c0e48cf26..5f4f63431 100644
--- a/src/css/BottomToTop.module.css
+++ b/src/css/BottomToTop.module.css
@@ -1,15 +1,17 @@
 .scrollToTopButton {
   position: fixed;
   bottom: 80px;
-  right: 20px;
+  left: 20px; /* Position on the left bottom corner */
   background-color: #007bff;
   color: white;
   border: none;
-  border-radius: 8px;
-  padding: 10px;
+  border-radius: 50%; /* Changed to 50% for a fully rounded button */
+  width: 50px; /* Set a width for the circular button */
+  height: 50px; /* Set a height for the circular button */
+  padding: 0; /* Removed padding to maintain the circle shape */
   cursor: pointer;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-  transition: opacity 0.3s;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Enhanced shadow for a more polished look */
+  transition: opacity 0.3s, transform 0.2s; /* Added transform for hover effect */
   opacity: 0.8;
   z-index: 1000;
 }
@@ -17,4 +19,5 @@
 .scrollToTopButton:hover {
   background-color: #0056b3;
   opacity: 1;
-}
\ No newline at end of file
+  transform: scale(1.1); /* Slightly enlarge on hover for emphasis */
+}
diff --git a/src/css/TopToBottom.module.css b/src/css/TopToBottom.module.css
index 994c534ff..580e996e6 100644
--- a/src/css/TopToBottom.module.css
+++ b/src/css/TopToBottom.module.css
@@ -1,20 +1,24 @@
 .scrollToBottomButton {
   position: fixed;
-  bottom: 20px;
-  right: 20px;
-  background-color: #28a745;
+  bottom: 10px;
+  left: 20px;
+  background-color: rgba(128, 128, 128, 0.6);
   color: white;
   border: none;
-  border-radius: 8px;
-  padding: 10px;
+  border-radius: 50%;
+  width: 50px;
+  height: 50px;
+  padding: 0;
+  font-size: 15px; /* Increase font size for a larger arrow */
   cursor: pointer;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-  transition: opacity 0.3s;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  transition: opacity 0.3s, transform 0.2s;
   opacity: 0.8;
   z-index: 1000;
 }
 
 .scrollToBottomButton:hover {
-  background-color: #218838;
+  background-color: rgba(100, 100, 100, 0.7);
   opacity: 1;
-}
\ No newline at end of file
+  transform: scale(1.1);
+}
diff --git a/src/css/custom.css b/src/css/custom.css
index 68b4f7233..810e6c998 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -15,6 +15,15 @@
 ::-webkit-scrollbar-thumb:hover {
   background: var(--ifm-color-primary-dark);
 }
+/* Custom CSS for the chatbot */
+#chatbot-container {
+  position: fixed;
+  left: 20px;
+  bottom: 20px;
+  z-index: 1000; /* Ensures it’s on top */
+  width: 300px; /* Adjust width as needed */
+  height: 500px; /* Adjust height as needed */
+}
 
 :root {
   --ifm-color-primary: #3b82f6;
diff --git a/src/pages/index.js b/src/pages/index.js
index 3296a89bb..fda89873e 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -11,27 +11,27 @@ import ChatbotIframe from "../components/chatbot.jsx";
 export default function Home() {
   const { siteConfig } = useDocusaurusContext();
 
-  useEffect(() => {
-    // Create and append the Chatrace script
-    const chatraceScript = document.createElement("script");
-    chatraceScript.src = "https://chatrace.com/webchat/plugin.js?v=5";
-    chatraceScript.async = true;
-    chatraceScript.onload = () => {
-      // Initialize the chat widget after the script loads
-      if (window.ktt10) {
-        window.ktt10.setup({
-          id: "2Xk6i0bywhd02D",
-          accountId: "1322274",
-          color: "#006dff",
-        });
-      }
-    };
-    document.body.appendChild(chatraceScript);
+  // useEffect(() => {
+  //   // Create and append the Chatrace script
+  //   const chatraceScript = document.createElement("script");
+  //   chatraceScript.src = "https://chatrace.com/webchat/plugin.js?v=5";
+  //   chatraceScript.async = true;
+  //   chatraceScript.onload = () => {
+  //     // Initialize the chat widget after the script loads
+  //     if (window.ktt10) {
+  //       window.ktt10.setup({
+  //         id: "2Xk6i0bywhd02D",
+  //         accountId: "1322274",
+  //         color: "#006dff",
+  //       });
+  //     }
+  //   };
+  //   document.body.appendChild(chatraceScript);
 
-    return () => {
-      document.body.removeChild(chatraceScript);
-    };
-  }, []);
+  //   return () => {
+  //     document.body.removeChild(chatraceScript);
+  //   };
+  // }, []);
 
   return (
     <Layout