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 2d94fb2) * Update menu.html (cherry picked from commit 976fe62) * Update search-form.html (cherry picked from commit c65514b) * 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 d4f89c6) * 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>
truenas · Oct 2, 2024 · d13acc6 · d13acc6
1 parent 1b4ba8d
commit d13acc6
Show file tree

Hide file tree

Showing 4 changed files with 111 additions and 13 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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 -->
+
Original file line number	Diff line number	Diff line change
Expand Up		@@ -71,3 +71,4 @@
		name="query"
		placeholder="&#Xf002; Search 24.10 Docs...">
		</form>