Merge pull request #31 from srini047/28-all-chatbot-integration

Add: Chat support and fix react-scroll position

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@emailjs/browser": "^3.10.0",
+    "@mendable/search": "^0.0.111",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -13,7 +14,7 @@
     "react-icons": "^4.7.1",
     "react-router-dom": "^6.7.0",
     "react-scripts": "5.0.1",
-    "react-scroll-to-top": "^3.0.0",
+    "react-scroll": "^1.8.9",
     "react-type-animation": "^3.0.1",
     "react-vertical-timeline-component": "^3.6.0",
     "web-vitals": "^2.1.4"

src/App.js

@@ -2,6 +2,7 @@ import React from "react";
 import "./index.css";
 import { Route, Routes } from "react-router-dom";
 import AnimatedCursor from "react-animated-cursor";
+import { MendableFloatingButton } from "@mendable/search";
 
 // Routes
 import Home from "./routes/Home";
@@ -10,6 +11,16 @@ import Blogs from "./routes/Blogs";
 import About from "./routes/About";
 import Contact from "./routes/Contact";
 
+// Mendable constants
+const style = { darkMode: true, accentColor: "#fff" };
+
+const floatingButtonStyle = {
+  color: "#000",
+  backgroundColor: "#fff",
+};
+
+const icon = <img src="https://user-images.githubusercontent.com/81156510/248205105-91c18b88-8ef4-4ff1-8e5f-d63d586af1ab.svg" alt="chatbot icon"/>
+
 function App() {
   return (
     <div>
@@ -24,6 +35,14 @@ function App() {
           border: "3px solid #fff",
         }}
       />
+
+      <MendableFloatingButton
+        anon_key="7f3dd8c7-e7d7-4c93-aab3-4ae284cbc281"
+        style={style}
+        floatingButtonStyle={floatingButtonStyle}
+        icon={icon}
+      />
+
       <Routes>
         <Route path="/" element={<Home />} />
         <Route path="/projects" element={<Projects />} />

src/components/ScrollTop.css

@@ -0,0 +1,29 @@
+.scroll-to-top {
+  position: fixed;
+  left: 20px;
+  bottom: 20px;
+  z-index: 1000;
+  background-color: #fff;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.scroll-to-top:hover {
+  background-color: #fff;
+}
+
+.scroll-to-top-icon {
+  color: #555;
+  font-size: 24px;
+}
+
+.scroll-to-top.visible {
+  opacity: 1;
+}

src/components/ScrollTop.js

@@ -1,12 +1,45 @@
-import React from 'react'
-import ScrollToTop from "react-scroll-to-top"
-
-const ScrollTop = () => {
-  return (
-    <div>
-        <ScrollToTop smooth />
-    </div>
-  )
+import React from 'react';
+import { FaArrowAltCircleUp } from 'react-icons/fa';
+import { animateScroll as scroll } from 'react-scroll';
+import './ScrollTop.css';
+
+class ScrollToTopButton extends React.Component {
+  state = {
+    isScrollVisible: false
+  };
+
+  componentDidMount() {
+    window.addEventListener('scroll', this.handleScroll);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('scroll', this.handleScroll);
+  }
+
+  handleScroll = () => {
+    const { isScrollVisible } = this.state;
+    const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
+
+    if (!isScrollVisible && scrollTop > 0) {
+      this.setState({ isScrollVisible: true });
+    } else if (isScrollVisible && scrollTop === 0) {
+      this.setState({ isScrollVisible: false });
+    }
+  };
+
+  scrollToTop = () => {
+    scroll.scrollToTop();
+  };
+
+  render() {
+    const { isScrollVisible } = this.state;
+
+    return (
+      <div className={`scroll-to-top ${isScrollVisible ? 'visible' : ''}`} onClick={this.scrollToTop}>
+        <FaArrowAltCircleUp className="scroll-to-top-icon" />
+      </div>
+    );
+  }
 }
 
-export default ScrollTop
+export default ScrollToTopButton;