docs: replace mendable with algolia (#6694)

* add-algolia-to-config

* remove-mendable-search-bar

* remove-mendable-yarn-lockfile

* yarn-lockfile

* replace-mendable-in-footer-component

* Update yarn.lock to use Yarn registry URLs

* lockfile-use-npm-registry

docs/docusaurus.config.js

@@ -20,9 +20,6 @@ const config = {
   projectName: "langflow",
   trailingSlash: false,
   staticDirectories: ["static"],
-  customFields: {
-    mendableAnonKey: "b7f52734-297c-41dc-8737-edbd13196394", // Mendable Anon Client-side key, safe to expose to the public
-  },
   i18n: {
     defaultLocale: "en",
     locales: ["en"],
@@ -258,6 +255,15 @@ const config = {
           hideable: false,
         },
       },
+      algolia: {
+        appId: 'UZK6BDPCVY',
+        // public key, safe to commit
+        apiKey: 'adbd7686dceb1cd510d5ce20d04bf74c',
+        indexName: 'langflow',
+        contextualSearch: true,
+        searchParameters: {},
+        searchPagePath: 'search',
+      },
     }),
 };
 

docs/src/theme/Footer.js

@@ -1,52 +1,77 @@
-import React from "react";
+import React, { useState } from "react";
 import Footer from "@theme-original/Footer";
-import { MendableFloatingButton } from "@mendable/search";
+import { useDocSearchKeyboardEvents } from '@docsearch/react';
-import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 
 export default function FooterWrapper(props) {
-  const iconSpan1 = React.createElement(
+  const [isHovered, setIsHovered] = useState(false);
-    "img",
+  const searchButtonRef = React.useRef(null);
-    {
-      src: "/img/langflow-icon-black-transparent.svg",
-      srcDark: "",
-      style: { width: "40px" },
-    },
-    null
-  );
 
-  const icon = React.createElement(
+  useDocSearchKeyboardEvents({
-    "div",
+    isOpen: false,
-    {
+    onOpen: () => {
-      style: {
+      searchButtonRef.current?.click();
-        color: "#000000",
-        fontSize: "22px",
-        width: "48px",
-        height: "48px",
-        margin: "0px",
-        padding: "0px",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        textAlign: "center",
-      },
     },
-    [iconSpan1]
-  );
-  const {
-    siteConfig: { customFields },
-  } = useDocusaurusContext();
-
-  const mendableFloatingButton = React.createElement(MendableFloatingButton, {
-    floatingButtonStyle: { color: "#000000", backgroundColor: "#f6f6f6" },
-    anon_key: customFields.mendableAnonKey,
-    showSimpleSearch: true,
-    icon: icon,
   });
 
+  const searchButton = (
+    <div
+      ref={searchButtonRef}
+      onClick={() => {
+        // This will trigger Docusaurus's default search modal
+        document.querySelector('.DocSearch-Button')?.click();
+      }}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      style={{
+        position: 'fixed',
+        right: '20px',
+        bottom: '20px',
+        zIndex: 100,
+        display: 'flex',
+        alignItems: 'center',
+        gap: '10px',
+        cursor: 'pointer',
+      }}
+    >
+      {isHovered && (
+        <div
+          style={{
+            backgroundColor: "#f6f6f6",
+            padding: '8px 16px',
+            borderRadius: '20px',
+            color: '#000',
+            fontSize: '14px',
+            boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
+          }}
+        >
+          Hi, how can I help you?
+        </div>
+      )}
+      <div
+        style={{
+          backgroundColor: "#f6f6f6",
+          borderRadius: "50%",
+          width: "48px",
+          height: "48px",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
+        }}
+      >
+        <img
+          src="/img/langflow-icon-black-transparent.svg"
+          style={{ width: "40px" }}
+          alt="Search"
+        />
+      </div>
+    </div>
+  );
+
   return (
     <>
-      <Footer />
+      <Footer {...props} />
-      {mendableFloatingButton}
+      {searchButton}
     </>
   );
 }

docs/src/theme/SearchBar.js

@@ -1,23 +0,0 @@
-// By default, the classic theme does not provide any SearchBar implementation
-// If you swizzled this, it is your responsibility to provide an implementation
-// Tip: swizzle the SearchBar from the Algolia theme for inspiration:
-// npm run swizzle @docusaurus/theme-search-algolia SearchBar
-import React from 'react'
-import { MendableSearchBar } from '@mendable/search'
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
-
-export default function SearchBarWrapper() {
-  const {
-    siteConfig: { customFields },
-  } = useDocusaurusContext()
-  return (
-    <div className="mendable-search">
-      <MendableSearchBar
-        anon_key={customFields.mendableAnonKey}
-        placeholder="Search..."
-        dialogPlaceholder="How to deploy my application?"
-        showSimpleSearch
-      />
-    </div>
-  )
-}