diff --git a/apify-docs-theme/package.json b/apify-docs-theme/package.json index 5ee4388a23..fe6f8f1073 100644 --- a/apify-docs-theme/package.json +++ b/apify-docs-theme/package.json @@ -19,7 +19,7 @@ "access": "public" }, "dependencies": { - "@apify/docs-search-modal": "^1.2.2", + "@apify/docs-search-modal": "^1.3.1", "@docusaurus/theme-common": "^3.7.0", "@stackql/docusaurus-plugin-hubspot": "^1.1.0", "algoliasearch": "^5.19.0", diff --git a/apify-docs-theme/src/config.js b/apify-docs-theme/src/config.js index b02fdecbf4..03918035de 100644 --- a/apify-docs-theme/src/config.js +++ b/apify-docs-theme/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, }; diff --git a/apify-docs-theme/src/theme/SearchBar/index.js b/apify-docs-theme/src/theme/SearchBar/index.js index e5d4ae8714..5216dbc011 100644 --- a/apify-docs-theme/src/theme/SearchBar/index.js +++ b/apify-docs-theme/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 ( {() => ( -
+
+ +
+ +
)} ); } -// 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 ( -// -// {() => ( -//
-// -//
-// )} -// -// ); -// } +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 ( + + {() => ( +
+ +
+ )} + + ); +} diff --git a/apify-docs-theme/src/theme/SearchBar/styles.css b/apify-docs-theme/src/theme/SearchBar/styles.css index 4d087b2bf8..5d302c53d3 100644 --- a/apify-docs-theme/src/theme/SearchBar/styles.css +++ b/apify-docs-theme/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; } diff --git a/package-lock.json b/package-lock.json index a510ab32f0..d299945349 100644 --- a/package-lock.json +++ b/package-lock.json @@ -77,7 +77,7 @@ "version": "1.0.210", "license": "ISC", "dependencies": { - "@apify/docs-search-modal": "^1.2.2", + "@apify/docs-search-modal": "^1.3.1", "@docusaurus/theme-common": "^3.7.0", "@stackql/docusaurus-plugin-hubspot": "^1.1.0", "algoliasearch": "^5.19.0", @@ -480,9 +480,10 @@ } }, "node_modules/@apify/docs-search-modal": { - "version": "1.2.3", - "resolved": "https://registry.npmjs.org/@apify/docs-search-modal/-/docs-search-modal-1.2.3.tgz", - "integrity": "sha512-hb4/XXmF8/VHebuTwJW9zgCAj5FR+zjoXDgKxr0mjTBXI6K7b5zK+QPlZ6qS33lq5Kd0i2QWhGG85hLPtUI0FQ==", + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/@apify/docs-search-modal/-/docs-search-modal-1.3.1.tgz", + "integrity": "sha512-4tkNxxGnGE+jmm12tN3k+Yn+SujIXTLMMl7Bpbm7R16vC8kShBMmFB6PCNc1QB6WU15eRknlBro7i5M3eBIpiQ==", + "license": "ISC", "dependencies": { "@algolia/autocomplete-js": "^1.10.0", "@algolia/autocomplete-theme-classic": "^1.10.0", diff --git a/static/inkeep-overrides.css b/static/inkeep-overrides.css deleted file mode 100644 index c196c459a3..0000000000 --- a/static/inkeep-overrides.css +++ /dev/null @@ -1,20 +0,0 @@ -.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; -}