From 0226b375d967f30b0ba27d061d465460d016e76c Mon Sep 17 00:00:00 2001
From: Nicolas <nicolascamara29@gmail.com>
Date: Fri, 14 Apr 2023 00:52:25 -0400
Subject: [PATCH] docs: Mendable Search integration  (#2803)

Mendable Seach Integration is Finally here!

Hey yall,

After various requests for Mendable in Python docs, we decided to get
our hands dirty and try to implement it.
Here is a version where we implement our **floating button** that sits
on the bottom right of the screen that once triggered (via press or CMD
K) will work the same as the js langchain docs.

Super excited about this and hopefully the community will be too.
@hwchase17 will send you the admin details via dm etc. The anon_key is
fine to be public.

Let me know if you need any further customization. I added the langchain
logo to it.
---
 docs/_static/css/custom.css       |  4 +++
 docs/_static/js/mendablesearch.js | 52 +++++++++++++++++++++++++++++++
 docs/conf.py                      |  5 +++
 3 files changed, 61 insertions(+)
 create mode 100644 docs/_static/js/mendablesearch.js

diff --git a/docs/_static/css/custom.css b/docs/_static/css/custom.css
index 673008a063..8e2ddc2c92 100644
--- a/docs/_static/css/custom.css
+++ b/docs/_static/css/custom.css
@@ -11,3 +11,7 @@ pre {
     max-width: 2560px !important;
   }
 }
+
+#my-component-root *, #headlessui-portal-root * {
+  z-index: 1000000000000;
+}
diff --git a/docs/_static/js/mendablesearch.js b/docs/_static/js/mendablesearch.js
new file mode 100644
index 0000000000..e3d2c1369a
--- /dev/null
+++ b/docs/_static/js/mendablesearch.js
@@ -0,0 +1,52 @@
+document.addEventListener('DOMContentLoaded', () => {
+  // Load the external dependencies
+  function loadScript(src, onLoadCallback) {
+    const script = document.createElement('script');
+    script.src = src;
+    script.onload = onLoadCallback;
+    document.head.appendChild(script);
+  }
+
+  function createRootElement() {
+    const rootElement = document.createElement('div');
+    rootElement.id = 'my-component-root';
+    document.body.appendChild(rootElement);
+    return rootElement;
+  }
+
+  
+
+  function initializeMendable() {
+    const rootElement = createRootElement();
+    const { MendableFloatingButton } = Mendable;
+    
+
+    const icon = React.createElement('p', {
+      style: { color: '#ffffff', fontSize: '22px',width: '48px', height: '48px', margin: '0px', padding: '0px', display: 'flex', alignItems: 'center', justifyContent: 'center' },
+    }, '🦜🔗');
+
+    
+    
+
+    const mendableFloatingButton = React.createElement(
+      MendableFloatingButton,
+      {
+        style: { darkMode: false, accentColor: '#010810' },
+        floatingButtonStyle: { color: '#ffffff', backgroundColor: '#010810' },
+        anon_key: '82842b36-3ea6-49b2-9fb8-52cfc4bde6bf', // Mendable Search Public ANON key, ok to be public
+        messageSettings: {
+          openSourcesInNewTab: false,
+        },
+        icon: icon,
+      }
+    );
+
+    ReactDOM.render(mendableFloatingButton, rootElement);
+  }
+
+  loadScript('https://unpkg.com/react@17/umd/react.production.min.js', () => {
+    loadScript('https://unpkg.com/react-dom@17/umd/react-dom.production.min.js', () => {
+      loadScript('https://unpkg.com/@mendable/search@0.0.83/dist/umd/mendable.min.js', initializeMendable);
+    });
+  });
+});
diff --git a/docs/conf.py b/docs/conf.py
index ae3924b590..087b2d2005 100644
--- a/docs/conf.py
+++ b/docs/conf.py
@@ -103,5 +103,10 @@ html_static_path = ["_static"]
 html_css_files = [
     "css/custom.css",
 ]
+
+html_js_files = [
+    "js/mendablesearch.js",
+]
+
 nb_execution_mode = "off"
 myst_enable_extensions = ["colon_fence"]