@nyris/nyris-webapp 0.3.94 → 0.3.96

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@nyris/nyris-webapp",
-  "version": "0.3.94",
+  "version": "0.3.96",
   "dependencies": {
     "@auth0/auth0-react": "^2.2.4",
     "@emailjs/browser": "^4.3.3",
     "@google/genai": "^1.46.0",
-    "@nyris/nyris-api": "^0.3.94",
-    "@nyris/nyris-react-components": "^0.3.94",
+    "@nyris/nyris-api": "^0.3.96",
+    "@nyris/nyris-react-components": "^0.3.96",
     "@radix-ui/react-accordion": "^1.2.2",
     "@radix-ui/react-dialog": "^1.1.4",
     "@radix-ui/react-popover": "^1.1.4",

package/src/components/ImageUpload.tsx

@@ -4,13 +4,10 @@ import { twMerge } from 'tailwind-merge';
 import Tooltip from './Tooltip/TooltipComponent';
 import { useAuth0 } from '@auth0/auth0-react';
 import { useMemo, useState } from 'react';
-import { useLocation, useNavigate } from 'react-router';
+import { useLocation } from 'react-router';
 import useRequestStore from 'stores/request/requestStore';
-import { useImageSearch } from 'hooks/useImageSearch';
-import { clone } from 'lodash';
-import { useCadSearch } from 'hooks/useCadSearch';
-import { isCadFile } from '@nyris/nyris-api';
 import UploadDisclaimer from './UploadDisclaimer';
+import { useUploadSearch } from 'hooks/useUploadSearch';
 
 function ImageUpload({
   onCameraClick,
@@ -25,27 +22,10 @@ function ImageUpload({
   const { t } = useTranslation();
 
   const location = useLocation();
-  const navigate = useNavigate();
+  const { uploadFile } = useUploadSearch();
 
-  const preFilterList = useRequestStore(state => state.preFilterList);
   const requestImages = useRequestStore(state => state.requestImages);
-  const setQuery = useRequestStore(state => state.setQuery);
-  const setValueInput = useRequestStore(state => state.setValueInput);
   const setMetaFilter = useRequestStore(state => state.setMetaFilter);
-  const specifications = useRequestStore(state => state.specifications);
-
-  const setRequestImages = useRequestStore(state => state.setRequestImages);
-  const setSpecifications = useRequestStore(state => state.setSpecifications);
-  const setShowLoading = useRequestStore(state => state.setShowLoading);
-  const setNameplateNotificationText = useRequestStore(
-    state => state.setNameplateNotificationText,
-  );
-  const setShowNotMatchedError = useRequestStore(
-    state => state.setShowNotMatchedError,
-  );
-  const setAlgoliaFilter = useRequestStore(state => state.setAlgoliaFilter);
-  const setPreFilter = useRequestStore(state => state.setPreFilter);
-  const setNameplateImage = useRequestStore(state => state.setNameplateImage);
 
   const [showDisclaimer, setShowDisclaimer] = useState(false);
 
@@ -80,97 +60,13 @@ function ImageUpload({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [showDisclaimer, requestImages, disableDisclaimer]);
 
-  const { singleImageSearch } = useImageSearch();
-  const { cadSearch } = useCadSearch();
-
   const handleUpload = (files: File[]) => {
-    setValueInput('');
-    setQuery('');
-
-    if (isCadFile(files[0])) {
-      cadSearch({ file: files[0], settings, newSearch: true }).then(() => {});
-
+    const file = files[0];
+    if (!file) {
       return;
     }
 
-    setShowLoading(true);
-
-    singleImageSearch({
-      image: files[0],
-      settings: window.settings,
-      showFeedback: true,
-      newSearch: true,
-      clearPostFilter: true,
-    }).then(singleImageResp => {
-      const specificationPrefilter =
-        singleImageResp?.image_analysis?.specification?.prefilter_value || null;
-      const hasPrefilter = preFilterList.filter((filter: any) =>
-        filter.values.includes(specificationPrefilter),
-      );
-      if (specificationPrefilter) {
-        setRequestImages([]);
-        setShowNotMatchedError(false);
-        if (hasPrefilter.length) {
-          setSpecifications(
-            clone(singleImageResp?.image_analysis?.specification),
-          );
-          setNameplateImage(files[0]);
-          setPreFilter({
-            [singleImageResp?.image_analysis?.specification?.prefilter_value]:
-              true,
-          });
-          setAlgoliaFilter(
-            `${settings.alogoliaFilterField}:'${singleImageResp?.image_analysis?.specification?.prefilter_value}'`,
-          );
-
-          setShowLoading(false);
-          navigate('/result');
-
-          setTimeout(() => {
-            setNameplateNotificationText(
-              t('We have successfully defined the search criteria', {
-                prefilter_value: specificationPrefilter,
-                preFilterTitle:
-                  window.settings.preFilterTitle?.toLocaleLowerCase(),
-              }),
-            );
-          }, 1000);
-          setTimeout(() => {
-            setNameplateNotificationText('');
-          }, 10000);
-        }
-        if (!hasPrefilter.length && showPreFilter) {
-          setSpecifications(
-            clone({
-              ...singleImageResp?.image_analysis?.specification,
-              specificationPrefilter,
-            }),
-          );
-          navigate('/result');
-          setPreFilter({});
-          setAlgoliaFilter('');
-          setShowLoading(false);
-          setShowNotMatchedError(true);
-          setTimeout(() => {
-            setNameplateNotificationText(
-              t('Extracted details from the nameplate could not be matched', {
-                preFilterTitle:
-                  window.settings.preFilterTitle?.toLocaleLowerCase(),
-              }),
-            );
-          }, 1000);
-          setTimeout(() => {
-            setNameplateNotificationText('');
-          }, 15000);
-        }
-      } else {
-        if (!specifications?.is_nameplate) {
-          setSpecifications({ ...specifications, is_nameplate: false });
-        }
-        setShowLoading(false);
-        navigate('/result');
-      }
-    });
+    uploadFile(file, { showPreFilter });
   };
 
   return (

package/src/components/PostFilter/PostFilterFindApi.tsx

@@ -6,9 +6,17 @@ import {
 } from 'components/Accordion';
 import { Icon } from '@nyris/nyris-react-components';
 import { useTranslation } from 'react-i18next';
+import { isEmpty } from 'lodash';
 import useResultStore from 'stores/result/resultStore';
 import useRequestStore from 'stores/request/requestStore';
-import { filterProductsByText } from 'utils/textSearchFilter';
+import useUiStore from 'stores/ui/uiStore';
+import { find } from 'services/visualSearch';
+
+let postFilterRequestCounter = 0;
+
+export function invalidatePostFilterRequests() {
+  postFilterRequestCounter += 1;
+}
 
 function PostFilterFindApi({
   attribute,
@@ -26,84 +34,53 @@ function PostFilterFindApi({
   const [itemsLimit, setItemsLimit] = useState(10);
   const [searchInput, setSearchInput] = useState<string>('');
 
-  const productsFromFindApi = useResultStore(
-    state => state.productsFromFindApi,
+  const postFilterFacets = useResultStore(state => state.postFilterFacets);
+  const setFindApiProducts = useResultStore(state => state.setFindApiProducts);
+  const setPostFilterSelections = useRequestStore(
+    state => state.setPostFilterSelections,
   );
-  const groundingFilterResult = useResultStore(
-    state => state.groundingFilterResult,
-  );
-  const showingGroundingFilterResult = useResultStore(
-    state => state.showingGroundingFilterResult,
-  );
-  const query = useRequestStore(state => state.query);
-  const requestImages = useRequestStore(state => state.requestImages);
   const postFilterSelections = useRequestStore(
     state => state.postFilterSelections,
   );
-  const togglePostFilterSelection = useRequestStore(
-    state => state.togglePostFilterSelection,
-  );
+  const query = useRequestStore(state => state.query);
+  const requestImages = useRequestStore(state => state.requestImages);
+  const regions = useRequestStore(state => state.regions);
+  const preFilter = useRequestStore(state => state.preFilter);
+  const preFilterList = useRequestStore(state => state.preFilterList);
+  const metaFilter = useRequestStore(state => state.metaFilter);
+  const setIsFindApiLoading = useUiStore(state => state.setIsFindApiLoading);
   const { t } = useTranslation();
+  const settings = window.settings;
 
-  const productsForFilters = useMemo(() => {
-    let baseProducts = productsFromFindApi;
-
-    if (requestImages?.length && query?.trim()) {
-      baseProducts = filterProductsByText(query, productsFromFindApi);
-    }
-
-    if (showingGroundingFilterResult && groundingFilterResult?.length > 0) {
-      const grounded = baseProducts.filter((product: any) =>
-        groundingFilterResult.some((result: any) => product.sku === result.sku),
-      );
-      if (grounded.length > 0) {
-        return grounded;
-      }
-    }
-
-    return baseProducts;
-  }, [
-    productsFromFindApi,
-    query,
-    requestImages,
-    showingGroundingFilterResult,
-    groundingFilterResult,
-  ]);
-
-  const filteredProductsForCounts = useMemo(() => {
-    const selections = postFilterSelections || {};
-    const activeSelections = Object.entries(selections).filter(
-      ([attr, values]) => attr !== attribute && Array.isArray(values),
+  const matchedFacet = useMemo(() => {
+    const facets = Array.isArray(postFilterFacets) ? postFilterFacets : [];
+    return facets.find(
+      (entry: { name?: string }) =>
+        entry.name?.toLocaleLowerCase() === attribute.toLocaleLowerCase(),
     );
+  }, [attribute, postFilterFacets]);
 
-    if (!activeSelections.length) {
-      return productsForFilters;
-    }
-
-    return productsForFilters.filter((product: any) =>
-      activeSelections.every(([attr, values]) => {
-        const filterValues = product.filters?.[attr];
-        if (!Array.isArray(filterValues) || filterValues.length === 0) {
-          return false;
-        }
-        return values.some(value => filterValues.includes(value));
-      }),
-    );
-  }, [attribute, postFilterSelections, productsForFilters]);
+  const preFilterApiKey =
+    preFilterList.find(
+      filter =>
+        filter.key?.toLocaleLowerCase() ===
+        settings.visualSearchFilterKey?.toLocaleLowerCase(),
+    )?.key ?? settings.visualSearchFilterKey;
 
   const valueCounts = useMemo(() => {
     const counts: Record<string, number> = {};
-    filteredProductsForCounts?.forEach((product: any) => {
-      const filterValues = product.filters?.[attribute];
-      if (Array.isArray(filterValues)) {
-        filterValues.forEach((val: string) => {
-          if (val) counts[val] = (counts[val] || 0) + 1;
-        });
-      }
-    });
+
+    (matchedFacet?.values || []).forEach(
+      (entry: { value?: string; count?: number }) => {
+        const value = entry?.value;
+        if (value) {
+          counts[value] = entry.count ?? 0;
+        }
+      },
+    );
 
     return counts;
-  }, [attribute, filteredProductsForCounts]);
+  }, [matchedFacet]);
 
   const items = useMemo(() => {
     const selectedValues = postFilterSelections?.[attribute] || [];
@@ -138,6 +115,85 @@ function PostFilterFindApi({
     onVisibilityChange?.(attribute, isVisible);
   }, [attribute, isVisible, onVisibilityChange]);
 
+  const handleFilterClick = (value: string, isRefined: boolean) => {
+    const currentSelections =
+      useRequestStore.getState().postFilterSelections || {};
+    const currentAttributeValues = currentSelections[attribute] || [];
+    const nextAttributeValues = isRefined
+      ? currentAttributeValues.filter(item => item !== value)
+      : [...currentAttributeValues, value];
+
+    const nextSelections = { ...currentSelections };
+    if (nextAttributeValues.length > 0) {
+      nextSelections[attribute] = nextAttributeValues;
+    } else {
+      delete nextSelections[attribute];
+    }
+
+    setPostFilterSelections(nextSelections);
+
+    const hasAnySelection = Object.values(nextSelections).some(
+      values => values.length > 0,
+    );
+
+    if (!hasAnySelection) {
+      const snapshot = useResultStore.getState().initialFindSearchSnapshot;
+      if (snapshot) {
+        setFindApiProducts(snapshot.results);
+      }
+      return;
+    }
+
+    const facets = useResultStore.getState().postFilterFacets || [];
+    const filters = [];
+
+    if (!isEmpty(preFilter)) {
+      filters.push({
+        key: preFilterApiKey,
+        values: Object.keys(preFilter).filter(key => preFilter[key]),
+      });
+    } else if (metaFilter) {
+      filters.push({
+        key: preFilterApiKey,
+        values: [metaFilter],
+      });
+    }
+
+    Object.entries(nextSelections).forEach(([attr, values]) => {
+      if (values.length > 0) {
+        const facet = facets.find(
+          (entry: { name?: string }) =>
+            entry.name?.toLocaleLowerCase() === attr.toLocaleLowerCase(),
+        );
+        filters.push({
+          key: facet?.name ?? attr,
+          values,
+        });
+      }
+    });
+
+    const requestId = ++postFilterRequestCounter;
+    setIsFindApiLoading(true);
+    void find({
+      image: requestImages[0],
+      settings,
+      region: regions[0],
+      filters,
+      text: !requestImages[0] ? query : undefined,
+    })
+      .then(response => {
+        if (requestId !== postFilterRequestCounter) {
+          return;
+        }
+        setFindApiProducts(response?.results || []);
+      })
+      .finally(() => {
+        if (requestId === postFilterRequestCounter) {
+          setIsFindApiLoading(false);
+        }
+      });
+  };
+
   if (!isVisible) {
     return null;
   }
@@ -208,9 +264,7 @@ function PostFilterFindApi({
                   <input
                     type="checkbox"
                     checked={item.isRefined}
-                    onChange={() =>
-                      togglePostFilterSelection(attribute, item.value)
-                    }
+                    onChange={() => handleFilterClick(item.value, item.isRefined)}
                     className="cursor-pointer"
                   />
                   <span className="text-xs font-normal pl-2 pr-1">

package/src/components/PreFilter/PreFilter.tsx

@@ -76,10 +76,16 @@ const PreFilterComponent = (props: Props) => {
     };
   }, []);
 
+  const matchedPreFilter = preFilterList.find(
+    value =>
+      value.key?.toLocaleLowerCase() ===
+      settings.visualSearchFilterKey?.toLocaleLowerCase(),
+  );
+  const preFilterApiKey =
+    matchedPreFilter?.key ?? settings.visualSearchFilterKey;
+
   const getDataFilterDesktop = () => {
-    const arrResult =
-      preFilterList.find(value => value.key === settings.visualSearchFilterKey)
-        ?.values || [];
+    const arrResult = matchedPreFilter?.values || [];
 
     const newResult = arrResult.sort().reduce((a: any, c: any) => {
       if (!c[0]) return a;
@@ -100,7 +106,7 @@ const PreFilterComponent = (props: Props) => {
     }
     setLoading(true);
     const data = await searchFilters(
-      settings.visualSearchFilterKey,
+      preFilterApiKey,
       encodeURIComponent(value),
       settings,
     )

package/src/components/Product/ProductList.tsx

@@ -63,6 +63,10 @@ function ProductList({ sendFeedBackAction }: Props): JSX.Element {
   }, [productsFromFindApi, query, requestImages]);
 
   const postFilteredProducts = useMemo(() => {
+    if (!window.settings.algolia?.enabled && window.settings.postFilterOption) {
+      return textFilteredProducts;
+    }
+
     const entries = Object.entries(postFilterSelections || {}).filter(
       ([, values]) => values?.length,
     );

package/src/components/Toaster.tsx

@@ -15,8 +15,9 @@ export const Toaster = () => {
     <ReactHotToaster
       position={isMobile ? 'bottom-center' : 'top-right'}
       containerStyle={{
-        top: 80,
-        bottom: isMobile ? 80 : 'auto',
+        top: 100,
+        bottom: isMobile ? 90 : 'auto',
+        right: isMobile ? 15 : 25,
       }}
     >
       {t => (

package/src/hooks/useEffectiveGroundingResults.ts

@@ -26,7 +26,12 @@ export function useEffectiveGroundingResults() {
     const postEntries = Object.entries(postFilterSelections || {}).filter(
       ([, values]) => values?.length,
     );
-    if (postEntries.length > 0) {
+    if (
+      postEntries.length > 0 &&
+      !(
+        !window.settings.algolia?.enabled && window.settings.postFilterOption
+      )
+    ) {
       filteredProducts = filteredProducts.filter((product: any) => {
         const productFilters = product?.filters || {};
         return postEntries.every(([attribute, selectedValues]) => {

package/src/hooks/useImageSearch.ts

@@ -19,6 +19,7 @@ import useConversationStore from 'stores/chat/conversationStore';
 import { useGroundedSearch } from './useGroundedSearch';
 import { generateSmartFilters } from '../services/vizo';
 import { cropImage } from 'utils/cropImageToBase64';
+import { invalidatePostFilterRequests } from 'components/PostFilter/PostFilterFindApi';
 
 export const useImageSearch = () => {
   const setRegions = useRequestStore(state => state.setRegions);
@@ -68,6 +69,10 @@ export const useImageSearch = () => {
     state => state.setGroundingFilterResult,
   );
   const setSmartFilters = useResultStore(state => state.setSmartFilters);
+  const setPostFilterFacets = useResultStore(state => state.setPostFilterFacets);
+  const setInitialFindSearchSnapshot = useResultStore(
+    state => state.setInitialFindSearchSnapshot,
+  );
 
   const setGroundingError = useResultStore(state => state.setGroundingError);
 
@@ -110,6 +115,8 @@ export const useImageSearch = () => {
         setGroundingFilterResult([]);
         setGoogleGroundingResponse(null);
         setGroundingError(null);
+        setPostFilterFacets([]);
+        setInitialFindSearchSnapshot(null);
         if (isSmartFiltersEnabled) {
           setSmartFilters({
             status: 'idle',
@@ -185,9 +192,17 @@ export const useImageSearch = () => {
         }
       }
 
+      const preFilterList = useRequestStore.getState().preFilterList;
+      const preFilterApiKey =
+        preFilterList.find(
+          filter =>
+            filter.key?.toLocaleLowerCase() ===
+            settings.visualSearchFilterKey?.toLocaleLowerCase(),
+        )?.key ?? settings.visualSearchFilterKey;
+
       const preFilterValues = [
         {
-          key: settings.visualSearchFilterKey,
+          key: preFilterApiKey,
           values: Object.keys(preFilterParams || preFilter),
         },
       ];
@@ -272,6 +287,22 @@ export const useImageSearch = () => {
           });
       }
 
+      const shouldResetPostFilters =
+        clearPostFilter ||
+        (!settings.algolia?.enabled &&
+          !requestImage &&
+          settings.postFilterOption);
+
+      if (shouldResetPostFilters) {
+        invalidatePostFilterRequests();
+        refine();
+        clearPostFilterSelections();
+        if (clearPostFilter) {
+          setPostFilterFacets([]);
+          setInitialFindSearchSnapshot(null);
+        }
+      }
+
       try {
         res = await find({
           image: requestImage,
@@ -281,7 +312,7 @@ export const useImageSearch = () => {
             : metaFilter
               ? [
                   {
-                    key: settings.visualSearchFilterKey,
+                    key: preFilterApiKey,
                     values: [metaFilter],
                   },
                 ]
@@ -295,12 +326,14 @@ export const useImageSearch = () => {
               : undefined,
         });
         useResultStore.getState().resetGrounding();
-        if (clearPostFilter) {
-          refine();
-          clearPostFilterSelections();
-        }
 
         setFindApiProducts(res?.results);
+        const initialFacets = res?.facets || [];
+        setPostFilterFacets(initialFacets);
+        setInitialFindSearchSnapshot({
+          results: res?.results || [],
+          postFilterFacets: initialFacets,
+        });
         setImageAnalysis(res?.image_analysis);
         setSessionId(res?.session);
         setRequestId(res?.id);
@@ -386,6 +419,8 @@ export const useImageSearch = () => {
       setFirstSearchPreFilter,
       setFirstRequestImageAnalysis,
       setSmartFilters,
+      setPostFilterFacets,
+      setInitialFindSearchSnapshot,
     ],
   );