fix: support cmd+k to open the search modal (apify#1755)

Also opens the kapa widget with the AI chat tab first.

Closes apify#1745

Author: B4nan

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",

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 (
         <BrowserOnly>
             {() => (