diff --git a/apify-docs-theme/package.json b/apify-docs-theme/package.json index 61e818a90d..15f35a0670 100644 --- a/apify-docs-theme/package.json +++ b/apify-docs-theme/package.json @@ -29,6 +29,7 @@ "docusaurus-gtm-plugin": "^0.0.2", "postcss-preset-env": "^10.1.3", "prism-react-renderer": "^2.4.1", + "react-hotkeys-hook": "^5.1.0", "remark-parse": "^11.0.0", "remark-stringify": "^11.0.0", "unified": "^11.0.5", diff --git a/apify-docs-theme/src/theme/SearchBar/index.js b/apify-docs-theme/src/theme/SearchBar/index.js index 3994652a8a..0de4f5a216 100644 --- a/apify-docs-theme/src/theme/SearchBar/index.js +++ b/apify-docs-theme/src/theme/SearchBar/index.js @@ -4,8 +4,8 @@ import RouterLink from '@docusaurus/Link'; // import { useHistory, useLocation } from '@docusaurus/router'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import clsx from 'clsx'; -// import React, { useCallback } from 'react'; import React, { useEffect, useState } from 'react'; +import { useHotkeys } from 'react-hotkeys-hook'; // import { ApifySearch } from '@apify/docs-search-modal'; import { ControlKeyIcon, SearchIcon } from '@apify/docs-search-modal/dist/utils/icons'; @@ -82,6 +82,7 @@ export function Link(props) { export default function SearchBar({ onClick }) { const [variant, setVariant] = useState(null); + const [opened, setOpened] = useState(false); const { siteConfig } = useDocusaurusContext(); const { inkeepApiKey } = siteConfig.customFields; @@ -98,9 +99,18 @@ export default function SearchBar({ onClick }) { }, []); 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.'); } @@ -178,11 +188,13 @@ export default function SearchBar({ onClick }) { }, ], }, + defaultView: 'chat', }; const modal = window.Inkeep.ModalSearchAndChat(config); function handleOpenChange(newOpen) { modal.update({ modalSettings: { isOpen: newOpen } }); + setOpened(newOpen); } modal.update({ modalSettings: { isOpen: true } }); @@ -200,6 +212,10 @@ export default function SearchBar({ onClick }) { } }, []); + useHotkeys('mod+k, /', () => { + onClick(); + }, { preventDefault: true }); + return ( {() => ( diff --git a/package-lock.json b/package-lock.json index 189124ea29..039f62e5e3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -87,6 +87,7 @@ "docusaurus-gtm-plugin": "^0.0.2", "postcss-preset-env": "^10.1.3", "prism-react-renderer": "^2.4.1", + "react-hotkeys-hook": "^5.1.0", "remark-parse": "^11.0.0", "remark-stringify": "^11.0.0", "unified": "^11.0.5", @@ -98,6 +99,19 @@ "react-dom": "*" } }, + "apify-docs-theme/node_modules/react-hotkeys-hook": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/react-hotkeys-hook/-/react-hotkeys-hook-5.1.0.tgz", + "integrity": "sha512-GCNGXjBzV9buOS3REoQFmSmE4WTvBhYQ0YrAeeMZI83bhXg3dRWsLHXDutcVDdEjwJqJCxk5iewWYX5LtFUd7g==", + "license": "MIT", + "workspaces": [ + "packages/*" + ], + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, "apify-docs-theme/node_modules/unified": { "version": "11.0.5", "resolved": "https://registry.npmjs.org/unified/-/unified-11.0.5.tgz",