feat: implement basic kapa.ai and inkeep a/b test

apify-docs-theme/src/theme/Navbar/Content/index.jsx

@@ -8,9 +8,10 @@ import NavbarLogo from '@theme/Navbar/Logo';
 import NavbarMobileSidebarToggle from '@theme/Navbar/MobileSidebar/Toggle';
 import NavbarSearch from '@theme/Navbar/Search';
 import NavbarItem from '@theme/NavbarItem';
+import SearchBar from '@theme/SearchBar';
 import React from 'react';
 
-import SearchBar from '../../SearchBar';
+// import SearchBar from '../../SearchBar';
 import NavbarCTA from '../CTA';
 
 function NavbarItems({ items }) {

apify-docs-theme/src/theme/SearchBar/index.js

@@ -1,11 +1,14 @@
 // eslint-disable-next-line simple-import-sort/imports
 import BrowserOnly from '@docusaurus/BrowserOnly';
 import RouterLink from '@docusaurus/Link';
-import { useHistory, useLocation } from '@docusaurus/router';
+// import { useHistory, useLocation } from '@docusaurus/router';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import React, { useCallback } from 'react';
+import clsx from 'clsx';
+// import React, { useCallback } from 'react';
+import React, { useEffect, useState } from 'react';
 
-import { ApifySearch } from '@apify/docs-search-modal';
+// import { ApifySearch } from '@apify/docs-search-modal';
+import { ControlKeyIcon, SearchIcon } from '@apify/docs-search-modal/dist/utils/icons';
 
 // needs to be imported as the last thing, so that it can override the default styles
 // TODO: update simple-import-sort to allow importing css as last.
@@ -40,37 +43,184 @@ export function Link(props) {
     return <a {...props}>{props.children}</a>;
 }
 
+// export default function SearchBar({ onClick }) {
+//     const { siteConfig } = useDocusaurusContext();
+//     const location = useLocation();
+//     const history = useHistory();
+//
+//     const navigate = useCallback((href) => {
+//         const shortHref = href.substring('https://docs.apify.com'.length);
+//
+//         if (matchesCurrentInstance(shortHref, siteConfig.baseUrl)) {
+//             return history.push(shortHref);
+//         }
+//         return window.location.assign(href);
+//     }, [history, siteConfig.baseUrl]);
+//
+//     const getVersion = useCallback(() => {
+//         const match = location.pathname.match(/\/(\d+\.\d+|next)/);
+//
+//         return match ? match[1] : 'latest';
+//     }, [location]);
+//
+//     return (
+//         <BrowserOnly>
+//             {() => (
+//                 <div onClick={onClick}>
+//                     <ApifySearch
+//                         algoliaAppId={siteConfig.themeConfig.algolia.appId}
+//                         algoliaIndexName='apify_sdk_v2'
+//                         algoliaKey={siteConfig.themeConfig.algolia.apiKey}
+//                         filters={`version:${getVersion()}`}
+//                         navigate={navigate}
+//                     />
+//                 </div>
+//             )}
+//         </BrowserOnly>
+//     );
+// }
+
 export default function SearchBar({ onClick }) {
-    const { siteConfig } = useDocusaurusContext();
-    const location = useLocation();
-    const history = useHistory();
+    const [variant, setVariant] = useState(null);
 
-    const navigate = useCallback((href) => {
-        const shortHref = href.substring('https://docs.apify.com'.length);
+    useEffect(() => {
+        const storedVariant = localStorage.getItem('search-provider');
+
+        if (storedVariant) {
+            setVariant(storedVariant);
+        } else {
+            const assignedVariant = Math.random() < 0.5 ? 'inkeep' : 'kapa';
+            localStorage.setItem('search-provider', assignedVariant);
+            setVariant(assignedVariant);
+        }
+    }, []);
+
+    const inkeepApiKey = process.env.LOCALHOST || process.env.DEV
+        ? 'bbbb9f1001a9b66f282431a80bb743a24e2bdefb85d4f1e4' // development, works with localhost
+        : '8af30e40009f26622237f75aab8256064c26a3063717c48a';
+
+    onClick = () => {
+        if (variant === 'kapa') {
+            if (window.Kapa && typeof window.Kapa.open === 'function') {
+                window.Kapa.open();
+            } else {
+                console.error('Kapa.ai widget is not available.');
+            }
+            return;
+        }
 
-        if (matchesCurrentInstance(shortHref, siteConfig.baseUrl)) {
-            return history.push(shortHref);
+        if (variant !== 'inkeep') {
+            console.warn('Unknown search variant:', variant);
+            return;
         }
-        return window.location.assign(href);
-    }, [history, siteConfig.baseUrl]);
 
-    const getVersion = useCallback(() => {
-        const match = location.pathname.match(/\/(\d+\.\d+|next)/);
+        if (window.Inkeep) {
+            const config = {
+                baseSettings: {
+                    apiKey: inkeepApiKey, // production, only works on apify.com (any subdomain)
+                    organizationDisplayName: 'Apify',
+                    primaryBrandColor: '#FF9013',
+                    transformSource: (source) => {
+                        if (source.contentType === 'documentation') {
+                            return {
+                                ...source,
+                                tabs: [...(source.tabs || []), 'Docs'],
+                            };
+                        }
+                        return source;
+                    },
+                    trigger: {
+                        disableDefaultTrigger: true,
+                    },
+                    theme: {
+                        styles: [
+                            {
+                                key: 'main',
+                                type: 'link',
+                                value: '/inkeep-overrides.css',
+                            },
+                        ],
+                    },
+                },
+                modalSettings: {
+                    onOpenChange: handleOpenChange,
+                },
+                searchSettings: {
+                    tabs: [
+                        'All',
+                        'Docs',
+                        'Publications',
+                        'PDFs',
+                        'GitHub',
+                        'Forums',
+                        'Discord',
+                        'Slack',
+                        'StackOverflow',
+                    ],
+                },
+                aiChatSettings: {
+                    aiAssistantAvatar: 'https://intercom.help/apify/assets/favicon',
+                    chatSubjectName: 'Apify',
+                    exampleQuestions: [
+                        'What is an Actor?',
+                        'How to use my own proxies?',
+                        'How to integrate Apify Actors with GitHub?',
+                        'How to share key-value stores between runs?',
+                    ],
+                    getHelpOptions: [
+                        {
+                            action: {
+                                type: 'open_link',
+                                url: 'https://apify.com/contact',
+                            },
+                            icon: {
+                                builtIn: 'IoChatbubblesOutline',
+                            },
+                            name: 'Contact Us',
+                        },
+                    ],
+                },
+            };
+            const modal = window.Inkeep.ModalSearchAndChat(config);
 
-        return match ? match[1] : 'latest';
-    }, [location]);
+            function handleOpenChange(newOpen) {
+                modal.update({ modalSettings: { isOpen: newOpen } });
+            }
+
+            modal.update({ modalSettings: { isOpen: true } });
+        } else {
+            console.error('Kapa.ai widget is not available.');
+        }
+    };
+
+    const [key, setKey] = useState(null);
+
+    useEffect(() => {
+        if (typeof navigator !== 'undefined') {
+            const isMac = /Mac|iPod|iPhone|iPad/.test(navigator.platform);
+            setKey(isMac ? '⌘' : 'ctrl');
+        }
+    }, []);
 
     return (
         <BrowserOnly>
             {() => (
                 <div onClick={onClick}>
-                    <ApifySearch
-                        algoliaAppId={siteConfig.themeConfig.algolia.appId}
-                        algoliaIndexName='apify_sdk_v2'
-                        algoliaKey={siteConfig.themeConfig.algolia.apiKey}
-                        filters={`version:${getVersion()}`}
-                        navigate={navigate}
-                    />
+                    <button type="button" className="DocSearch DocSearch-Button" aria-label="Search">
+                        <span className="DocSearch-Button-Container">
+                            <SearchIcon/>
+                            <span className="DocSearch-Button-Placeholder">Search</span>
+                        </span>
+                        <span className="DocSearch-Button-Keys">
+                            {key !== null && (<>
+                                <kbd className={clsx(key === 'ctrl' ? 'ctrl' : 'cmd', 'DocSearch-Button-Key')}>
+                                    {key === 'ctrl' ? <ControlKeyIcon/> : key}
+                                </kbd>
+                                <kbd className="DocSearch-Button-Key">K</kbd>
+                            </>)}
+                        </span>
+
+                    </button>
                 </div>
             )}
         </BrowserOnly>

apify-docs-theme/src/theme/custom.css

@@ -1984,3 +1984,16 @@ div[class^="navbarSearchContainer"] {
 .medium-zoom-image--opened {
     z-index: 999;
 }
+
+.DocSearch-Button {
+    cursor: pointer;
+}
+
+.DocSearch-Button-Key {
+    border: 0;
+}
+
+.DocSearch-Button-Key.ctrl:first-child {
+    width: 14px !important;
+    height: 15px !important;
+}

docusaurus.config.js

@@ -17,7 +17,33 @@ module.exports = {
     trailingSlash: false,
     organizationName: 'apify',
     projectName: 'apify-docs',
-    scripts: ['/js/custom.js'],
+    scripts: [
+        '/js/custom.js',
+        {
+            src: 'https://widget.kapa.ai/kapa-widget.bundle.js',
+            'data-website-id': 'a9937f98-9c9d-44d9-a433-fec4cb1c114d',
+            'data-project-name': 'Apify',
+            'data-modal-title': 'Apify AI Assistant',
+            'data-project-color': '#666666',
+            'data-button-hide': 'true',
+            'data-search-mode-enabled': 'true',
+            'data-project-logo': 'https://apify.com/img/apify-logo/logomark-32x32.svg',
+            'data-modal-example-questions': 'How to run an Actor?,Create a version of an Actor?',
+            'data-modal-override-open-id': 'ask-ai-input',
+            'data-modal-override-open-class': 'search-input',
+            'data-font-size-xs': '1.2rem',
+            'data-font-size-sm': '1.4rem',
+            'data-font-size-md': '1.6rem',
+            'data-font-size-lg': '1.8rem',
+            'data-font-size-xl': '2.0rem',
+            async: true,
+        },
+        {
+            src: 'https://cdn.jsdelivr.net/npm/@inkeep/[email protected]/dist/embed.js',
+            type: 'module',
+            async: true,
+        },
+    ],
     future: {
         experimental_faster: {
             // swcJsLoader: true,

static/inkeep-overrides.css

@@ -0,0 +1,20 @@
+.inkeep-widget-vars {
+    font-size: 1.6rem !important;
+    --ikp-font-size-3xs: 0.72rem !important;
+    --ikp-font-size-2xs: 1rem !important;
+    --ikp-font-size-xs: 1.2rem !important;
+    --ikp-font-size-1sm: 1.3rem !important;
+    --ikp-font-size-sm: 1.4rem !important;
+    --ikp-font-size-2sm: 1.5rem !important;
+    --ikp-font-size-md: 1.6rem !important;
+    --ikp-font-size-lg: 1.8rem !important;
+    --ikp-font-size-xl: 2rem !important;
+    --ikp-font-size-2xl: 2.4rem !important;
+    --ikp-font-size-3xl: 3rem !important;
+    --ikp-font-size-4xl: 3.6rem !important;
+    --ikp-font-size-5xl: 4.8rem !important;
+    --ikp-font-size-6xl: 6rem !important;
+    --ikp-font-size-7xl: 7.2rem !important;
+    --ikp-font-size-8xl: 9.6rem !important;
+    --ikp-font-size-9xl: 12.8rem !important;
+}