@nyris/nyris-webapp 0.3.97 → 0.3.99

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@nyris/nyris-webapp",
-  "version": "0.3.97",
+  "version": "0.3.99",
   "dependencies": {
     "@auth0/auth0-react": "^2.2.4",
     "@emailjs/browser": "^4.3.3",
     "@google/genai": "^1.46.0",
-    "@nyris/nyris-api": "^0.3.97",
-    "@nyris/nyris-react-components": "^0.3.97",
+    "@nyris/nyris-api": "^0.3.99",
+    "@nyris/nyris-react-components": "^0.3.99",
     "@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

@@ -23,6 +23,7 @@ var settings = {
     },
   ],
   // Nyris - visual search
+  // When auth0.enabled is true, leave apiKey empty — the app uses Auth0 claim
   apiKey: '',
   aiApiKey: '',
   baseUrl: 'https://api.nyris.io',
@@ -104,6 +105,7 @@ var settings = {
   },
   showPoweredByNyris: '',
   postFilterOption: '',
+  postFilterUseApi: false,
   preFilterOption: '',
   experienceVisualSearch: false,
   experienceVisualSearchImages: [],
@@ -111,6 +113,45 @@ var settings = {
   noSimilarSearch: false,
   useSmartFilters: false,
   showFeedback: false,
+  // Feedback API events that should never be sent. Use event types
+  // ('click', 'conversion', 'feedback', 'region') or subtypes:
+  //   click:      result_card, expand_details, similar_part_search, copy_details,
+  //               raise_inquiry, filter_applied, pre_filter_applied, chat_with_vizo
+  //   conversion: add_to_cart, purchase, download_cart, share_cart
+  //   feedback:   thumbs_up, thumbs_down
+  //   region:     crop, object_detection_click
+  // e.g. ['copy_details', 'filter_applied']
+  disabledFeedbackEvents: [],
+  requestQuality: false,
+  scopes: {
+    scopeID: false,
+    typePlateButtonLabel: 'Scan type plate',
+    typePlateStepOne: 'Identify machine',
+    typePlateStepTwo: 'Find part',
+    typePlatePopupTitle: 'Identify your machine',
+    typePlatePopupTitleSuccess: 'Machine identified',
+    typePlatePopupCtaButton: 'Search within this machine',
+    typePlatePopupCtaTextButton: 'Enter serial number manually',
+    typePlatePopupFindMachineButton: 'Find machine',
+    typePlatePopupSkipButton: 'Skip and search all parts',
+    typePlatePopupBackButton: 'Back to results',
+    typePlatePopupUploadButton: 'Upload image',
+    typePlatePopupUploadNewButton: 'Upload new type plate',
+    typePlatePopupTakePhotoButton: 'Take a photo',
+    typePlatePopupApplyingLabel: 'Applying...',
+    typePlateResultsScopeLabel:
+      'Searching within parts for {{scope_id}}. You can search with keyword or image to find the right item',
+    typePlateResultsNoScopeLabel:
+      'Scan your type plate to see only parts for your equipment.',
+    typePlateResultsClearScopeLabel: 'Search all products',
+    typePlatePopupErrorMessage: 'The serial number was not found. Please check again.',
+    typePlateManualInputLabel: "Can't scan? Enter serial number manually.",
+    typePlateManualInputPlaceholder: 'e.g. 2234GH',
+    typePlateWhereToFindTitle: 'Where to find it',
+    typePlateWhereToFindDescription:
+      'A metal or foil label on the machine housing, usually near the motor or the main panel. Make sure the serial number is sharp and readable.',
+    typePlateSerialNumberLabel: 'Serial number',
+  },
   geoLocation: false,
   geoLocationMessage: '',
   showImageDetails: false,

package/src/components/AuthApiKeySync.tsx

@@ -0,0 +1,34 @@
+import { useAuth0 } from '@auth0/auth0-react';
+import { useEffect } from 'react';
+import {
+  applyAuthApiKey,
+  clearAuthApiKey,
+  readAuthApiKeyFromUser,
+} from 'utils/nyrisApiKey';
+
+/**
+ * Keeps window.settings.apiKey in sync with Auth0 claim
+ * `https://nyris.io/authApiKey`.
+ * Must only render inside Auth0Provider when auth0.enabled is true.
+ */
+export function AuthApiKeySync() {
+  const { user, isAuthenticated, isLoading } = useAuth0();
+
+  useEffect(() => {
+    if (isLoading) {
+      return;
+    }
+
+    if (!isAuthenticated || !user) {
+      clearAuthApiKey();
+      return;
+    }
+
+    const authApiKey = readAuthApiKeyFromUser(
+      user as Record<string, unknown>,
+    );
+    applyAuthApiKey(authApiKey);
+  }, [user, isAuthenticated, isLoading]);
+
+  return null;
+}

package/src/components/Cart.tsx

@@ -8,6 +8,9 @@ import { Send } from 'lucide-react';
 import emailjs from '@emailjs/browser';
 import { useAuth0 } from '@auth0/auth0-react';
 import NoImage from '../common/assets/images/no-image.svg';
+import { trackConversion } from 'services/Feedback';
+import { CONVERSION_SUBTYPE } from 'services/feedbackSubtypes';
+import useResultStore from 'stores/result/resultStore';
 
 const EMAILJS_SERVICE_ID = 'service_zfsxshi';
 const EMAILJS_TEMPLATE_ID = window.settings.cart?.emailTemplateId || '';
@@ -102,6 +105,42 @@ const Cart = () => {
   const getQuantityDisplayValue = (sku: string, quantity: number) =>
     quantityEdits[sku] ?? String(quantity || 1);
 
+  /**
+   * Sends one conversion per originating search request. Items remember the
+   * request they were added from; items without one fall back to the current
+   * request id.
+   */
+  const trackCartConversion = (subtype: string) => {
+    const current = useResultStore.getState();
+    const groups = new Map<string, { sessionId?: string; parts: any[] }>();
+
+    cartParts.forEach((part: any) => {
+      const requestId = part.feedbackRequestId || current.requestId;
+      if (!requestId) return;
+      const group = groups.get(requestId) || {
+        sessionId: part.feedbackSessionId || current.sessionId,
+        parts: [] as any[],
+      };
+      group.parts.push(part);
+      groups.set(requestId, group);
+    });
+
+    groups.forEach(({ sessionId, parts }, requestId) => {
+      trackConversion(
+        subtype,
+        {
+          skus: parts.map(part => part.sku),
+          positions: parts.map(part => part.feedbackPosition),
+          quantity: parts.reduce(
+            (total, part) => total + (part.quantity || 1),
+            0,
+          ),
+        },
+        { requestId, sessionId },
+      );
+    });
+  };
+
   const generateCSVContent = (): string => {
     const rows = [['Product Sku', 'Product Name', 'Quantity']];
     cartParts.forEach((part: any) => {
@@ -124,6 +163,7 @@ const Cart = () => {
     // clearSessionProducts();
 
     toast.success('Your data has been downloaded.');
+    trackCartConversion(CONVERSION_SUBTYPE.DOWNLOAD_CART);
   };
 
   const sendCSVByEmail = async (
@@ -159,6 +199,7 @@ const Cart = () => {
       );
 
       toast.success('Parts list has been sent by email.');
+      trackCartConversion(CONVERSION_SUBTYPE.SHARE_CART);
       setIsEmailInputVisible(false);
       setUserEmail('');
     } catch (error) {

package/src/components/ChatAssistant/useChatAssistantLogic.ts

@@ -12,6 +12,7 @@ import {
   fetchProductImageBase64,
   getProductImageUrl,
 } from 'utils/fetchProductImage';
+import { getEffectiveApiKey } from 'utils/nyrisApiKey';
 
 export function useChatAssistantLogic() {
   const [inputValue, setInputValue] = useState('');
@@ -482,7 +483,7 @@ Each result includes a unique SKU in brackets. Use the result thumbnails and met
     setCatalogSearching(true);
     try {
       const settings = (window as any).settings;
-      const nyrisKey = settings?.apiKey || settings?.nyrisApiKey;
+      const nyrisKey = getEffectiveApiKey();
       const baseUrl = settings?.baseUrl || 'https://api.nyris.io';
 
       store.setPreCatalogResults([...activeProducts]);
@@ -580,7 +581,7 @@ Each result includes a unique SKU in brackets. Use the result thumbnails and met
 
     try {
       const settings = (window as any).settings;
-      const nyrisKey = settings?.apiKey || settings?.nyrisApiKey;
+      const nyrisKey = getEffectiveApiKey();
       const baseUrl = settings?.baseUrl || 'https://api.nyris.io';
 
       let searchQuery = rawText;

package/src/components/GoBackButton.tsx

@@ -7,8 +7,11 @@ import useResultStore from 'stores/result/resultStore';
 import useRequestStore from 'stores/request/requestStore';
 import { twMerge } from 'tailwind-merge';
 import useUiStore from 'stores/ui/uiStore';
+import useScopeStore from 'stores/scope/scopeStore';
+import { useImageSearch } from 'hooks/useImageSearch';
 
 export const GoBackButton = ({ className }: { className?: string }) => {
+  const { singleImageSearch } = useImageSearch();
   const firstSearchResults = useResultStore(state => state.firstSearchResults);
   const setFindApiProducts = useResultStore(state => state.setFindApiProducts);
   const setImageAnalysis = useResultStore(state => state.setImageAnalysis);
@@ -27,12 +30,35 @@ export const GoBackButton = ({ className }: { className?: string }) => {
   const setAlgoliaFilter = useRequestStore(state => state.setAlgoliaFilter);
 
   const isFindApiLoading = useUiStore(state => state.isFindApiLoading);
+  const scopeId = useScopeStore(state => state.scopeId);
+  const scopeItemKeyCount = useScopeStore(state => state.itemKeys.length);
+  const machineScopeActive =
+    Boolean(window.settings.scopes?.scopeID) &&
+    Boolean(scopeId) &&
+    scopeItemKeyCount > 0;
 
   const { refine: clearPostFilters } = useClearRefinements();
 
   const { t } = useTranslation();
 
   const onGoBack = () => {
+    // The saved snapshot may predate the machine scope, so search the original
+    // image again; find() applies the active scope.
+    if (machineScopeActive && firstSearchImage) {
+      setPreFilter(firstSearchPreFilter);
+      resetRegions();
+      clearPostFilters();
+      void singleImageSearch({
+        image: firstSearchImage,
+        settings: window.settings,
+        showFeedback: true,
+        newSearch: false,
+        compress: false,
+        clearPostFilter: true,
+      });
+      return;
+    }
+
     setFindApiProducts(firstSearchResults);
     if (firstSearchImage) {
       setRequestImages([firstSearchImage]);
@@ -58,9 +84,10 @@ export const GoBackButton = ({ className }: { className?: string }) => {
   };
 
   if (
-    firstSearchResults.length === 0 ||
+    !firstSearchImage ||
     requestImages[0] === firstSearchImage ||
-    isFindApiLoading
+    isFindApiLoading ||
+    (!machineScopeActive && firstSearchResults.length === 0)
   )
     return <></>;
 

package/src/components/Header.tsx

@@ -12,6 +12,7 @@ import LogoutModal from './LogoutModal';
 import useResultStore from 'stores/result/resultStore';
 import Cart from './Cart';
 import useUiStore from 'stores/ui/uiStore';
+import useScopeStore from 'stores/scope/scopeStore';
 
 function Header() {
   const { theme, auth0 } = window.settings;
@@ -20,6 +21,7 @@ function Header() {
 
   const reset = useRequestStore(state => state.reset);
   const resetResultStore = useResultStore(state => state.reset);
+  const resetScope = useScopeStore(state => state.resetScope);
   const setSpecifications = useRequestStore(state => state.setSpecifications);
   const showSidePanel = useUiStore(state => state.showSidePanel);
   const setShowSidePanel = useUiStore(state => state.setShowSidePanel);
@@ -84,6 +86,7 @@ function Header() {
           onClick={() => {
             reset();
             resetResultStore();
+            resetScope();
             setSpecifications(null);
           }}
           className="pl-6"

package/src/components/HitsPerPage.tsx

@@ -2,13 +2,31 @@ import { useTranslation } from 'react-i18next';
 import { useHitsPerPage, UseHitsPerPageProps } from 'react-instantsearch';
 import PoweredBy from './PoweredBy';
 import { twMerge } from 'tailwind-merge';
+import useMachinePartsListingStore from 'stores/machinePartsListing/machinePartsListingStore';
 
-export const HitsPerPage = (props: UseHitsPerPageProps) => {
+interface Props extends UseHitsPerPageProps {
+  onFindApiPageSizeChange?: (pageSize: number) => void;
+  useFindApiPageSize?: boolean;
+  showPageSize?: boolean;
+}
+
+export const HitsPerPage = ({
+  onFindApiPageSizeChange,
+  useFindApiPageSize = false,
+  showPageSize = true,
+  ...props
+}: Props) => {
   const { items, refine } = useHitsPerPage(props);
   const { value: currentValue } =
     items.find(({ isRefined }) => isRefined)! || {};
-
+  const pageSize = useMachinePartsListingStore(state => state.pageSize);
   const { t } = useTranslation();
+  const isAlgoliaEnabled = window.settings.algolia.enabled;
+  const controlAlgoliaPageSize = isAlgoliaEnabled && !useFindApiPageSize;
+  const options = controlAlgoliaPageSize ? items : props.items || items;
+  const selectedValue = controlAlgoliaPageSize
+    ? String(currentValue)
+    : String(pageSize);
 
   return (
     <>
@@ -18,25 +36,44 @@ export const HitsPerPage = (props: UseHitsPerPageProps) => {
           'shadow-ds-1',
         )}
       >
-        <div className="self-stretch pl-4 pr-6 border-r border-solid border-[#DDDEE7] justify-center items-center gap-1 flex">
-          <div className="text-[#3B3E5F] text-[13px] font-normal font-['Source Sans 3'] leading-none tracking-tight">
-            {t('Items per page')}:
+        {showPageSize && (
+          <div className="self-stretch pl-4 pr-6 border-r border-solid border-[#DDDEE7] justify-center items-center gap-1 flex">
+            <div className="text-[#3B3E5F] text-[13px] font-normal font-['Source Sans 3'] leading-none tracking-tight">
+              {t('Items per page')}:
+            </div>
+            <select
+              className="bg-transparent text-[13px] outline-none"
+              onChange={event => {
+                const nextPageSize = Number(event.target.value);
+                if (controlAlgoliaPageSize) {
+                  refine(nextPageSize);
+                  return;
+                }
+                onFindApiPageSizeChange?.(nextPageSize);
+              }}
+              value={selectedValue}
+            >
+              {options.map(item => (
+                <option key={item.value} value={item.value}>
+                  {item.label}
+                </option>
+              ))}
+            </select>
           </div>
-          <select
-            className="bg-transparent text-[13px] outline-none"
-            onChange={event => {
-              refine(Number(event.target.value));
+        )}
+        {!isAlgoliaEnabled || !showPageSize ? (
+          <div
+            style={{
+              display: 'flex',
+              justifyContent: 'end',
+              marginLeft: 'auto',
             }}
-            value={String(currentValue)}
           >
-            {items.map(item => (
-              <option key={item.value} value={item.value}>
-                {item.label}
-              </option>
-            ))}
-          </select>
-        </div>
-        {window.settings.showPoweredByNyris && <PoweredBy />}
+            {window.settings.showPoweredByNyris && <PoweredBy />}
+          </div>
+        ) : (
+          window.settings.showPoweredByNyris && <PoweredBy />
+        )}
       </div>
     </>
   );

package/src/components/ImagePreview.tsx

@@ -12,6 +12,8 @@ import { DEFAULT_REGION } from '../constants';
 import { useImageSearch } from 'hooks/useImageSearch';
 import useRequestStore from 'stores/request/requestStore';
 import useResultStore from 'stores/result/resultStore';
+import { hasActiveMachineScope } from 'stores/scope/scopeStore';
+import { firstMachinePartsListingText } from 'stores/machinePartsListing/machinePartsListingStore';
 
 function ImagePreviewComponent({
   showAdjustInfo = false,
@@ -52,7 +54,7 @@ function ImagePreviewComponent({
   const detectedRegions = useResultStore(state => state.detectedRegions);
   const resetResultStore = useResultStore(state => state.reset);
 
-  const { singleImageSearch } = useImageSearch();
+  const { singleImageSearch, searchMachinePartsListing } = useImageSearch();
 
   const currentIndex = requestImages.length - 1;
 
@@ -86,6 +88,33 @@ function ImagePreviewComponent({
   }, []);
 
   const onImageRemove = () => {
+    if (hasActiveMachineScope()) {
+      const keyword = (useRequestStore.getState().query || '').trim();
+      resetRegions();
+      setRequestImages([]);
+      if (keyword) {
+        void singleImageSearch({
+          text: keyword,
+          settings,
+          showFeedback: false,
+          newSearch: false,
+        });
+      } else {
+        const text = firstMachinePartsListingText();
+        useRequestStore.getState().setQuery('');
+        useRequestStore.getState().setValueInput('');
+        if (text) {
+          void searchMachinePartsListing({
+            text,
+            showFeedback: false,
+            clearPostFilters: true,
+          });
+        }
+      }
+      navigate('/result');
+      return;
+    }
+
     resetRegions();
     setRequestImages([]);
 
@@ -106,6 +135,7 @@ function ImagePreviewComponent({
         imageRegion: r,
         showFeedback: true,
         compress: false,
+        regionSelectedByUser: true,
       }).then((res: any) => {
         const specificationPrefilter =
           res?.image_analysis?.specification?.prefilter_value || null;

package/src/components/ImageUpload.tsx

@@ -12,9 +12,11 @@ import { useUploadSearch } from 'hooks/useUploadSearch';
 function ImageUpload({
   onCameraClick,
   disableDisclaimer,
+  guideOpen,
 }: {
   onCameraClick?: () => void;
   disableDisclaimer?: boolean;
+  guideOpen?: boolean;
 }) {
   const settings = window.settings;
   const user = useAuth0().user;
@@ -31,13 +33,13 @@ function ImageUpload({
 
   const showPreFilter = useMemo(() => {
     if (settings.shouldUseUserMetadata && user) {
-      if (user['/user_metadata'].value) {
+      if (user['/user_metadata']?.value) {
         setMetaFilter(user['/user_metadata'].value);
       }
     }
 
     if (settings.shouldUseUserMetadata && user) {
-      if (settings.preFilterOption && !user['/user_metadata'].value) {
+      if (settings.preFilterOption && !user['/user_metadata']?.value) {
         return true;
       }
       return false;
@@ -91,7 +93,16 @@ function ImageUpload({
             e.target.value = '';
           }}
         />
-        <Tooltip content={t('Search with an image')}>
+        <Tooltip
+          content={
+            guideOpen
+              ? t('You can now upload an image to search.')
+              : t('Search with an image')
+          }
+          open={guideOpen ? true : undefined}
+          side="top"
+          sideOffset={10}
+        >
           <label
             className={twMerge(
               'min-w-10 min-h-10 flex justify-center items-center cursor-pointer rounded-full bg-gray-100 desktop:bg-transparent hover:bg-gray-100',

package/src/components/Inquiry/InquiryModal.tsx

@@ -14,6 +14,8 @@ import Tooltip from 'components/Tooltip/TooltipComponent';
 
 import { useTranslation } from 'react-i18next';
 import { createImage } from '../../services/visualSearch';
+import { trackClick } from 'services/Feedback';
+import { CLICK_SUBTYPE } from 'services/feedbackSubtypes';
 interface Props {
   requestImage: any;
   selectedRegion: any;
@@ -123,6 +125,7 @@ export default function InquiryModal({
       try {
         await emailjs.send(serviceId, templateId, body);
         ToastHelper.success(t('Request sent successfully'));
+        trackClick(CLICK_SUBTYPE.RAISE_INQUIRY);
       } catch (error) {
         toast(
           () => {

package/src/components/LogoutModal.tsx

@@ -1,5 +1,6 @@
 import { useAuth0 } from '@auth0/auth0-react';
 import { Dialog, DialogContent } from './Modal/Dialog';
+import { clearAuthApiKey } from 'utils/nyrisApiKey';
 
 function LogoutModal({
   setShowLogoutModal,
@@ -41,6 +42,7 @@ function LogoutModal({
               cursor: 'pointer',
             }}
             onClick={() => {
+              clearAuthApiKey();
               logout({
                 logoutParams: { returnTo: window.location.origin },
               });

package/src/components/Pagination.tsx

@@ -1,19 +1,46 @@
 import { usePagination } from 'react-instantsearch';
 import { Icon } from '@nyris/nyris-react-components';
 import { twMerge } from 'tailwind-merge';
+import { visibleMachinePartsPageIndexes } from 'services/machinePartsPage';
 
 export const Pagination = ({
   isLoading,
   className,
+  pageCount,
+  pageIndex = 0,
+  onPageChange,
 }: {
   isLoading: boolean;
   className?: string;
+  pageCount?: number;
+  pageIndex?: number;
+  onPageChange?: (pageIndex: number) => void;
 }) => {
-  const { pages, currentRefinement, isFirstPage, isLastPage, refine } =
-    usePagination();
+  const algoliaPagination = usePagination();
+  const isControlled = onPageChange !== undefined;
+  const currentRefinement = isControlled
+    ? pageIndex
+    : algoliaPagination.currentRefinement;
+  const isFirstPage = isControlled
+    ? currentRefinement <= 0
+    : algoliaPagination.isFirstPage;
+  const isLastPage = isControlled
+    ? currentRefinement >= (pageCount ?? 1) - 1
+    : algoliaPagination.isLastPage;
+  const pages = isControlled
+    ? visibleMachinePartsPageIndexes(currentRefinement, pageCount ?? 0)
+    : algoliaPagination.pages;
   const previousPageIndex = currentRefinement - 1;
   const nextPageIndex = currentRefinement + 1;
 
+  const selectPage = (page: number) => {
+    if (onPageChange) {
+      onPageChange(page);
+      return;
+    }
+    algoliaPagination.refine(page);
+  };
+
   return (
     <div
       className={twMerge(
@@ -22,13 +49,14 @@ export const Pagination = ({
         }`,
         className,
       )}
+      data-page-count={isControlled ? pageCount : undefined}
     >
       <div className="w-12 h-12 p-3.5 justify-center items-center flex">
         <div
           className="w-5 h-5 relative flex-col justify-start items-start flex cursor-pointer"
           onClick={() => {
             if (isFirstPage) return;
-            refine(previousPageIndex);
+            selectPage(previousPageIndex);
           }}
         >
           <Icon name="caret_left" className="w-5 h-5" />
@@ -43,8 +71,7 @@ export const Pagination = ({
             className="w-12 px-4 pt-[15px] flex-col justify-end items-center gap-[11px] inline-flex cursor-pointer"
             onClick={event => {
               event.preventDefault();
-
-              refine(page);
+              selectPage(page);
             }}
           >
             <div className="text-center text-sm font-normal leading-[18px] tracking-tight">
@@ -62,7 +89,7 @@ export const Pagination = ({
           className="w-5 h-5 relative flex-col justify-start items-start flex cursor-pointer"
           onClick={() => {
             if (isLastPage) return;
-            refine(nextPageIndex);
+            selectPage(nextPageIndex);
           }}
         >
           <Icon name="caret_right" className="w-5 h-5" />

package/src/components/PostFilter/PostFilter.tsx

@@ -8,6 +8,8 @@ import { useRefinementList } from 'react-instantsearch';
 import { Icon } from '@nyris/nyris-react-components';
 import { useTranslation } from 'react-i18next';
 import useScopeStore from 'stores/scope/scopeStore';
+import { trackClick } from 'services/Feedback';
+import { CLICK_SUBTYPE } from 'services/feedbackSubtypes';
 
 function PostFilter({
   attribute,
@@ -145,7 +147,12 @@ function PostFilter({
                   <input
                     type="checkbox"
                     checked={item.isRefined}
-                    onChange={() => refine(item.value)}
+                    onChange={() => {
+                      if (!item.isRefined) {
+                        trackClick(CLICK_SUBTYPE.FILTER_APPLIED);
+                      }
+                      refine(item.value);
+                    }}
                     className="cursor-pointer"
                   />
                   <span className="text-xs font-normal pl-2 pr-1">