@nyris/nyris-webapp 0.3.90 → 0.3.92

package/src/components/MatchNotificationBanner.tsx

@@ -1,25 +1,31 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import { useEffectiveGroundingResults } from 'hooks/useEffectiveGroundingResults';
+import { useGroundedSearch } from 'hooks/useGroundedSearch';
+import React, { useEffect, useMemo } from 'react';
 import { find } from 'services/visualSearch';
 import useRequestStore from 'stores/request/requestStore';
 import useResultStore from 'stores/result/resultStore';
+import useUiStore from 'stores/ui/uiStore';
 import { twMerge } from 'tailwind-merge';
 
 const MatchNotificationBanner = ({ className }: { className?: string }) => {
-  const [goBack, setGoBack] = useState(false);
-  const [textSearch, setTextSearch] = useState<
-    'loading' | 'resolved' | 'pending'
-  >('pending');
+  const goBack = useUiStore(state => state.bannerGoBack);
+  const setGoBack = useUiStore(state => state.setBannerGoBack);
+  const textSearch = useUiStore(state => state.bannerTextSearch);
+  const setTextSearch = useUiStore(state => state.setBannerTextSearch);
 
-  const [prevResult, setPrevResult] = useState<any[]>([]);
+  const [prevResult, setPrevResult] = React.useState<any[]>([]);
 
   const productsFromFindApi = useResultStore(
     state => state.productsFromFindApi,
   );
+  const groundingError = useResultStore(state => state.groundingError);
 
   const groundingFilterResult = useResultStore(
     state => state.groundingFilterResult,
   );
 
+  const { groundedSearch } = useGroundedSearch();
+
   const showBanner = useMemo(() => {
     if (groundingFilterResult.length !== productsFromFindApi.length) {
       return true;
@@ -36,11 +42,6 @@ const MatchNotificationBanner = ({ className }: { className?: string }) => {
     return false;
   }, [groundingFilterResult, productsFromFindApi]);
 
-  useEffect(() => {
-    setGoBack(false);
-    setTextSearch('pending');
-  }, []);
-
   useEffect(() => {
     if (textSearch === 'pending') {
       setPrevResult(productsFromFindApi || []);
@@ -54,10 +55,46 @@ const MatchNotificationBanner = ({ className }: { className?: string }) => {
     state => state.showingGroundingFilterResult,
   );
 
+  const effectiveGroundingResults = useEffectiveGroundingResults();
+
   const groundingQuery = useRequestStore(state => state.groundingQuery);
   if (goBack) {
     return <></>;
   }
+
+  if (groundingError) {
+    return (
+      <div
+        className={twMerge([
+          'flex items-center justify-between w-full bg-[#FFF8FB] rounded-[16px] p-2 pl-2 shadow-sm',
+          className,
+        ])}
+      >
+        {/* Left Section: Icon and Text */}
+        <div className="flex items-center gap-3">
+          <div className="h-2.5 w-2.5 rounded-full bg-[#E31B5D]" />
+          <p className="text-[#4a5568] text-sm md:text-base">
+            No results from web search.
+          </p>
+        </div>
+
+        {/* Right Section: Action Button */}
+        <button
+          className="bg-[#373b53] hover:bg-[#2d3145] text-white px-6 py-3 rounded-lg text-xs font-semibold transition-colors duration-200"
+          onClick={() => {
+            const requestImages = useRequestStore.getState().requestImages;
+            const requestImage = requestImages?.[0];
+            const findApiProducts =
+              useResultStore.getState().productsFromFindApi;
+            groundedSearch(requestImage, findApiProducts || []);
+          }}
+        >
+          Search again
+        </button>
+      </div>
+    );
+  }
+
   if (
     (!groundingFilterResult || groundingFilterResult?.length === 0) &&
     !groundingQuery
@@ -79,13 +116,13 @@ const MatchNotificationBanner = ({ className }: { className?: string }) => {
           <div className="h-2.5 w-2.5 rounded-full bg-[#10b981]" />
           {textSearch === 'resolved' && (
             <p className="text-[#4a5568] text-sm md:text-base">
-              Didn't find the correct product?
+              Didn't find what you're looking for?
             </p>
           )}
           {textSearch !== 'resolved' && (
             <p className="text-[#4a5568] text-sm md:text-base">
-              Are you looking for ?{' '}
-              <span className="font-bold">{groundingQuery}</span>
+              Are you looking for
+              <span className="font-bold px-0.5">{groundingQuery}</span> ?
             </p>
           )}
         </div>
@@ -99,7 +136,7 @@ const MatchNotificationBanner = ({ className }: { className?: string }) => {
               useResultStore.getState().setFindApiProducts(prevResult);
             }}
           >
-            Show all results
+            Show original results
           </button>
         )}
 
@@ -108,16 +145,22 @@ const MatchNotificationBanner = ({ className }: { className?: string }) => {
             className="bg-[#373b53] hover:bg-[#2d3145] text-white px-6 py-3 rounded-lg text-xs font-semibold transition-colors duration-200"
             onClick={() => {
               setTextSearch('loading');
+              useUiStore.getState().setIsFindApiLoading(true);
+
               find({
                 settings: window.settings,
                 text: groundingQuery,
-              }).then(res => {
-                useResultStore.getState().setFindApiProducts(res?.results);
-                setTextSearch('resolved');
-              });
+              })
+                .then(res => {
+                  useResultStore.getState().setFindApiProducts(res?.results);
+                  setTextSearch('resolved');
+                })
+                .finally(() => {
+                  useUiStore.getState().setIsFindApiLoading(false);
+                });
             }}
           >
-            Search now
+            Search catalog
           </button>
         )}
       </div>
@@ -131,7 +174,7 @@ const MatchNotificationBanner = ({ className }: { className?: string }) => {
   return (
     <div
       className={twMerge([
-        'flex items-center justify-between w-full bg-[#F2FBF3] rounded-[16px] p-2 pl-2 shadow-sm',
+        'flex items-center justify-between w-full bg-[#F2FBF3] rounded-[16px] p-2 pl-2 shadow-sm min-h-[56px]',
         className,
       ])}
     >
@@ -139,25 +182,36 @@ const MatchNotificationBanner = ({ className }: { className?: string }) => {
       <div className="flex items-center gap-3">
         <div className="h-2.5 w-2.5 rounded-full bg-[#10b981]" />
         <p className="text-[#4a5568] text-sm md:text-base">
-          {showingGroundingFilterResult ? 'Showing' : 'Found'}{' '}
-          <span className="font-bold text-slate-900 pr-1">
-            {groundingFilterResult?.length}
-          </span>
-          matching product in results
+          {effectiveGroundingResults.length === 0 && (
+            <span>Matched 0 results from Internet search</span>
+          )}
+          {effectiveGroundingResults.length > 0 && (
+            <>
+              {showingGroundingFilterResult ? 'Showing' : 'Found'}{' '}
+              <span className="font-bold text-slate-900 pr-0.5">
+                {effectiveGroundingResults.length}
+              </span>
+              {showingGroundingFilterResult
+                ? 'result from Internet search'
+                : ' matching result from Internet search'}
+            </>
+          )}
         </p>
       </div>
 
       {/* Right Section: Action Button */}
-      <button
-        className="bg-[#373b53] hover:bg-[#2d3145] text-white px-6 py-3 rounded-lg text-xs font-semibold transition-colors duration-200"
-        onClick={() => {
-          useResultStore.getState().setShowingGroundingFilterResult();
-        }}
-      >
-        {showingGroundingFilterResult
-          ? 'Show all results'
-          : 'Show only matching results'}
-      </button>
+      {effectiveGroundingResults.length > 0 && (
+        <button
+          className="bg-[#373b53] hover:bg-[#2d3145] text-white px-6 py-3 rounded-lg text-xs font-semibold transition-colors duration-200"
+          onClick={() => {
+            useResultStore.getState().setShowingGroundingFilterResult();
+          }}
+        >
+          {showingGroundingFilterResult
+            ? 'Show original results'
+            : 'Show matched results'}
+        </button>
+      )}
     </div>
   );
 };

package/src/components/PostFilter/PostFilter.tsx

@@ -11,7 +11,7 @@ import { useTranslation } from 'react-i18next';
 function PostFilter({
   attribute,
   label,
-  searchable,
+  searchable: _searchable,
   onVisibilityChange,
   isLastVisible,
 }: {

package/src/components/PostFilter/PostFilterComponent.tsx

@@ -53,7 +53,6 @@ function PostFilterComponent({ className }: { className?: string }) {
   return (
     <div
       className={twMerge([
-        'mt-4',
         'w-full',
         'px-4',
         'flex',

package/src/components/PostFilter/PostFilterFindApi.tsx

@@ -90,7 +90,6 @@ function PostFilterFindApi({
       }),
     );
   }, [attribute, postFilterSelections, productsForFilters]);
-  console.log({ filteredProductsForCounts });
 
   const valueCounts = useMemo(() => {
     const counts: Record<string, number> = {};

package/src/components/PoweredBy.tsx

@@ -5,7 +5,7 @@ export default function PoweredBy({ className }: { className?: string }) {
   return (
     <div className={twMerge(className)}>
       <Icon
-        className="fill-black group-hover:fill-[url(#powered_by_nyris_colored_svg__gradient)] hover:fill-[url(#powered_by_nyris_colored_svg__gradient)] cursor-pointer w-[110px] h-5"
+        className="fill-[#989BB7] group-hover:fill-[url(#powered_by_nyris_colored_svg__gradient)] hover:fill-[url(#powered_by_nyris_colored_svg__gradient)] cursor-pointer w-[110px] h-5"
         name="powered_by_nyris"
         onClick={() => {
           window.open('https://www.nyris.io', '_blank');

package/src/components/PreFilter/PreFilter.tsx

@@ -9,7 +9,6 @@ import useRequestStore from 'stores/request/requestStore';
 import { truncateString } from 'utils/truncateString';
 import { twMerge } from 'tailwind-merge';
 import Tooltip from 'components/Tooltip/TooltipComponent';
-import { useNavigate } from 'react-router';
 import useResultStore from '../../stores/result/resultStore';
 
 interface Props {
@@ -41,11 +40,11 @@ const PreFilterComponent = (props: Props) => {
   const specification = useRequestStore(state => state.specifications);
   const setSpecifications = useRequestStore(state => state.setSpecifications);
   const setImageAnalysis = useResultStore(state => state.setImageAnalysis);
+  const regions = useRequestStore(state => state.regions);
 
   const [keyFilter, setKeyFilter] = useState<Record<string, boolean>>(
     keyFilterState || {},
   );
-  const navigate = useNavigate();
 
   const selectedFilter = useMemo(
     () =>
@@ -158,6 +157,18 @@ const PreFilterComponent = (props: Props) => {
     }
 
     handleClose();
+    const query = useRequestStore.getState().query;
+    if (!window.settings?.algolia.enabled && requestImages.length === 0) {
+      singleImageSearch({
+        image: requestImages[0],
+        imageRegion: regions[0],
+        text: query,
+        settings,
+        showFeedback: false,
+        newSearch: false,
+        preFilterParams: preFilter,
+      });
+    }
 
     if (requestImages.length === 0) {
       return;
@@ -170,7 +181,7 @@ const PreFilterComponent = (props: Props) => {
         imageRegion: imageRegions[0],
         preFilterParams: preFilter,
         compress: false,
-      }).then(res => {});
+      }).then(() => {});
     } else {
     }
   };

package/src/components/PreFilter/PreFilterModal.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Dialog, DialogContent, DialogTitle } from '../Modal/Dialog';
 import PreFilterComponent from './PreFilter';
 import { useMediaQuery } from 'react-responsive';

package/src/components/Product/Product.tsx

@@ -80,7 +80,7 @@ function Product(props: Props) {
     img.src = url;
   };
 
-  const handlerToggleModal = (item: any) => {
+  const handlerToggleModal = (_item?: any) => {
     setOpenDetailedView('image');
   };
 
@@ -123,10 +123,18 @@ function Product(props: Props) {
         onSearchImage={onSearchImage}
         openDetailedView={openDetailedView}
         setOpenDetailedView={setOpenDetailedView}
-        main_image_link={main_image_link}
         onAddToCart={onAddToCart}
       />
-      <div className="wrap-main-item-result max-w-[190px] w-[180px] desktop:w-[190px] border border-solid border-[#E0E0E0] scroll-pt-5">
+      <div
+        className={twMerge(
+          'wrap-main-item-result',
+          'max-w-[190px] w-[180px] desktop:w-[190px]',
+          'border border-solid border-[#E7E8F1]',
+          'scroll-pt-5',
+          'shadow-ds-1',
+          'rounded-2xl',
+        )}
+      >
         <div className="relative h-fit">
           {!isHover && main_image_link && !settings.noSimilarSearch && (
             <div
@@ -434,7 +442,7 @@ function Product(props: Props) {
                             ? 8
                             : 0,
                         gridGap: 8,
-                        color: '#2B2C46',
+                        color: '#3B3E5F',
                       }}
                     >
                       {settings.attributes?.attributeOneValue && (
@@ -445,7 +453,6 @@ function Product(props: Props) {
                             settings.attributes?.attributeOneValue || '',
                           )}
                           padding={'4px 8px'}
-                          backgroundColor={'#E0E0E0'}
                           isTitleVisible={
                             !!settings.attributes?.attributeOneLabelValue
                           }
@@ -459,7 +466,6 @@ function Product(props: Props) {
                             settings.attributes?.attributeTwoValue || '',
                           )}
                           padding={'4px 8px'}
-                          backgroundColor={'#E0E0E0'}
                           isTitleVisible={
                             !!settings.attributes?.attributeTwoLabelValue
                           }
@@ -473,7 +479,6 @@ function Product(props: Props) {
                             settings.attributes?.attributeThreeValue || '',
                           )}
                           padding={'4px 8px'}
-                          backgroundColor={'#E0E0E0'}
                           isTitleVisible={
                             !!settings.attributes?.attributeThreeLabelValue
                           }
@@ -488,7 +493,6 @@ function Product(props: Props) {
                             settings.attributes?.attributeFourValue || '',
                           )}
                           padding={'4px 8px'}
-                          backgroundColor={'#E0E0E0'}
                           isTitleVisible={
                             !!settings.attributes?.attributeFourLabelValue
                           }
@@ -507,7 +511,7 @@ function Product(props: Props) {
                     background:
                       settings.secondaryCTAButton?.secondaryCTAButtonColor ||
                       '#2B2C46',
-                    borderRadius: 4,
+                    borderRadius: 6,
                     paddingLeft: '8px',
                     marginBottom: settings.CTAButton?.CTAButton ? 8 : 0,
                     display: 'flex',
@@ -591,7 +595,7 @@ function Product(props: Props) {
                     background:
                       settings.CTAButton?.CTAButtonColor ||
                       settings.theme?.primaryColor,
-                    borderRadius: 4,
+                    borderRadius: 6,
                     paddingLeft: '8px',
                     display: 'flex',
                     justifyItems: 'center',
@@ -677,7 +681,7 @@ function Product(props: Props) {
                     background:
                       settings.CTAButton?.CTAButtonColor ||
                       settings.theme?.primaryColor,
-                    borderRadius: 4,
+                    borderRadius: 6,
                     paddingLeft: '8px',
                     display: 'flex',
                     justifyItems: 'center',

package/src/components/Product/ProductAttribute.tsx

@@ -1,5 +1,4 @@
 import Tooltip from 'components/Tooltip/TooltipComponent';
-import React from 'react';
 
 interface Props {
   title: any;
@@ -26,16 +25,16 @@ function ProductAttribute(props: Props) {
         display: 'flex',
         flexDirection: 'column',
         justifyContent: 'center',
-        borderRadius: 2,
+        borderRadius: 6,
         height: '36px',
-        backgroundColor: props.backgroundColor || '#E0E0E0',
+        backgroundColor: props.backgroundColor || '#F3F3F5',
         padding: padding,
       }}
     >
       {isTitleVisible ? (
         <div
           style={{
-            color: '#2B2C46',
+            color: '#3B3E5F',
             overflow: 'hidden',
             textOverflow: 'ellipsis',
             whiteSpace: 'nowrap',
@@ -51,7 +50,7 @@ function ProductAttribute(props: Props) {
       <Tooltip content={value} disabled={!value} sideOffset={10}>
         <div
           style={{
-            color: '#2B2C46',
+            color: '#3B3E5F',
             overflow: 'hidden',
             textOverflow: 'ellipsis',
             whiteSpace: 'nowrap',

package/src/components/Product/ProductDetailViewModal.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { Dialog, DialogContent, DialogTitle } from 'components/Modal/Dialog';
 import ProductDetailView from './ProductDetailView';
 
@@ -8,7 +8,6 @@ function ProductDetailViewModal({
   dataItem,
   handlerFeedback,
   onSearchImage,
-  main_image_link,
   onAddToCart,
 }: {
   openDetailedView: '3d' | 'image' | undefined;
@@ -16,7 +15,6 @@ function ProductDetailViewModal({
   dataItem: any;
   handlerFeedback: (value: string) => void;
   onSearchImage: (url: string) => void;
-  main_image_link: string;
   onAddToCart: (item: any) => void;
 }) {
   useEffect(() => {
@@ -35,7 +33,7 @@ function ProductDetailViewModal({
   return (
     <Dialog
       open={openDetailedView === '3d' || openDetailedView === 'image'}
-      onOpenChange={(e: any) => {
+      onOpenChange={() => {
         setOpenDetailedView(undefined);
       }}
       modal={true}

package/src/components/Product/ProductList.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import useResultStore from 'stores/result/resultStore';
 import Product from './Product';
 import { useImageSearch } from 'hooks/useImageSearch';
@@ -8,6 +8,7 @@ import { useTranslation } from 'react-i18next';
 import { twMerge } from 'tailwind-merge';
 import { filterProducts } from 'utils/specificationFilter';
 import { filterProductsByText } from 'utils/textSearchFilter';
+import { useEffectiveGroundingResults } from 'hooks/useEffectiveGroundingResults';
 
 interface Props {
   sendFeedBackAction?: any;
@@ -25,16 +26,17 @@ function ProductList({ sendFeedBackAction }: Props): JSX.Element {
     state => state.productsFromFindApi,
   );
 
-  const groundingFilterResult = useResultStore(
-    state => state.groundingFilterResult,
-  );
-
   const showingGroundingFilterResult = useResultStore(
     state => state.showingGroundingFilterResult,
   );
 
+  const effectiveGroundingResults = useEffectiveGroundingResults();
+
   const isAlgoliaLoading = useUiStore(state => state.isAlgoliaLoading);
   const isFindApiLoading = useUiStore(state => state.isFindApiLoading);
+  const isAiModeOpen = useUiStore(state => state.isAiModeOpen);
+
+  const [products, setProducts] = useState<any[]>([]);
 
   const setQuery = useRequestStore(state => state.setQuery);
   const query = useRequestStore(state => state.query);
@@ -96,7 +98,8 @@ function ProductList({ sendFeedBackAction }: Props): JSX.Element {
     }).then(() => {});
   };
   const isAlgoliaEnabled = window.settings?.algolia?.enabled;
-  const products = useMemo(() => {
+
+  const baseProducts = useMemo(() => {
     const filter = Object.values(specificationFilter || {})[0];
     const baseFindApiProducts = postFilteredProducts;
 
@@ -124,22 +127,27 @@ function ProductList({ sendFeedBackAction }: Props): JSX.Element {
     postFilteredProducts,
   ]);
 
+  useEffect(() => {
+    setProducts(baseProducts || []);
+  }, [baseProducts, specificationFilter]);
+
   const groundedFilteredProducts = useMemo(() => {
-    if (groundingFilterResult && groundingFilterResult.length > 0) {
+    if (effectiveGroundingResults && effectiveGroundingResults.length > 0) {
       const filtered = products.filter((product: any) =>
-        groundingFilterResult.some((result: any) => product.sku === result.sku),
+        effectiveGroundingResults.some(
+          (result: any) => product.sku === result.sku,
+        ),
       );
       if (filtered.length > 0) {
         return filtered;
       }
       return products;
     }
-    return () => {};
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [groundingFilterResult]);
+    return products;
+  }, [effectiveGroundingResults, products]);
 
   const renderItem = useMemo(() => {
-    const productsToRender =
+    const productsToRender: any[] =
       groundedFilteredProducts &&
       groundedFilteredProducts.length > 0 &&
       showingGroundingFilterResult
@@ -185,7 +193,12 @@ function ProductList({ sendFeedBackAction }: Props): JSX.Element {
       </div>
     );
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [products, groundedFilteredProducts, showingGroundingFilterResult]);
+  }, [
+    products,
+    groundedFilteredProducts,
+    showingGroundingFilterResult,
+    isAiModeOpen,
+  ]);
 
   if (
     products?.length === 0 &&

package/src/components/Rfq/RfqModal.tsx

@@ -81,7 +81,7 @@ export default function RfqModal({
         setRfqStatus('inactive');
 
         toast(
-          t => {
+          () => {
             return (
               <div
                 style={{