diff --git a/clients/search-component/package.json b/clients/search-component/package.json index 50e493d1a6..309fdc0558 100644 --- a/clients/search-component/package.json +++ b/clients/search-component/package.json @@ -48,6 +48,7 @@ "@types/heic-convert": "^2.1.0", "@types/react": "^18.3.5", "@types/react-dom": "^18.3.0", + "@types/react-slider": "^1.3.6", "esbuild": "^0.23.1", "esbuild-node-externals": "^1.14.0", "esbuild-plugin-umd-wrapper": "^3.0.0", @@ -83,6 +84,7 @@ "react-markdown": "^9.0.1", "react-pdf-spotlight": "0.0.16", "react-scan": "^0.3.2", + "react-slider": "^2.0.6", "react-snap-carousel": "^0.5.0", "react-two-thumb-input-range": "^1.0.7", "remark-gfm": "^4.0.1", diff --git a/clients/search-component/src/TrieveModal/FilterSidebarComponents.tsx b/clients/search-component/src/TrieveModal/FilterSidebarComponents.tsx index 59c89ee079..cffad00694 100644 --- a/clients/search-component/src/TrieveModal/FilterSidebarComponents.tsx +++ b/clients/search-component/src/TrieveModal/FilterSidebarComponents.tsx @@ -6,7 +6,7 @@ import { FilterSidebarSection, useModalState, } from "../utils/hooks/modal-context"; -import { TwoThumbInputRange } from "react-two-thumb-input-range"; +import ReactSlider from "react-slider"; import { GetToolFunctionParamsReqPayload } from "trieve-ts-sdk"; function getCssVar(varName: string) { @@ -397,9 +397,8 @@ export const FilterButton = ({ }, [activeRangeFilters, sectionKey]); const handleChange = (values: [number, number]) => { - if (values[0] > values[1]) { - return; - } + const min = Math.min(values[0], values[1]); + const max = Math.max(values[0], values[1]); setSelectedSidebarFilters((prev) => { const existingRangeFilter = prev.find( ({ section }) => @@ -408,14 +407,14 @@ export const FilterButton = ({ if (existingRangeFilter) { return prev.map((filter) => filter.section.key === sectionKey - ? { ...filter, range: { min: values[0], max: values[1] } } + ? { ...filter, range: { min, max } } : filter, ); } else { return prev.concat([ { section: section, - range: { min: values[0], max: values[1] }, + range: { min, max }, }, ]); } @@ -481,7 +480,7 @@ export const FilterButton = ({
- { const { props, - results, query, setQuery, setLoadingResults, @@ -77,7 +76,7 @@ export const SearchInput = () => {
{props.suggestedQueries && - (!query || (query && !results.length)) && + !query && selectedSidebarFilters.length === 0 && } ); diff --git a/clients/search-component/src/TrieveModal/Search/SearchMode.tsx b/clients/search-component/src/TrieveModal/Search/SearchMode.tsx index f00b4dbda1..4a2f6bbe33 100644 --- a/clients/search-component/src/TrieveModal/Search/SearchMode.tsx +++ b/clients/search-component/src/TrieveModal/Search/SearchMode.tsx @@ -115,7 +115,6 @@ export const SearchMode = () => { }, [results]); const hasQuery = imageUrl || query || audioBase64; - const hasActiveFilters = selectedSidebarFilters.length > 0; return ( <> @@ -131,7 +130,9 @@ export const SearchMode = () => { {/* Filter Pills Bar */} - {hasActiveFilters && } + {props.type === "ecommerce" && + props.inline && + props.defaultSearchMode === "search" && }
diff --git a/clients/search-component/src/TrieveModal/index.css b/clients/search-component/src/TrieveModal/index.css index 34fba35244..639b004bbe 100644 --- a/clients/search-component/src/TrieveModal/index.css +++ b/clients/search-component/src/TrieveModal/index.css @@ -1433,7 +1433,7 @@ body { } .trieve-filter-sidebar-section { - @apply tv-flex tv-flex-col tv-min-w-fit tv-w-fit tv-min-h-full; + @apply tv-flex tv-flex-col tv-min-h-full; } .trieve-filter-sidebar-options { diff --git a/clients/search-component/src/utils/hooks/modal-context.tsx b/clients/search-component/src/utils/hooks/modal-context.tsx index 2f7e645971..76764765d2 100644 --- a/clients/search-component/src/utils/hooks/modal-context.tsx +++ b/clients/search-component/src/utils/hooks/modal-context.tsx @@ -541,89 +541,82 @@ const ModalProvider = ({ } : undefined; - try { - setLoadingResults(true); - if (props.useGroupSearch && !props.usePagefind) { - const results = await groupSearchWithTrieve({ - props, - query_string: query, - image_url: imageUrl, - audioBase64: audioBase64, - searchOptions: props.searchOptions, - trieve: trieve, - abortController, - filters, - type: props.type, - abTreatment, - }); - const groupMap = new Map(); - results.groups.forEach((group) => { - const title = group.chunks[0].chunk.metadata?.title; - if (groupMap.has(title)) { - groupMap.get(title)?.push(group); - } else { - groupMap.set(title, [group]); - } - }); - - if (results.transcribedQuery && audioBase64) { - setQuery(results.transcribedQuery); - setAudioBase64(undefined); - } - setResults(Array.from(groupMap.values())); - setRequestID(results.requestID); - } else if (props.useGroupSearch && props.usePagefind) { - const results = await groupSearchWithPagefind( - pagefind, - query, - props.datasetId, - filters, - ); - const groupMap = new Map(); - results.groups.forEach((group) => { - const title = group.chunks[0].chunk.metadata?.title; - if (groupMap.has(title)) { - groupMap.get(title)?.push(group); - } else { - groupMap.set(title, [group]); - } - }); - setResults(Array.from(groupMap.values())); - } else if (!props.useGroupSearch && props.usePagefind) { - const results = await searchWithPagefind( - pagefind, - query, - props.datasetId, - filters, - ); - setResults(results); - } else { - const results = await searchWithTrieve({ - props, - query_string: query, - image_url: imageUrl, - audioBase64: audioBase64, - searchOptions: props.searchOptions, - trieve: trieve, - abortController, - filters, - type: props.type, - abTreatment, - }); - if (results.transcribedQuery && audioBase64) { - setQuery(results.transcribedQuery); - setAudioBase64(undefined); + setLoadingResults(true); + if (props.useGroupSearch && !props.usePagefind) { + const results = await groupSearchWithTrieve({ + props, + query_string: query, + image_url: imageUrl, + audioBase64: audioBase64, + searchOptions: props.searchOptions, + trieve: trieve, + abortController, + filters, + type: props.type, + abTreatment, + }); + const groupMap = new Map(); + results.groups.forEach((group) => { + const title = group.chunks[0].chunk.metadata?.title; + if (groupMap.has(title)) { + groupMap.get(title)?.push(group); + } else { + groupMap.set(title, [group]); } - setResults(results.chunks); - setRequestID(results.requestID); + }); + + if (results.transcribedQuery && audioBase64) { + setQuery(results.transcribedQuery); + setAudioBase64(undefined); } - } catch (e) { - if ((e as DOMException)?.name != "AbortError") { - console.error(e); + setResults(Array.from(groupMap.values())); + setRequestID(results.requestID); + } else if (props.useGroupSearch && props.usePagefind) { + const results = await groupSearchWithPagefind( + pagefind, + query, + props.datasetId, + filters, + ); + const groupMap = new Map(); + results.groups.forEach((group) => { + const title = group.chunks[0].chunk.metadata?.title; + if (groupMap.has(title)) { + groupMap.get(title)?.push(group); + } else { + groupMap.set(title, [group]); + } + }); + setResults(Array.from(groupMap.values())); + } else if (!props.useGroupSearch && props.usePagefind) { + const results = await searchWithPagefind( + pagefind, + query, + props.datasetId, + filters, + ); + setResults(results); + } else { + const results = await searchWithTrieve({ + props, + query_string: query, + image_url: imageUrl, + audioBase64: audioBase64, + searchOptions: props.searchOptions, + trieve: trieve, + abortController, + filters, + type: props.type, + abTreatment, + }); + if (results.transcribedQuery && audioBase64) { + setQuery(results.transcribedQuery); + setAudioBase64(undefined); } - } finally { - setLoadingResults(false); + setResults(results.chunks); + setRequestID(results.requestID); } + setLoadingResults(false); }; useEffect(() => { diff --git a/clients/search-component/src/utils/trieve.ts b/clients/search-component/src/utils/trieve.ts index 1fa647d71b..c1a45b1f94 100644 --- a/clients/search-component/src/utils/trieve.ts +++ b/clients/search-component/src/utils/trieve.ts @@ -207,6 +207,7 @@ export const groupSearchWithTrieve = async ({ let transcribedQuery: string | null = null; const results = await trieve.searchOverGroups( { + ...omit(searchOptions, ["use_autocomplete"]), query, highlight_options: { ...defaultHighlightOptions, @@ -223,7 +224,6 @@ export const groupSearchWithTrieve = async ({ }, user_id: fingerprint, search_type: searchOptions.search_type ?? "fulltext", - ...omit(searchOptions, ["use_autocomplete"]), }, abortController?.signal, (headers: Record) => { diff --git a/clients/trieve-shopify-extension/extensions/global-search/blocks/search_page.liquid b/clients/trieve-shopify-extension/extensions/global-search/blocks/search_page.liquid index cc004eefc2..f0943a7dc4 100644 --- a/clients/trieve-shopify-extension/extensions/global-search/blocks/search_page.liquid +++ b/clients/trieve-shopify-extension/extensions/global-search/blocks/search_page.liquid @@ -61,7 +61,7 @@ type: "ecommerce", baseUrl: {% if dev_mode %} "http://localhost:8090" {% else %} "https://api.trieve.ai" {% endif %}, cssRelease: cssRelease, - useGroupSearch: false, + useGroupSearch: true, hideOpenButton: true, defaultSearchMode: "search", apiKey: appMetafieldTrieve.api_key, diff --git a/yarn.lock b/yarn.lock index 83b472a7b6..615db40d99 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2052,6 +2052,20 @@ resolved "https://registry.yarnpkg.com/@types/react-reconciler/-/react-reconciler-0.28.9.tgz#d24b4864c384e770c83275b3fe73fba00269c83b" integrity sha512-HHM3nxyUZ3zAylX8ZEyrDNd2XZOnQ0D5XfunJF5FLQnZbHHYq4UWvW1QfelQNXv1ICNkwYhfxjwfnqivYB6bFg== +"@types/react-slider@^1.3.6": + version "1.3.6" + resolved "https://registry.yarnpkg.com/@types/react-slider/-/react-slider-1.3.6.tgz#6f5602be93ab1cb3d273428c87aa227ad2ff68ff" + integrity sha512-RS8XN5O159YQ6tu3tGZIQz1/9StMLTg/FCIPxwqh2gwVixJnlfIodtVx+fpXVMZHe7A58lAX1Q4XTgAGOQaCQg== + dependencies: + "@types/react" "*" + +"@types/react@*": + version "19.1.5" + resolved "https://registry.yarnpkg.com/@types/react/-/react-19.1.5.tgz#9feb3bdeb506d0c79d8533b6ebdcacdbcb4756db" + integrity sha512-piErsCVVbpMMT2r7wbawdZsq4xMvIAhQuac2gedQHysu1TZYEigE6pnFfgZT+/jQnrRuF5r+SHzuehFjfRjr4g== + dependencies: + csstype "^3.0.2" + "@types/react@^18.3.5": version "18.3.22" resolved "https://registry.yarnpkg.com/@types/react/-/react-18.3.22.tgz#19b77d6e4957c43070c297e638c6a1c43079e234" @@ -7233,6 +7247,13 @@ react-scan@^0.3.2: optionalDependencies: unplugin "2.1.0" +react-slider@^2.0.6: + version "2.0.6" + resolved "https://registry.yarnpkg.com/react-slider/-/react-slider-2.0.6.tgz#8c7ff0301211f7c3ff32aa0163b33bdab6258559" + integrity sha512-gJxG1HwmuMTJ+oWIRCmVWvgwotNCbByTwRkFZC6U4MBsHqJBmxwbYRJUmxy4Tke1ef8r9jfXjgkmY/uHOCEvbA== + dependencies: + prop-types "^15.8.1" + react-snap-carousel@^0.5.0: version "0.5.1" resolved "https://registry.yarnpkg.com/react-snap-carousel/-/react-snap-carousel-0.5.1.tgz#7cc274796cf19f6217d3e4c8f001264c30171a48"