From 9030a2d7ba6df1e82cb6d7064f5dcdc946ee14e3 Mon Sep 17 00:00:00 2001
From: Glenn Jocher <glenn.jocher@ultralytics.com>
Date: Thu, 3 Oct 2024 16:14:53 +0200
Subject: [PATCH] Update Docs extra.js (#16663)

Signed-off-by: UltralyticsAssistant <web@ultralytics.com>
Co-authored-by: UltralyticsAssistant <web@ultralytics.com>
---
 docs/overrides/javascript/extra.js   | 82 ++++++++++++++++++++++++++++
 docs/overrides/stylesheets/style.css |  6 ++
 2 files changed, 88 insertions(+)

diff --git a/docs/overrides/javascript/extra.js b/docs/overrides/javascript/extra.js
index 3233a644..655df8e1 100644
--- a/docs/overrides/javascript/extra.js
+++ b/docs/overrides/javascript/extra.js
@@ -67,3 +67,85 @@ window.onhashchange = function() {
         hash: window.location.pathname + window.location.search + window.location.hash
     }, '*');
 };
+
+// Add Inkeep button
+document.addEventListener("DOMContentLoaded", () => {
+  const inkeepScript = document.createElement("script");
+  inkeepScript.src = "https://unpkg.com/@inkeep/uikit-js@0.3.11/dist/embed.js";
+  inkeepScript.type = "module";
+  inkeepScript.defer = true;
+  document.head.appendChild(inkeepScript);
+
+  // Configure and initialize the widget
+  const addInkeepWidget = () => {
+    const inkeepWidget = Inkeep().embed({
+      componentType: "ChatButton",
+      colorModeSync: {
+        observedElement: document.documentElement,
+        isDarkModeCallback: (el) => {
+          const currentTheme = el.getAttribute("data-color-mode");
+          return currentTheme === "dark";
+        },
+        colorModeAttribute: "data-color-mode",
+      },
+      properties: {
+        chatButtonType: "PILL",
+        fixedPositionYOffset: "2rem",
+        chatButtonBgColor: "#F3F3F3",
+        baseSettings: {
+          apiKey: "13dfec2e75982bc9bae3199a08e13b86b5fbacd64e9b2f89", // required
+          integrationId: "cm1shscmm00y26sj83lgxzvkw", // required
+          organizationId: "org_e3869az6hQZ0mXdF", // required
+          primaryBrandColor: "#111F68", // Ultralytics brand color
+          organizationDisplayName: "Ultralytics",
+          theme: {
+            stylesheetUrls: ["../stylesheets/style.css"],
+          },
+          // ...optional settings
+        },
+        modalSettings: {
+          // optional settings
+        },
+        searchSettings: {
+          // optional settings
+        },
+        aiChatSettings: {
+          chatSubjectName: "Ultralytics",
+          botAvatarSrcUrl: "https://storage.googleapis.com/organization-image-assets/ultralytics-botAvatarSrcUrl-1727908259285.png",
+          botAvatarDarkSrcUrl: "https://storage.googleapis.com/organization-image-assets/ultralytics-botAvatarDarkSrcUrl-1727908258478.png",
+          quickQuestions: [
+            "What's new in Ultralytics YOLO11?",
+            "How can I get started with Ultralytics HUB?",
+            "How does Ultralytics Enterprise Licensing work?"
+          ],
+          getHelpCallToActions: [
+            {
+              name: "Ask on Ultralytics GitHub",
+              url: "https://github.com/ultralytics/ultralytics",
+              icon: {
+                builtIn: "FaGithub"
+              }
+            },
+            {
+              name: "Ask on Ultralytics Discourse",
+              url: "https://community.ultralytics.com/",
+              icon: {
+                builtIn: "FaDiscourse"
+              }
+            },
+            {
+              name: "Ask on Ultralytics Discord",
+              url: "https://discord.com/invite/ultralytics",
+              icon: {
+                builtIn: "FaDiscord"
+              }
+            }
+          ],
+        },
+      },
+    });
+  };
+  inkeepScript.addEventListener("load", () => {
+    addInkeepWidget(); // initialize the widget
+  });
+});
diff --git a/docs/overrides/stylesheets/style.css b/docs/overrides/stylesheets/style.css
index a9a89d90..a5bdcc56 100644
--- a/docs/overrides/stylesheets/style.css
+++ b/docs/overrides/stylesheets/style.css
@@ -264,3 +264,9 @@ div.highlight {
   }
 }
 /* MkDocs Ultralytics Plugin ---------------------------------------------------------------------------------------- */
+
+/* Inkeep button font color ----------------------------------------------------------------------------------------- */
+.ikp-floating-button {
+  color: #111f68;
+}
+/* Inkeep button ---------------------------------------------------------------------------------------------------- */