@redocly/theme 0.70.0-next.9 → 0.70.1

package/lib/components/Search/SearchDialog.js

@@ -0,0 +1,504 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SearchDialog = SearchDialog;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const SearchInput_1 = require("../../components/Search/SearchInput");
+const SearchShortcut_1 = require("../../components/Search/SearchShortcut");
+const should_show_load_more_1 = require("../../components/Search/should-show-load-more");
+const Button_1 = require("../../components/Button/Button");
+const utils_1 = require("../../core/utils");
+const Portal_1 = require("../../components/Portal/Portal");
+const SearchItem_1 = require("../../components/Search/SearchItem");
+const SearchRecent_1 = require("../../components/Search/SearchRecent");
+const SearchSuggestedPages_1 = require("../../components/Search/SearchSuggestedPages");
+const hooks_1 = require("../../core/hooks");
+const Tag_1 = require("../../components/Tag/Tag");
+const CloseIcon_1 = require("../../icons/CloseIcon/CloseIcon");
+const SearchFilter_1 = require("../../components/Search/SearchFilter");
+const SearchGroups_1 = require("../../components/Search/SearchGroups");
+const Typography_1 = require("../../components/Typography/Typography");
+const SpinnerLoader_1 = require("../../components/Loaders/SpinnerLoader");
+const SearchAiDialog_1 = require("../../components/Search/SearchAiDialog");
+const contexts_1 = require("../../core/contexts");
+const SettingsIcon_1 = require("../../icons/SettingsIcon/SettingsIcon");
+const AiStarsIcon_1 = require("../../icons/AiStarsIcon/AiStarsIcon");
+const ReturnKeyIcon_1 = require("../../icons/ReturnKeyIcon/ReturnKeyIcon");
+const ChevronLeftIcon_1 = require("../../icons/ChevronLeftIcon/ChevronLeftIcon");
+const EditIcon_1 = require("../../icons/EditIcon/EditIcon");
+const AiStarsGradientIcon_1 = require("../../icons/AiStarsGradientIcon/AiStarsGradientIcon");
+const ResetIcon_1 = require("../../icons/ResetIcon/ResetIcon");
+const CloseFilledIcon_1 = require("../../icons/CloseFilledIcon/CloseFilledIcon");
+function SearchDialog({ onClose, className, initialMode = 'search', }) {
+    const { useTranslate, useCurrentProduct, useSearch, useProducts, useAiSearch, useTelemetry } = (0, hooks_1.useThemeHooks)();
+    const telemetry = useTelemetry();
+    const { searchSessionId, refreshSearchSessionId } = (0, contexts_1.useSearchSession)();
+    const products = useProducts();
+    const currentProduct = useCurrentProduct();
+    const [product, setProduct] = (0, react_1.useState)(currentProduct);
+    const [mode, setMode] = (0, react_1.useState)(initialMode);
+    const autoSearchDisabled = mode !== 'search';
+    const { query, setQuery, filter, setFilter, items, isSearchLoading, facets, groupCounts, setLoadMore, advancedSearch, askAi, groupField, searchError, retrySearch, } = useSearch(product === null || product === void 0 ? void 0 : product.name, autoSearchDisabled);
+    const { isFilterOpen, onFilterToggle, onFilterChange, onFilterReset, onFacetReset, onQuickFilterReset, } = (0, hooks_1.useSearchFilter)(filter, setFilter);
+    (0, hooks_1.usePersistedQuickFilter)({
+        filter,
+        setFilter,
+        facets,
+        groupField,
+        query,
+        isSearchLoading,
+        searchError,
+        enabled: initialMode === 'search',
+    });
+    const { addSearchHistoryItem } = (0, hooks_1.useRecentSearches)();
+    const aiSearch = useAiSearch({ filter: filter, product: product === null || product === void 0 ? void 0 : product.name });
+    (0, hooks_1.useModalScrollLock)(true);
+    const searchInputRef = (0, react_1.useRef)(null);
+    const modalRef = (0, react_1.useRef)(null);
+    const [isMobile, setIsMobile] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        const mediaQuery = window.matchMedia(`(max-width: ${utils_1.breakpoints.small})`);
+        setIsMobile(mediaQuery.matches);
+        const handleChange = (e) => {
+            setIsMobile(e.matches);
+        };
+        mediaQuery.addEventListener('change', handleChange);
+        return () => mediaQuery.removeEventListener('change', handleChange);
+    }, []);
+    const aiQueryRef = (0, react_1.useRef)(null);
+    const firstSearchResultRef = (0, react_1.useRef)(null);
+    const searchKeysWithResults = items ? Object.keys(items).filter((key) => { var _a; return (_a = items[key]) === null || _a === void 0 ? void 0 : _a.length; }) : [];
+    const { translate } = useTranslate();
+    const handleClose = (0, react_1.useCallback)(() => {
+        var _a;
+        const value = (_a = searchInputRef === null || searchInputRef === void 0 ? void 0 : searchInputRef.current) === null || _a === void 0 ? void 0 : _a.value;
+        if (value) {
+            addSearchHistoryItem(value);
+        }
+        // Refresh the search session id so a new session starts on next open
+        refreshSearchSessionId();
+        onClose();
+    }, [addSearchHistoryItem, onClose, refreshSearchSessionId]);
+    (0, hooks_1.useDialogHotKeys)(modalRef, handleClose);
+    const focusSearchInput = () => {
+        requestAnimationFrame(() => {
+            var _a;
+            (_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        });
+    };
+    (0, react_1.useEffect)(() => {
+        if (mode === 'ai-dialog' && aiSearch.isGeneratingResponse) {
+            setQuery('');
+        }
+    }, [mode, aiSearch.isGeneratingResponse, setQuery]);
+    (0, react_1.useEffect)(focusSearchInput, []);
+    const handleOverlayClick = (0, react_1.useCallback)((event) => {
+        var _a;
+        if (event.button !== 0)
+            return;
+        const target = event.target;
+        if (typeof target.className !== 'string')
+            return;
+        if ((_a = target.className) === null || _a === void 0 ? void 0 : _a.includes(' overlay')) {
+            handleClose();
+        }
+    }, [handleClose]);
+    const mapItem = (0, react_1.useCallback)((item, index, results, innerRef) => {
+        var _a;
+        let itemProduct;
+        if (!product && item.document.product) {
+            const folder = (_a = item.document.product) === null || _a === void 0 ? void 0 : _a.folder;
+            const resolvedProduct = products.find((product) => product.slug.match(`/${folder.startsWith('./') ? folder.slice(2) : folder}/`));
+            itemProduct = resolvedProduct
+                ? { name: resolvedProduct.name, icon: resolvedProduct.icon }
+                : undefined;
+        }
+        return (react_1.default.createElement(SearchItem_1.SearchItem, { key: `${index}-${item.document.id}`, item: item, product: itemProduct, innerRef: innerRef, onClick: () => {
+                addSearchHistoryItem(query);
+                telemetry.sendSearchResultClickedMessage([
+                    Object.assign(Object.assign({}, (0, utils_1.getBaseDataAttributes)('searchResultItem', 'search', item.document.url)), { query: query, totalResults: results.length.toString(), index: index.toString(), searchEngine: mode, searchSessionId }),
+                ]);
+                onClose();
+            } }));
+    }, [onClose, product, products, addSearchHistoryItem, query, telemetry, mode, searchSessionId]);
+    const showLoadMore = (0, react_1.useCallback)((groupKey, currentCount = 0) => (0, should_show_load_more_1.shouldShowLoadMore)({ groupKey, currentCount, groupCounts, facets, groupField }), [groupCounts, facets, groupField]);
+    const showResults = !!((filter && filter.length) || query);
+    const showSearchFilterButton = advancedSearch && mode === 'search';
+    const showAiSearchButton = askAi && mode === 'search';
+    const showAiSearchItem = showAiSearchButton && query;
+    const showHeaderButtons = showSearchFilterButton || showAiSearchButton;
+    return (react_1.default.createElement(Portal_1.Portal, null,
+        react_1.default.createElement(SearchOverlay, { "data-component-name": "Search/SearchDialog", ref: modalRef, onPointerDown: handleOverlayClick, className: (0, utils_1.concatClassNames)('overlay', className) },
+            react_1.default.createElement(SearchDialogWrapper, { className: "scroll-lock", role: "dialog" },
+                react_1.default.createElement(SearchDialogHeader, null,
+                    product && (react_1.default.createElement(SearchProductTag, { color: "product" },
+                        product.name,
+                        react_1.default.createElement(CloseIcon_1.CloseIcon, { onClick: () => setProduct(undefined), color: "--icon-color-additional" }))),
+                    mode === 'search' ? (react_1.default.createElement(react_1.default.Fragment, null,
+                        react_1.default.createElement(SearchInput_1.SearchInput, { value: query, onChange: setQuery, placeholder: translate('search.label', 'Search docs...'), isLoading: isSearchLoading, inputRef: searchInputRef, onSubmit: () => {
+                                var _a;
+                                if (isSearchLoading)
+                                    return;
+                                if (showAiSearchButton && aiQueryRef.current) {
+                                    aiQueryRef.current.focus();
+                                }
+                                else {
+                                    (_a = firstSearchResultRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                                }
+                            }, "data-translation-key": "search.label" }),
+                        showHeaderButtons && (react_1.default.createElement(SearchHeaderButtons, null,
+                            showAiSearchButton ? (react_1.default.createElement(SearchAiButton, { icon: react_1.default.createElement(AiStarsGradientIcon_1.AiStarsGradientIcon, { color: "var(--search-ai-button-icon-color)" }), onClick: () => {
+                                    setMode('ai-dialog');
+                                    if (query.trim()) {
+                                        aiSearch.askQuestion(query);
+                                    }
+                                    telemetry.sendSearchAiOpenedMessage([
+                                        Object.assign(Object.assign({}, (0, utils_1.getBaseDataAttributes)('searchAiButton', 'search')), { method: 'ai_search_button' }),
+                                    ]);
+                                } }, translate('search.ai.button', 'Search with AI'))) : null,
+                            showSearchFilterButton && (react_1.default.createElement(SearchFilterToggleButton, { icon: react_1.default.createElement(SettingsIcon_1.SettingsIcon, null), onClick: onFilterToggle })))))) : (react_1.default.createElement(AiDialogHeaderWrapper, null,
+                        initialMode === 'ai-dialog' ? (react_1.default.createElement(AiDialogHeaderTitle, null,
+                            react_1.default.createElement(AiStarsGradientIcon_1.AiStarsGradientIcon, { color: "var(--search-ai-button-icon-color)", size: "1.25rem" }),
+                            translate('search.ai.assistant', 'Assistant'))) : (react_1.default.createElement(Button_1.Button, { variant: "secondary", onClick: () => {
+                                setMode('search');
+                                aiSearch.clearConversation();
+                                focusSearchInput();
+                            }, tabIndex: 0, icon: react_1.default.createElement(ChevronLeftIcon_1.ChevronLeftIcon, null) }, isMobile
+                            ? translate('search.ai.back', 'Back')
+                            : translate('search.ai.backToSearch', 'Back to search'))),
+                        react_1.default.createElement(AiDialogHeaderActionsWrapper, null,
+                            react_1.default.createElement(Button_1.Button, { variant: "secondary", disabled: !aiSearch.conversation.length, onClick: () => {
+                                    refreshSearchSessionId();
+                                    aiSearch.clearConversation();
+                                }, tabIndex: 0, icon: react_1.default.createElement(EditIcon_1.EditIcon, null) }, translate('search.ai.newConversation', 'New conversation')),
+                            isMobile && react_1.default.createElement(Button_1.Button, { variant: "text", icon: react_1.default.createElement(CloseIcon_1.CloseIcon, null), onClick: handleClose }))))),
+                react_1.default.createElement(SearchDialogBody, null, mode === 'search' ? (react_1.default.createElement(react_1.default.Fragment, null,
+                    advancedSearch && isFilterOpen && (react_1.default.createElement(SearchDialogBodyFilterView, null,
+                        react_1.default.createElement(SearchFilter_1.SearchFilter, { facets: facets, filter: filter, query: query, quickFilterFields: [groupField], onFilterChange: onFilterChange, onFilterReset: onFilterReset, onFacetReset: onFacetReset }))),
+                    react_1.default.createElement(SearchDialogBodyMainView, null,
+                        react_1.default.createElement(SearchGroups_1.SearchGroups, { facets: facets, searchFilter: filter, onFilterChange: onFilterChange, onQuickFilterReset: onQuickFilterReset, groupField: groupField }),
+                        showAiSearchItem && (react_1.default.createElement(SearchWithAI, { onClick: () => {
+                                setMode('ai-dialog');
+                                if (query.trim()) {
+                                    aiSearch.askQuestion(query);
+                                }
+                                telemetry.sendSearchAiOpenedMessage([
+                                    Object.assign(Object.assign({}, (0, utils_1.getBaseDataAttributes)('searchAiInput', 'search')), { method: 'ai_search_input' }),
+                                ]);
+                            }, onKeyDown: (e) => {
+                                if (e.key === 'Enter') {
+                                    setMode('ai-dialog');
+                                    if (query.trim()) {
+                                        aiSearch.askQuestion(query);
+                                    }
+                                    telemetry.sendSearchAiOpenedMessage([
+                                        Object.assign(Object.assign({}, (0, utils_1.getBaseDataAttributes)('searchAiInput', 'search')), { method: 'ai_search_input' }),
+                                    ]);
+                                }
+                            }, ref: aiQueryRef, tabIndex: 0, role: "option", "aria-selected": "true" },
+                            react_1.default.createElement(AiStarsIcon_1.AiStarsIcon, { style: { flexShrink: 0 }, color: "var(--search-ai-icon-color)", size: "36px", background: "var(--search-ai-icon-bg-color)", margin: "0 var(--spacing-md) 0 0", borderRadius: "var(--border-radius-lg)" }),
+                            react_1.default.createElement(QueryWrapper, null,
+                                react_1.default.createElement(Typography_1.Typography, { fontWeight: "var(--font-weight-semibold)" }, query)),
+                            react_1.default.createElement(Typography_1.Typography, null,
+                                "- ",
+                                translate('search.ai.label', 'Ask AI assistant')),
+                            react_1.default.createElement(ReturnKeyIcon_1.ReturnKeyIcon, { color: "var(--search-item-text-color)" }))),
+                        showResults ? (searchKeysWithResults.length ? (searchKeysWithResults.map((key, searchGroupKeyIdx) => {
+                            const searchResultItems = items[key];
+                            if (searchResultItems === null || searchResultItems === void 0 ? void 0 : searchResultItems.length) {
+                                return (react_1.default.createElement(react_1.Fragment, { key: key },
+                                    react_1.default.createElement(SearchGroupTitle, { "data-testid": "search-group-title" }, key),
+                                    searchResultItems.map((item, idx, resultsArr) => mapItem(item, idx, resultsArr, searchGroupKeyIdx === 0 ? firstSearchResultRef : undefined)),
+                                    showLoadMore(key, searchResultItems.length || 0) && (react_1.default.createElement(SearchGroupFooter, { tabIndex: 0, "data-translation-key": "search.showMore", onKeyDown: (e) => {
+                                            if (e.key === 'Enter') {
+                                                setLoadMore({
+                                                    groupKey: key,
+                                                    offset: searchResultItems.length || 0,
+                                                });
+                                            }
+                                        }, onClick: () => setLoadMore({
+                                            groupKey: key,
+                                            offset: searchResultItems.length || 0,
+                                        }) }, translate('search.showMore', 'Show more')))));
+                            }
+                            return null;
+                        })) : isSearchLoading ? (react_1.default.createElement(SearchMessage, { "data-translation-key": "search.loading" },
+                            react_1.default.createElement(SpinnerLoader_1.SpinnerLoader, { size: "26px", color: "var(--search-input-icon-color)" }),
+                            translate('search.loading', 'Loading...'))) : searchError ? (react_1.default.createElement(SearchMessage, { "data-translation-key": "search.error" },
+                            react_1.default.createElement(CloseFilledIcon_1.CloseFilledIcon, { size: "21px", color: "var(--color-error-base)" }),
+                            translate('search.error.title', 'Oops! Something went wrong.'),
+                            react_1.default.createElement(Button_1.Button, { variant: "secondary", size: "small", onClick: retrySearch, icon: react_1.default.createElement(ResetIcon_1.ResetIcon, null) }, translate('search.error.button', 'Try again')))) : (react_1.default.createElement(SearchMessage, { "data-translation-key": "search.noResults" },
+                            react_1.default.createElement("b", null, translate('search.noResults.title', 'No results'))))) : (react_1.default.createElement(react_1.default.Fragment, null,
+                            react_1.default.createElement(SearchRecent_1.SearchRecent, { onSelect: (query, index) => {
+                                    telemetry.sendSearchRecentClickedMessage([
+                                        Object.assign(Object.assign({}, (0, utils_1.getBaseDataAttributes)('searchRecentItem', 'search')), { query, index: index.toString(), searchSessionId }),
+                                    ]);
+                                    setQuery(query);
+                                    focusSearchInput();
+                                } }),
+                            react_1.default.createElement(SearchSuggestedPages_1.SearchSuggestedPages, null)))))) : (react_1.default.createElement(SearchAiDialog_1.SearchAiDialog, { initialMessage: query, response: aiSearch.response, isGeneratingResponse: aiSearch.isGeneratingResponse, error: aiSearch.error, resources: aiSearch.resources, conversation: aiSearch.conversation, setConversation: aiSearch.setConversation, onMessageSent: aiSearch.askQuestion, toolCalls: aiSearch.toolCalls, contentSegments: aiSearch.contentSegments }))),
+                react_1.default.createElement(SearchDialogFooter, null, mode === 'ai-dialog' ? (react_1.default.createElement(AiDisclaimer, null, translate('search.ai.disclaimer', 'AI assistant might provide incomplete or incorrect results. Verify important information.'))) : (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement(SearchShortcuts, null,
+                        react_1.default.createElement(SearchShortcut_1.SearchShortcut, { "data-translation-key": "search.keys.navigate", combination: "Tab", text: translate('search.keys.navigate', 'to navigate') }),
+                        react_1.default.createElement(SearchShortcut_1.SearchShortcut, { "data-translation-key": "search.keys.select", combination: "\u23CE", text: translate('search.keys.select', 'to select') }),
+                        react_1.default.createElement(SearchShortcut_1.SearchShortcut, { "data-translation-key": "search.keys.exit", combination: "Esc", text: translate('search.keys.exit', 'to exit') })),
+                    isSearchLoading && (react_1.default.createElement(SearchLoading, null,
+                        react_1.default.createElement(SpinnerLoader_1.SpinnerLoader, { size: "16px", color: "var(--search-input-icon-color)" }),
+                        translate('search.loading', 'Loading...'))),
+                    react_1.default.createElement(SearchCancelButton, { "data-translation-key": "search.cancel", variant: "secondary", size: "small", onClick: handleClose }, translate('search.cancel', 'Cancel')))))))));
+}
+const SearchOverlay = styled_components_1.default.div `
+  position: fixed;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: var(--bg-color-modal-overlay);
+  z-index: var(--z-index-overlay);
+
+  @media screen and (max-width: ${utils_1.breakpoints.small}) {
+    align-items: start;
+    position: fixed;
+    overflow: hidden;
+    overscroll-behavior: none;
+  }
+`;
+const SearchDialogWrapper = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+  width: 100vw;
+  height: 100vh;
+  background: var(--search-modal-bg-color);
+  box-shadow: var(--search-modal-box-shadow);
+  border-radius: 0;
+
+  @media screen and (max-width: ${utils_1.breakpoints.small}) {
+    min-height: -webkit-fill-available;
+    min-height: 100dvh;
+    height: 100dvh;
+    width: 100vw;
+  }
+
+  @media screen and (min-width: ${utils_1.breakpoints.small}) {
+    border-radius: var(--search-modal-border-radius);
+    width: min(var(--search-modal-width), 95vw);
+    min-height: min(var(--search-modal-min-height), 95vh);
+    min-width: min(var(--search-modal-min-width), 95vw);
+    max-width: 95vw;
+    max-height: 95vh;
+    height: min(var(--search-modal-min-height), 95vh);
+    resize: both;
+  }
+`;
+const SearchDialogHeader = styled_components_1.default.header `
+  display: flex;
+  align-items: center;
+  border-bottom: var(--search-modal-border);
+  background-color: var(--search-modal-header-bg-color);
+  padding: var(--search-modal-header-padding);
+`;
+const AiDialogHeaderWrapper = styled_components_1.default.div `
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+`;
+const AiDialogHeaderActionsWrapper = styled_components_1.default.div `
+  display: flex;
+  gap: var(--spacing-xxs);
+`;
+const AiDialogHeaderTitle = styled_components_1.default.span `
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  font-weight: var(--font-weight-semibold);
+  font-size: var(--font-size-lg);
+`;
+const SearchDialogBody = styled_components_1.default.div `
+  display: flex;
+  flex-direction: row-reverse;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+
+  @media screen and (max-width: ${utils_1.breakpoints.small}) {
+    min-height: 0;
+  }
+`;
+const SearchDialogBodyMainView = styled_components_1.default.div `
+  flex: 2;
+  flex-grow: 2;
+  overflow-y: scroll;
+  overscroll-behavior: contain;
+  border-right: var(--search-modal-border);
+`;
+const SearchDialogBodyFilterView = styled_components_1.default.div `
+  overflow: scroll;
+  max-width: var(--search-filter-width);
+  width: 100%;
+`;
+const SearchDialogFooter = styled_components_1.default.footer `
+  display: flex;
+  gap: var(--search-modal-footer-gap);
+  padding: var(--search-modal-footer-padding);
+  border-top: var(--search-modal-border);
+`;
+const SearchShortcuts = styled_components_1.default.div `
+  display: none;
+  justify-content: flex-start;
+  align-items: center;
+  gap: var(--search-shortcuts-gap);
+
+  @media screen and (min-width: ${utils_1.breakpoints.small}) {
+    display: flex;
+  }
+`;
+const SearchMessage = styled_components_1.default.div `
+  display: flex;
+  height: 40%;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  font-size: var(--search-message-font-size);
+  font-weight: var(--search-message-font-weight);
+  line-height: var(--search-message-line-height);
+  color: var(--search-message-text-color);
+  gap: var(--search-message-gap);
+`;
+const SearchProductTag = (0, styled_components_1.default)(Tag_1.Tag) `
+  border: none;
+  margin: var(--spacing-xs) var(--spacing-sm) !important;
+`;
+const SearchFilterToggleButton = (0, styled_components_1.default)(Button_1.Button) `
+  margin-left: 0;
+`;
+const SearchAiButton = (0, styled_components_1.default)(Button_1.Button) `
+  margin-left: 0;
+`;
+const SearchCancelButton = (0, styled_components_1.default)(Button_1.Button) `
+  width: 100%;
+
+  @media screen and (min-width: ${utils_1.breakpoints.small}) {
+    display: none;
+  }
+`;
+const SearchGroupTitle = styled_components_1.default.div `
+  border-bottom: var(--search-modal-border);
+  padding: var(--search-group-title-padding);
+  background-color: var(--search-group-title-bg-color);
+`;
+const SearchGroupFooter = styled_components_1.default.div `
+  display: flex;
+  justify-content: center;
+  padding: var(--search-group-footer-padding);
+  color: var(--search-group-footer-text-color);
+  cursor: pointer;
+`;
+const SearchLoading = styled_components_1.default.div `
+  display: none;
+  align-items: center;
+  gap: var(--spacing-xs);
+
+  @media screen and (min-width: ${utils_1.breakpoints.small}) {
+    display: flex;
+  }
+`;
+const SearchHeaderButtons = styled_components_1.default.div `
+  display: flex;
+  gap: var(--search-header-buttons-gap);
+  padding-left: var(--search-header-buttons-padding-left);
+  border-left: var(--search-header-buttons-border-left);
+`;
+const AiDisclaimer = styled_components_1.default.div `
+  font-size: var(--search-ai-disclaimer-font-size);
+  line-height: var(--search-ai-disclaimer-line-height);
+  color: var(--search-ai-disclaimer-text-color);
+  margin: 0 auto;
+  text-align: center;
+`;
+const SearchWithAI = styled_components_1.default.div `
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  cursor: pointer;
+  gap: var(--spacing-unit);
+  padding: var(--spacing-md);
+
+  color: var(--search-item-text-color);
+  background-color: var(--search-item-bg-color);
+  text-decoration: none;
+  white-space: normal;
+  outline: none;
+  border-top: 1px solid var(--search-item-border-color);
+  border-bottom: 1px solid var(--search-item-border-color);
+  border-radius: var(--search-item-border-radius);
+
+  transition: all 0.3s ease;
+
+  ${ReturnKeyIcon_1.ReturnKeyIcon} {
+    opacity: 0;
+  }
+
+  &:focus,
+  &:hover {
+    color: var(--search-item-text-color-hover);
+    background-color: var(--search-item-bg-color-hover);
+
+    ${ReturnKeyIcon_1.ReturnKeyIcon} {
+      opacity: 1;
+    }
+  }
+
+  &:focus {
+    border-top: 1px solid var(--search-item-border-color-focused);
+    border-bottom: 1px solid var(--search-item-border-color-focused);
+  }
+
+  & > :first-child {
+    margin-right: var(--spacing-xs);
+  }
+`;
+const QueryWrapper = styled_components_1.default.div `
+  word-break: break-word;
+`;
+//# sourceMappingURL=SearchDialog.js.map

package/lib/components/Search/SearchFilter.d.ts

@@ -0,0 +1,13 @@
+import type { JSX } from 'react';
+import type { SearchFilterItem, SearchFacet } from '../../core/types';
+export type SearchFilterProps = {
+    className?: string;
+    facets: SearchFacet[];
+    filter: SearchFilterItem[];
+    query: string;
+    quickFilterFields: string[];
+    onFilterChange: (field: string, value: string | string[], isQuickFilter?: boolean) => void;
+    onFilterReset: () => void;
+    onFacetReset: (field: string) => void;
+};
+export declare function SearchFilter({ className, facets, filter, query, quickFilterFields, onFilterChange, onFilterReset, onFacetReset, }: SearchFilterProps): JSX.Element;

package/lib/components/Search/SearchFilter.js

@@ -0,0 +1,81 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SearchFilter = SearchFilter;
+const React = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Button_1 = require("../../components/Button/Button");
+const CleanIcon_1 = require("../../icons/CleanIcon/CleanIcon");
+const SearchFilterField_1 = require("../../components/Search/SearchFilterField");
+const hooks_1 = require("../../core/hooks");
+function SearchFilter({ className, facets, filter, query, quickFilterFields, onFilterChange, onFilterReset, onFacetReset, }) {
+    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
+    return (React.createElement(SearchFilterWrapper, { "data-component-name": "Search/SearchFilter", className: className },
+        React.createElement(SearchFilterHeader, null,
+            React.createElement("span", { "data-translation-key": "search.filter.title" }, translate('search.filter.title', 'Advanced filter')),
+            React.createElement(Button_1.Button, { "data-translation-key": "search.filter.reset", onClick: onFilterReset, variant: "ghost", icon: React.createElement(CleanIcon_1.CleanIcon, null) }, translate('search.filter.reset', 'Reset filters'))),
+        React.createElement(SearchFilterFields, null, facets.map((facet, index) => (React.createElement(SearchFilterField_1.SearchFilterField, { key: `${facet.field}-${index}`, facet: facet, filter: filter, query: query, quickFilterFields: quickFilterFields, onFilterChange: onFilterChange, onFacetReset: onFacetReset }))))));
+}
+const SearchFilterWrapper = styled_components_1.default.div `
+  width: 100%;
+  max-width: var(--search-filter-width);
+  display: flex;
+  flex-direction: column;
+  padding: var(--search-filter-padding);
+  font-size: var(--search-filter-font-size);
+  font-weight: var(--search-filter-font-weight);
+  line-height: var(--search-filter-line-height);
+`;
+const SearchFilterHeader = styled_components_1.default.div `
+  position: sticky;
+  top: 0px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--search-filter-header-padding);
+  color: var(--search-filter-header-text-color);
+  background-color: var(--search-filter-bg-color);
+  z-index: var(--search-filter-header-z-index);
+`;
+const SearchFilterFields = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  gap: var(--search-filter-fields-gap);
+`;
+//# sourceMappingURL=SearchFilter.js.map

package/lib/components/Search/SearchFilterField.d.ts

@@ -0,0 +1,13 @@
+import type { JSX } from 'react';
+import type { SearchFacet, SearchFilterItem } from '../../core/types';
+type SearchFilterFieldProps = {
+    className?: string;
+    facet: SearchFacet;
+    filter: SearchFilterItem[];
+    query: string;
+    quickFilterFields: string[];
+    onFilterChange: (field: string, value: string | string[], isQuickFilter?: boolean) => void;
+    onFacetReset: (filed: string) => void;
+};
+export declare function SearchFilterField({ className, facet, filter, query, quickFilterFields, onFilterChange, onFacetReset, }: SearchFilterFieldProps): JSX.Element;
+export {};

package/lib/components/Search/SearchFilterField.js

@@ -0,0 +1,42 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SearchFilterField = SearchFilterField;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Button_1 = require("../../components/Button/Button");
+const ResetIcon_1 = require("../../icons/ResetIcon/ResetIcon");
+const hooks_1 = require("../../core/hooks");
+const SearchFilterFieldSelect_1 = require("../../components/Search/FilterFields/SearchFilterFieldSelect");
+const SearchFilterFieldTags_1 = require("../../components/Search/FilterFields/SearchFilterFieldTags");
+function SearchFilterField({ className, facet, filter, query, quickFilterFields, onFilterChange, onFacetReset, }) {
+    var _a;
+    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
+    const selectedValues = ((_a = filter.find((item) => item.field === facet.field)) === null || _a === void 0 ? void 0 : _a.values) || [];
+    const onChange = (value) => {
+        onFilterChange(facet.field, value, facet.field in quickFilterFields);
+    };
+    const onReset = () => {
+        onFacetReset(facet.field);
+    };
+    return (react_1.default.createElement(FilterFieldWrapper, { "data-component-name": "Search/SearchFilterField", className: className },
+        react_1.default.createElement(FilterFieldLabel, null,
+            facet.name,
+            selectedValues.length > 0 && (react_1.default.createElement(Button_1.Button, { "data-translation-key": "search.filter.field.reset", icon: react_1.default.createElement(ResetIcon_1.ResetIcon, null), variant: "ghost", size: "small", onClick: onReset }, translate('search.filter.field.reset', 'Reset')))),
+        ['select', 'multi-select'].includes(facet.type) && (react_1.default.createElement(SearchFilterFieldSelect_1.SearchFilterFieldSelect, { facet: facet, filter: filter, query: query, selectedValues: selectedValues, onChange: onChange })),
+        facet.type === 'tags' && (react_1.default.createElement(SearchFilterFieldTags_1.SearchFilterFieldTags, { facet: facet, selectedValues: selectedValues, onChange: onChange }))));
+}
+const FilterFieldWrapper = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+`;
+const FilterFieldLabel = styled_components_1.default.div `
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+//# sourceMappingURL=SearchFilterField.js.map