chore: add quick keyboard shortcut to open kapa (#5876) (#5909)

* feat: add kapa branch

* docs: add kapa widget

* docs: update logo

* docs: add consent screen

* docs: static script

* docs: fix script issue

* docs: change back to online loading for test

* docs: cors anonymous

* docs: revert back to lonline loading

* Update docusaurus.config.js

* Update docusaurus.config.js

* Update docusaurus.config.js

* docs: change source script location

* ci: auto-formatting prettier issues

* docs: change logos and theme colors DOC-1587

* docs: further styling

* docs: style packs component

* docs: style cve table

* docs: style getting started cards

* docs: change font

* docs: adjust size of logo and points of interest

* ci: auto-formatting prettier issues

* Optimised images with calibre/image-actions

* docs: style tooltips

* docs: change color of privacy link

* docs: update background color

* docs: update styles

* docs: remove tags from underlines

* docs: fix navbar color and add 10% opacity to admonitions

* docs: style as support chat

* docs: style kapa

* docs: adjust color

* docs: edit eslint ignore

* docs: fix eslint

* docs: add disclaimer

* docs: remove old logo

* docs: add command to bring up chat

* docs: add browser shortcut

* docs: comment out shortcut script

* docs: undo temporary netlify change

* docs: add release notes snippets

* docs: punctuation

* docs: remove netlify changes

* docs: keep favicon the same

* chore: add shortcut to open

* docs: modify dialog location

* docs: add keyboard shortcut

---------

Co-authored-by: addetz <[email protected]>
Co-authored-by: vault-token-factory-spectrocloud[bot] <133815545+vault-token-factory-spectrocloud[bot]@users.noreply.github.com>
(cherry picked from commit a4a9a02)

Co-authored-by: Lenny Chen <[email protected]>

Author: vault-token-factory-spectrocloud[bot]

.prettierignore

@@ -7,6 +7,7 @@ vale/
 **/*.yaml
 **/*.yml
 .dockerignore
+static/scripts/kapa-widget.bundle.js
 
 docs/api-content/**/*.json
 

docs/docs-content/release-notes/release-notes.md

@@ -14,7 +14,8 @@ tags: ["release-notes"]
 ## February 21, 2025 - Documentation & Education Updates
 
 - The Documentation & Education team is enabling a new Q&A bot functionality on the Spectro Cloud official documentation
-  site. Click the **Ask AI** widget in the bottom right corner to bring up the chat interface.
+  site. Click the **Ask AI** widget in the bottom right corner or use the **Ctrl + I** (**Cmd + I** on macOS) keyboard
+  shortcut to bring up the chat interface.
 
   The Q&A bot is only trained on the latest version of the Spectro Cloud documentation. It is unable to answer
   version-specific questions. As with all generative AI-powered services, its responses may not be accurate. Always

docusaurus.config.js

@@ -261,7 +261,7 @@ const config = {
     },
     {
       src: "/scripts/kapa-shortcut.js",
-      async: true,
+      async: false,
     },
     {
       src: "/scripts/kapa-widget.bundle.js",
@@ -287,6 +287,7 @@ const config = {
       "data-conversation-button-icons-only": "true",
       "data-modal-size": "80%",
       "data-modal-lock-scroll": "false",
+      "data-modal-inner-position-left": "auto",
       async: true,
     },
     {

static/scripts/kapa-shortcut.js

@@ -1,21 +1,41 @@
-// (function () {
-//   let k = window.Kapa;
-//   if (!k) {
-//     let i = function () {
-//       i.c(arguments);
-//     };
-//     i.q = [];
-//     i.c = function (args) {
-//       i.q.push(args);
-//     };
-//     window.Kapa = i;
-//   }
-// })();
+(function () {
+  let k = window.Kapa;
+  if (!k) {
+    let i = function () {
+      i.c(arguments);
+    };
+    i.q = [];
+    i.c = function (args) {
+      i.q.push(args);
+    };
+    window.Kapa = i;
+  }
+})();
 
-// document.addEventListener("keydown", function (event) {
-//   if ((event.ctrlKey || event.metaKey) && event.key === "i") {
-//     event.preventDefault();
-//     console.log("Kapa shortcut triggered");
-//     window.Kapa("open");
-//   }
-// });
+document.addEventListener("keydown", function (event) {
+  if ((event.ctrlKey || event.metaKey) && event.key === "i") {
+    event.preventDefault();
+
+    // Get the shadow root of the Kapa widget
+    const kapaContainer = document.querySelector("#kapa-widget-container");
+    const shadowRoot = kapaContainer?.shadowRoot;
+
+    if (!shadowRoot) return; // Exit if the shadow root is not found
+
+    // Navigate inside the shadow DOM to find the modal
+    const kapaPortal = shadowRoot.querySelector("#kapa-widget-portal");
+
+    if (!kapaPortal) return; // Exit if the portal is not found
+
+    // Now we can access the actual modal element
+    const modal = kapaPortal.querySelector(".mantine-Modal-root"); // Adjust selector as needed
+
+    if (modal && modal.children.length > 0) {
+      // Modal is open → Close it
+      window.Kapa("close");
+    } else {
+      // Modal is closed or not found → Open it
+      window.Kapa("open");
+    }
+  }
+});