DOCS-1162 - Algolia Ask AI demo

docusaurus.config.js

@@ -131,6 +131,14 @@ module.exports = {
     require.resolve('./src/client-modules/trackTrialClick.js'),
     require.resolve('./src/client-modules/fixAnchorScroll.js'),
   ],
+  customFields: {
+    askAi: {
+      // Keep Algolia Ask AI feedback targets out of source control.
+      // This Google Form is a shared public collection endpoint for Algolia Ask AI feedback.
+      feedbackFormUrl:
+        'https://docs.google.com/forms/d/e/1FAIpQLSdJOWBAXsM86C-buZm0N3a9vwBOxxjOfBe7jiEn6PkLqctv5A/viewform?usp=pp_url&entry.778922322=a&entry.898262107=a&entry.1217042173=a&entry.1416546939=a&entry.1571666595=a&entry.554631687=a',
+    },
+  },
   storage: {
     type: 'localStorage',
     namespace: true,
@@ -388,6 +396,13 @@ module.exports = {
       contextualSearch: false,
       searchPagePath: 'docs-search', // Default value is 'search'; renamed to 'docs-search' so it doesn't conflict with '/Search' redirect
       insights: true,
+      askAi: {
+        assistantId: 'T7pp7iENesuU',
+        indexName: 'crawler_sumodocs',
+        apiKey: 'fb2f4e1fb40f962900631121cb365549',
+        appId: '2SJPGMLW1Q',
+        suggestedQuestions: true,
+      },
       insightsConfig: {
         useCookie: true, // alt to useCookie: true,
       },
@@ -549,6 +564,12 @@ module.exports = {
             type: 'search',
             position: 'left',
           },
+          {
+            type: 'html',
+            position: 'left',
+            className: 'navbar-ask-ai-item',
+            value: '<div id="navbar-ask-ai-button"></div>',
+          },
         ],
       },
       footer: {

package.json

@@ -33,7 +33,9 @@
     "@babel/runtime-corejs3": "7.26.10",
     "@braintree/sanitize-url": "^6.0.1",
     "@csstools/selector-resolve-nested": "3.1.0",
-    "@docsearch/css": "4",
+    "@docsearch/core": "4.6.2",
+    "@docsearch/css": "4.6.2",
+    "@docsearch/react": "4.6.2",
     "@docusaurus/bundler": "^3.10.1",
     "@docusaurus/core": "^3.10.1",
     "@docusaurus/cssnano-preset": "^3.10.1",

src/components/AskAiButton/index.tsx

@@ -0,0 +1,50 @@
+/**
+ * Ask AI Button Component
+ *
+ * Renders a button in the navbar that opens the Algolia Ask AI sidepanel.
+ * Includes keyboard shortcut support (Cmd/Ctrl + I).
+ *
+ * The sidepanel itself is rendered in Root.tsx, outside the navbar portal,
+ * so it is never unmounted by navbar re-renders on resize.
+ */
+
+import React, { useEffect } from 'react';
+import styles from './styles.module.css';
+
+interface AskAiButtonProps {
+  isOpen: boolean;
+  setIsOpen: (open: boolean) => void;
+}
+
+export default function AskAiButton({ isOpen, setIsOpen }: AskAiButtonProps) {
+  // Keyboard shortcut: Cmd/Ctrl + I
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if ((event.metaKey || event.ctrlKey) && event.key === 'i') {
+        event.preventDefault();
+        setIsOpen(!isOpen);
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [isOpen, setIsOpen]);
+
+  return (
+    <button
+      className={styles.askAiButton}
+      onClick={() => setIsOpen(true)}
+      aria-label="Ask AI"
+      title="Ask AI (Cmd/Ctrl + I)"
+    >
+      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={styles.buttonIcon}>
+        <path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"/>
+        <path d="M20 3v4"/>
+        <path d="M22 5h-4"/>
+        <path d="M4 17v2"/>
+        <path d="M5 18H3"/>
+      </svg>
+      <span className={styles.buttonText}>Ask AI</span>
+    </button>
+  );
+}

src/components/AskAiButton/styles.module.css

@@ -0,0 +1,94 @@
+/**
+ * Ask AI Button - Premium navbar button styling
+ * Matches Algolia and Stripe documentation design patterns
+ */
+
+.askAiButton {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0 0.875rem;
+  height: 36px;
+  background: transparent;
+  border: 1px solid var(--ifm-color-border-pale);
+  border-radius: 8px;
+  color: #5f6368;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+  margin-left: -1rem;
+  position: relative;
+  overflow: hidden;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+}
+
+/* Hover effect with subtle background and shadow */
+.askAiButton:hover {
+  background: var(--ifm-color-emphasis-100);
+  border-color: var(--ifm-color-emphasis-300);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
+}
+
+/* Active/pressed state - minimal animation */
+.askAiButton:active {
+  transform: scale(0.98);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+  transition: transform 0.1s ease;
+}
+
+/* Focus state for accessibility */
+.askAiButton:focus-visible {
+  outline: 2px solid var(--ifm-color-primary);
+  outline-offset: 2px;
+}
+
+/* Dark mode styling */
+[data-theme='dark'] .askAiButton {
+  border-color: #6b6f78;
+  color: #bdc1c6;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+}
+
+[data-theme='dark'] .askAiButton:hover {
+  background: var(--ifm-color-emphasis-200);
+  border-color: #6b6f78;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+/* Button text and icon */
+.buttonText {
+  display: inline;
+  letter-spacing: -0.01em;
+}
+
+.buttonIcon {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+  color: #5f6368;
+}
+
+/* Dark mode icon color to match DocSearch-Search-Icon */
+[data-theme='dark'] .buttonIcon {
+  color: #bdc1c6;
+}
+
+/* Subtle icon animation on hover */
+.askAiButton:hover .buttonIcon {
+  opacity: 0.8;
+}
+
+/* Responsive: Hide text on mobile, show icon only */
+@media (max-width: 768px) {
+  .buttonText {
+    display: none;
+  }
+
+  .askAiButton {
+    padding: 0 0.625rem;
+    min-width: 36px;
+    justify-content: center;
+  }
+}