feat: Migrate CommandBar HelpHub SDK for Documentation Site

_includes/argohub-docs-navbar.html

@@ -71,9 +71,7 @@
 
     {% if page.layout != "home" %}
       <button
-        onclick="window.CommandBar.openHelpHub(); setTimeout(() => {
-          document.querySelector('input[data-testid=helphub-input]').focus()
-        }, 100)"
+        onclick="window.engagement.rc.open();"
         class="helpbub-toggler helpbub-toggler-small order-2 order-md-2"
         aria-label="Search Codefresh Documentation"
         type="button"

_includes/docs-navbar.html

@@ -131,9 +131,7 @@
 
     {% if page.layout != "home" %}
       <button
-        onclick="window.CommandBar.openHelpHub(); setTimeout(() => {
-          document.querySelector('input[data-testid=helphub-input]').focus()
-        }, 100)"
+        onclick="window.engagement.rc.open();"
         class="helpbub-toggler helpbub-toggler-small order-2 order-md-2"
         aria-label="Search Codefresh Documentation"
         type="button"

_includes/scripts.html

@@ -60,24 +60,73 @@
 <!-- End of Doc Search Embed Code -->
 
 <script>
-  const commandbarSegment = IS_GITOPS_DOC_COOKIE_SET ? '43836ac3': '3033bf7f'
-
-  var o=commandbarSegment,n=["Object.assign","Symbol","Symbol.for"].join("%2C"),a=window;function r(o,n){void 0===n&&(n=!1),"complete"!==document.readyState&&window.addEventListener("load",r.bind(null,o,n),{capture:!1,once:!0});var a=document.createElement("script");a.type="text/javascript",a.async=n,a.src=o,document.head.appendChild(a)}function t(){var n;if(void 0===a.CommandBar){delete a.__CommandBarBootstrap__;var t=Symbol.for("CommandBar::configuration"),e=Symbol.for("CommandBar::orgConfig"),i=Symbol.for("CommandBar::disposed"),c=Symbol.for("CommandBar::isProxy"),m=Symbol.for("CommandBar::queue"),d=Symbol.for("CommandBar::unwrap"),l=Symbol.for("CommandBar::eventSubscriptions"),s=[],u=localStorage.getItem("commandbar.lc"),f=u&&u.includes("local")?"http://localhost:8000":"https://api.commandbar.com",p=Object.assign(((n={})[t]={uuid:o},n[e]={},n[i]=!1,n[c]=!0,n[m]=new Array,n[d]=function(){return p},n[l]=void 0,n),a.CommandBar),b=["addCommand","boot","addEventSubscriber","addRecordAction","setFormFactor"],y=p;Object.assign(p,{shareCallbacks:function(){return{}},shareContext:function(){return{}}}),a.CommandBar=new Proxy(p,{get:function(o,n){return n in y?p[n]:"then"!==n?b.includes(n)?function(){var o=Array.prototype.slice.call(arguments);return new Promise((function(a,r){o.unshift(n,a,r),p[m].push(o)}))}:function(){var o=Array.prototype.slice.call(arguments);o.unshift(n),p[m].push(o)}:void 0}}),null!==u&&s.push("lc=".concat(u)),s.push("version=2"),r("".concat(f,"/latest/").concat(o,"?").concat(s.join("&")),!0)}}void 0===Object.assign||"undefined"==typeof Symbol||void 0===Symbol.for?(a.__CommandBarBootstrap__=t,r("https://polyfill.io/v3/polyfill.min.js?version=3.101.0&callback=__CommandBarBootstrap__&features="+n)):t();
-  window.CommandBar.setThemeMode('dark_mode')
-  window.CommandBar.boot(
-    "",
-    {},
-    { canOpenEditor: false, products: ["help_hub"] }
-  );
-
-  document.addEventListener("keydown", function (event) {
-    const isMac = navigator.userAgent.includes('Mac');
-    if ((event.key === "k") && ((isMac && event.metaKey) || (!isMac && event.ctrlKey))) {
-      event.preventDefault();
-      window.CommandBar.openHelpHub();
-      setTimeout(() => {
-        document.querySelector('input[data-testid=helphub-input]').focus()
-      }, 100);
+  // Initialize Amplitude Analytics + Guides & Surveys (Resource Center)
+  (function() {
+    const API_KEY = '42885a887590b9e28cce52518224850b';
+
+    // Load and initialize Amplitude Analytics first
+    function loadAnalyticsSDK() {
+      const script = document.createElement('script');
+      script.src = `https://cdn.amplitude.com/script/${API_KEY}.js`;
+      script.onload = onAnalyticsLoaded;
+      script.onerror = () => console.error('Failed to load Amplitude Analytics');
+      document.head.appendChild(script);
+    }
+
+    function onAnalyticsLoaded() {
+      if (typeof window.amplitude === 'undefined') {
+        console.warn('Amplitude Analytics not available');
+        return;
+      }
+
+      window.amplitude.init(API_KEY, {
+        autocapture: false,
+      });
+
+      setContentSegmentation();
+      loadEngagementSDK();
+    }
+
+    // Load and initialize Guides & Surveys SDK
+    function loadEngagementSDK() {
+      const script = document.createElement('script');
+      script.src = `https://cdn.amplitude.com/script/${API_KEY}.engagement.js`;
+      script.onload = onEngagementLoaded;
+      script.onerror = () => console.error('Failed to load Amplitude Engagement');
+      document.head.appendChild(script);
+    }
+
+    function onEngagementLoaded() {
+      if (typeof window.engagement === 'undefined') {
+        console.warn('Amplitude Engagement not available');
+        return;
+      }
+
+      window.amplitude.add(window.engagement.plugin());
+      setupResourceCenterShortcut();
+    }
+
+    function setupResourceCenterShortcut() {
+      document.addEventListener('keydown', function(event) {
+        const isMac = navigator.userAgent.includes('Mac');
+        const isShortcut = (event.key === 'k') &&
+          ((isMac && event.metaKey) || (!isMac && event.ctrlKey));
+
+        if (isShortcut) {
+          event.preventDefault();
+          window.engagement.rc.open();
+        }
+      });
+    }
+
+    // Set content segment based on system type
+    function setContentSegmentation() {
+      const identify = new window.amplitude.Identify();
+      const segment = IS_GITOPS_DOC_COOKIE_SET ? 'gitOpsCloud' : 'enterprise';
+      identify.set('segment', segment);
+      window.amplitude.identify(identify);
     }
-  });
+
+    loadAnalyticsSDK();
+  })();
 </script>

assets/scss/_helpbub.scss

@@ -27,15 +27,3 @@
 .helpbub-toggler-small {
   max-width: 275px;
 }
-
-/* stylelint-disable selector-max-id */
-#helphub-modal {
-  inset: 0;
-  margin: auto;
-}
-
-.codehilite {
-  code {
-    color: $helphub-copilot-code-color !important
-  }
-}

assets/scss/_variables.scss

@@ -71,7 +71,6 @@ $bd-link-hover-color: color.adjust($bd-link-color, $lightness: -15%) !default;
 $helpbub-bg: #3f4255;
 $helpbub-text-color: #b0c4e7;
 $helpbub-border: #35384b;
-$helphub-copilot-code-color: #eff;
 
 // Fonts
 // stylelint-disable value-keyword-case

gitops/index.html

@@ -22,9 +22,7 @@ <h2 class="mb-3 bd-text-white text-uppercase">
           </p>
 <!--          <div id="searchbar"></div>-->
           <button
-            onclick="window.CommandBar.openHelpHub(); setTimeout(() => {
-              document.querySelector('input[data-testid=helphub-input]').focus()
-            }, 100)"
+            onclick="window.engagement.rc.open();"
             class="helpbub-toggler mb-3"
             aria-label="Search Codefresh Documentation"
             type="button"

index.html

@@ -21,9 +21,7 @@ <h2 class="mb-3 bd-text-white text-uppercase">
           </p>
 <!--          <div id="searchbar"></div>-->
           <button
-            onclick="window.CommandBar.openHelpHub(); setTimeout(() => {
-              document.querySelector('input[data-testid=helphub-input]').focus()
-            }, 100)"
+            onclick="window.engagement.rc.open();"
             class="helpbub-toggler mb-3"
             aria-label="Search Codefresh Documentation"
             type="button"