802 lines
26 KiB
TypeScript
802 lines
26 KiB
TypeScript
import type { Message } from '@ai-sdk/react';
|
|
import { useChat } from '@ai-sdk/react';
|
|
import {
|
|
type AutocompleteSource,
|
|
type AlgoliaInsightsHit,
|
|
createAutocomplete,
|
|
type AutocompleteState,
|
|
} from '@algolia/autocomplete-core';
|
|
import type { SearchResponse } from 'algoliasearch/lite';
|
|
import React, { type JSX } from 'react';
|
|
|
|
import { getValidToken, postFeedback } from './askai';
|
|
import { ASK_AI_API_URL, MAX_QUERY_SIZE, USE_ASK_AI_TOKEN } from './constants';
|
|
import type { DocSearchProps } from './DocSearch';
|
|
import type { FooterTranslations } from './Footer';
|
|
import { Footer } from './Footer';
|
|
import { Hit } from './Hit';
|
|
import type { ScreenStateTranslations } from './ScreenState';
|
|
import { ScreenState } from './ScreenState';
|
|
import type { SearchBoxTranslations } from './SearchBox';
|
|
import { SearchBox } from './SearchBox';
|
|
import { createStoredConversations, createStoredSearches } from './stored-searches';
|
|
import type { DocSearchHit, DocSearchState, InternalDocSearchHit, StoredAskAiState, StoredDocSearchHit } from './types';
|
|
import { useSearchClient } from './useSearchClient';
|
|
import { useTheme } from './useTheme';
|
|
import { useTouchEvents } from './useTouchEvents';
|
|
import { useTrapFocus } from './useTrapFocus';
|
|
import { groupBy, identity, noop, removeHighlightTags, isModifierEvent, scrollTo as scrollToUtils } from './utils';
|
|
import { buildDummyAskAiHit } from './utils/ai';
|
|
import { manageLocalStorageQuota } from './utils/storage';
|
|
|
|
export type ModalTranslations = Partial<{
|
|
searchBox: SearchBoxTranslations;
|
|
footer: FooterTranslations;
|
|
}> &
|
|
ScreenStateTranslations;
|
|
|
|
export type DocSearchModalProps = DocSearchProps & {
|
|
initialScrollY: number;
|
|
onAskAiToggle: (toggle: boolean) => void;
|
|
onClose?: () => void;
|
|
isAskAiActive?: boolean;
|
|
canHandleAskAi?: boolean;
|
|
translations?: ModalTranslations;
|
|
};
|
|
|
|
/**
|
|
* Helper function to build sources when there is no query
|
|
* useful for recent searches and favorite searches.
|
|
*/
|
|
type BuildNoQuerySourcesOptions = {
|
|
recentSearches: ReturnType<typeof createStoredSearches>;
|
|
favoriteSearches: ReturnType<typeof createStoredSearches>;
|
|
saveRecentSearch: (item: InternalDocSearchHit) => void;
|
|
onClose: () => void;
|
|
disableUserPersonalization: boolean;
|
|
canHandleAskAi: boolean;
|
|
};
|
|
|
|
const buildNoQuerySources = ({
|
|
recentSearches,
|
|
favoriteSearches,
|
|
saveRecentSearch,
|
|
onClose,
|
|
disableUserPersonalization,
|
|
}: BuildNoQuerySourcesOptions): Array<AutocompleteSource<InternalDocSearchHit>> => {
|
|
if (disableUserPersonalization) {
|
|
return [];
|
|
}
|
|
|
|
const sources: Array<AutocompleteSource<InternalDocSearchHit>> = [
|
|
{
|
|
sourceId: 'recentSearches',
|
|
onSelect({ item, event }): void {
|
|
saveRecentSearch(item);
|
|
if (!isModifierEvent(event)) {
|
|
onClose();
|
|
}
|
|
},
|
|
getItemUrl({ item }): string {
|
|
return item.url;
|
|
},
|
|
getItems(): InternalDocSearchHit[] {
|
|
return recentSearches.getAll() as InternalDocSearchHit[];
|
|
},
|
|
},
|
|
{
|
|
sourceId: 'favoriteSearches',
|
|
onSelect({ item, event }): void {
|
|
saveRecentSearch(item);
|
|
if (!isModifierEvent(event)) {
|
|
onClose();
|
|
}
|
|
},
|
|
getItemUrl({ item }): string {
|
|
return item.url;
|
|
},
|
|
getItems(): InternalDocSearchHit[] {
|
|
return favoriteSearches.getAll() as InternalDocSearchHit[];
|
|
},
|
|
},
|
|
];
|
|
|
|
return sources;
|
|
};
|
|
|
|
type BuildQuerySourcesState = Pick<AutocompleteState<InternalDocSearchHit>, 'context'>;
|
|
|
|
/**
|
|
* Helper function to build sources when there is a query
|
|
* note: we only need specific parts of the state, not the full DocSearchState.
|
|
*/
|
|
const buildQuerySources = async ({
|
|
query,
|
|
state: sourcesState,
|
|
setContext,
|
|
setStatus,
|
|
searchClient,
|
|
indexName,
|
|
searchParameters,
|
|
snippetLength,
|
|
insights,
|
|
appId,
|
|
apiKey,
|
|
maxResultsPerGroup,
|
|
transformItems = identity,
|
|
saveRecentSearch,
|
|
onClose,
|
|
}: {
|
|
query: string;
|
|
state: BuildQuerySourcesState;
|
|
setContext: (context: Partial<DocSearchState<InternalDocSearchHit>['context']>) => void;
|
|
setStatus: (status: DocSearchState<InternalDocSearchHit>['status']) => void;
|
|
searchClient: ReturnType<typeof useSearchClient>;
|
|
indexName: string;
|
|
searchParameters: DocSearchProps['searchParameters'];
|
|
snippetLength: React.MutableRefObject<number>;
|
|
insights: boolean;
|
|
appId?: string;
|
|
apiKey?: string;
|
|
maxResultsPerGroup?: number;
|
|
transformItems?: DocSearchProps['transformItems'];
|
|
saveRecentSearch: (item: InternalDocSearchHit) => void;
|
|
onClose: () => void;
|
|
}): Promise<Array<AutocompleteSource<InternalDocSearchHit>>> => {
|
|
const insightsActive = insights;
|
|
|
|
try {
|
|
const { results } = await searchClient.search<DocSearchHit>({
|
|
requests: [
|
|
{
|
|
query,
|
|
indexName,
|
|
attributesToRetrieve: searchParameters?.attributesToRetrieve ?? [
|
|
'hierarchy.lvl0',
|
|
'hierarchy.lvl1',
|
|
'hierarchy.lvl2',
|
|
'hierarchy.lvl3',
|
|
'hierarchy.lvl4',
|
|
'hierarchy.lvl5',
|
|
'hierarchy.lvl6',
|
|
'content',
|
|
'type',
|
|
'url',
|
|
],
|
|
attributesToSnippet: searchParameters?.attributesToSnippet ?? [
|
|
`hierarchy.lvl1:${snippetLength.current}`,
|
|
`hierarchy.lvl2:${snippetLength.current}`,
|
|
`hierarchy.lvl3:${snippetLength.current}`,
|
|
`hierarchy.lvl4:${snippetLength.current}`,
|
|
`hierarchy.lvl5:${snippetLength.current}`,
|
|
`hierarchy.lvl6:${snippetLength.current}`,
|
|
`content:${snippetLength.current}`,
|
|
],
|
|
snippetEllipsisText: searchParameters?.snippetEllipsisText ?? '…',
|
|
highlightPreTag: searchParameters?.highlightPreTag ?? '<mark>',
|
|
highlightPostTag: searchParameters?.highlightPostTag ?? '</mark>',
|
|
hitsPerPage: searchParameters?.hitsPerPage ?? 20,
|
|
clickAnalytics: searchParameters?.clickAnalytics ?? insightsActive,
|
|
...searchParameters,
|
|
},
|
|
],
|
|
});
|
|
|
|
const firstResult = results[0] as SearchResponse<DocSearchHit>;
|
|
const { hits, nbHits } = firstResult;
|
|
const transformedHits = transformItems(hits);
|
|
const sources = groupBy<DocSearchHit>(transformedHits, (hit) => removeHighlightTags(hit), maxResultsPerGroup);
|
|
|
|
// We store the `lvl0`s to display them as search suggestions
|
|
// in the "no results" screen.
|
|
if ((sourcesState.context.searchSuggestions as any[]).length < Object.keys(sources).length) {
|
|
setContext({
|
|
searchSuggestions: Object.keys(sources),
|
|
});
|
|
}
|
|
|
|
setContext({ nbHits });
|
|
|
|
let insightsParams = {};
|
|
|
|
if (insightsActive) {
|
|
insightsParams = {
|
|
__autocomplete_indexName: indexName,
|
|
__autocomplete_queryID: firstResult.queryID,
|
|
__autocomplete_algoliaCredentials: {
|
|
appId,
|
|
apiKey,
|
|
},
|
|
};
|
|
}
|
|
|
|
return Object.values<DocSearchHit[]>(sources).map((items, index) => {
|
|
return {
|
|
sourceId: `hits${index}`,
|
|
onSelect({ item, event }): void {
|
|
saveRecentSearch(item);
|
|
if (!isModifierEvent(event)) {
|
|
onClose();
|
|
}
|
|
},
|
|
getItemUrl({ item }): string {
|
|
return item.url;
|
|
},
|
|
getItems(): InternalDocSearchHit[] {
|
|
return Object.values(groupBy(items, (item) => item.hierarchy.lvl1, maxResultsPerGroup))
|
|
.map((groupedHits) =>
|
|
groupedHits.map((item) => {
|
|
let parent: InternalDocSearchHit | null = null;
|
|
|
|
const potentialParent = groupedHits.find(
|
|
(siblingItem) => siblingItem.type === 'lvl1' && siblingItem.hierarchy.lvl1 === item.hierarchy.lvl1,
|
|
) as InternalDocSearchHit | undefined;
|
|
|
|
if (item.type !== 'lvl1' && potentialParent) {
|
|
parent = potentialParent;
|
|
}
|
|
|
|
return {
|
|
...item,
|
|
__docsearch_parent: parent,
|
|
...insightsParams,
|
|
};
|
|
}),
|
|
)
|
|
.flat();
|
|
},
|
|
};
|
|
});
|
|
} catch (error) {
|
|
// The Algolia `RetryError` happens when all the servers have
|
|
// failed, meaning that there's no chance the response comes
|
|
// back. This is the right time to display an error.
|
|
// See https://github.com/algolia/algoliasearch-client-javascript/blob/2ffddf59bc765cd1b664ee0346b28f00229d6e12/packages/transporter/src/errors/createRetryError.ts#L5
|
|
if ((error as Error).name === 'RetryError') {
|
|
setStatus('error');
|
|
}
|
|
throw error;
|
|
}
|
|
};
|
|
|
|
export function DocSearchModal({
|
|
appId,
|
|
apiKey,
|
|
indexName,
|
|
placeholder,
|
|
askAi,
|
|
searchParameters,
|
|
maxResultsPerGroup,
|
|
theme,
|
|
onClose = noop,
|
|
transformItems = identity,
|
|
hitComponent = Hit,
|
|
resultsFooterComponent = (): JSX.Element | null => null,
|
|
navigator,
|
|
initialScrollY = 0,
|
|
transformSearchClient = identity,
|
|
disableUserPersonalization = false,
|
|
initialQuery: initialQueryFromProp = '',
|
|
translations = {},
|
|
getMissingResultsUrl,
|
|
insights = false,
|
|
onAskAiToggle,
|
|
isAskAiActive = false,
|
|
canHandleAskAi = false,
|
|
recentSearchesLimit = 7,
|
|
recentSearchesWithFavoritesLimit = 4,
|
|
}: DocSearchModalProps): JSX.Element {
|
|
const { footer: footerTranslations, searchBox: searchBoxTranslations, ...screenStateTranslations } = translations;
|
|
const [state, setState] = React.useState<DocSearchState<InternalDocSearchHit>>({
|
|
query: '',
|
|
collections: [],
|
|
completion: null,
|
|
context: {},
|
|
isOpen: false,
|
|
activeItemId: null,
|
|
status: 'idle',
|
|
});
|
|
|
|
const containerRef = React.useRef<HTMLDivElement | null>(null);
|
|
const modalRef = React.useRef<HTMLDivElement | null>(null);
|
|
const formElementRef = React.useRef<HTMLDivElement | null>(null);
|
|
const dropdownRef = React.useRef<HTMLDivElement | null>(null);
|
|
const inputRef = React.useRef<HTMLInputElement | null>(null);
|
|
const snippetLength = React.useRef<number>(15);
|
|
const initialQueryFromSelection = React.useRef(
|
|
typeof window !== 'undefined' ? window.getSelection()!.toString().slice(0, MAX_QUERY_SIZE) : '',
|
|
).current;
|
|
const initialQuery = React.useRef(initialQueryFromProp || initialQueryFromSelection).current;
|
|
|
|
const searchClient = useSearchClient(appId, apiKey, transformSearchClient);
|
|
|
|
const askAiConfig = typeof askAi === 'object' ? askAi : null;
|
|
const askAiConfigurationId = typeof askAi === 'string' ? askAi : askAiConfig?.assistantId || null;
|
|
const askAiSearchParameters = askAiConfig?.searchParameters;
|
|
|
|
// storage
|
|
const conversations = React.useRef(
|
|
createStoredConversations<StoredAskAiState>({
|
|
key: `__DOCSEARCH_ASKAI_CONVERSATIONS__${askAiConfig?.indexName || indexName}`,
|
|
limit: 10,
|
|
}),
|
|
).current;
|
|
const favoriteSearches = React.useRef(
|
|
createStoredSearches<StoredDocSearchHit>({
|
|
key: `__DOCSEARCH_FAVORITE_SEARCHES__${indexName}`,
|
|
limit: 10,
|
|
}),
|
|
).current;
|
|
const recentSearches = React.useRef(
|
|
createStoredSearches<StoredDocSearchHit>({
|
|
key: `__DOCSEARCH_RECENT_SEARCHES__${indexName}`,
|
|
limit: favoriteSearches.getAll().length === 0 ? recentSearchesLimit : recentSearchesWithFavoritesLimit,
|
|
}),
|
|
).current;
|
|
|
|
const [askAiStreamError, setAskAiStreamError] = React.useState<Error | null>(null);
|
|
|
|
const {
|
|
messages,
|
|
append,
|
|
status,
|
|
setMessages,
|
|
error: askAiFetchError,
|
|
} = useChat({
|
|
api: ASK_AI_API_URL,
|
|
sendExtraMessageFields: true,
|
|
fetch: async (input, init) => {
|
|
if (!USE_ASK_AI_TOKEN) {
|
|
return fetch(input, init);
|
|
}
|
|
|
|
if (!askAiConfigurationId) {
|
|
throw new Error('Ask AI assistant ID is required');
|
|
}
|
|
const token = await getValidToken({ assistantId: askAiConfigurationId });
|
|
const headers = new Headers(init.headers);
|
|
headers.set('authorization', `TOKEN ${token}`);
|
|
|
|
return fetch(input, { ...init, headers });
|
|
},
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-Algolia-API-Key': askAiConfig?.apiKey || apiKey,
|
|
'X-Algolia-Application-Id': askAiConfig?.appId || appId,
|
|
'X-Algolia-Index-Name': askAiConfig?.indexName || indexName,
|
|
'X-Algolia-Assistant-Id': askAiConfigurationId || '',
|
|
},
|
|
body: askAiSearchParameters ? { searchParameters: askAiSearchParameters } : {},
|
|
onError(streamError) {
|
|
setAskAiStreamError(streamError);
|
|
},
|
|
});
|
|
|
|
const prevStatus = React.useRef(status);
|
|
React.useEffect(() => {
|
|
if (disableUserPersonalization) {
|
|
return;
|
|
}
|
|
// if we just transitioned from "streaming" → "ready", persist
|
|
if (prevStatus.current === 'streaming' && status === 'ready') {
|
|
conversations.add(buildDummyAskAiHit(messages[0].content, messages));
|
|
}
|
|
prevStatus.current = status;
|
|
}, [status, messages, conversations, disableUserPersonalization]);
|
|
|
|
const saveRecentSearch = React.useCallback(
|
|
function saveRecentSearch(item: InternalDocSearchHit) {
|
|
if (disableUserPersonalization) {
|
|
return;
|
|
}
|
|
|
|
// We don't store `content` record, but their parent if available.
|
|
const search = item.type === 'content' ? item.__docsearch_parent : item;
|
|
|
|
// We save the recent search only if it's not favorited.
|
|
if (search && favoriteSearches.getAll().findIndex((x) => x.objectID === search.objectID) === -1) {
|
|
recentSearches.add(search);
|
|
}
|
|
},
|
|
[favoriteSearches, recentSearches, disableUserPersonalization],
|
|
);
|
|
|
|
const sendItemClickEvent = React.useCallback(
|
|
(item: InternalDocSearchHit) => {
|
|
if (!state.context.algoliaInsightsPlugin || !item.__autocomplete_id) return;
|
|
|
|
const insightsItem = item as AlgoliaInsightsHit;
|
|
|
|
const insightsClickParams = {
|
|
eventName: 'Item Selected',
|
|
index: insightsItem.__autocomplete_indexName,
|
|
items: [insightsItem],
|
|
positions: [item.__autocomplete_id],
|
|
queryID: insightsItem.__autocomplete_queryID,
|
|
};
|
|
|
|
state.context.algoliaInsightsPlugin.insights.clickedObjectIDsAfterSearch(insightsClickParams);
|
|
},
|
|
[state.context.algoliaInsightsPlugin],
|
|
);
|
|
|
|
const autocompleteRef =
|
|
React.useRef<
|
|
ReturnType<
|
|
typeof createAutocomplete<
|
|
InternalDocSearchHit,
|
|
React.FormEvent<HTMLFormElement>,
|
|
React.MouseEvent,
|
|
React.KeyboardEvent
|
|
>
|
|
>
|
|
>(undefined);
|
|
|
|
const handleAskAiToggle = React.useCallback(
|
|
(toggle: boolean, query: string) => {
|
|
onAskAiToggle(toggle);
|
|
append({
|
|
role: 'user',
|
|
content: query,
|
|
});
|
|
|
|
if (dropdownRef.current) {
|
|
// some test environments (like jsdom) don't implement element.scrollTo
|
|
const el = dropdownRef.current;
|
|
if (typeof (el as any).scrollTo === 'function') {
|
|
el.scrollTo({ top: 0, behavior: 'smooth' });
|
|
} else {
|
|
// fallback for environments without scrollTo support
|
|
el.scrollTop = 0;
|
|
}
|
|
}
|
|
|
|
// clear the query
|
|
if (autocompleteRef.current) {
|
|
autocompleteRef.current.setQuery('');
|
|
}
|
|
},
|
|
[onAskAiToggle, append],
|
|
);
|
|
|
|
// feedback handler
|
|
const handleFeedbackSubmit = React.useCallback(
|
|
async (messageId: string, thumbs: 0 | 1): Promise<void> => {
|
|
if (!askAiConfigurationId || !appId) return;
|
|
const res = await postFeedback({
|
|
assistantId: askAiConfigurationId,
|
|
thumbs,
|
|
messageId,
|
|
appId,
|
|
});
|
|
if (res.status >= 300) throw new Error('Failed, try again later');
|
|
conversations.addFeedback?.(messageId, thumbs === 1 ? 'like' : 'dislike');
|
|
},
|
|
[askAiConfigurationId, appId, conversations],
|
|
);
|
|
|
|
if (!autocompleteRef.current) {
|
|
autocompleteRef.current = createAutocomplete({
|
|
id: 'docsearch',
|
|
defaultActiveItemId: 0,
|
|
openOnFocus: true,
|
|
initialState: {
|
|
query: initialQuery,
|
|
context: {
|
|
searchSuggestions: [],
|
|
},
|
|
},
|
|
insights: Boolean(insights),
|
|
navigator,
|
|
onStateChange(props) {
|
|
setState(props.state);
|
|
},
|
|
getSources({ query, state: sourcesState, setContext, setStatus }) {
|
|
if (!query) {
|
|
const noQuerySources = buildNoQuerySources({
|
|
recentSearches,
|
|
favoriteSearches,
|
|
saveRecentSearch,
|
|
onClose,
|
|
disableUserPersonalization,
|
|
canHandleAskAi,
|
|
});
|
|
|
|
const recentConversationSource: Array<AutocompleteSource<InternalDocSearchHit & { messages?: Message[] }>> =
|
|
canHandleAskAi
|
|
? [
|
|
{
|
|
sourceId: 'recentConversations',
|
|
getItems(): InternalDocSearchHit[] {
|
|
if (disableUserPersonalization) {
|
|
return [];
|
|
}
|
|
return conversations.getAll() as unknown as InternalDocSearchHit[];
|
|
},
|
|
onSelect({ item }): void {
|
|
if (item.messages) {
|
|
setMessages(item.messages as any);
|
|
onAskAiToggle(true);
|
|
}
|
|
},
|
|
},
|
|
]
|
|
: [];
|
|
return [...noQuerySources, ...recentConversationSource];
|
|
}
|
|
|
|
const querySourcesState: BuildQuerySourcesState = {
|
|
context: sourcesState.context,
|
|
};
|
|
|
|
// Algolia sources
|
|
const algoliaSourcesPromise = buildQuerySources({
|
|
query,
|
|
state: querySourcesState,
|
|
setContext,
|
|
setStatus,
|
|
searchClient,
|
|
indexName,
|
|
searchParameters,
|
|
snippetLength,
|
|
insights: Boolean(insights),
|
|
appId,
|
|
apiKey,
|
|
maxResultsPerGroup,
|
|
transformItems,
|
|
saveRecentSearch,
|
|
onClose,
|
|
});
|
|
|
|
// AskAI source
|
|
const askAiSource: Array<AutocompleteSource<InternalDocSearchHit>> = canHandleAskAi
|
|
? [
|
|
{
|
|
sourceId: 'askAI',
|
|
getItems(): InternalDocSearchHit[] {
|
|
// return a single item representing the Ask AI action
|
|
// placeholder data matching the InternalDocSearchHit structure
|
|
const askItem: InternalDocSearchHit = {
|
|
type: 'askAI',
|
|
query,
|
|
url_without_anchor: '',
|
|
objectID: `ask-ai-button`,
|
|
content: null,
|
|
url: '',
|
|
anchor: null,
|
|
hierarchy: {
|
|
lvl0: 'Ask AI', // Or contextually relevant
|
|
lvl1: query,
|
|
lvl2: null,
|
|
lvl3: null,
|
|
lvl4: null,
|
|
lvl5: null,
|
|
lvl6: null,
|
|
},
|
|
_highlightResult: {} as any,
|
|
_snippetResult: {} as any,
|
|
__docsearch_parent: null,
|
|
};
|
|
return [askItem];
|
|
},
|
|
onSelect({ item }): void {
|
|
if (item.type === 'askAI' && item.query) {
|
|
handleAskAiToggle(true, item.query);
|
|
}
|
|
},
|
|
},
|
|
]
|
|
: [];
|
|
|
|
// Combine Algolia results (once resolved) with the Ask AI source
|
|
return algoliaSourcesPromise.then((algoliaSources) => {
|
|
return [...askAiSource, ...algoliaSources];
|
|
});
|
|
},
|
|
});
|
|
}
|
|
|
|
const autocomplete = autocompleteRef.current;
|
|
|
|
const { getEnvironmentProps, getRootProps, refresh } = autocomplete;
|
|
|
|
useTouchEvents({
|
|
getEnvironmentProps,
|
|
panelElement: dropdownRef.current,
|
|
formElement: formElementRef.current,
|
|
inputElement: inputRef.current,
|
|
});
|
|
useTrapFocus({ container: containerRef.current });
|
|
useTheme({ theme });
|
|
|
|
React.useEffect(() => {
|
|
document.body.classList.add('DocSearch--active');
|
|
|
|
return (): void => {
|
|
document.body.classList.remove('DocSearch--active');
|
|
|
|
// IE11 doesn't support `scrollTo` so we check that the method exists
|
|
// first.
|
|
window.scrollTo?.(0, initialScrollY);
|
|
};
|
|
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, []);
|
|
|
|
// Proactively manage localStorage quota to prevent crashes
|
|
React.useEffect(() => {
|
|
manageLocalStorageQuota();
|
|
}, []);
|
|
|
|
React.useLayoutEffect(() => {
|
|
// Calculate the scrollbar width to compensate for removed scrollbar
|
|
const scrollBarWidth = window.innerWidth - document.body.clientWidth;
|
|
// Prevent layout shift by adding appropriate margin to the body
|
|
document.body.style.marginRight = `${scrollBarWidth}px`;
|
|
|
|
return (): void => {
|
|
document.body.style.marginRight = '0px';
|
|
};
|
|
}, []);
|
|
|
|
React.useEffect(() => {
|
|
const isMobileMediaQuery = window.matchMedia('(max-width: 768px)');
|
|
|
|
if (isMobileMediaQuery.matches) {
|
|
snippetLength.current = 5;
|
|
}
|
|
}, []);
|
|
|
|
React.useEffect(() => {
|
|
if (dropdownRef.current && !isAskAiActive) {
|
|
scrollToUtils(dropdownRef.current);
|
|
}
|
|
}, [state.query, isAskAiActive]);
|
|
|
|
// We don't focus the input when there's an initial query (i.e. Selection
|
|
// Search) because users rather want to see the results directly, without the
|
|
// keyboard appearing.
|
|
// We therefore need to refresh the autocomplete instance to load all the
|
|
// results, which is usually triggered on focus.
|
|
React.useEffect(() => {
|
|
if (initialQuery.length > 0) {
|
|
refresh();
|
|
|
|
if (inputRef.current) {
|
|
inputRef.current.focus();
|
|
}
|
|
}
|
|
}, [initialQuery, refresh]);
|
|
|
|
// We rely on a CSS property to set the modal height to the full viewport height
|
|
// because all mobile browsers don't compute their height the same way.
|
|
// See https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
|
|
React.useEffect(() => {
|
|
function setFullViewportHeight(): void {
|
|
if (modalRef.current) {
|
|
const vh = window.innerHeight * 0.01;
|
|
modalRef.current.style.setProperty('--docsearch-vh', `${vh}px`);
|
|
}
|
|
}
|
|
|
|
setFullViewportHeight();
|
|
|
|
window.addEventListener('resize', setFullViewportHeight);
|
|
|
|
return (): void => {
|
|
window.removeEventListener('resize', setFullViewportHeight);
|
|
};
|
|
}, []);
|
|
|
|
// Refresh the autocomplete results when ask ai is toggled off
|
|
// helps return to the previous ac state and start screen
|
|
React.useEffect(() => {
|
|
if (!isAskAiActive) {
|
|
autocomplete.refresh();
|
|
setMessages([]);
|
|
}
|
|
}, [isAskAiActive, autocomplete, setMessages]);
|
|
|
|
// hide the dropdown on idle and no collections
|
|
let showDocsearchDropdown = true;
|
|
const hasCollections = state.collections.some((collection) => collection.items.length > 0);
|
|
if (state.status === 'idle' && hasCollections === false && state.query.length === 0 && !isAskAiActive) {
|
|
showDocsearchDropdown = false;
|
|
}
|
|
|
|
return (
|
|
<div
|
|
ref={containerRef}
|
|
{...getRootProps({ 'aria-expanded': true })}
|
|
className={[
|
|
'DocSearch',
|
|
'DocSearch-Container',
|
|
state.status === 'stalled' && 'DocSearch-Container--Stalled',
|
|
state.status === 'error' && 'DocSearch-Container--Errored',
|
|
]
|
|
.filter(Boolean)
|
|
.join(' ')}
|
|
role="button"
|
|
tabIndex={0}
|
|
onMouseDown={(event) => {
|
|
if (event.target === event.currentTarget) {
|
|
onClose();
|
|
}
|
|
}}
|
|
>
|
|
<div className="DocSearch-Modal" ref={modalRef}>
|
|
<header className="DocSearch-SearchBar" ref={formElementRef}>
|
|
<SearchBox
|
|
{...autocomplete}
|
|
state={state}
|
|
placeholder={placeholder || 'Search docs'}
|
|
autoFocus={initialQuery.length === 0}
|
|
inputRef={inputRef}
|
|
isFromSelection={Boolean(initialQuery) && initialQuery === initialQueryFromSelection}
|
|
translations={searchBoxTranslations}
|
|
isAskAiActive={isAskAiActive}
|
|
askAiStatus={status}
|
|
onClose={onClose}
|
|
onAskAiToggle={onAskAiToggle}
|
|
onAskAgain={(query) => {
|
|
handleAskAiToggle(true, query);
|
|
}}
|
|
/>
|
|
</header>
|
|
|
|
{showDocsearchDropdown && (
|
|
<div className="DocSearch-Dropdown" ref={dropdownRef}>
|
|
<ScreenState
|
|
{...autocomplete}
|
|
indexName={indexName}
|
|
state={state}
|
|
hitComponent={hitComponent}
|
|
resultsFooterComponent={resultsFooterComponent}
|
|
disableUserPersonalization={disableUserPersonalization}
|
|
recentSearches={recentSearches}
|
|
favoriteSearches={favoriteSearches}
|
|
conversations={conversations}
|
|
inputRef={inputRef}
|
|
translations={screenStateTranslations}
|
|
getMissingResultsUrl={getMissingResultsUrl}
|
|
isAskAiActive={isAskAiActive}
|
|
canHandleAskAi={canHandleAskAi}
|
|
messages={messages}
|
|
askAiStreamError={askAiStreamError}
|
|
askAiFetchError={askAiFetchError}
|
|
status={status}
|
|
hasCollections={hasCollections}
|
|
onAskAiToggle={onAskAiToggle}
|
|
onItemClick={(item, event) => {
|
|
// if the item is askAI toggle the screen
|
|
if (item.type === 'askAI' && item.query) {
|
|
// if the item is askAI and the anchor is stored
|
|
if (item.anchor === 'stored' && 'messages' in item) {
|
|
setMessages(item.messages as any);
|
|
onAskAiToggle(true);
|
|
} else {
|
|
handleAskAiToggle(true, item.query);
|
|
}
|
|
event.preventDefault();
|
|
return;
|
|
}
|
|
|
|
// If insights is active, send insights click event
|
|
sendItemClickEvent(item);
|
|
|
|
saveRecentSearch(item);
|
|
if (!isModifierEvent(event)) {
|
|
onClose();
|
|
}
|
|
}}
|
|
onFeedback={handleFeedbackSubmit}
|
|
/>
|
|
</div>
|
|
)}
|
|
<footer className="DocSearch-Footer">
|
|
<Footer translations={footerTranslations} isAskAiActive={isAskAiActive} />
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|