@nyris/nyris-webapp 0.3.88 → 0.3.90

package/src/hooks/useImageSearch.ts

@@ -19,6 +19,11 @@ import { GlobalWorkerOptions } from 'pdfjs-dist';
 
 // @ts-ignore
 import * as pdfjsWorker from 'pdfjs-dist/build/pdf.worker.min.mjs';
+import {
+  groundedSearch,
+  groundedSearchFilter,
+  groundingSearchQuery,
+} from 'services/vizo';
 
 GlobalWorkerOptions.workerSrc = new URL(
   pdfjsWorker,
@@ -33,6 +38,9 @@ export const useImageSearch = () => {
   const setSpecificationFilter = useRequestStore(
     state => state.setSpecificationFilter,
   );
+  const clearPostFilterSelections = useRequestStore(
+    state => state.clearPostFilterSelections,
+  );
 
   const setAlgoliaFilter = useRequestStore(state => state.setAlgoliaFilter);
   const preFilter = useRequestStore(state => state.preFilter);
@@ -62,6 +70,17 @@ export const useImageSearch = () => {
     state => state.setFirstSearchResults,
   );
 
+  const setGoogleGroundingResponse = useResultStore(
+    state => state.setGoogleGroundingResponse,
+  );
+  const setIsGoogleGroundingLoading = useUiStore(
+    state => state.setIsGoogleGroundingLoading,
+  );
+
+  const setGroundingFilterResult = useResultStore(
+    state => state.setGroundingFilterResult,
+  );
+
   const { refine } = useClearRefinements();
 
   const tiffToJpg = async (file: File): Promise<Blob> => {
@@ -189,6 +208,7 @@ export const useImageSearch = () => {
       preFilterParams,
       clearPostFilter,
       text,
+      grounding,
     }: {
       image?: any;
       settings: AppSettings;
@@ -199,10 +219,18 @@ export const useImageSearch = () => {
       preFilterParams?: Record<string, boolean>;
       clearPostFilter?: boolean;
       text?: string;
+      grounding?: boolean;
     }) => {
       setIsFindApiLoading(true);
       // setAlgoliaProducts([]);
 
+      if (newSearch) {
+        setGroundingFilterResult([]);
+        setGoogleGroundingResponse(null);
+        useRequestStore.getState().setGroundingQuery('');
+        useResultStore.getState().setShowingGroundingFilterResult(false);
+      }
+
       let region: RectCoords | undefined = imageRegion;
       let res: any;
       let compressedBase64;
@@ -276,23 +304,25 @@ export const useImageSearch = () => {
           filters: !isEmpty(preFilterParams || preFilter)
             ? preFilterValues
             : metaFilter
-            ? [
-                {
-                  key: settings.visualSearchFilterKey,
-                  values: [metaFilter],
-                },
-              ]
-            : undefined,
+              ? [
+                  {
+                    key: settings.visualSearchFilterKey,
+                    values: [metaFilter],
+                  },
+                ]
+              : undefined,
           region,
-          text: !window.settings.algolia.enabled
-            ? isUndefined(text)
-              ? query
-              : text
-            : undefined,
+          text:
+            !window.settings.algolia.enabled && !requestImage
+              ? isUndefined(text)
+                ? query
+                : text
+              : undefined,
         });
 
         if (clearPostFilter) {
           refine();
+          clearPostFilterSelections();
         }
 
         setFindApiProducts(res?.results);
@@ -300,6 +330,61 @@ export const useImageSearch = () => {
         setSessionId(res?.session);
         setRequestId(res?.id);
 
+        const specification = res?.image_analysis?.specification || {};
+        const hasOcr = Object.keys(specification).length > 0;
+
+        if (hasOcr && newSearch && window.settings.vizo?.groundingEnabled) {
+          // call grounding API with ocr text
+          setIsGoogleGroundingLoading(true);
+
+          groundedSearch(
+            requestImage || canvasImage,
+            window.settings.aiApiKey || '',
+          )
+            .then(groundingRes => {
+              const groundingSpecs = {
+                product_name: groundingRes.product_name,
+                brand: groundingRes.brand,
+                part_number: groundingRes.part_number,
+                key_specs: groundingRes.key_specs,
+              };
+
+              groundedSearchFilter({
+                products: res?.results || [],
+                groundingSummary: groundingRes?.grounding_summary || '',
+                apiKey: window.settings.aiApiKey || '',
+              })
+                .then((filterRes: any) => {
+                  setGroundingFilterResult(filterRes?.matches || []);
+
+                  if (
+                    filterRes?.matches?.length === 0 &&
+                    window.settings.vizo?.fallbackToElasticSearch
+                  ) {
+                    groundingSearchQuery({
+                      groundingSummary: JSON.stringify(groundingRes),
+                      apiKey: window.settings.aiApiKey || '',
+                    }).then((queryRes: any) => {
+                      useRequestStore
+                        .getState()
+                        .setGroundingQuery(queryRes?.query);
+                    });
+                  }
+                })
+                .catch(error => {
+                  console.log('Grounding Filter API error:', error);
+                });
+
+              setGoogleGroundingResponse(groundingSpecs);
+            })
+            .catch(error => {
+              console.log('Grounding API error:', error);
+            })
+            .finally(() => {
+              setIsGoogleGroundingLoading(false);
+            });
+        }
+
         const nonEmptyFilter: any[] = ['sku:DOES_NOT_EXIST<score=1> '];
         const filterSkus: any = res?.results
           ? res?.results
@@ -336,6 +421,7 @@ export const useImageSearch = () => {
       setDetectedRegions,
       setRegions,
       metaFilter,
+      query,
       setFindApiProducts,
       setImageAnalysis,
       setSessionId,
@@ -343,12 +429,15 @@ export const useImageSearch = () => {
       setAlgoliaFilter,
       firstSearchResults.length,
       refine,
+      clearPostFilterSelections,
+      setIsGoogleGroundingLoading,
+      setGoogleGroundingResponse,
+      setGroundingFilterResult,
       setShowFeedback,
       setFirstSearchResults,
       setFirstSearchImage,
       setFirstSearchPreFilter,
       setFirstRequestImageAnalysis,
-      query,
     ],
   );
 

package/src/index.css

@@ -55,6 +55,65 @@ body {
   font-family: 'Source Sans 3', sans-serif !important;
 }
 
+/* Side panel scrollbar: visible on hover only (Facebook-like). */
+.sidepanel-scroll {
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+  scrollbar-gutter: stable;
+  position: relative;
+  clip-path: inset(0 round 1px);
+}
+
+.sidepanel-scroll:hover {
+  scrollbar-color: #c3c6cf transparent;
+}
+
+.sidepanel-scroll::-webkit-scrollbar {
+  width: 8px;
+}
+
+.sidepanel-scroll:hover::-webkit-scrollbar {
+  width: 8px;
+}
+
+.sidepanel-scroll::-webkit-scrollbar-track {
+  background: transparent;
+  margin: 16px 0;
+}
+
+.sidepanel-scroll::-webkit-scrollbar-thumb {
+  background: transparent;
+  border-radius: 999px;
+  border: 2px solid transparent;
+  background-clip: padding-box;
+}
+
+.sidepanel-scroll:hover::-webkit-scrollbar-thumb {
+  background: #c3c6cf;
+}
+
+.sidepanel-scroll::before,
+.sidepanel-scroll::after {
+  content: "";
+  position: absolute;
+  right: 0;
+  width: 8px;
+  height: 16px;
+  background: #fff;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.sidepanel-scroll::before {
+  top: 0;
+  border-top-right-radius: 32px;
+}
+
+.sidepanel-scroll::after {
+  bottom: 0;
+  border-bottom-right-radius: 32px;
+}
+
 a,
 abbr,
 acronym,

package/src/layouts/AppLayout.tsx

@@ -8,7 +8,7 @@ import { initReactI18next } from 'react-i18next';
 
 import '../styles/common.scss';
 
-import Footer from 'components/Footer';
+import PoweredBy from 'components/PoweredBy';
 import Header from 'components/Header';
 import { translations } from 'translations';
 
@@ -97,26 +97,26 @@ function AppLayout(): JSX.Element {
   }
 
   return (
-    <div className="full-height flex flex-col">
+    <div className="full-height flex flex-col ">
       <div>
         <Toaster />
       </div>
       <Header />
       {window.settings?.algolia.enabled && (
         <Configure
-          query={!query && specifications && !requestImages.length ? '*' : query}
+          query={query}
           filters={
             specifications && !requestImages.length
-              ? specifications.prefilter_value ? `${alogoliaFilterField}:'${specifications.prefilter_value}'` : ''
+              ? `${alogoliaFilterField}:'${specifications.prefilter_value}'`
               : !query && !algoliaFilter.includes('score=1')
-                  ? undefined
-                  : `${algoliaFilter}${
-                      metaFilter
-                        ? `${
-                            algoliaFilter ? 'AND ' : ''
-                          }${alogoliaFilterField}:'${metaFilter}'`
-                        : ''
-                    }`
+                ? undefined
+                : `${algoliaFilter}${
+                    metaFilter
+                      ? `${
+                          algoliaFilter ? 'AND ' : ''
+                        }${alogoliaFilterField}:'${metaFilter}'`
+                      : ''
+                  }`
           }
           // facets={['brand', 'keyword_0']}
           hitsPerPage={20}
@@ -127,9 +127,11 @@ function AppLayout(): JSX.Element {
         <Outlet />
       </div>
       {showPoweredByNyris && (
-        <Footer
+        <PoweredBy
           className={
-            location.pathname === '/result' ? 'hidden desktop:flex' : 'flex'
+            location.pathname === '/result'
+              ? 'hidden'
+              : 'flex w-full justify-center items-center mb-2'
           }
         />
       )}

package/src/pages/Home.tsx

@@ -1,5 +1,5 @@
-import React, { useEffect, useState } from 'react';
-
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useAuth0 } from '@auth0/auth0-react';
 import { twMerge } from 'tailwind-merge';
 
 import DragDropFile from 'components/DragDropFile';
@@ -8,19 +8,50 @@ import TextSearch from 'components/TextSearch';
 import CustomCamera from 'components/CustomCameraDrawer';
 import ExperienceVisualSearchTrigger from 'components/ExperienceVisualSearch/ExperienceVisualSearchTrigger';
 import { useNavigate } from 'react-router';
-import LocationInfoPopup from "../components/LocationInfoPopup";
+import LocationInfoPopup from '../components/LocationInfoPopup';
 import Hint from '../components/Hint';
 import Loading from '../components/Loading';
 import useRequestStore from '../stores/request/requestStore';
+import { getFilters } from '../services/filter';
+
 function Home() {
   const settings = window.settings;
-  const { experienceVisualSearch, experienceVisualSearchImages, geoLocation } = settings;
+  const user = useAuth0().user;
+  const { experienceVisualSearch, experienceVisualSearchImages, geoLocation } =
+    settings;
   const navigate = useNavigate();
 
   const [experienceVisualSearchBlobs, setExperienceVisualSearchBlobs] =
     useState<Blob[]>([]);
   const [isOpenModalCamera, setOpenModalCamera] = useState<boolean>(false);
   const showLoading = useRequestStore(store => store.showLoading);
+  const setPreFilterList = useRequestStore(state => state.setPreFilterList);
+  const setPreFilterLoading = useRequestStore(
+    state => state.setPreFilterLoading,
+  );
+  const setMetaFilter = useRequestStore(state => state.setMetaFilter);
+
+  const showPreFilter = useMemo(() => {
+    if (settings.shouldUseUserMetadata && user) {
+      if (user['/user_metadata'].value) {
+        setMetaFilter(user['/user_metadata'].value);
+      }
+    }
+
+    if (settings.shouldUseUserMetadata && user) {
+      if (settings.preFilterOption && !user['/user_metadata'].value) {
+        return true;
+      }
+      return false;
+    }
+
+    return settings.preFilterOption;
+  }, [
+    setMetaFilter,
+    settings.preFilterOption,
+    settings.shouldUseUserMetadata,
+    user,
+  ]);
 
   const fetchImage = async (url: string) => {
     const response = await fetch(url, { cache: 'force-cache' });
@@ -67,6 +98,24 @@ function Home() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  const getPreFilters = useCallback(async () => {
+    setPreFilterLoading(true);
+    try {
+      const res = await getFilters(1000, settings);
+      setPreFilterList(res);
+    } catch (e: any) {
+      console.log('err getDataFilterDesktop', e);
+    } finally {
+      setPreFilterLoading(false);
+    }
+  }, [settings, setPreFilterList, setPreFilterLoading]);
+
+  useEffect(() => {
+    if (showPreFilter) {
+      getPreFilters();
+    }
+  }, [getPreFilters, showPreFilter]);
+
   return (
     <>
       {showLoading && (
@@ -82,12 +131,11 @@ function Home() {
           'items-center',
           'justify-center',
           'h-auto',
-          'mt-[calc(50vh-75px)]',
-          'bg-[#fafafa]',
+          'mt-[calc(50vh-110px)]',
         ])}
       >
         {geoLocation && <LocationInfoPopup />}
-        <div className="relative flex flex-col items-center justify-center w-full">
+        <div className="relative flex items-center justify-center w-full gap-2">
           {settings.headerText && (
             <div
               className={twMerge([
@@ -101,9 +149,8 @@ function Home() {
             </div>
           )}
 
-          <div className="w-[427px]">
-            <TextSearch />
-          </div>
+          <TextSearch />
+          {/* <ImageUpload /> */}
         </div>
         <div className="max-w-[532px] relative w-full">
           <DragDropFile />
@@ -115,7 +162,7 @@ function Home() {
         </div>
       </div>
 
-      <div className="flex flex-col desktop:hidden justify-center items-center w-full h-full bg-white">
+      <div className="flex flex-col desktop:hidden justify-center items-center w-full h-full ">
         <MobileCameraCTA setOpenModalCamera={setOpenModalCamera} />
         <div className="box-screenshot-camera">
           <CustomCamera
@@ -141,8 +188,9 @@ function Home() {
           />
         )}
 
-        <div className="flex desktop:hidden w-full">
-          <TextSearch className="flex md:hidden fixed bottom-12 w-full px-2 gap-2" />
+        <div className="flex desktop:hidden w-full fixed bottom-12 px-2 gap-2">
+          <TextSearch className="flex md:hidden w-full " />
+          {/* <ImageUpload /> */}
         </div>
       </div>
     </>