Skip to content

bugfix: fix serp page issues #3962

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

bugfix: fix serp page issues #3962

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions clients/search-component/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down
13 changes: 6 additions & 7 deletions clients/search-component/src/TrieveModal/FilterSidebarComponents.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -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 }) =>
Expand All @@ -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 },
},
]);
}
Expand Down Expand Up @@ -481,7 +480,7 @@ export const FilterButton = ({
</div>
</div>
<div className="tv-mt-1 tv-w-[100%] !tv-shadow-none">
<TwoThumbInputRange
<ReactSlider
onChange={handleChange}
values={[min, max]}
min={range?.min ?? 0}
Expand Down
3 changes: 1 addition & 2 deletions clients/search-component/src/TrieveModal/Search/SearchInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import { SuggestedQueries } from "./SuggestedQueries";
export const SearchInput = () => {
const {
props,
results,
query,
setQuery,
setLoadingResults,
Expand Down Expand Up @@ -77,7 +76,7 @@ export const SearchInput = () => {
</div>
<ImagePreview isUploading={uploadingImage} imageUrl={imageUrl} active />
{props.suggestedQueries &&
(!query || (query && !results.length)) &&
!query &&
selectedSidebarFilters.length === 0 && <SuggestedQueries />}
</div>
);
Expand Down
5 changes: 3 additions & 2 deletions clients/search-component/src/TrieveModal/Search/SearchMode.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
mode,
imageUrl,
audioBase64,
selectedSidebarFilters,

Check failure on line 30 in clients/search-component/src/TrieveModal/Search/SearchMode.tsx

View workflow job for this annotation

GitHub Actions / tests 

'selectedSidebarFilters' is assigned a value but never used
} = useModalState();

const getItemComponent = (
Expand Down Expand Up @@ -115,7 +115,6 @@
}, [results]);

const hasQuery = imageUrl || query || audioBase64;
const hasActiveFilters = selectedSidebarFilters.length > 0;

return (
<>
Expand All @@ -131,7 +130,9 @@
<SearchInput />

{/* Filter Pills Bar */}
{hasActiveFilters && <ActiveFilterPills />}
{props.type === "ecommerce" &&
props.inline &&
props.defaultSearchMode === "search" && <ActiveFilterPills />}

<div className="tv-flex tv-flex-grow tv-overflow-y-auto">
<SearchPage />
Expand Down
2 changes: 1 addition & 1 deletion clients/search-component/src/TrieveModal/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
151 changes: 72 additions & 79 deletions clients/search-component/src/utils/hooks/modal-context.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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<string, GroupChunk[]>();
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<string, GroupChunk[]>();
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<string, GroupChunk[]>();
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<string, GroupChunk[]>();
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(() => {
Expand Down
2 changes: 1 addition & 1 deletion clients/search-component/src/utils/trieve.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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<string, string>) => {
Expand Down
2 changes: 1 addition & 1 deletion clients/trieve-shopify-extension/extensions/global-search/blocks/search_page.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
21 changes: 21 additions & 0 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down
Loading