@nyris/nyris-webapp 0.3.97 → 0.3.99

package/src/hooks/useImageSearch.ts

@@ -1,4 +1,5 @@
 import { useCallback } from 'react';
+import { invalidatePostFilterRequests } from 'components/PostFilter/PostFilterFindApi';
 import { RectCoords } from '@nyris/nyris-api';
 import { isEmpty, isUndefined } from 'lodash';
 
@@ -17,16 +18,131 @@ import { isHEIC } from 'utils/misc';
 import useResultEvaluator from './useResultEvaluator';
 import useConversationStore from 'stores/chat/conversationStore';
 import { useGroundedSearch } from './useGroundedSearch';
-import { generateSmartFilters } from '../services/vizo';
-import { cropImage } from 'utils/cropImageToBase64';
-import { invalidatePostFilterRequests } from 'components/PostFilter/PostFilterFindApi';
+import { chatAnalysis, generateSmartFilters } from '../services/vizo';
+import { parseScopeIdChatResponse } from 'components/ScopeSelect/parseScopeIdResponse';
+import { lookupScopeById } from 'services/scopeLookup';
+import { canvasToBase64, cropImage } from 'utils/cropImageToBase64';
+import useScopeStore, { hasActiveMachineScope } from 'stores/scope/scopeStore';
+import { derivePostFilterFacetsFromResults } from 'utils/derivePostFilterFacets';
 import { useAuth0 } from '@auth0/auth0-react';
+import { isNyrisApiKeyReady } from 'utils/nyrisApiKey';
+import { trackRegion } from 'services/Feedback';
+import { REGION_SUBTYPE } from 'services/feedbackSubtypes';
+
+export type TypePlateScopeResult =
+  | { status: 'applied'; itemKeys: string[] }
+  | { status: 'empty' }
+  | { status: 'not_found' }
+  | { status: 'unavailable' };
+
+export async function applyScopeById(
+  scopeId: string,
+): Promise<TypePlateScopeResult> {
+  const lookup = await lookupScopeById(scopeId);
+  if (lookup.status !== 'found') {
+    return { status: lookup.status };
+  }
+
+  useScopeStore
+    .getState()
+    .setScope(lookup.itemKeys, lookup.filterAttributes, scopeId);
+  return { status: 'applied', itemKeys: lookup.itemKeys };
+}
+
+/**
+ * Extract scopeId from a type-plate image. Does not call GET /v1/scopes.
+ */
+export async function extractScopeIdFromTypePlate(file: File): Promise<{
+  extractedScopeId: string;
+  status: 'extracted' | 'not_found' | 'unavailable';
+}> {
+  const settings = window.settings;
+  if (!settings.scopes?.scopeID) {
+    return { extractedScopeId: '', status: 'unavailable' };
+  }
+
+  if (!isNyrisApiKeyReady()) {
+    return { extractedScopeId: '', status: 'unavailable' };
+  }
+
+  const requestImage = await createImage(file);
+  const croppedCanvas = cropImage(requestImage);
+  const base64Image = canvasToBase64(croppedCanvas, 'image/jpeg', 1);
+  const parts: {
+    text?: string;
+    inlineData?: { mimeType: string; data: string };
+  }[] = [
+    {
+      text: 'request_image',
+      inlineData: { mimeType: 'image/jpeg', data: base64Image },
+    },
+  ];
+
+  const response = await chatAnalysis({
+    promptKey: 'scope_id',
+    multimodalInputs: parts.map(p =>
+      p.inlineData
+        ? {
+            metadata: p.text || '',
+            mimeType: p.inlineData.mimeType,
+            image: p.inlineData.data,
+          }
+        : {
+            metadata: p.text || '',
+          },
+    ),
+  });
+
+  const parsed = parseScopeIdChatResponse(response);
+  if (parsed.status !== 'extracted') {
+    return { extractedScopeId: '', status: 'not_found' };
+  }
+  return { extractedScopeId: parsed.serialNumber, status: 'extracted' };
+}
+
+/**
+ * Nameplate upload only resolves scope context (itemKeys).
+ * Does not run /find or navigate — normal searches happen afterwards.
+ */
+export async function resolveTypePlateScope(
+  file: File,
+): Promise<TypePlateScopeResult & { extractedScopeId: string }> {
+  const extract = await extractScopeIdFromTypePlate(file);
+  if (extract.status !== 'extracted') {
+    return {
+      status: extract.status === 'unavailable' ? 'unavailable' : 'not_found',
+      extractedScopeId: extract.extractedScopeId,
+    };
+  }
+  const result = await applyScopeById(extract.extractedScopeId);
+  return { ...result, extractedScopeId: extract.extractedScopeId };
+}
+
+const RECT_TOLERANCE = 1e-3;
+
+const isSameRect = (a: RectCoords, b: RectCoords) =>
+  Math.abs(a.x1 - b.x1) < RECT_TOLERANCE &&
+  Math.abs(a.y1 - b.y1) < RECT_TOLERANCE &&
+  Math.abs(a.x2 - b.x2) < RECT_TOLERANCE &&
+  Math.abs(a.y2 - b.y2) < RECT_TOLERANCE;
+
+/**
+ * A user-selected region that matches one of the detected object regions
+ * came from clicking a detection dot; anything else is a manual crop.
+ */
+const getRegionSubtype = (region: RectCoords) => {
+  const detected = useResultStore.getState().detectedRegions?.[0] || [];
+  return detected.some(entry => isSameRect(entry.normalizedRect, region))
+    ? REGION_SUBTYPE.OBJECT_DETECTION_CLICK
+    : REGION_SUBTYPE.CROP;
+};
+
+let findSearchGeneration = 0;
 
 export const useImageSearch = () => {
   const { user } = useAuth0();
 
   const setRegions = useRequestStore(state => state.setRegions);
-  const query = useRequestStore(state => state.query);
 
   const setRequestImages = useRequestStore(state => state.setRequestImages);
   const setSpecificationFilter = useRequestStore(
@@ -72,6 +188,7 @@ export const useImageSearch = () => {
     state => state.setGroundingFilterResult,
   );
   const setSmartFilters = useResultStore(state => state.setSmartFilters);
+  const setRequestQuality = useResultStore(state => state.setRequestQuality);
   const setPostFilterFacets = useResultStore(
     state => state.setPostFilterFacets,
   );
@@ -97,6 +214,7 @@ export const useImageSearch = () => {
       preFilterParams,
       clearPostFilter,
       text,
+      regionSelectedByUser = false,
     }: {
       image?: any;
       settings: AppSettings;
@@ -107,8 +225,13 @@ export const useImageSearch = () => {
       preFilterParams?: Record<string, boolean>;
       clearPostFilter?: boolean;
       text?: string;
+      /** True when the user just chose `imageRegion` (crop / detection dot). */
+      regionSelectedByUser?: boolean;
     }) => {
+      const searchGeneration = ++findSearchGeneration;
+      const isCurrentSearch = () => searchGeneration === findSearchGeneration;
       const isSmartFiltersEnabled = !!settings.useSmartFilters;
+      const isRequestQualityEnabled = !!settings.requestQuality;
       setIsFindApiLoading(true);
       // setAlgoliaProducts([]);
       useRequestStore.getState().setGroundingQuery('');
@@ -133,6 +256,7 @@ export const useImageSearch = () => {
             errorMessage: null,
           });
         }
+        setRequestQuality(null);
         useRequestStore.getState().setGroundingQuery('');
         useResultStore.getState().setShowingGroundingFilterResult(false);
         startNewSession();
@@ -181,6 +305,7 @@ export const useImageSearch = () => {
         canvasImage = await createImage(compressedBase64 || blob);
 
         requestImage = await createImage(blob);
+        if (!isCurrentSearch()) return;
 
         if (!imageRegion) {
           setRequestImages([canvasImage]);
@@ -190,10 +315,12 @@ export const useImageSearch = () => {
         if (!imageRegion) {
           try {
             let res = await findRegions(requestImage, settings);
+            if (!isCurrentSearch()) return;
             setDetectedRegions(res.regions, 0);
             region = res.selectedRegion;
             setRegions([region]);
           } catch (error) {}
+          if (!isCurrentSearch()) return;
         }
       }
 
@@ -213,6 +340,7 @@ export const useImageSearch = () => {
       ];
 
       let smartFilterPromise: Promise<void> | null = null;
+      let requestQualityPromise: Promise<string | null> | null = null;
 
       if (isSmartFiltersEnabled && requestImage && (newSearch || imageRegion)) {
         setSmartFilters({
@@ -228,6 +356,7 @@ export const useImageSearch = () => {
         const smartFilterImage = cropImage(requestImage, region);
         smartFilterPromise = generateSmartFilters({ image: smartFilterImage })
           .then(response => {
+            if (!isCurrentSearch()) return;
             const rawFilters = response?.filters;
             if (!rawFilters || typeof rawFilters !== 'object') {
               setSmartFilters({
@@ -276,6 +405,7 @@ export const useImageSearch = () => {
             });
           })
           .catch(error => {
+            if (!isCurrentSearch()) return;
             const timeout = String(error?.message || '').includes(
               'SMART_FILTER_TIMEOUT',
             );
@@ -292,23 +422,82 @@ export const useImageSearch = () => {
             });
           });
       }
+      if (
+        isRequestQualityEnabled &&
+        requestImage &&
+        (newSearch || imageRegion)
+      ) {
+        const requestQualityImage = cropImage(requestImage, region);
+        const requestQualityBase64 = canvasToBase64(
+          requestQualityImage,
+          'image/jpeg',
+          1,
+        );
+        const parts: Array<{
+          text?: string;
+          inlineData?: { mimeType: string; data: string };
+        }> = [
+          {
+            text: 'data',
+            inlineData: {
+              mimeType: 'image/jpeg',
+              data: requestQualityBase64,
+            },
+          },
+        ];
+
+        requestQualityPromise = chatAnalysis({
+          promptKey: 'request_quality',
+          multimodalInputs: parts.map(p =>
+            p.inlineData
+              ? {
+                  metadata: p.text || '',
+                  mimeType: p.inlineData.mimeType,
+                  image: p.inlineData.data,
+                }
+              : {
+                  metadata: p.text || '',
+                },
+          ),
+        })
+          .then(response => {
+            const description =
+              typeof response === 'string' ? response.trim() : '';
+            return description.length > 0 ? description : null;
+          })
+          .catch(() => null);
+      }
+      if (!requestImage) {
+        setRequestQuality(null);
+      }
 
+      const usesFindApiPostFilters =
+        !settings.algolia?.enabled && settings.postFilterOption;
+      // Crop/region finds replace results without sending postFilterSelections;
+      // clear stale selections so checkboxes match the new unfiltered grid.
       const shouldResetPostFilters =
         clearPostFilter ||
-        (!settings.algolia?.enabled &&
-          !requestImage &&
-          settings.postFilterOption);
+        (Boolean(imageRegion) && usesFindApiPostFilters) ||
+        (!requestImage && settings.postFilterOption);
 
       if (shouldResetPostFilters) {
         invalidatePostFilterRequests();
         refine();
         clearPostFilterSelections();
-        if (clearPostFilter) {
+        if (clearPostFilter || !requestImage) {
           setPostFilterFacets([]);
           setInitialFindSearchSnapshot(null);
         }
       }
 
+      const requestedText = isUndefined(text)
+        ? useRequestStore.getState().query
+        : text;
+      const keyword =
+        typeof requestedText === 'string' && requestedText.length > 0
+          ? requestedText
+          : undefined;
+
       try {
         res = await find({
           image: requestImage,
@@ -325,26 +514,56 @@ export const useImageSearch = () => {
               : undefined,
           region,
           text:
-            !window.settings.algolia.enabled && !requestImage
-              ? isUndefined(text)
-                ? query
-                : text
+            !requestImage &&
+            (hasActiveMachineScope() || !window.settings.algolia.enabled)
+              ? keyword
               : undefined,
           scopeIds: window.settings?.scopeFilter ? user?.email : undefined,
         });
+        if (!isCurrentSearch()) return;
         useResultStore.getState().resetGrounding();
 
         setFindApiProducts(res?.results);
-        const initialFacets = res?.facets || [];
-        setPostFilterFacets(initialFacets);
+
+        // Image: API facets if present, else derive from result.filters.
+        // Text: API facets only.
+        // Empty results with no facet payload may keep prior facet UI for unselect,
+        // but the search snapshot always updates to this response.
+        const isImageSearch = Boolean(requestImage);
+        const results = res?.results || [];
+        const apiFacets = Array.isArray(res?.facets) ? res.facets : [];
+        const nextFacets = isImageSearch
+          ? apiFacets.length > 0
+            ? apiFacets
+            : derivePostFilterFacetsFromResults(results)
+          : apiFacets;
+        const previousFacets = useResultStore.getState().postFilterFacets;
+        const shouldPreserveFacets =
+          results.length === 0 &&
+          nextFacets.length === 0 &&
+          Array.isArray(previousFacets) &&
+          previousFacets.length > 0;
+
+        // Facet UI may stay for recovery; snapshot always matches this search.
+        if (!shouldPreserveFacets) {
+          setPostFilterFacets(nextFacets);
+        }
         setInitialFindSearchSnapshot({
-          results: res?.results || [],
-          postFilterFacets: initialFacets,
+          results,
+          postFilterFacets: nextFacets,
         });
+
         setImageAnalysis(res?.image_analysis);
         setSessionId(res?.session);
         setRequestId(res?.id);
 
+        if (regionSelectedByUser && imageRegion && res?.id) {
+          trackRegion(imageRegion, getRegionSubtype(imageRegion), {
+            requestId: res.id,
+            sessionId: res.session,
+          });
+        }
+
         const specification = res?.image_analysis?.specification || {};
         const hasOcr = Object.keys(specification).length > 0;
 
@@ -363,6 +582,7 @@ export const useImageSearch = () => {
           evaluateResults({
             activeProducts: res?.results || [],
             imageAnalysis: res?.image_analysis,
+            query: !requestImage ? keyword || '' : '',
           });
         }
         const nonEmptyFilter: any[] = ['sku:DOES_NOT_EXIST<score=1> '];
@@ -374,7 +594,9 @@ export const useImageSearch = () => {
           : '';
         const filterSkusString = [...nonEmptyFilter, ...filterSkus].join('OR ');
 
-        setAlgoliaFilter(filterSkusString);
+        if (!hasActiveMachineScope()) {
+          setAlgoliaFilter(filterSkusString);
+        }
         setIsFindApiLoading(false);
 
         if (showFeedback) {
@@ -390,12 +612,21 @@ export const useImageSearch = () => {
           setFirstRequestImageAnalysis(res?.image_analysis);
         }
       } catch (error) {
-        setIsFindApiLoading(false);
+        if (isCurrentSearch()) {
+          setIsFindApiLoading(false);
+        }
       }
 
       if (smartFilterPromise) {
         void smartFilterPromise;
       }
+      if (requestQualityPromise) {
+        void requestQualityPromise.then(quality => {
+          if (isCurrentSearch()) {
+            setRequestQuality(quality);
+          }
+        });
+      }
 
       return res;
     },
@@ -409,7 +640,6 @@ export const useImageSearch = () => {
       setDetectedRegions,
       setRegions,
       metaFilter,
-      query,
       setFindApiProducts,
       setImageAnalysis,
       setSessionId,
@@ -426,11 +656,86 @@ export const useImageSearch = () => {
       setFirstSearchPreFilter,
       setFirstRequestImageAnalysis,
       setSmartFilters,
+      setRequestQuality,
       setPostFilterFacets,
       setInitialFindSearchSnapshot,
       user,
     ],
   );
 
-  return { singleImageSearch };
+  /**
+   * Scope-only itemKeys page. Reuses find(), but does not start a search:
+   * no Vizo session, no evaluateResults, and no first-search snapshot.
+   */
+  const searchMachinePartsListing = useCallback(
+    async ({
+      text,
+      showFeedback = false,
+      clearPostFilters = false,
+    }: {
+      text: string;
+      showFeedback?: boolean;
+      clearPostFilters?: boolean;
+    }) => {
+      if (!text) {
+        return;
+      }
+      const searchGeneration = ++findSearchGeneration;
+      const isCurrentSearch = () => searchGeneration === findSearchGeneration;
+      setIsFindApiLoading(true);
+
+      if (clearPostFilters) {
+        invalidatePostFilterRequests();
+        refine();
+        clearPostFilterSelections();
+        setPostFilterFacets([]);
+        setInitialFindSearchSnapshot(null);
+      }
+
+      try {
+        const res: any = await find({
+          settings: window.settings,
+          text,
+        });
+        if (!isCurrentSearch()) {
+          return;
+        }
+        const results = res?.results || [];
+        const facets = Array.isArray(res?.facets) ? res.facets : [];
+        setFindApiProducts(results);
+        setImageAnalysis(res?.image_analysis);
+        setSessionId(res?.session);
+        setRequestId(res?.id);
+        setPostFilterFacets(facets);
+        setInitialFindSearchSnapshot({
+          results,
+          postFilterFacets: facets,
+        });
+        useResultStore.getState().setShowingGroundingFilterResult(false);
+        setIsFindApiLoading(false);
+        if (showFeedback) {
+          setShowFeedback(true);
+        }
+        return res;
+      } catch {
+        if (isCurrentSearch()) {
+          setIsFindApiLoading(false);
+        }
+      }
+    },
+    [
+      clearPostFilterSelections,
+      refine,
+      setFindApiProducts,
+      setImageAnalysis,
+      setInitialFindSearchSnapshot,
+      setIsFindApiLoading,
+      setPostFilterFacets,
+      setRequestId,
+      setSessionId,
+      setShowFeedback,
+    ],
+  );
+
+  return { singleImageSearch, searchMachinePartsListing };
 };

package/src/hooks/useMachinePartsListingPagination.ts

@@ -0,0 +1,95 @@
+import { useCallback, useMemo } from 'react';
+import { useImageSearch } from 'hooks/useImageSearch';
+import {
+  hasActivePostFilters,
+  isScopeOnlyMachinePartsListing,
+  machinePartsPageCount,
+  machinePartsPageText,
+} from 'services/machinePartsPage';
+import useMachinePartsListingStore from 'stores/machinePartsListing/machinePartsListingStore';
+import useRequestStore from 'stores/request/requestStore';
+import useScopeStore from 'stores/scope/scopeStore';
+
+export function useMachinePartsListingPagination() {
+  const pageSize = useMachinePartsListingStore(state => state.pageSize);
+  const pageIndex = useMachinePartsListingStore(state => state.pageIndex);
+  const setPageSize = useMachinePartsListingStore(state => state.setPageSize);
+  const setPageIndex = useMachinePartsListingStore(state => state.setPageIndex);
+  const scopeId = useScopeStore(state => state.scopeId);
+  const itemKeys = useScopeStore(state => state.itemKeys);
+  const query = useRequestStore(state => state.query);
+  const requestImages = useRequestStore(state => state.requestImages);
+  const postFilterSelections = useRequestStore(
+    state => state.postFilterSelections,
+  );
+  const { searchMachinePartsListing } = useImageSearch();
+
+  const isListing = useMemo(
+    () =>
+      isScopeOnlyMachinePartsListing({
+        scopeEnabled: Boolean(window.settings.scopes?.scopeID),
+        scopeId,
+        itemKeyCount: itemKeys.length,
+        keyword: query || '',
+        hasSearchImage: requestImages.length > 0,
+        hasPostFilters: hasActivePostFilters(postFilterSelections),
+      }),
+    [itemKeys.length, postFilterSelections, query, requestImages.length, scopeId],
+  );
+
+  const pageCount = isListing
+    ? machinePartsPageCount(itemKeys.length, pageSize)
+    : 0;
+
+  const searchPage = useCallback(
+    (nextPageIndex: number, nextPageSize: number) => {
+      const text = machinePartsPageText(
+        useScopeStore.getState().itemKeys || [],
+        nextPageIndex,
+        nextPageSize,
+      );
+      if (!text) {
+        return;
+      }
+      void searchMachinePartsListing({ text });
+    },
+    [searchMachinePartsListing],
+  );
+
+  const changePage = useCallback(
+    (nextPageIndex: number) => {
+      if (!isListing || nextPageIndex === pageIndex) {
+        return;
+      }
+      if (nextPageIndex < 0 || nextPageIndex >= pageCount) {
+        return;
+      }
+      setPageIndex(nextPageIndex);
+      searchPage(nextPageIndex, pageSize);
+    },
+    [isListing, pageCount, pageIndex, pageSize, searchPage, setPageIndex],
+  );
+
+  const changePageSize = useCallback(
+    (nextPageSize: number) => {
+      if (nextPageSize === pageSize && pageIndex === 0) {
+        return;
+      }
+      setPageSize(nextPageSize);
+      if (!isListing) {
+        return;
+      }
+      searchPage(0, nextPageSize);
+    },
+    [isListing, pageIndex, pageSize, searchPage, setPageSize],
+  );
+
+  return {
+    isListing,
+    pageCount,
+    pageIndex,
+    pageSize,
+    changePage,
+    changePageSize,
+  };
+}