@@ -3,13 +3,9 @@ import BrowserOnly from '@docusaurus/BrowserOnly';
33import RouterLink from '@docusaurus/Link' ;
44import { useHistory , useLocation } from '@docusaurus/router' ;
55import useDocusaurusContext from '@docusaurus/useDocusaurusContext' ;
6- // import clsx from 'clsx';
7- // import React, { useEffect, useState } from 'react';
8- import React , { useCallback } from 'react' ;
9- // import { useHotkeys } from 'react-hotkeys-hook';
6+ import { useState , useCallback } from 'react' ;
107
118import { ApifySearch } from '@apify/docs-search-modal' ;
12- // import { ControlKeyIcon, SearchIcon } from '@apify/docs-search-modal/dist/utils/icons';
139
1410// needs to be imported as the last thing, so that it can override the default styles
1511// TODO: update simple-import-sort to allow importing css as last.
@@ -67,7 +63,9 @@ export default function SearchBar({ onClick }) {
6763 return (
6864 < BrowserOnly >
6965 { ( ) => (
70- < div onClick = { onClick } >
66+ < div className = "SearchButton-Container" >
67+
68+ < div onClick = { onClick } className = "AlgoliaContainer" style = { { marginRight : '12px' } } >
7169 < ApifySearch
7270 algoliaAppId = { siteConfig . themeConfig . algolia . appId }
7371 algoliaIndexName = 'apify_sdk_v2'
@@ -76,169 +74,42 @@ export default function SearchBar({ onClick }) {
7674 navigate = { navigate }
7775 />
7876 </ div >
77+ < KapaAIButton />
78+ </ div >
7979 ) }
8080 </ BrowserOnly >
8181 ) ;
8282}
8383
84- // export default function SearchBar({ onClick }) {
85- // const [variant, setVariant] = useState(null);
86- // const [opened, setOpened] = useState(false);
87- // const { siteConfig } = useDocusaurusContext();
88- // const { inkeepApiKey } = siteConfig.customFields;
89- //
90- // useEffect(() => {
91- // const storedVariant = localStorage.getItem('search-provider');
92- //
93- // if (storedVariant) {
94- // setVariant(storedVariant);
95- // } else {
96- // const assignedVariant = Math.random() < 0.5 ? 'inkeep' : 'kapa';
97- // localStorage.setItem('search-provider', assignedVariant);
98- // setVariant(assignedVariant);
99- // }
100- // }, []);
101- //
102- // onClick = () => {
103- // if (opened) {
104- // return;
105- // }
106- //
107- // setOpened(true);
108- //
109- // if (variant === 'kapa') {
110- // if (window.Kapa && typeof window.Kapa.open === 'function') {
111- // window.Kapa.open();
112- // window.Kapa('onModalClose', () => {
113- // setOpened(false);
114- // });
115- // } else {
116- // console.error('Kapa.ai widget is not available.');
117- // }
118- // return;
119- // }
120- //
121- // if (variant !== 'inkeep') {
122- // console.warn('Unknown search variant:', variant);
123- // return;
124- // }
125- //
126- // if (window.Inkeep) {
127- // const config = {
128- // baseSettings: {
129- // apiKey: inkeepApiKey,
130- // organizationDisplayName: 'Apify',
131- // primaryBrandColor: '#FF9013',
132- // transformSource: (source) => {
133- // function getTabForSource(src) {
134- // if (src.url.includes('help.apify.com')) {
135- // return 'Help';
136- // }
137- // return 'Docs';
138- // }
139- //
140- // if (source.contentType === 'documentation') {
141- // return {
142- // ...source,
143- // tabs: [...(source.tabs || []), getTabForSource(source)],
144- // };
145- // }
146- // return source;
147- // },
148- // trigger: {
149- // disableDefaultTrigger: true,
150- // },
151- // theme: {
152- // styles: [
153- // {
154- // key: 'main',
155- // type: 'link',
156- // value: '/inkeep-overrides.css',
157- // },
158- // ],
159- // },
160- // },
161- // modalSettings: {
162- // onOpenChange: handleOpenChange,
163- // },
164- // searchSettings: {
165- // tabs: [
166- // ['Docs', { isAlwaysVisible: true }],
167- // 'GitHub',
168- // 'All',
169- // ],
170- // },
171- // aiChatSettings: {
172- // aiAssistantAvatar: 'https://intercom.help/apify/assets/favicon',
173- // chatSubjectName: 'Apify',
174- // exampleQuestions: [
175- // 'What is an Actor?',
176- // 'How to use my own proxies?',
177- // 'How to integrate Apify Actors with GitHub?',
178- // 'How to share key-value stores between runs?',
179- // ],
180- // getHelpOptions: [
181- // {
182- // action: {
183- // type: 'open_link',
184- // url: 'https://apify.com/contact',
185- // },
186- // icon: {
187- // builtIn: 'IoChatbubblesOutline',
188- // },
189- // name: 'Contact Us',
190- // },
191- // ],
192- // },
193- // defaultView: 'chat',
194- // };
195- // const modal = window.Inkeep.ModalSearchAndChat(config);
196- //
197- // function handleOpenChange(newOpen) {
198- // modal.update({ modalSettings: { isOpen: newOpen } });
199- // setOpened(newOpen);
200- // }
201- //
202- // modal.update({ modalSettings: { isOpen: true } });
203- // } else {
204- // console.error('Inkeep widget is not available.');
205- // }
206- // };
207- //
208- // const [key, setKey] = useState(null);
209- //
210- // useEffect(() => {
211- // if (typeof navigator !== 'undefined') {
212- // const isMac = /Mac|iPod|iPhone|iPad/.test(navigator.platform);
213- // setKey(isMac ? '⌘' : 'ctrl');
214- // }
215- // }, []);
216- //
217- // useHotkeys('mod+k, /', () => {
218- // onClick();
219- // }, { preventDefault: true });
220- //
221- // return (
222- // <BrowserOnly>
223- // {() => (
224- // <div onClick={onClick}>
225- // <button type="button" className="DocSearch DocSearch-Button" aria-label="Search">
226- // <span className="DocSearch-Button-Container">
227- // <SearchIcon/>
228- // <span className="DocSearch-Button-Placeholder">Search</span>
229- // </span>
230- // <span className="DocSearch-Button-Keys">
231- // {key !== null && (<>
232- // <kbd className={clsx(key === 'ctrl' ? 'ctrl' : 'cmd', 'DocSearch-Button-Key')}>
233- // {key === 'ctrl' ? <ControlKeyIcon/> : key}
234- // </kbd>
235- // <kbd className="DocSearch-Button-Key">K</kbd>
236- // </>)}
237- // </span>
238- //
239- // </button>
240- // </div>
241- // )}
242- // </BrowserOnly>
243- // );
244- // }
84+ function KapaAIButton ( { onClick } ) {
85+ const [ opened , setOpened ] = useState ( false ) ;
86+
87+ onClick = ( ) => {
88+ if ( opened ) {
89+ return ;
90+ }
91+
92+ setOpened ( true ) ;
93+
94+ if ( window . Kapa && typeof window . Kapa . open === 'function' ) {
95+ window . Kapa . open ( ) ;
96+ window . Kapa ( 'onModalClose' , ( ) => {
97+ setOpened ( false ) ;
98+ } ) ;
99+ } else {
100+ console . error ( 'Kapa.ai widget is not available.' ) ;
101+ }
102+ } ;
103+
104+ return (
105+ < BrowserOnly >
106+ { ( ) => (
107+ < div onClick = { onClick } >
108+ < button type = "button" className = "AskAI-Button" aria-label = "Ask AI" >
109+ Ask AI
110+ </ button >
111+ </ div >
112+ ) }
113+ </ BrowserOnly >
114+ ) ;
115+ }
0 commit comments