From d13acc6a82bb58e2c82d3f08b3f956948020a051 Mon Sep 17 00:00:00 2001
From: bugclerk <40872210+bugclerk@users.noreply.github.com>
Date: Wed, 2 Oct 2024 12:14:45 -0700
Subject: [PATCH] PD-1475 / 24.10 / Pd 1475 additional css styling for the docs
 bot (by DjP-iX) (#3096)

* Update menu-filetree.html

(cherry picked from commit 2d94fb234f74cd68fcc86e83146fa992b3790d76)

* Update menu.html

(cherry picked from commit 976fe6288941cc9079206df61dcea77c4ddb53c4)

* Update search-form.html

(cherry picked from commit c65514b753bb66a16e04e5965743398bcf596b5d)

* PD-1475 / 25.04 / Pd 1475 additional css styling for the docs bot (#3090)

* Update menu-filetree.html

* Update menu.html

* Update search-form.html

* Update site-header.html

* Update menu-filetree.html

(cherry picked from commit d4f89c6802c577568a491f7db616d56dfee41341)

* Update menu-filetree.html

* Update menu.html

---------

Co-authored-by: DjP-iX <133042991+DjP-iX@users.noreply.github.com>
Co-authored-by: MicJ <92740932+micjohnson777@users.noreply.github.com>
---
 layouts/partials/menu-filetree.html | 107 ++++++++++++++++++++++++++++
 layouts/partials/menu.html          |   3 +-
 layouts/partials/search-form.html   |   1 +
 layouts/partials/site-header.html   |  13 +---
 4 files changed, 111 insertions(+), 13 deletions(-)

diff --git a/layouts/partials/menu-filetree.html b/layouts/partials/menu-filetree.html
index f2bdcc50b6..92ce879681 100644
--- a/layouts/partials/menu-filetree.html
+++ b/layouts/partials/menu-filetree.html
@@ -1,4 +1,111 @@
 {{ $current := . }}
+<!-- Static chatbot button -->
+<div style="margin-top: 15px; margin-bottom: 10px;">
+  <button id="chatbot-open-button" style="padding: 10px 20px; background-color: #0095d5; color: white; border: none; cursor: pointer; border-radius: 20px; display: flex; align-items: center; gap: 10px; transition: opacity 0.3s;">
+    <span id="chatbot-button-icon" style="display: flex; vertical-align: middle;">
+      <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="book" class="svg-inline--fa fa-book" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" style="width: 20px; height: 20px;">
+        <path fill="currentColor" d="M96 0C43 0 0 43 0 96V416c0 53 43 96 96 96H384h32c17.7 0 32-14.3 32-32s-14.3-32-32-32V384c17.7 0 32-14.3 32-32V32c0-17.7-14.3-32-32-32H384 96zm0 384H352v64H96c-17.7 0-32-14.3-32-32s14.3-32 32-32zm32-240c0-8.8 7.2-16 16-16H336c8.8 0 16 7.2 16 16s-7.2 16-16 16H144c-8.8 0-16-7.2-16-16zm16 48H336c8.8 0 16 7.2 16 16s-7.2 16-16 16H144c-8.8 0-16-7.2-16-16s7.2-16 16-16z"></path>
+      </svg>
+    </span>
+    <span>AI-Powered Search</span>
+  </button>
+</div>
+
+<style>
+  #chatbot-open-button:hover {
+    opacity: 0.8; /* Adjust the opacity for the hover effect */
+  }
+</style>
+
+<!-- Chatbot Initialization Script -->
+<script type="text/javascript">
+  window.DocsBotAI = window.DocsBotAI || {};
+  let chatbotOpen = false;  // Track the open/close state of the chatbot
+
+  DocsBotAI.init = function(c) {
+    return new Promise(function(e, o) {
+      var t = document.createElement("script");
+      t.type = "text/javascript";
+      t.async = true;
+      t.src = "https://widget.docsbot.ai/chat.js";
+      var n = document.getElementsByTagName("script")[0];
+      n.parentNode.insertBefore(t, n);
+      t.addEventListener("load", function() {
+        window.DocsBotAI.mount({
+          id: c.id,
+          supportCallback: c.supportCallback,
+          identify: c.identify,
+          options: c.options,
+          signature: c.signature
+        });
+
+        // Attach the click event to the static button to toggle open/close
+        document.getElementById("chatbot-open-button").addEventListener("click", function() {
+          const iconElement = document.getElementById("chatbot-button-icon");
+
+          if (chatbotOpen) {
+            if (window.DocsBotAI.close) {
+              window.DocsBotAI.close();  // Close the chatbot
+              chatbotOpen = false;
+
+              // Change to book icon when closed
+              iconElement.innerHTML = `
+                <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="book" class="svg-inline--fa fa-book" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" style="width: 20px; height: 20px;">
+                  <path fill="currentColor" d="M96 0C43 0 0 43 0 96V416c0 53 43 96 96 96H384h32c17.7 0 32-14.3 32-32s-14.3-32-32-32V384c17.7 0 32-14.3 32-32V32c0-17.7-14.3-32-32-32H384 96zm0 384H352v64H96c-17.7 0-32-14.3-32-32s14.3-32 32-32zm32-240c0-8.8 7.2-16 16-16H336c8.8 0 16 7.2 16 16s-7.2 16-16 16H144c-8.8 0-16-7.2-16-16zm16 48H336c8.8 0 16 7.2 16 16s-7.2 16-16 16H144c-8.8 0-16-7.2-16-16s7.2-16 16-16z"></path>
+                </svg>`;
+            } else {
+              console.error("Chatbot close method not available.");
+            }
+          } else {
+            if (window.DocsBotAI.open) {
+              window.DocsBotAI.open();  // Open the chatbot
+              chatbotOpen = true;
+
+              // Change to X icon when open
+              iconElement.innerHTML = `
+                <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="xmark" class="svg-inline--fa fa-xmark" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" style="width: 20px; height: 20px;">
+                  <path fill="currentColor" d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"></path>
+                </svg>`;
+            } else {
+              console.error("Chatbot open method not available.");
+            }
+          }
+        });
+
+        e(); // Resolve the promise
+      });
+      t.addEventListener("error", function(t) {
+        o(t.message);
+      });
+    });
+  };
+
+  DocsBotAI.init({
+    id: "c6l7vGyugnoP9SSSoNXy/h6qDF4J2h3xfHKO9Nm6r",
+    options: {
+      customCSS: `
+      .docsbot-wrapper {
+        width: 75%;
+        max-width: 750px;
+        position: fixed;
+        left: 35% !important;
+        top: 15% !important;
+        z-index: 1000 !important;
+      }
+      .floating-button {
+        display: none !important;
+      }
+      @media (max-width: 1200px) {
+        .docsbot-wrapper {
+          left: 15% !important;
+          top: 15% !important;
+        }
+      `,
+    }
+  });
+</script>
+
+<!-- Navigation Menu -->
 {{ template "tree-nav" dict "sect" .Site.Home.Sections "current" $current "main_index_class" .Page.Params.main_index_class "path" .RelPermalink }}
 
 <!-- templates -->
diff --git a/layouts/partials/menu.html b/layouts/partials/menu.html
index a1c0049a19..21f3a52864 100644
--- a/layouts/partials/menu.html
+++ b/layouts/partials/menu.html
@@ -1,11 +1,12 @@
 <nav class="sidebar-fixed">
+ <h2>{{ i18n "nav_navigation" }}</h2>
+
   {{ if not (isset .Params "main_index_class") }}
     {{ partial "search" . }}
     {{ partial "search-form" . }}
   {{ end }}
 
   <section class="gdoc-nav--main">
-    <h2>{{ i18n "nav_navigation" }}</h2>
     {{ if .Site.Params.GeekdocMenuBundle }}
       {{ partial "menu-bundle" (dict "current" . "source" .Site.Data.menu.main.main) }}
     {{ else }}
diff --git a/layouts/partials/search-form.html b/layouts/partials/search-form.html
index 2c10007a63..28c93a909b 100644
--- a/layouts/partials/search-form.html
+++ b/layouts/partials/search-form.html
@@ -71,3 +71,4 @@
            name="query"
            placeholder="&#Xf002; Search 24.10 Docs...">
 </form>
+
diff --git a/layouts/partials/site-header.html b/layouts/partials/site-header.html
index ec37ec8033..65a4bd6de6 100644
--- a/layouts/partials/site-header.html
+++ b/layouts/partials/site-header.html
@@ -243,15 +243,4 @@
 });
 </script>
 <!-- End sticky main_navbar -->
-<!-- Add DocsBot AI powered search widget -->
-<script type="text/javascript">window.DocsBotAI=window.DocsBotAI||{},DocsBotAI.init=function(c){return new Promise(function(e,o){var t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src="https://widget.docsbot.ai/chat.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(t,n),t.addEventListener("load",function(){window.DocsBotAI.mount({id:c.id,supportCallback:c.supportCallback,identify:c.identify,options:c.options,signature:c.signature});var t;t=function(n){return new Promise(function(e){if(document.querySelector(n))return e(document.querySelector(n));var o=new MutationObserver(function(t){document.querySelector(n)&&(e(document.querySelector(n)),o.disconnect())});o.observe(document.body,{childList:!0,subtree:!0})})},t&&t("#docsbotai-root").then(e).catch(o)}),t.addEventListener("error",function(t){o(t.message)})})};</script>
-<script type="text/javascript">
-  DocsBotAI.init({
-    id: "c6l7vGyugnoP9SSSoNXy/h6qDF4J2h3xfHKO9Nm6r",
-    options: {
-	  horizontalMargin: 40,
-	  verticalMargin: 80,
-	}
-  });
-</script>
-<!-- End AI powered search widget embed -->
+