Hide chat bubble on scroll

HACC-2023 · Nov 8, 2023 · d37fc03 · d37fc03
1 parent 01d183b
commit d37fc03
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 5 deletions.
diff --git a/my-app/src/components/chatbot/DialogflowChatWidget.jsx b/my-app/src/components/chatbot/DialogflowChatWidget.jsx
@@ -11,7 +11,7 @@ const DialogflowChatWidget = () => {
       script.async = true;
 
       script.onload = () => {
-        // for the messeger to appear
+        // for the messenger to appear
         const dfMessenger = document.createElement('df-messenger');
         dfMessenger.setAttribute('project-id', 'white-sunspot-403307');
         dfMessenger.setAttribute('agent-id', '48d6d88b-9934-406d-8523-e3ec7f4f7381');
@@ -23,7 +23,7 @@ const DialogflowChatWidget = () => {
 
         dfMessenger.appendChild(chatBubble);
 
-        document.body.appendChild(dfMessenger);
+        document.getElementById('chatContainer').appendChild(dfMessenger);
       };
 
       document.body.appendChild(script);
@@ -33,6 +33,7 @@ const DialogflowChatWidget = () => {
   const dfMessengerColors = {
     textColor:'#fff',
     primaryColor: '#203444',
+    primaryColorHover: '#293b4d',
     backgroundColor: '#282b31',
     botBubbleBackground: '#428fd9',
     userBubbleBackground: '#414c52',
@@ -88,10 +89,11 @@ const DialogflowChatWidget = () => {
         }
         df-messenger {
           z-index: 999;
-          position: fixed;
-          bottom: 70px;
           right: 16px;
         }
+        df-messenger-chat-bubble:hover {
+          --df-messenger-chat-bubble-background: ${dfMessengerColors.primaryColorHover};
+        }
         @media (min-width: 768px) {
           df-messenger {
             bottom: 16px;

diff --git a/my-app/src/pages/_app.js b/my-app/src/pages/_app.js
@@ -5,8 +5,31 @@ import { ToastContainer } from "react-toastify";
 import DialogflowChatWidget from "@/components/chatbot/DialogflowChatWidget";
 import "@/styles/globals.css";
 import 'react-toastify/dist/ReactToastify.css';
+import {useEffect, useState} from "react";
+
 
 const App = ({ Component, pageProps: { session, ...pageProps } }) => {
+  const [scrollDirection, setScrollDirection] = useState(null);
+
+  useEffect(() => {
+    let lastScrollY = window.pageYOffset;
+
+    const updateScrollDirection = () => {
+      const scrollY = window.pageYOffset;
+      const direction = scrollY > lastScrollY ? "down" : "up";
+      if (direction !== scrollDirection && (scrollY - lastScrollY > 10 || scrollY - lastScrollY < -10)) {
+        setScrollDirection(direction);
+      }
+      lastScrollY = scrollY > 0 ? scrollY : 0;
+    };
+    window.addEventListener("scroll", updateScrollDirection); // add event listener
+    return () => {
+      window.removeEventListener("scroll", updateScrollDirection); // clean up
+    }
+  }, [scrollDirection]);
+
+  console.log(scrollDirection)
+
   return (
     <>
       <SessionProvider session={session}>
@@ -17,7 +40,9 @@ const App = ({ Component, pageProps: { session, ...pageProps } }) => {
           </div>
           <MobileNavbar />
           <ToastContainer />
-          <DialogflowChatWidget/>
+          <div id="chatContainer" className={`fixed ${ scrollDirection === "down" ? "-bottom-24" : "bottom-0"} right-4 h-20 transition-all duration-500`}>
+            <DialogflowChatWidget/>
+          </div>
         </div>
       </SessionProvider>
     </>