-
-
-
- );
+
+ return null;
+};
+
+const Search = (props) => {
+ const containerRef = useRef(null);
+ const requestId = useRef(0);
+ const debounceRef = useRef(null);
+ const abortRef = useRef(null);
+ const aiRequestRef = useRef(0);
+
+ const {siteConfig, i18n} = useDocusaurusContext();
+ const locale = i18n?.currentLocale || 'en';
+ const copy = useMemo(() => ({
+ placeholder: translate({
+ id: 'search.placeholder',
+ message: 'Search products, games, docs…',
+ description: 'Placeholder text for the navbar search input',
+ }),
+ loading: translate({
+ id: 'search.loading',
+ message: 'Searching…',
+ description: 'Loading text while search results are being fetched',
+ }),
+ empty: translate({
+ id: 'search.empty',
+ message: 'No matching results.',
+ description: 'Shown when search returns no results',
+ }),
+ failure: translate({
+ id: 'search.failure',
+ message: 'Search is unavailable. Please try again.',
+ description: 'Shown when search fails',
+ }),
+ short: translate({
+ id: 'search.short',
+ message: 'Enter at least 3 characters.',
+ description: 'Shown when the search query is too short',
+ }),
+ askAiHeading: translate({
+ id: 'search.askAiHeading',
+ message: 'Ask our AI',
+ description: 'Heading for the Ask AI section',
+ }),
+ askAiDescription: translate({
+ id: 'search.askAiDescription',
+ message: 'Get AI-powered answers based on our documentation.',
+ description: 'Description for the Ask AI section',
+ }),
+ askAiButton: translate({
+ id: 'search.askAiButton',
+ message: 'Go!',
+ description: 'Button label for the Ask AI action',
+ }),
+ askAiGenericError: translate({
+ id: 'search.askAiGenericError',
+ message: 'Failed to generate answer. Please try again.',
+ description: 'Generic error for Ask AI failures',
+ }),
+ askAiUnavailable: translate({
+ id: 'search.askAiUnavailable',
+ message: 'Ask AI is currently unavailable.',
+ description: 'Shown when Ask AI is disabled',
+ }),
+ askAiRateLimited: translate({
+ id: 'search.askAiRateLimited',
+ message: 'Slow down, you\'re asking too many questions, please try again later!',
+ description: 'Shown when Ask AI rate limit is reached',
+ }),
+ askAiLoadingText: translate({
+ id: 'search.askAiLoadingText',
+ message: 'Thinking...',
+ description: 'Loading text while Ask AI prepares an answer',
+ }),
+ tabs: {
+ game: translate({
+ id: 'search.tabs.game',
+ message: 'Products',
+ description: 'Tab label for product search results',
+ }),
+ docs: translate({
+ id: 'search.tabs.docs',
+ message: 'Docs',
+ description: 'Tab label for documentation search results',
+ }),
+ landingPage: translate({
+ id: 'search.tabs.landingPage',
+ message: 'Pages',
+ description: 'Tab label for landing page search results',
+ }),
+ posts: translate({
+ id: 'search.tabs.posts',
+ message: 'Blog',
+ description: 'Tab label for blog search results',
+ }),
+ },
+ }), [locale]);
+ const marketingBase = useMemo(() => {
+ const source = siteConfig?.customFields?.searchSite || siteConfig?.url || '';
+
+ return sanitizeBase(String(source));
+ }, [siteConfig]);
+
+ const [query, setQuery] = useState('');
+ const [open, setOpen] = useState(false);
+ const [activeTab, setActiveTab] = useState('game');
+ const [loading, setLoading] = useState(false);
+ const [error, setError] = useState(null);
+ const [results, setResults] = useState(null);
+ const [askAiEnabled, setAskAiEnabled] = useState(false);
+ const [aiLoading, setAiLoading] = useState(false);
+ const [aiAnswer, setAiAnswer] = useState(null);
+ const [aiError, setAiError] = useState(null);
+ const [currentLoadingLabel, setCurrentLoadingLabel] = useState(copy.loading);
+ const expanded = open || props.isSearchBarExpanded;
+ const hasQuery = query.trim().length >= MIN_QUERY_LENGTH;
+ const hasResults = results?.counts?.global > 0;
+ const showAskAi = askAiEnabled && hasQuery && hasResults;
+ const canRequestAi = showAskAi && ! aiLoading;
+
+ const buildSearchUrl = useCallback((term, echoId) => {
+ const endpoint = `${marketingBase}/${locale}/customer/_ajax/json_getWebSearchResults.php`;
+ const url = new URL(endpoint);
+ url.searchParams.set('searchTerm', term);
+ url.searchParams.set('show', String(echoId));
+ url.searchParams.set('language', locale);
+
+ return url.toString();
+ }, [locale, marketingBase]);
+
+ const fetchResults = useCallback(async (term, echoId) => {
+ setError(null);
+ if (abortRef.current) {
+ abortRef.current.abort();
+ }
+ const controller = new AbortController();
+ abortRef.current = controller;
+
+ const response = await fetch(buildSearchUrl(term, echoId), {
+ method: 'GET',
+ headers: {
+ 'X-Requested-With': 'XMLHttpRequest',
+ },
+ signal: controller.signal,
+ }).catch((error) => {
+ if (error?.name === 'AbortError') {
+ return null;
+ }
+
+ return null;
+ });
+
+ if (abortRef.current === controller) {
+ abortRef.current = null;
+ }
+
+ if (requestId.current !== echoId) {
+ return;
+ }
+
+ if (! response || ! response.ok) {
+ setError(copy.failure);
+ setLoading(false);
+
+ return;
+ }
+
+ let payload = null;
+
+ try {
+ payload = await response.json();
+ } catch (exception) {
+ payload = null;
+ }
+
+ if (! payload || payload.result !== 'success') {
+ setError(copy.failure);
+ setLoading(false);
+
+ return;
+ }
+
+ const counts = payload.data?.counts || {global: 0, types: {}};
+ const items = payload.data?.results || {};
+ setResults({counts, items});
+ const availableTabs = buildTabs(counts, copy.tabs);
+
+ if (availableTabs.length > 0) {
+ setActiveTab(availableTabs[0].key);
+ }
+
+ setLoading(false);
+ }, [buildSearchUrl, copy.failure, copy.tabs]);
+
+ const resetAiState = useCallback(() => {
+ setAiAnswer(null);
+ setAiError(null);
+ setAiLoading(false);
+ }, []);
+
+ const resolveAiError = useCallback((message) => {
+ const lookup = {
+ ask_ai_disabled: copy.askAiUnavailable,
+ ask_ai_rate_limited: copy.askAiRateLimited,
+ ask_ai_invalid_query: copy.askAiGenericError,
+ ask_ai_no_results: copy.empty,
+ };
+
+ return lookup[message] ?? copy.askAiGenericError;
+ }, [copy.askAiGenericError, copy.askAiRateLimited, copy.askAiUnavailable, copy.empty]);
+
+ const fetchAskAiConfig = useCallback(async () => {
+ const url = new URL(`${marketingBase}/${locale}/customer/_ajax/json_getAISearchAnswer.php`);
+ url.searchParams.set('action', 'config');
+ url.searchParams.set('language', locale);
+
+ const response = await fetch(url.toString(), {
+ method: 'GET',
+ headers: {
+ 'X-Requested-With': 'XMLHttpRequest',
+ },
+ }).catch(() => null);
+
+ if (! response) {
+ setAskAiEnabled(false);
+ return;
+ }
+
+ let payload = null;
+ try {
+ payload = await response.json();
+ } catch (exception) {
+ payload = null;
+ }
+
+ if (! payload || payload.result !== 'success') {
+ setAskAiEnabled(false);
+ resetAiState();
+ return;
+ }
+
+ const enabled = Boolean(payload.data?.enabled);
+ setAskAiEnabled(enabled);
+ if (! enabled) {
+ resetAiState();
+ }
+ }, [locale, marketingBase, resetAiState]);
+
+ const requestAiAnswer = useCallback(async () => {
+ if (! canRequestAi) {
+ return;
+ }
+
+ setAiError(null);
+ setAiAnswer(null);
+ setAiLoading(true);
+ setCurrentLoadingLabel(copy.askAiLoadingText);
+
+ const reqId = aiRequestRef.current + 1;
+ aiRequestRef.current = reqId;
+
+ const url = new URL(`${marketingBase}/${locale}/customer/_ajax/json_getAISearchAnswer.php`);
+ url.searchParams.set('searchTerm', query.trim());
+ url.searchParams.set('language', locale);
+
+ const response = await fetch(url.toString(), {
+ method: 'GET',
+ headers: {
+ 'X-Requested-With': 'XMLHttpRequest',
+ },
+ }).catch(() => null);
+
+ if (reqId !== aiRequestRef.current) {
+ return;
+ }
+
+ if (! response) {
+ setAiError(copy.failure);
+ setAiLoading(false);
+ return;
+ }
+
+ let payload = null;
+ try {
+ payload = await response.json();
+ } catch (exception) {
+ payload = null;
+ }
+
+ if (! payload || payload.result !== 'success') {
+ setAiError(resolveAiError(payload?.message));
+ setAiLoading(false);
+ return;
+ }
+
+ setAiAnswer(payload.data?.answer ?? '');
+ setAiLoading(false);
+ }, [canRequestAi, copy.askAiLoadingText, copy.failure, locale, marketingBase, query, resolveAiError]);
+
+ useEffect(() => {
+ if (debounceRef.current) {
+ clearTimeout(debounceRef.current);
+ }
+
+ if (query.trim().length < MIN_QUERY_LENGTH) {
+ setLoading(false);
+ setResults(null);
+ resetAiState();
+
+ return undefined;
+ }
+
+ setLoading(true);
+ const echoId = requestId.current + 1;
+ requestId.current = echoId;
+ debounceRef.current = window.setTimeout(() => {
+ fetchResults(query.trim(), echoId);
+ }, 300);
+
+ return () => {
+ if (debounceRef.current) {
+ clearTimeout(debounceRef.current);
+ }
+ };
+ }, [fetchResults, query, resetAiState]);
+
+ useEffect(() => {
+ const handler = (event) => {
+ if (! containerRef.current) {
+ return;
+ }
+
+ if (! containerRef.current.contains(event.target)) {
+ setOpen(false);
+ props.handleSearchBarToggle?.(false);
+ }
+ };
+
+ document.addEventListener('mousedown', handler);
+
+ return () => {
+ document.removeEventListener('mousedown', handler);
+ };
+ }, [props]);
+
+ useEffect(() => {
+ fetchAskAiConfig();
+ }, [fetchAskAiConfig]);
+
+ useEffect(() => {
+ setCurrentLoadingLabel(copy.loading);
+ }, [copy.loading]);
+
+ useEffect(() => {
+ if (results === null) {
+ resetAiState();
+ }
+ }, [results, resetAiState]);
+
+ const tabs = useMemo(() => {
+ if (! results) {
+ return [];
+ }
+
+ return buildTabs(results.counts, copy.tabs);
+ }, [copy.tabs, results]);
+
+ const activeItems = useMemo(() => {
+ if (! results) {
+ return [];
+ }
+
+ const bucket = results.items?.[activeTab];
+
+ return normalizeItems(bucket);
+ }, [activeTab, results]);
+
+ const showPanel = open || query.trim().length >= MIN_QUERY_LENGTH;
+
+ return (
+
+
+ );
};
export default Search;
diff --git a/src/theme/SearchBar/lunar-search.js b/src/theme/SearchBar/lunar-search.js
deleted file mode 100644
index cac06c40d..000000000
--- a/src/theme/SearchBar/lunar-search.js
+++ /dev/null
@@ -1,149 +0,0 @@
-import lunr from "@generated/lunr.client";
-lunr.tokenizer.separator = /[\s\-/]+/;
-
-class LunrSearchAdapter {
- constructor(searchDocs, searchIndex, baseUrl = '/', maxHits) {
- this.searchDocs = searchDocs;
- this.lunrIndex = lunr.Index.load(searchIndex);
- this.baseUrl = baseUrl;
- this.maxHits = maxHits;
- }
-
- getLunrResult(input) {
- return this.lunrIndex.query(function (query) {
- const tokens = lunr.tokenizer(input);
- query.term(tokens, {
- boost: 10
- });
- query.term(tokens, {
- wildcard: lunr.Query.wildcard.TRAILING
- });
- });
- }
-
- getHit(doc, formattedTitle, formattedContent) {
- return {
- hierarchy: {
- lvl0: doc.pageTitle || doc.title,
- lvl1: doc.type === 0 ? null : doc.title
- },
- url: doc.url,
- version: doc.version,
- _snippetResult: formattedContent ? {
- content: {
- value: formattedContent,
- matchLevel: "full"
- }
- } : null,
- _highlightResult: {
- hierarchy: {
- lvl0: {
- value: doc.type === 0 ? formattedTitle || doc.title : doc.pageTitle,
- },
- lvl1:
- doc.type === 0
- ? null
- : {
- value: formattedTitle || doc.title
- }
- }
- }
- };
- }
- getTitleHit(doc, position, length) {
- const start = position[0];
- const end = position[0] + length;
- let formattedTitle = doc.title.substring(0, start) + '' + doc.title.substring(start, end) + '' + doc.title.substring(end, doc.title.length);
- return this.getHit(doc, formattedTitle)
- }
-
- getKeywordHit(doc, position, length) {
- const start = position[0];
- const end = position[0] + length;
- let formattedTitle = doc.title + '
+
+ {
+ setQuery(event.target.value);
+ setOpen(true);
+ props.handleSearchBarToggle?.(true);
+ }}
+ onFocus={() => {
+ setOpen(true);
+ props.handleSearchBarToggle?.(true);
+ }}
+ placeholder={copy.placeholder}
+ aria-label={copy.placeholder}
+ className={clsx(
+ 'navbar__search-input',
+ expanded ? 'search-bar-expanded' : 'search-bar',
+ )}
+ autoComplete="off"
+ />
+ {query !== '' && (
+
+ )}
+
+
+ {showPanel && (
+
+ {query.trim().length < MIN_QUERY_LENGTH && (
+
+ )}
+ {copy.short}
+ )}
+
+ {query.trim().length >= MIN_QUERY_LENGTH && loading && (
+ {copy.loading}
+ )}
+
+ {query.trim().length >= MIN_QUERY_LENGTH && ! loading && error && (
+ {error}
+ )}
+
+ {query.trim().length >= MIN_QUERY_LENGTH && ! loading && ! error && ! hasResults && (
+ {copy.empty}
+ )}
+
+ {query.trim().length >= MIN_QUERY_LENGTH && ! loading && ! error && hasResults && (
+ <>
+ {showAskAi && (
+
+
+ )}
+
+
+
+ {aiLoading && (
+
+
+
+ {copy.askAiHeading}
+ {copy.askAiDescription}
+
+
+ {currentLoadingLabel}
+
+ )}
+ {! aiLoading && aiAnswer && (
+
+ )}
+ {! aiLoading && aiError && (
+ {aiError}
+ )}
+
+ {tabs.map((tab) => (
+
+ ))}
+
+
+
+ {activeItems.map((item) => (
+
+
+
+ )}
+
+ {renderIcon(item.icon, item.title)}
+
+
+
+ {item.cheapestPrice && (
+
+
+ ))}
+ {item.cheapestPrice}
+ )}
+ Keywords: ' + doc.keywords.substring(0, start) + '' + doc.keywords.substring(start, end) + '' + doc.keywords.substring(end, doc.keywords.length) + '' - return this.getHit(doc, formattedTitle) - } - - getContentHit(doc, position) { - const start = position[0]; - const end = position[0] + position[1]; - let previewStart = start; - let previewEnd = end; - let ellipsesBefore = true; - let ellipsesAfter = true; - for (let k = 0; k < 3; k++) { - const nextSpace = doc.content.lastIndexOf(' ', previewStart - 2); - const nextDot = doc.content.lastIndexOf('.', previewStart - 2); - if ((nextDot > 0) && (nextDot > nextSpace)) { - previewStart = nextDot + 1; - ellipsesBefore = false; - break; - } - if (nextSpace < 0) { - previewStart = 0; - ellipsesBefore = false; - break; - } - previewStart = nextSpace + 1; - } - for (let k = 0; k < 10; k++) { - const nextSpace = doc.content.indexOf(' ', previewEnd + 1); - const nextDot = doc.content.indexOf('.', previewEnd + 1); - if ((nextDot > 0) && (nextDot < nextSpace)) { - previewEnd = nextDot; - ellipsesAfter = false; - break; - } - if (nextSpace < 0) { - previewEnd = doc.content.length; - ellipsesAfter = false; - break; - } - previewEnd = nextSpace; - } - let preview = doc.content.substring(previewStart, start); - if (ellipsesBefore) { - preview = '... ' + preview; - } - preview += '' + doc.content.substring(start, end) + ''; - preview += doc.content.substring(end, previewEnd); - if (ellipsesAfter) { - preview += ' ...'; - } - return this.getHit(doc, null, preview); - - } - search(input) { - return new Promise((resolve, rej) => { - const results = this.getLunrResult(input); - const hits = []; - results.length > this.maxHits && (results.length = this.maxHits); - this.titleHitsRes = [] - this.contentHitsRes = [] - results.forEach(result => { - const doc = this.searchDocs[result.ref]; - const { metadata } = result.matchData; - for (let i in metadata) { - if (metadata[i].title) { - if (!this.titleHitsRes.includes(result.ref)) { - const position = metadata[i].title.position[0] - hits.push(this.getTitleHit(doc, position, input.length)); - this.titleHitsRes.push(result.ref); - } - } else if (metadata[i].content) { - const position = metadata[i].content.position[0] - hits.push(this.getContentHit(doc, position)) - } else if (metadata[i].keywords) { - const position = metadata[i].keywords.position[0] - hits.push(this.getKeywordHit(doc, position, input.length)); - this.titleHitsRes.push(result.ref); - } - } - }); - hits.length > this.maxHits && (hits.length = this.maxHits); - resolve(hits); - }); - } -} - -export default LunrSearchAdapter; diff --git a/src/theme/SearchBar/styles.css b/src/theme/SearchBar/styles.css index 8dc3b0a12..bd2bad286 100644 --- a/src/theme/SearchBar/styles.css +++ b/src/theme/SearchBar/styles.css @@ -1,33 +1,376 @@ -.search-icon { - background-image: var(--ifm-navbar-search-input-icon); - height: auto; - width: 24px; +:root { + --zap-search-surface: #f8fafc; + --zap-search-surface-strong: #eef2ff; + --zap-search-border: rgba(15, 23, 42, 0.08); + --zap-search-border-strong: rgba(99, 102, 241, 0.25); + --zap-search-text: #0f172a; + --zap-search-text-muted: #475569; + --zap-search-accent: #a3e635; + --zap-search-accent-strong: #65a30d; + --zap-search-shadow: 0 20px 60px rgba(15, 23, 42, 0.18); +} + +[data-theme='dark'] { + --zap-search-surface: rgba(15, 23, 42, 0.92); + --zap-search-surface-strong: rgba(34, 197, 94, 0.08); + --zap-search-border: rgba(148, 163, 184, 0.25); + --zap-search-border-strong: rgba(132, 204, 22, 0.4); + --zap-search-text: #e2e8f0; + --zap-search-text-muted: #94a3b8; + --zap-search-accent: #bef264; + --zap-search-accent-strong: #4ade80; + --zap-search-shadow: 0 20px 60px rgba(0, 0, 0, 0.45); +} + +.zap-search { + position: relative; + max-width: 560px; +} + +.zap-search-input-wrap { + position: relative; + display: flex; + align-items: center; +} + +.zap-search-icon-left { + position: absolute; + left: 12px; + font-size: 14px; + opacity: 0.7; +} + +.zap-search-clear { + position: absolute; + right: 10px; + background: transparent; + border: none; + cursor: pointer; + color: var(--zap-search-text-muted); + font-size: 16px; + line-height: 1; +} + +.zap-search-clear:hover { + color: var(--zap-search-accent-strong); +} + +.zap-search .navbar__search-input { + padding-left: 32px; + padding-right: 32px; + background: var(--zap-search-surface); + border-radius: 12px; + border: 1px solid var(--zap-search-border); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), var(--zap-search-shadow); + color: var(--zap-search-text); +} + +.zap-search .navbar__search-input:focus { + border-color: var(--zap-search-border-strong); + box-shadow: 0 0 0 3px var(--zap-search-surface-strong), var(--zap-search-shadow); +} + +.zap-search-panel { + position: absolute; + right: 0; + top: calc(100% + 10px); + width: min(560px, 92vw); + background: var(--zap-search-surface); + border: 1px solid var(--zap-search-border); + border-radius: 14px; + box-shadow: var(--zap-search-shadow); + z-index: 20; + padding: 14px; + backdrop-filter: blur(10px); +} + +.zap-search-status { + padding: 12px; + border-radius: 10px; + background: var(--zap-search-surface-strong); + color: var(--zap-search-text); + font-size: 14px; +} + +.zap-search-error { + background: rgba(239, 68, 68, 0.12); + color: #ef4444; +} + +.zap-search-tabs { + display: flex; + gap: 14px; + padding: 0 2px 10px; + margin-bottom: 12px; + border-bottom: 1px solid var(--zap-search-border); + overflow-x: auto; + overflow-y: visible; +} + +.zap-search-tab { + position: relative; + display: inline-flex; + align-items: center; + gap: 8px; + padding: 6px 0; + border: none; + border-radius: 0; + background: transparent; + color: var(--zap-search-text-muted); cursor: pointer; - padding: 8px; - line-height: 32px; - background-repeat: no-repeat; - background-position: center; - display: none; + font-size: 14px; + font-weight: 600; + transition: all 180ms ease; +} + +.zap-search-tab:hover { + color: var(--zap-search-text); +} + +.zap-search-tab-active { + color: var(--zap-search-text); +} + +.zap-search-tab::after { + content: ''; + position: absolute; + left: 0; + right: 0; + bottom: -11px; + height: 3px; + border-radius: 999px; + background: transparent; + box-shadow: 0 0 0 rgba(52, 211, 153, 0); + opacity: 0; + transition: all 180ms ease; +} + +.zap-search-tab-active::after { + background: linear-gradient(90deg, var(--zap-search-accent-strong), var(--zap-search-accent)); + box-shadow: 0 0 18px rgba(52, 211, 153, 0.55); + opacity: 1; } -.search-icon-hidden { - visibility: hidden; +.zap-search-badge { + display: inline-flex; + min-width: 22px; + height: 22px; + padding: 0 6px; + align-items: center; + justify-content: center; + border-radius: 999px; + background: rgba(0, 0, 0, 0.06); + color: inherit; + font-weight: 600; + font-size: 12px; } -@media (max-width: 360px) { - .search-bar { - width: 0 !important; - background: none !important; - padding: 0 !important; - transition: none !important; +.zap-search-tab-active .zap-search-badge { + background: rgba(0, 0, 0, 0.08); +} + +[data-theme='dark'] .zap-search-tab-active .zap-search-badge { + background: rgba(255, 255, 255, 0.16); +} + +.zap-search-list { + display: flex; + flex-direction: column; + gap: 10px; + max-height: 360px; + overflow-y: auto; +} + +.zap-search-item { + display: flex; + gap: 14px; + align-items: center; + padding: 12px; + border-radius: 12px; + text-decoration: none; + color: var(--zap-search-text); + border: 1px solid transparent; + transition: all 160ms ease; +} + +.zap-search-item:hover { + background: var(--zap-search-surface-strong); + border-color: var(--zap-search-border-strong); + box-shadow: 0 10px 26px rgba(15, 23, 42, 0.12); +} + +[data-theme='dark'] .zap-search-item:hover { + box-shadow: 0 10px 26px rgba(0, 0, 0, 0.25); +} + +.zap-search-item-icon { + width: 46px; + height: 46px; + border-radius: 12px; + display: inline-flex; + align-items: center; + justify-content: center; + background: var(--zap-search-surface-strong); + border: 1px solid var(--zap-search-border); + color: var(--zap-search-text); +} + +.zap-search-icon { + width: 28px; + height: 28px; + display: inline-flex; + align-items: center; + justify-content: center; +} + +.zap-search-icon svg { + width: 100%; + height: 100%; + display: block; + color: inherit; + stroke: currentColor; + fill: none; +} + +.zap-search-item-body { + display: flex; + flex-direction: column; + gap: 4px; +} + +.zap-search-item-title { + font-weight: 700; + font-size: 15px; + line-height: 1.35; + color: var(--zap-search-text); +} + +.zap-search-item-meta { + font-size: 13px; + color: var(--zap-search-text-muted); +} + +.zap-search-ai { + margin-bottom: 12px; + padding: 14px; + border-radius: 12px; + border: 1px solid var(--zap-search-border); + background: var(--zap-search-surface-strong); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); +} + +.zap-search-ai__header { + display: flex; + flex-direction: column; + gap: 8px; +} + +@media (min-width: 640px) { + .zap-search-ai__header { + flex-direction: row; + align-items: center; + justify-content: space-between; } +} - .search-bar-expanded { - width: 9rem !important; +.zap-search-ai__title { + font-weight: 700; + color: var(--zap-search-text); + font-size: 15px; +} + +.zap-search-ai__desc { + color: var(--zap-search-text-muted); + font-size: 13px; +} + +.zap-search-ai__button { + display: inline-flex; + align-items: center; + gap: 8px; + padding: 9px 12px; + border-radius: 10px; + border: 1px solid rgba(132, 204, 22, 0.5); + background: linear-gradient(180deg, rgba(190, 242, 100, 0.2), rgba(52, 211, 153, 0.2)); + color: #0f172a; + font-weight: 700; + font-size: 12px; + text-transform: uppercase; + letter-spacing: 0.04em; + cursor: pointer; + transition: all 160ms ease; +} + +[data-theme='dark'] .zap-search-ai__button { + color: #f8fafc; +} + +.zap-search-ai__button:disabled { + opacity: 0.5; + cursor: not-allowed; +} + +.zap-search-ai__button:not(:disabled):hover { + border-color: rgba(132, 204, 22, 0.8); + box-shadow: 0 10px 24px rgba(34, 197, 94, 0.2); +} + +.zap-search-ai__spinner { + width: 16px; + height: 16px; + border-radius: 999px; + border: 2px solid rgba(15, 23, 42, 0.18); + border-top-color: var(--zap-search-accent-strong); + animation: zap-spin 0.9s linear infinite; +} + +[data-theme='dark'] .zap-search-ai__spinner { + border: 2px solid rgba(226, 232, 240, 0.2); +} + +.zap-search-ai__status { + display: flex; + align-items: center; + gap: 10px; + margin-top: 12px; + color: var(--zap-search-text); + font-size: 13px; +} + +.zap-search-ai__answer { + margin-top: 12px; + color: var(--zap-search-text); + font-size: 14px; + line-height: 1.6; +} + +.zap-search-ai__answer a { + color: var(--zap-search-accent-strong); +} + +.zap-search-ai__error { + margin-top: 12px; + padding: 10px; + border-radius: 10px; + border: 1px solid rgba(248, 113, 113, 0.4); + background: rgba(248, 113, 113, 0.1); + color: #ef4444; + font-size: 13px; +} + +@media (max-width: 480px) { + .zap-search-panel { + left: 0; + right: 0; + width: auto; } +} - .search-icon { - display: inline; - vertical-align: sub; +@keyframes zap-spin { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); } } diff --git a/src/theme/SearchBar/templates.js b/src/theme/SearchBar/templates.js deleted file mode 100644 index 354a98f82..000000000 --- a/src/theme/SearchBar/templates.js +++ /dev/null @@ -1,113 +0,0 @@ -const prefix = 'algolia-docsearch'; -const suggestionPrefix = `${prefix}-suggestion`; -const footerPrefix = `${prefix}-footer`; - -const templates = { - suggestion: ` - -
- {{{category}}}
-
-
-
-
- `,
- suggestionSimple: `
-
- {{{subcategory}}}
-
- {{#isTextOrSubcategoryNonEmpty}}
-
-
- {{/isTextOrSubcategoryNonEmpty}}
- {{{subcategory}}}
- {{{title}}}
- {{#text}}{{{text}}}
{{/text}}
- {{#version}}{{version}}
{{/version}}
-
-
- `,
- footer: `
-
- `,
- empty: `
-
- {{^isLvl0}}
- {{{category}}}
- {{^isLvl1}}
- {{^isLvl1EmptyOrDuplicate}}
-
- {{{subcategory}}}
-
- {{/isLvl1EmptyOrDuplicate}}
- {{/isLvl1}}
- {{/isLvl0}}
-
-
- {{#isLvl2}}
- {{{title}}}
- {{/isLvl2}}
- {{#isLvl1}}
- {{{subcategory}}}
- {{/isLvl1}}
- {{#isLvl0}}
- {{{category}}}
- {{/isLvl0}}
-
-
- {{#text}}
-
-
-
- {{/text}}
- {{{text}}}
-
-
- `,
- searchBox: `
-
-
-
- `,
-};
-
-export default templates;
diff --git a/src/theme/SearchBar/utils.js b/src/theme/SearchBar/utils.js
deleted file mode 100644
index 0807500d7..000000000
--- a/src/theme/SearchBar/utils.js
+++ /dev/null
@@ -1,270 +0,0 @@
-import $ from "autocomplete.js/zepto";
-
-const utils = {
- /*
- * Move the content of an object key one level higher.
- * eg.
- * {
- * name: 'My name',
- * hierarchy: {
- * lvl0: 'Foo',
- * lvl1: 'Bar'
- * }
- * }
- * Will be converted to
- * {
- * name: 'My name',
- * lvl0: 'Foo',
- * lvl1: 'Bar'
- * }
- * @param {Object} object Main object
- * @param {String} property Main object key to move up
- * @return {Object}
- * @throws Error when key is not an attribute of Object or is not an object itself
- */
- mergeKeyWithParent(object, property) {
- if (object[property] === undefined) {
- return object;
- }
- if (typeof object[property] !== 'object') {
- return object;
- }
- const newObject = $.extend({}, object, object[property]);
- delete newObject[property];
- return newObject;
- },
- /*
- * Group all objects of a collection by the value of the specified attribute
- * If the attribute is a string, use the lowercase form.
- *
- * eg.
- * groupBy([
- * {name: 'Tim', category: 'dev'},
- * {name: 'Vincent', category: 'dev'},
- * {name: 'Ben', category: 'sales'},
- * {name: 'Jeremy', category: 'sales'},
- * {name: 'AlexS', category: 'dev'},
- * {name: 'AlexK', category: 'sales'}
- * ], 'category');
- * =>
- * {
- * 'devs': [
- * {name: 'Tim', category: 'dev'},
- * {name: 'Vincent', category: 'dev'},
- * {name: 'AlexS', category: 'dev'}
- * ],
- * 'sales': [
- * {name: 'Ben', category: 'sales'},
- * {name: 'Jeremy', category: 'sales'},
- * {name: 'AlexK', category: 'sales'}
- * ]
- * }
- * @param {array} collection Array of objects to group
- * @param {String} property The attribute on which apply the grouping
- * @return {array}
- * @throws Error when one of the element does not have the specified property
- */
- groupBy(collection, property) {
- const newCollection = {};
- $.each(collection, (index, item) => {
- if (item[property] === undefined) {
- throw new Error(`[groupBy]: Object has no key ${property}`);
- }
- let key = item[property];
- if (typeof key === 'string') {
- key = key.toLowerCase();
- }
- // fix #171 the given data type of docsearch hits might be conflict with the properties of the native Object,
- // such as the constructor, so we need to do this check.
- if (!Object.prototype.hasOwnProperty.call(newCollection, key)) {
- newCollection[key] = [];
- }
- newCollection[key].push(item);
- });
- return newCollection;
- },
- /*
- * Return an array of all the values of the specified object
- * eg.
- * values({
- * foo: 42,
- * bar: true,
- * baz: 'yep'
- * })
- * =>
- * [42, true, yep]
- * @param {object} object Object to extract values from
- * @return {array}
- */
- values(object) {
- return Object.keys(object).map(key => object[key]);
- },
- /*
- * Flattens an array
- * eg.
- * flatten([1, 2, [3, 4], [5, 6]])
- * =>
- * [1, 2, 3, 4, 5, 6]
- * @param {array} array Array to flatten
- * @return {array}
- */
- flatten(array) {
- const results = [];
- array.forEach(value => {
- if (!Array.isArray(value)) {
- results.push(value);
- return;
- }
- value.forEach(subvalue => {
- results.push(subvalue);
- });
- });
- return results;
- },
- /*
- * Flatten all values of an object into an array, marking each first element of
- * each group with a specific flag
- * eg.
- * flattenAndFlagFirst({
- * 'devs': [
- * {name: 'Tim', category: 'dev'},
- * {name: 'Vincent', category: 'dev'},
- * {name: 'AlexS', category: 'dev'}
- * ],
- * 'sales': [
- * {name: 'Ben', category: 'sales'},
- * {name: 'Jeremy', category: 'sales'},
- * {name: 'AlexK', category: 'sales'}
- * ]
- * , 'isTop');
- * =>
- * [
- * {name: 'Tim', category: 'dev', isTop: true},
- * {name: 'Vincent', category: 'dev', isTop: false},
- * {name: 'AlexS', category: 'dev', isTop: false},
- * {name: 'Ben', category: 'sales', isTop: true},
- * {name: 'Jeremy', category: 'sales', isTop: false},
- * {name: 'AlexK', category: 'sales', isTop: false}
- * ]
- * @param {object} object Object to flatten
- * @param {string} flag Flag to set to true on first element of each group
- * @return {array}
- */
- flattenAndFlagFirst(object, flag) {
- const values = this.values(object).map(collection =>
- collection.map((item, index) => {
- // eslint-disable-next-line no-param-reassign
- item[flag] = index === 0;
- return item;
- })
- );
- return this.flatten(values);
- },
- /*
- * Removes all empty strings, null, false and undefined elements array
- * eg.
- * compact([42, false, null, undefined, '', [], 'foo']);
- * =>
- * [42, [], 'foo']
- * @param {array} array Array to compact
- * @return {array}
- */
- compact(array) {
- const results = [];
- array.forEach(value => {
- if (!value) {
- return;
- }
- results.push(value);
- });
- return results;
- },
- /*
- * Returns the highlighted value of the specified key in the specified object.
- * If no highlighted value is available, will return the key value directly
- * eg.
- * getHighlightedValue({
- * _highlightResult: {
- * text: {
- * value: 'foo'
- * }
- * },
- * text: 'foo'
- * }, 'text');
- * =>
- * 'foo'
- * @param {object} object Hit object returned by the Algolia API
- * @param {string} property Object key to look for
- * @return {string}
- **/
- getHighlightedValue(object, property) {
- if (
- object._highlightResult &&
- object._highlightResult.hierarchy_camel &&
- object._highlightResult.hierarchy_camel[property] &&
- object._highlightResult.hierarchy_camel[property].matchLevel &&
- object._highlightResult.hierarchy_camel[property].matchLevel !== 'none' &&
- object._highlightResult.hierarchy_camel[property].value
- ) {
- return object._highlightResult.hierarchy_camel[property].value;
- }
- if (
- object._highlightResult &&
- object._highlightResult &&
- object._highlightResult[property] &&
- object._highlightResult[property].value
- ) {
- return object._highlightResult[property].value;
- }
- return object[property];
- },
- /*
- * Returns the snippeted value of the specified key in the specified object.
- * If no highlighted value is available, will return the key value directly.
- * Will add starting and ending ellipsis (…) if we detect that a sentence is
- * incomplete
- * eg.
- * getSnippetedValue({
- * _snippetResult: {
- * text: {
- * value: 'This is an unfinished sentence'
- * }
- * },
- * text: 'This is an unfinished sentence'
- * }, 'text');
- * =>
- * 'This is an unfinished sentence…'
- * @param {object} object Hit object returned by the Algolia API
- * @param {string} property Object key to look for
- * @return {string}
- **/
- getSnippetedValue(object, property) {
- if (
- !object._snippetResult ||
- !object._snippetResult[property] ||
- !object._snippetResult[property].value
- ) {
- return object[property];
- }
- let snippet = object._snippetResult[property].value;
-
- if (snippet[0] !== snippet[0].toUpperCase()) {
- snippet = `…${snippet}`;
- }
- if (['.', '!', '?'].indexOf(snippet[snippet.length - 1]) === -1) {
- snippet = `${snippet}…`;
- }
- return snippet;
- },
- /*
- * Deep clone an object.
- * Note: This will not clone functions and dates
- * @param {object} object Object to clone
- * @return {object}
- */
- deepClone(object) {
- return JSON.parse(JSON.stringify(object));
- },
-};
-
-export default utils;
-
-
-
-
-
-
- No results found for query "{{query}}"
-
-