@nyris/nyris-webapp 0.3.89 → 0.3.91

package/src/components/ExperienceVisualSearch/ExperienceVisualSearch.tsx

@@ -21,7 +21,12 @@ function ExperienceVisualSearch({
   const { singleImageSearch } = useImageSearch();
 
   const initiateVisualSearch = async (blob: string) => {
-    singleImageSearch({ image: blob, settings }).then(() => {});
+    singleImageSearch({
+      image: blob,
+      settings,
+      clearPostFilter: true,
+      newSearch: true,
+    }).then(() => {});
     navigate('/result');
   };
 

package/src/components/ExperienceVisualSearch/ExperienceVisualSearchTrigger.tsx

@@ -48,8 +48,8 @@ function ExperienceVisualSearchTrigger({
     <>
       <div className="flex flex-col items-center">
         <div
-          className={`group bg-[#3E36DC] w-[215px] desktop:w-10 hover:w-[215px] hover:gap-2 ${
-            expand ? 'desktop:w-[215px] gap-2' : ''
+          className={`group bg-[#3E36DC] w-10 hover:w-[215px] hover:gap-2 ${
+            expand ? 'w-[215px] gap-2' : ''
           } h-10 flex flex-row justify-center items-center rounded-full cursor-pointer my-8 transition-all duration-300`}
           onClick={() => modalToggle(true)}
         >

package/src/components/GroundingSpecs.tsx

@@ -0,0 +1,47 @@
+import React, { useEffect } from 'react';
+
+interface GroundingSpec {
+  label: string;
+  value: string;
+}
+
+const GroundingSpecs = ({ data }: { data: any }) => {
+  // Mapping the complex JSON object to the flat GroundingSpec interface
+  const [specs, setSpecs] = React.useState<GroundingSpec[]>([]);
+
+  useEffect(() => {
+    const newSpecs: GroundingSpec[] = [];
+    if (data.product_name) {
+      newSpecs.push({ label: 'Product Name', value: data.product_name });
+    }
+    if (data.brand) {
+      newSpecs.push({ label: 'Brand', value: data.brand });
+    }
+    if (data.category) {
+      newSpecs.push({ label: 'Category', value: data.category });
+    }
+    // Dynamically mapping the nested key_specs
+    Object.entries(data.key_specs || {}).forEach(([key, val]) => {
+      newSpecs.push({ label: key, value: String(val) });
+    });
+    setSpecs(newSpecs);
+  }, [data]);
+
+  return (
+    <div className="flex flex-col text-[10px] leading-4">
+      {specs.map((spec, index) => (
+        <div
+          key={index}
+          className={`flex items-center gap-2 py-[3px] pl-2 rounded-sm ${
+            index % 2 === 0 ? 'bg-[#F3F4F8]' : 'bg-white'
+          }`}
+        >
+          <div className="w-1/3 text-[#3B3E5F] font-semibold">{spec.label}</div>
+          <div className="w-2/3 text-[#3B3E5F]">{spec.value}</div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default GroundingSpecs;

package/src/components/Header.tsx

@@ -11,6 +11,7 @@ import { useState } from 'react';
 import LogoutModal from './LogoutModal';
 import { Popover, PopoverContent, PopoverTrigger } from './popover';
 import useResultStore from 'stores/result/resultStore';
+import Cart from './Cart';
 
 function Header() {
   const { theme, auth0 } = window.settings;
@@ -42,109 +43,109 @@ function Header() {
       style={{ background: theme?.headerColor }}
     >
       <div
-        className={twMerge([
-          'w-full',
-          'flex',
-          'justify-center',
-          'items-center',
-          'relative',
-          'h-full',
-        ])}
+        className={twMerge(['w-full', 'flex', 'items-center', 'h-full'])}
+        style={{ display: 'flex', alignItems: 'center', height: '100%' }}
       >
-        <NavLink
-          to="/"
-          style={{ lineHeight: 0, position: 'absolute', left: 0 }}
-          onClick={() => {
-            reset();
-            resetResultStore();
-            setSpecifications(null);
-          }}
+        {/* Left: Logo */}
+        <div
+          className="flex items-center justify-start min-w-0"
+          style={{ flex: '0 0 auto' }}
         >
-          <img
-            src={theme?.appBarLogoUrl}
-            alt="logo"
-            style={{
-              aspectRatio: 1,
-              width: theme?.logoWidth,
-              height: theme?.logoHeight,
+          <NavLink
+            to="/"
+            style={{ lineHeight: 0 }}
+            onClick={() => {
+              reset();
+              resetResultStore();
+              setSpecifications(null);
             }}
-          />
-        </NavLink>
-
-        <div>
+          >
+            <img
+              src={theme?.appBarLogoUrl}
+              alt="logo"
+              style={{
+                aspectRatio: 1,
+                width: theme?.logoWidth,
+                height: theme?.logoHeight,
+              }}
+            />
+          </NavLink>
+        </div>
+        {/* Center: Search bar */}
+        <div className="flex-1 flex justify-center items-center min-w-0">
           <div
             className={twMerge(['hidden', showSearchBar && 'desktop:block'])}
-            style={{
-              // position: 'relative',
-              // left: '50%',
-              // top: '50%',
-              // transform: 'translate(-50%, -50%)',
-            }}
           >
             <TextSearch />
           </div>
         </div>
+        {/* Right: Cart and user actions */}
+        <div
+          className="flex items-center justify-end min-w-0 gap-4"
+          style={{ flex: '0 0 auto' }}
+        >
+          {window.settings.cart && <Cart />}
 
-        {auth0.enabled && isAuthenticated && (
-          <>
-            <div
-              className="hidden desktop:block"
-              style={{ position: 'relative' }}
-            >
-              <Popover>
-                <PopoverTrigger>
-                  <div
-                    style={{
-                      display: 'flex',
-                      columnGap: '16px',
-                      alignItems: 'center',
-                      cursor: 'pointer',
-                    }}
-                  >
-                    <p style={{ color: '#2B2C46' }}>{user?.email}</p>
-                    <Icon name="avatar" />
-                  </div>
-                </PopoverTrigger>
-                <PopoverContent className="w-[152px] bg-white p-2 shadow-outer">
-                  <div
-                    className={twMerge([
-                      'flex',
-                      'w-[75px]',
-                      'h-[24px]',
-                      'px-2',
-                      'items-center',
-                      'bg-[#2B2C46]',
-                      'text-white',
-                      'text-[10px]',
-                      'cursor-pointer',
-                    ])}
-                    onClick={() => {
-                      logout({
-                        logoutParams: { returnTo: window.location.origin },
-                      });
-                    }}
-                  >
-                    Sign out
-                  </div>
-                </PopoverContent>
-              </Popover>
-            </div>
-
-            <div
-              className="block desktop:hidden cursor-pointer"
-              onClick={() => {
-                setShowLogoutModal(true);
-              }}
-            >
-              <Icon
-                name="logout"
-                className="text-[#AAABB5]"
-                width={24}
-                height={24}
-              />
-            </div>
-          </>
-        )}
+          {auth0.enabled && isAuthenticated && (
+            <>
+              <div
+                className="hidden desktop:block"
+                style={{ position: 'relative' }}
+              >
+                <Popover>
+                  <PopoverTrigger>
+                    <div
+                      style={{
+                        display: 'flex',
+                        columnGap: '16px',
+                        alignItems: 'center',
+                        cursor: 'pointer',
+                      }}
+                    >
+                      <p style={{ color: '#2B2C46' }}>{user?.email}</p>
+                      <Icon name="avatar" />
+                    </div>
+                  </PopoverTrigger>
+                  <PopoverContent className="w-[152px] bg-white p-2 shadow-outer">
+                    <div
+                      className={twMerge([
+                        'flex',
+                        'w-[75px]',
+                        'h-[24px]',
+                        'px-2',
+                        'items-center',
+                        'bg-[#2B2C46]',
+                        'text-white',
+                        'text-[10px]',
+                        'cursor-pointer',
+                      ])}
+                      onClick={() => {
+                        logout({
+                          logoutParams: { returnTo: window.location.origin },
+                        });
+                      }}
+                    >
+                      Sign out
+                    </div>
+                  </PopoverContent>
+                </Popover>
+              </div>
+              <div
+                className="block desktop:hidden cursor-pointer"
+                onClick={() => {
+                  setShowLogoutModal(true);
+                }}
+              >
+                <Icon
+                  name="logout"
+                  className="text-[#AAABB5]"
+                  width={24}
+                  height={24}
+                />
+              </div>
+            </>
+          )}
+        </div>
       </div>
       <LogoutModal
         setShowLogoutModal={setShowLogoutModal}

package/src/components/HitsPerPage.tsx

@@ -1,5 +1,6 @@
 import { useTranslation } from 'react-i18next';
 import { useHitsPerPage, UseHitsPerPageProps } from 'react-instantsearch';
+import PoweredBy from './PoweredBy';
 
 export const HitsPerPage = (props: UseHitsPerPageProps) => {
   const { items, refine } = useHitsPerPage(props);
@@ -10,8 +11,8 @@ export const HitsPerPage = (props: UseHitsPerPageProps) => {
 
   return (
     <>
-      <div className="w-full min-h-12 bg-[#f3f3f5] border-t border-solid border-[#e0e0e0] justify-start items-center hidden desktop:inline-flex">
-        <div className="self-stretch pl-4 pr-6 border-r border-solid border-[#e0e0e0] justify-center items-center gap-1 flex">
+      <div className="w-full px-4 h-10 bg-white border border-solid border-[#DDDEE7] items-center hidden desktop:inline-flex justify-between">
+        <div className="self-stretch pr-6 border-r border-solid border-[#DDDEE7] justify-center items-center gap-1 flex">
           <div className="text-[#2b2c46] text-[13px] font-normal font-['Source Sans 3'] leading-none tracking-tight">
             {t('Items per page')}:
           </div>
@@ -29,6 +30,7 @@ export const HitsPerPage = (props: UseHitsPerPageProps) => {
             ))}
           </select>
         </div>
+        {window.settings.showPoweredByNyris && <PoweredBy />}
       </div>
     </>
   );

package/src/components/ImagePreview.tsx

@@ -1,6 +1,6 @@
-import React, {useCallback, useEffect, useRef, useState} from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 
-import {clone, debounce} from 'lodash';
+import { clone, debounce } from 'lodash';
 import { twMerge } from 'tailwind-merge';
 import { useNavigate } from 'react-router';
 import { useTranslation } from 'react-i18next';
@@ -12,7 +12,6 @@ import { DEFAULT_REGION } from '../constants';
 import { useImageSearch } from 'hooks/useImageSearch';
 import useRequestStore from 'stores/request/requestStore';
 import useResultStore from 'stores/result/resultStore';
-import { getFilters } from '../services/filter';
 
 function ImagePreviewComponent({
   showAdjustInfo = false,
@@ -24,13 +23,13 @@ function ImagePreviewComponent({
 }) {
   const [showAdjustInfoBasedOnConfidence, setShowAdjustInfoBasedOnConfidence] =
     useState(false);
-  const [resultFilter, setResultFilter] = useState<any>([]);
 
   const { t } = useTranslation();
   const navigate = useNavigate();
   const settings = window.settings;
   const isMultiImageSearchEnabled = settings.multiImageSearch;
 
+  const preFilterList = useRequestStore(state => state.preFilterList);
   const requestImages = useRequestStore(state => state.requestImages);
   const specifications = useRequestStore(state => state.specifications);
   const resetRegions = useRequestStore(state => state.resetRegions);
@@ -40,11 +39,15 @@ function ImagePreviewComponent({
   const resetRequestStore = useRequestStore(state => state.reset);
   const setSpecifications = useRequestStore(state => state.setSpecifications);
   const setShowLoading = useRequestStore(state => state.setShowLoading);
-  const setNameplateNotificationText = useRequestStore(state => state.setNameplateNotificationText);
+  const setNameplateNotificationText = useRequestStore(
+    state => state.setNameplateNotificationText,
+  );
   const setAlgoliaFilter = useRequestStore(state => state.setAlgoliaFilter);
   const setPreFilter = useRequestStore(state => state.setPreFilter);
   const setNameplateImage = useRequestStore(state => state.setNameplateImage);
-  const setShowNotMatchedError = useRequestStore(state => state.setShowNotMatchedError);
+  const setShowNotMatchedError = useRequestStore(
+    state => state.setShowNotMatchedError,
+  );
 
   const detectedRegions = useResultStore(state => state.detectedRegions);
   const resetResultStore = useResultStore(state => state.reset);
@@ -55,21 +58,31 @@ function ImagePreviewComponent({
 
   const [isVisible] = useState(true);
   const [zIndex] = useState<number>(0);
+  const [previewWidth, setPreviewWidth] = useState(0);
 
   const previewWrapperRef = useRef<any>(null);
 
-  const getPreFilters = async () => {
-    getFilters(1000, settings)
-      .then(res => {
-        setResultFilter(res);
-      })
-      .catch((e: any) => {
-        console.log('err getDataFilterDesktop', e);
-      });
-  };
-
   useEffect(() => {
-    getPreFilters()
+    const container = previewWrapperRef.current as HTMLDivElement | null;
+    if (!container) {
+      return;
+    }
+
+    const updateWidth = () => {
+      const nextWidth = Math.round(container.getBoundingClientRect().width);
+      setPreviewWidth(prevWidth =>
+        prevWidth === nextWidth ? prevWidth : nextWidth,
+      );
+    };
+
+    updateWidth();
+
+    const resizeObserver = new ResizeObserver(updateWidth);
+    resizeObserver.observe(container);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
   }, []);
 
   const onImageRemove = () => {
@@ -94,48 +107,66 @@ function ImagePreviewComponent({
         showFeedback: true,
         compress: false,
       }).then((res: any) => {
-        const specificationPrefilter = res.image_analysis?.specification?.prefilter_value || null;
-        const hasPrefilter = resultFilter.filter((filter: any) => filter.values.includes(specificationPrefilter));
+        const specificationPrefilter =
+          res.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(res.image_analysis.specification));
             setNameplateImage(image);
-            setPreFilter({[res.image_analysis?.specification?.prefilter_value]: true});
-            setAlgoliaFilter(`${settings.alogoliaFilterField}:'${res.image_analysis?.specification?.prefilter_value}'`);
+            setPreFilter({
+              [res.image_analysis?.specification?.prefilter_value]: true,
+            });
+            setAlgoliaFilter(
+              `${settings.alogoliaFilterField}:'${res.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()
-              }));
+              setNameplateNotificationText(
+                t('We have successfully defined the search criteria', {
+                  prefilter_value: specificationPrefilter,
+                  preFilterTitle:
+                    window.settings.preFilterTitle?.toLocaleLowerCase(),
+                }),
+              );
             }, 1000);
             setTimeout(() => {
               setNameplateNotificationText('');
             }, 6000);
           }
           if (!hasPrefilter.length && window.settings.preFilterOption) {
-            setSpecifications(clone({...res.image_analysis.specification, prefilter_value: '', specificationPrefilter}));
+            setSpecifications(
+              clone({
+                ...res.image_analysis.specification,
+                specificationPrefilter,
+              }),
+            );
             setPreFilter({});
             setAlgoliaFilter('');
             setShowLoading(false);
             setShowNotMatchedError(true);
             setTimeout(() => {
-              setNameplateNotificationText(t('Extracted details from the nameplate could not be matched', { preFilterTitle: window.settings.preFilterTitle?.toLocaleLowerCase() }));
+              setNameplateNotificationText(
+                t('Extracted details from the nameplate could not be matched', {
+                  preFilterTitle:
+                    window.settings.preFilterTitle?.toLocaleLowerCase(),
+                }),
+              );
             }, 1000);
             setTimeout(() => {
               setNameplateNotificationText('');
             }, 6000);
           }
         } else {
-          if (specifications?.is_nameplate) {
-            setSpecifications({...specifications, prefilter_value: '', specificationPrefilter: ''});
-          } else {
-            setSpecifications({...specifications, is_nameplate: false});
+          if (!specifications?.is_nameplate) {
+            setSpecifications({ ...specifications, is_nameplate: false });
           }
           const highConfidence = res.results.find(
             (data: { score: number }) => data.score >= 0.65,
@@ -173,6 +204,7 @@ function ImagePreviewComponent({
           'justify-center',
           isVisible ? (!isMultiImageSearchEnabled ? 'py-5' : 'pt-6') : '',
           'px-7',
+          'box-border',
           'w-full',
           'desktop:px-5',
           'relative',
@@ -202,6 +234,7 @@ function ImagePreviewComponent({
           ])}
         >
           <Preview
+            key={previewWidth}
             onSelectionChange={(r: RectCoords) => {
               debouncedOnImageSelectionChange(r, currentIndex);
             }}