@apify/docs-theme 1.0.214 → 1.0.216

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/docs-theme",
-    "version": "1.0.214",
+    "version": "1.0.216",
     "description": "",
     "main": "./src/index.js",
     "files": [
@@ -19,9 +19,9 @@
         "access": "public"
     },
     "dependencies": {
-        "@apify/docs-search-modal": "^1.2.2",
-        "@apify/ui-library": "^1.97.2",
+        "@apify/docs-search-modal": "^1.3.3",
         "@apify/ui-icons": "^1.19.0",
+        "@apify/ui-library": "^1.97.2",
         "@docusaurus/theme-common": "^3.7.0",
         "@stackql/docusaurus-plugin-hubspot": "^1.1.0",
         "algoliasearch": "^5.19.0",

package/src/config.js

@@ -315,44 +315,27 @@ const plugins = [
 ];
 
 const scripts = [
-    // {
-    //     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-search-include-source-names': '["Docs"]',
-    //     '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/cxkit-js@0.5/dist/embed.js',
-    //     type: 'module',
-    //     async: true,
-    // },
+    {
+        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-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-scale-factor': '1.6',
+        'data-modal-size': '800px',
+        async: true,
+    },
 ];
 
-const customFields = {
-    // inkeepApiKey: process.env.LOCALHOST || process.env.DEV
-    //     ? 'bbbb9f1001a9b66f282431a80bb743a24e2bdefb85d4f1e4' // development, works with localhost
-    //     : '8af30e40009f26622237f75aab8256064c26a3063717c48a', // production, only works on apify.com (any subdomain)
-};
-
 module.exports = {
     themeConfig,
     plugins,
     absoluteUrl,
     noIndex,
     scripts,
-    customFields,
 };

package/src/theme/LLMButtons/index.jsx

@@ -2,7 +2,6 @@ import clsx from 'clsx';
 import React, { useCallback, useState } from 'react';
 
 import {
-    AnthropicIcon,
     ChatGptIcon,
     CheckIcon,
     ChevronDownIcon,
@@ -38,13 +37,6 @@ const DROPDOWN_OPTIONS = [
         Icon: ChatGptIcon,
         value: 'openInChatGPT',
     },
-    {
-        label: 'Open in Claude',
-        description: 'Ask questions about this page',
-        showExternalIcon: true,
-        Icon: AnthropicIcon,
-        value: 'openInClaude',
-    },
     {
         label: 'Open in Perplexity',
         description: 'Ask questions about this page',
@@ -78,27 +70,6 @@ const onOpenInChatGPTClick = () => {
     }
 };
 
-const onOpenInClaudeClick = () => {
-    if (window.analytics) {
-        window.analytics.track('Clicked', {
-            app: 'docs',
-            button_text: 'Open in Claude',
-            element: 'llm-buttons.openInClaude',
-        });
-    }
-
-    const prompt = getPrompt(window.location.href);
-
-    try {
-        window.open(
-            `https://claude.ai/new?q=${encodeURIComponent(prompt)}`,
-            '_blank',
-        );
-    } catch (error) {
-        console.error('Error opening Claude:', error);
-    }
-};
-
 const onOpenInPerplexityClick = () => {
     if (window.analytics) {
         window.analytics.track('Clicked', {
@@ -256,9 +227,6 @@ export default function LLMButtons({ isApiReferencePage = false }) {
             case 'openInChatGPT':
                 onOpenInChatGPTClick();
                 break;
-            case 'openInClaude':
-                onOpenInClaudeClick();
-                break;
             case 'openInPerplexity':
                 onOpenInPerplexityClick();
                 break;

package/src/theme/SearchBar/index.js

@@ -3,13 +3,9 @@ import BrowserOnly from '@docusaurus/BrowserOnly';
 import RouterLink from '@docusaurus/Link';
 import { useHistory, useLocation } from '@docusaurus/router';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-// import clsx from 'clsx';
-// import React, { useEffect, useState } from 'react';
-import React, { useCallback } from 'react';
-// import { useHotkeys } from 'react-hotkeys-hook';
+import { useState, useCallback } from 'react';
 
 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.
@@ -67,7 +63,9 @@ export default function SearchBar({ onClick }) {
     return (
         <BrowserOnly>
             {() => (
-                <div onClick={onClick}>
+                <div className="SearchButton-Container">
+
+                <div onClick={onClick} className="AlgoliaContainer" style={{ marginRight: '12px' }}>
                     <ApifySearch
                         algoliaAppId={siteConfig.themeConfig.algolia.appId}
                         algoliaIndexName='apify_sdk_v2'
@@ -76,169 +74,42 @@ export default function SearchBar({ onClick }) {
                         navigate={navigate}
                     />
                 </div>
+                <KapaAIButton />
+                </div>
             )}
         </BrowserOnly>
     );
 }
 
-// export default function SearchBar({ onClick }) {
-//     const [variant, setVariant] = useState(null);
-//     const [opened, setOpened] = useState(false);
-//     const { siteConfig } = useDocusaurusContext();
-//     const { inkeepApiKey } = siteConfig.customFields;
-//
-//     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);
-//         }
-//     }, []);
-//
-//     onClick = () => {
-//         if (opened) {
-//             return;
-//         }
-//
-//         setOpened(true);
-//
-//         if (variant === 'kapa') {
-//             if (window.Kapa && typeof window.Kapa.open === 'function') {
-//                 window.Kapa.open();
-//                 window.Kapa('onModalClose', () => {
-//                     setOpened(false);
-//                 });
-//             } else {
-//                 console.error('Kapa.ai widget is not available.');
-//             }
-//             return;
-//         }
-//
-//         if (variant !== 'inkeep') {
-//             console.warn('Unknown search variant:', variant);
-//             return;
-//         }
-//
-//         if (window.Inkeep) {
-//             const config = {
-//                 baseSettings: {
-//                     apiKey: inkeepApiKey,
-//                     organizationDisplayName: 'Apify',
-//                     primaryBrandColor: '#FF9013',
-//                     transformSource: (source) => {
-//                         function getTabForSource(src) {
-//                             if (src.url.includes('help.apify.com')) {
-//                                 return 'Help';
-//                             }
-//                             return 'Docs';
-//                         }
-//
-//                         if (source.contentType === 'documentation') {
-//                             return {
-//                                 ...source,
-//                                 tabs: [...(source.tabs || []), getTabForSource(source)],
-//                             };
-//                         }
-//                         return source;
-//                     },
-//                     trigger: {
-//                         disableDefaultTrigger: true,
-//                     },
-//                     theme: {
-//                         styles: [
-//                             {
-//                                 key: 'main',
-//                                 type: 'link',
-//                                 value: '/inkeep-overrides.css',
-//                             },
-//                         ],
-//                     },
-//                 },
-//                 modalSettings: {
-//                     onOpenChange: handleOpenChange,
-//                 },
-//                 searchSettings: {
-//                     tabs: [
-//                         ['Docs', { isAlwaysVisible: true }],
-//                         'GitHub',
-//                         'All',
-//                     ],
-//                 },
-//                 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',
-//                         },
-//                     ],
-//                 },
-//                 defaultView: 'chat',
-//             };
-//             const modal = window.Inkeep.ModalSearchAndChat(config);
-//
-//             function handleOpenChange(newOpen) {
-//                 modal.update({ modalSettings: { isOpen: newOpen } });
-//                 setOpened(newOpen);
-//             }
-//
-//             modal.update({ modalSettings: { isOpen: true } });
-//         } else {
-//             console.error('Inkeep 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');
-//         }
-//     }, []);
-//
-//     useHotkeys('mod+k, /', () => {
-//         onClick();
-//     }, { preventDefault: true });
-//
-//     return (
-//         <BrowserOnly>
-//             {() => (
-//                 <div onClick={onClick}>
-//                     <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>
-//     );
-// }
+function KapaAIButton({ onClick }) {
+    const [opened, setOpened] = useState(false);
+
+    onClick = () => {
+        if (opened) {
+            return;
+        }
+
+        setOpened(true);
+
+        if (window.Kapa && typeof window.Kapa.open === 'function') {
+            window.Kapa.open();
+            window.Kapa('onModalClose', () => {
+                setOpened(false);
+            });
+        } else {
+            console.error('Kapa.ai widget is not available.');
+        }
+    };
+
+    return (
+        <BrowserOnly>
+            {() => (
+                <div onClick={onClick}>
+                    <button type="button" className="AskAI-Button" aria-label="Ask AI">
+                        Ask AI
+                    </button>
+                </div>
+            )}
+        </BrowserOnly>
+    );
+}

package/src/theme/SearchBar/styles.css

@@ -22,20 +22,54 @@
     color var(--ifm-transition-fast) var(--ifm-transition-timing-default);
 }
 
-.navbar-sidebar .DocSearch-Button {
+.AskAI-Button {
+  height: 4rem;
+  padding: 0.8rem 1.6rem !important;
+  background-color: var(--ifm-color-primary);
+  border-radius: 8px;
+  color: var(--color-neutral-text-on-primary);
+  font-size: 1.6rem;
+  font-weight: 500;
+  line-height: 2.4rem;
+  border: none;
+  box-shadow: none;
+  outline: none;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: block;
+  position: relative;
+  text-align: center;
+  transition: all var(--ifm-transition-fast) var(--ifm-transition-timing-default);
+}
+
+.SearchButton-Container {
+  display: flex;
+  align-items: center;
+}
+
+.navbar-sidebar .SearchButton-Container {
   display: none;
 }
 
 @media (max-width: 768px) {
+    .SearchButton-Container {
+      width: 100%;
+    }
+
+    .AlgoliaContainer {
+      flex: 1;
+    }
+
     .DocSearch-Button {
       width: 100%;
+      justify-content: space-between;
     }
 
-    .navbar__inner .DocSearch-Button {
+    .navbar__inner .SearchButton-Container {
       display: none;
     }
 
-    .navbar-sidebar .DocSearch-Button {
+    .navbar-sidebar .SearchButton-Container {
       display: flex;
     }