@nyris/nyris-webapp 0.3.92 → 0.3.94

package/package.json

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

package/public/js/settings.example.js

@@ -110,6 +110,7 @@ var settings = {
   geoLocation: false,
   geoLocationMessage: '',
   showImageDetails: false,
+  supportButtonLabel: 'Request a Quote',
   rfq: {
     enabled: '',
     emailTemplateId: '',

package/src/components/ChatAssistant/useChatAssistantLogic.ts

@@ -682,7 +682,7 @@ Each result includes a unique SKU in brackets. Use the result thumbnails and met
 
       const tableSuggestions = lookupRelatedParts(
         table,
-        imageAnalysis.specification.product_category,
+        imageAnalysis?.specification?.product_category,
       );
 
       if (tableSuggestions && tableSuggestions.length > 0) {

package/src/components/CustomCameraDrawer.tsx

@@ -95,7 +95,7 @@ function CustomCamera(props: Props) {
       showFeedback: true,
     }).then(singleImageResp => {
       const specificationPrefilter =
-        singleImageResp.image_analysis?.specification?.prefilter_value || null;
+        singleImageResp?.image_analysis?.specification?.prefilter_value || null;
 
       const hasPrefilter = preFilterList.filter((filter: any) =>
         filter.values.includes(specificationPrefilter),
@@ -105,15 +105,15 @@ function CustomCamera(props: Props) {
         setShowNotMatchedError(false);
         if (hasPrefilter.length) {
           setSpecifications(
-            clone(singleImageResp.image_analysis.specification),
+            clone(singleImageResp?.image_analysis?.specification),
           );
           setNameplateImage(image);
           setPreFilter({
-            [singleImageResp.image_analysis?.specification?.prefilter_value]:
+            [singleImageResp?.image_analysis?.specification?.prefilter_value]:
               true,
           });
           setAlgoliaFilter(
-            `${settings.alogoliaFilterField}:'${singleImageResp.image_analysis?.specification?.prefilter_value}'`,
+            `${settings.alogoliaFilterField}:'${singleImageResp?.image_analysis?.specification?.prefilter_value}'`,
           );
 
           setShowLoading(false);
@@ -133,7 +133,7 @@ function CustomCamera(props: Props) {
         if (!hasPrefilter.length && window.settings.preFilterOption) {
           setSpecifications(
             clone({
-              ...singleImageResp.image_analysis.specification,
+              ...singleImageResp?.image_analysis?.specification,
               specificationPrefilter,
             }),
           );

package/src/components/DragDropFile.tsx

@@ -70,15 +70,15 @@ function DragDropFile(props: Props) {
         setShowNotMatchedError(false);
         if (hasPrefilter.length) {
           setSpecifications(
-            clone(singleImageResp.image_analysis.specification),
+            clone(singleImageResp?.image_analysis?.specification),
           );
           setNameplateImage(file);
           setPreFilter({
-            [singleImageResp.image_analysis?.specification?.prefilter_value]:
+            [singleImageResp?.image_analysis?.specification?.prefilter_value]:
               true,
           });
           setAlgoliaFilter(
-            `${window.settings.alogoliaFilterField}:'${singleImageResp.image_analysis?.specification?.prefilter_value}'`,
+            `${window.settings.alogoliaFilterField}:'${singleImageResp?.image_analysis?.specification?.prefilter_value}'`,
           );
 
           setShowLoading(false);
@@ -100,7 +100,7 @@ function DragDropFile(props: Props) {
         if (!hasPrefilter.length && window.settings.preFilterOption) {
           setSpecifications(
             clone({
-              ...singleImageResp.image_analysis.specification,
+              ...singleImageResp?.image_analysis?.specification,
               specificationPrefilter,
             }),
           );

package/src/components/ExperienceVisualSearch/ExperienceVisualSearchModal.tsx

@@ -23,7 +23,7 @@ function ExperienceVisualSearchModal(props: Props) {
     return (
       <Dialog open={openModal} onOpenChange={handleClose}>
         <DialogContent
-          className="bg-white p-0 max-w-[1500px] w-fit max-h-[95vh] h-fit m-auto overflow-y-hidden rounded-lg"
+          className="bg-white p-0 max-w-[1500px] w-fit max-h-[95vh] m-auto overflow-y-hidden rounded-lg"
           closeButton={false}
         >
           <DialogTitle className="h-0 w-0 hidden">

package/src/components/ExperienceVisualSearch/ExperienceVisualSearchTrigger.tsx

@@ -46,7 +46,7 @@ function ExperienceVisualSearchTrigger({
 
   return (
     <>
-      <div className="flex flex-col items-center">
+      <div className={`flex flex-col items-center ${window.settings.experienceVisualSearch ? 'mb-[80px]' : ''}`}>
         <div
           className={`group bg-[#3E36DC] w-10 hover:w-[215px] hover:gap-2 ${
             expand ? 'w-[215px] gap-2' : ''

package/src/components/IdentifiedAttributes.tsx

@@ -0,0 +1,159 @@
+import { useRefinementList } from 'react-instantsearch';
+import Tooltip from './Tooltip/TooltipComponent';
+import { twMerge } from 'tailwind-merge';
+import useRequestStore from '../stores/request/requestStore';
+import useResultStore from '../stores/result/resultStore';
+import { Icon } from '@nyris/nyris-react-components';
+import { useMediaQuery } from 'react-responsive';
+
+const IdentifiedAttributes = ({
+  attr,
+  value,
+  specificationFilter,
+  imageAnalysis,
+}: any) => {
+  const refinement = window.settings.refinements.filter((ref: any) => {
+    return ref.header?.toLocaleLowerCase() === attr?.toLocaleLowerCase();
+  });
+  const attribute = refinement?.length ? refinement[0].attribute : 'none';
+  const isMobile = useMediaQuery({ query: '(max-width: 776px)' });
+  const { refine } = useRefinementList({
+    attribute,
+    operator: 'or',
+    showMore: false,
+    limit: 1,
+  });
+
+  return isMobile ? (
+    <>
+      <div className="inline-flex justify-center items-start gap-2 " key={attr}>
+        <div className="pl-1 inline-flex justify-center items-center gap-2.5">
+          <div className="justify-start text-[#3B3E5F] text-sm font-semibold">
+            {attr}
+          </div>
+        </div>
+        <div
+          className={twMerge(
+            `p-1 bg-[#e4e3ff] rounded-lg inline-flex justify-center items-center gap-1.5`,
+            'text-[#3e36dc]',
+            specificationFilter[attr]
+              ? 'border-[#3E36DC] bg-[#3E36DC] text-white'
+              : '',
+          )}
+          onClick={() => {
+            if (!value) {
+              return;
+            }
+            if (attribute !== 'none') {
+              refine(value);
+            } else {
+              const setSpecificationFilter =
+                useRequestStore.getState().setSpecificationFilter;
+
+              const setSpecificationFilteredProducts =
+                useResultStore.getState().setSpecificationFilteredProducts;
+
+              if (specificationFilter[attr]) {
+                setSpecificationFilter({});
+                setSpecificationFilteredProducts([]);
+                // setProducts(results);
+              } else {
+                setSpecificationFilter({
+                  [attr]: value,
+                });
+              }
+            }
+          }}
+        >
+          <div className="justify-start items-center text-sm font-medium leading-none flex gap-2">
+            {imageAnalysis?.specification[attr] || 'N/A'}
+            <Icon
+              name="close"
+              className={twMerge(
+                'w-3 h-3 text-white',
+                specificationFilter[attr] ? 'block' : 'hidden',
+              )}
+            />
+          </div>
+        </div>
+      </div>
+    </>
+  ) : (
+    <div key={attr} className="flex justify-between w-full gap-2 items-center">
+      <div className="self-stretch inline-flex justify-start items-center gap-1.5">
+        <div className="justify-start text-[#3B3E5F] text-xs font-semibold">
+          {attr}:
+        </div>
+        <Tooltip
+          content={
+            specificationFilter[attr]
+              ? 'Filter applied. Clear to choose a different value.'
+              : 'Click to apply as a search filter.'
+          }
+          delayDuration={1000}
+          disabled={!value}
+        >
+          <div
+            className={twMerge(
+              `px-1 py-1 bg-[#e4e3ff] rounded-[1px] flex justify-center items-center gap-1.5`,
+              'border border-solid border-transparent hover:border-[#3E36DC]',
+              'cursor-pointer',
+              specificationFilter[attr] ? 'border-[#3E36DC] bg-[#3E36DC] ' : '',
+            )}
+            onClick={() => {
+              if (!value) {
+                return;
+              }
+              if (attribute !== 'none') {
+                refine(value);
+              } else {
+                const setSpecificationFilter =
+                  useRequestStore.getState().setSpecificationFilter;
+
+                const setSpecificationFilteredProducts =
+                  useResultStore.getState().setSpecificationFilteredProducts;
+
+                if (specificationFilter[attr]) {
+                  setSpecificationFilter({});
+                  setSpecificationFilteredProducts([]);
+                  // setProducts(results);
+                } else {
+                  setSpecificationFilter({
+                    [attr]: value,
+                  });
+                }
+              }
+            }}
+          >
+            <div
+              className={twMerge(
+                'justify-start text-[#3e36dc] text-[10px] leading-none px-0.5',
+                'font-normal hover:font-bold hover:px-0',
+                specificationFilter[attr]
+                  ? 'font-bold text-white hover:px-0.5'
+                  : '',
+                'max-line-1',
+              )}
+            >
+              {imageAnalysis?.specification[attr] || 'N/A'}
+            </div>
+          </div>
+        </Tooltip>
+      </div>
+      <div
+        onClick={() => {
+          navigator.clipboard.writeText(
+            imageAnalysis?.specification[attr] || '',
+          );
+        }}
+      >
+        <Icon
+          name="copy"
+          className="text-[#AAABB5] w-[12px] h-[12px] hover:text-[#3E36DC] cursor-pointer"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default IdentifiedAttributes;

package/src/components/ImagePreview.tsx

@@ -116,13 +116,13 @@ function ImagePreviewComponent({
           setRequestImages([]);
           setShowNotMatchedError(false);
           if (hasPrefilter.length) {
-            setSpecifications(clone(res.image_analysis.specification));
+            setSpecifications(clone(res?.image_analysis?.specification));
             setNameplateImage(image);
             setPreFilter({
-              [res.image_analysis?.specification?.prefilter_value]: true,
+              [res?.image_analysis?.specification?.prefilter_value]: true,
             });
             setAlgoliaFilter(
-              `${settings.alogoliaFilterField}:'${res.image_analysis?.specification?.prefilter_value}'`,
+              `${settings.alogoliaFilterField}:'${res?.image_analysis?.specification?.prefilter_value}'`,
             );
 
             setShowLoading(false);
@@ -144,7 +144,7 @@ function ImagePreviewComponent({
           if (!hasPrefilter.length && window.settings.preFilterOption) {
             setSpecifications(
               clone({
-                ...res.image_analysis.specification,
+                ...res?.image_analysis?.specification,
                 specificationPrefilter,
               }),
             );

package/src/components/ImageUpload.tsx

@@ -103,7 +103,7 @@ function ImageUpload({
       clearPostFilter: true,
     }).then(singleImageResp => {
       const specificationPrefilter =
-        singleImageResp.image_analysis?.specification?.prefilter_value || null;
+        singleImageResp?.image_analysis?.specification?.prefilter_value || null;
       const hasPrefilter = preFilterList.filter((filter: any) =>
         filter.values.includes(specificationPrefilter),
       );
@@ -112,15 +112,15 @@ function ImageUpload({
         setShowNotMatchedError(false);
         if (hasPrefilter.length) {
           setSpecifications(
-            clone(singleImageResp.image_analysis.specification),
+            clone(singleImageResp?.image_analysis?.specification),
           );
           setNameplateImage(files[0]);
           setPreFilter({
-            [singleImageResp.image_analysis?.specification?.prefilter_value]:
+            [singleImageResp?.image_analysis?.specification?.prefilter_value]:
               true,
           });
           setAlgoliaFilter(
-            `${settings.alogoliaFilterField}:'${singleImageResp.image_analysis?.specification?.prefilter_value}'`,
+            `${settings.alogoliaFilterField}:'${singleImageResp?.image_analysis?.specification?.prefilter_value}'`,
           );
 
           setShowLoading(false);
@@ -142,7 +142,7 @@ function ImageUpload({
         if (!hasPrefilter.length && showPreFilter) {
           setSpecifications(
             clone({
-              ...singleImageResp.image_analysis.specification,
+              ...singleImageResp?.image_analysis?.specification,
               specificationPrefilter,
             }),
           );

package/src/components/MobileCameraCTA.tsx

@@ -4,7 +4,7 @@ import '../styles/mobileCameraCTA.scss';
 
 function MobileCameraCTA({ setOpenModalCamera }: { setOpenModalCamera: any }) {
   return (
-    <div className="take-photo">
+    <div className={`take-photo ${window.settings.experienceVisualSearch ? 'mt-[180px]' : ''}`}>
       <div
         className="take-photo-wrapper"
       >

package/src/components/Rfq/RfqBanner.tsx

@@ -29,7 +29,6 @@ function RfqBanner({
       <div
         style={{
           padding: '0px 16px 0px 16px',
-          backgroundColor: '#F6F3F1',
           width: '100%',
           alignSelf: 'end',
           height: '248px',
@@ -72,9 +71,9 @@ function RfqBanner({
                   fontWeight: 'bold',
                 }}
               >
-                <p className="desktop:hidden">{`${t('No matches found')}?`}</p>
+                <p className="desktop:hidden">{`${t('No matches found')}`}?</p>
                 <p className="hidden desktop:block">
-                  `${t('No matches found for your request')}?`
+                  {`${t('No matches found for your request')}`}?
                 </p>
               </div>
               <div
@@ -112,7 +111,7 @@ function RfqBanner({
                 setIsRfqModalOpen(true);
               }}
             >
-              Request a Quote
+              {window.settings.supportButtonLabel}
             </button>
           </div>
         </div>

package/src/components/SidePanel.tsx

@@ -8,6 +8,7 @@ import useUiStore from 'stores/ui/uiStore';
 import GroundingSpecs from './GroundingSpecs';
 import SmartFilter from './SmartFilter';
 import { useEffectiveGroundingResults } from 'hooks/useEffectiveGroundingResults';
+import IdentifiedAttributes from './IdentifiedAttributes';
 
 export default function SidePanel({ className }: { className?: string }) {
   const settings = window.settings;
@@ -23,7 +24,6 @@ export default function SidePanel({ className }: { className?: string }) {
   const showSidePanel = useUiStore(state => state.showSidePanel);
 
   const imageAnalysis = useResultStore(state => state.imageAnalysis);
-  const smartFilters = useResultStore(state => state.smartFilters);
 
   const showPostFilter = window.settings?.postFilterOption;
 
@@ -104,18 +104,63 @@ export default function SidePanel({ className }: { className?: string }) {
             {requestImages[0] && <ImagePreview />}
           </div>
           <div className="pb-4 flex flex-col gap-6">
-            {isSmartFiltersEnabled &&
-              window.settings.showImageDetails &&
+            {window.settings.showImageDetails &&
               (imageAnalysis?.imageDescription ||
-                Object.keys(imageAnalysis?.specification || {}).length > 0 ||
-                smartFilters.status !== 'idle') && (
-                <SmartFilter
-                  imageAnalysis={imageAnalysis}
-                  specificationFilter={specificationFilter}
-                  variant="sidepanel"
-                />
+                Object.keys(imageAnalysis?.specification || {}).length > 0) && (
+                <div className="self-stretch p-3.5 bg-[#F3F4F8] rounded-3xl inline-flex flex-col justify-start items-start gap-1.5 mt-4 mx-4 ">
+                  {imageAnalysis?.imageDescription !==
+                    'No description available' && (
+                    <div className="self-stretch flex flex-col justify-start items-start">
+                      <div className="justify-start text-[#3B3E5F] text-base font-semibold">
+                        Image description
+                      </div>
+                      <div className="self-stretch justify-start text-[#3B3E5F] text-xs font-normal">
+                        {imageAnalysis?.imageDescription || ''}
+                      </div>
+                    </div>
+                  )}
+
+                  {Object.keys(imageAnalysis?.specification || {})
+                    .filter(
+                      key =>
+                        key !== 'is_nameplate' && key !== 'prefilter_value',
+                    )
+                    .some(key => !!imageAnalysis?.specification[key]) && (
+                    <div className="justify-start text-[#3B3E5F] text-base font-semibold mt-2">
+                      Identified Attributes
+                    </div>
+                  )}
+
+                  {Object.keys(imageAnalysis?.specification || {})
+                    .filter(
+                      key =>
+                        key !== 'is_nameplate' && key !== 'prefilter_value',
+                    )
+                    .map(key => {
+                      const value = imageAnalysis?.specification[key];
+                      if (!value) {
+                        return null;
+                      }
+                      return (
+                        <IdentifiedAttributes
+                          attr={key}
+                          value={value}
+                          specificationFilter={specificationFilter}
+                          imageAnalysis={imageAnalysis}
+                        />
+                      );
+                    })}
+                </div>
               )}
 
+            {isSmartFiltersEnabled && (
+              <SmartFilter
+                imageAnalysis={imageAnalysis}
+                specificationFilter={specificationFilter}
+                variant="sidepanel"
+              />
+            )}
+
             {(isGoogleGroundingLoading ||
               googleGroundingResponse ||
               groundingError) && (