diff --git a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/SearchOrAskAiButton.tsx b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/SearchOrAskAiButton.tsx index 23ab5b61c..bc07aa8a5 100644 --- a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/SearchOrAskAiButton.tsx +++ b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/SearchOrAskAiButton.tsx @@ -2,6 +2,7 @@ import '../../eui-icons-cache' import { useModalActions, useModalIsOpen } from './modal.store' import { useSearchActions, useSearchTerm } from './search.store' +import { useSyncSearchParams } from './useSyncURLSearchParams' import { EuiButton, EuiPortal, @@ -29,6 +30,8 @@ export const SearchOrAskAiButton = () => { const isModalOpen = useModalIsOpen() const { openModal, closeModal, toggleModal } = useModalActions() + useSyncSearchParams() + const positionCss = css` position: absolute; left: 50%; @@ -61,7 +64,6 @@ export const SearchOrAskAiButton = () => { window.removeEventListener('keydown', handleKeydown) } }, []) - return ( <> { const searchTerm = useSearchTerm() const askAiTerm = useAskAiTerm() const { setSearchTerm, submitAskAiTerm } = useSearchActions() - return (
{ + const searchTerm = useSearchTerm() + const { setSearchTerm, submitAskAiTerm } = useSearchActions() + const { openModal } = useModalActions() + + const searchQueryParamKey = 'q' + const [isInitialized, setIsInitialized] = useState(false) + useEffect(() => { + const params = new URLSearchParams(window.location.search) + const urlQuery = params.get(searchQueryParamKey) + if (urlQuery) { + setSearchTerm(urlQuery) + submitAskAiTerm(urlQuery) + } + setIsInitialized(true) + }, []) + + useEffect(() => { + if (!isInitialized) { + return + } + const url = new URL(window.location) + if (searchTerm) { + url.searchParams.set(searchQueryParamKey, searchTerm) + } else { + url.searchParams.delete(searchQueryParamKey) + } + window.history.replaceState({}, '', url) + }, [searchTerm, isInitialized]) + + useEffect(() => { + const url = new URL(window.location) + if (url.searchParams.has(searchQueryParamKey)) { + openModal() + } + }, []) +}