@nyris/nyris-webapp 0.3.98 → 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,17 +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(
@@ -73,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,
   );
@@ -98,6 +214,7 @@ export const useImageSearch = () => {
       preFilterParams,
       clearPostFilter,
       text,
+      regionSelectedByUser = false,
     }: {
       image?: any;
       settings: AppSettings;
@@ -108,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('');
@@ -134,6 +256,7 @@ export const useImageSearch = () => {
             errorMessage: null,
           });
         }
+        setRequestQuality(null);
         useRequestStore.getState().setGroundingQuery('');
         useResultStore.getState().setShowingGroundingFilterResult(false);
         startNewSession();
@@ -182,6 +305,7 @@ export const useImageSearch = () => {
         canvasImage = await createImage(compressedBase64 || blob);
 
         requestImage = await createImage(blob);
+        if (!isCurrentSearch()) return;
 
         if (!imageRegion) {
           setRequestImages([canvasImage]);
@@ -191,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;
         }
       }
 
@@ -214,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({
@@ -229,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({
@@ -277,6 +405,7 @@ export const useImageSearch = () => {
             });
           })
           .catch(error => {
+            if (!isCurrentSearch()) return;
             const timeout = String(error?.message || '').includes(
               'SMART_FILTER_TIMEOUT',
             );
@@ -293,6 +422,54 @@ 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;
@@ -313,6 +490,14 @@ export const useImageSearch = () => {
         }
       }
 
+      const requestedText = isUndefined(text)
+        ? useRequestStore.getState().query
+        : text;
+      const keyword =
+        typeof requestedText === 'string' && requestedText.length > 0
+          ? requestedText
+          : undefined;
+
       try {
         res = await find({
           image: requestImage,
@@ -329,13 +514,13 @@ 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);
@@ -372,6 +557,13 @@ export const useImageSearch = () => {
         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;
 
@@ -390,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> '];
@@ -401,7 +594,9 @@ export const useImageSearch = () => {
           : '';
         const filterSkusString = [...nonEmptyFilter, ...filterSkus].join('OR ');
 
-        setAlgoliaFilter(filterSkusString);
+        if (!hasActiveMachineScope()) {
+          setAlgoliaFilter(filterSkusString);
+        }
         setIsFindApiLoading(false);
 
         if (showFeedback) {
@@ -417,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;
     },
@@ -436,7 +640,6 @@ export const useImageSearch = () => {
       setDetectedRegions,
       setRegions,
       metaFilter,
-      query,
       setFindApiProducts,
       setImageAnalysis,
       setSessionId,
@@ -453,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,
+  };
+}

package/src/hooks/useResultEvaluator.ts

@@ -47,10 +47,18 @@ export function useResultEvaluator() {
     async ({
       imageAnalysis,
       activeProducts,
+      query,
     }: {
       imageAnalysis: any;
       activeProducts: any[];
+      query: string;
     }) => {
+      // Bind this run to the current session; a newer search calls
+      // startNewSession, which makes any in-flight evaluation stale.
+      const runSessionId = useConversationStore.getState().sessionId;
+      const isStale = () =>
+        useConversationStore.getState().sessionId !== runSessionId;
+
       setIsLoading(true);
       setError(null);
       setRelatedPartsTableSuggestions([]);
@@ -207,12 +215,22 @@ export function useResultEvaluator() {
           }
         });
 
+        const requestImage = useRequestStore.getState().requestImages;
+        const regions = useRequestStore.getState().regions;
+        const hasRequestImage = requestImage && requestImage[0];
+
+        const evaluationTarget = hasRequestImage
+          ? 'the image'
+          : 'the user query (keyword input)';
+
         const userPrompt = `Evaluate these search results:
 
-IMAGE DESCRIPTION: ${imageDescription}
+user query: ${query || 'N/A'}
+
+IMAGE DESCRIPTION: ${hasRequestImage ? imageDescription : 'N/A'}
 
 SPECIFICATION (from image analysis):
-${JSON.stringify(p4Specification, null, 2)}
+${hasRequestImage ? JSON.stringify(p4Specification, null, 2) : 'N/A'}
 
 TOP 20 RESULTS WITH METADATA:
 ${resultsSummary
@@ -227,7 +245,7 @@ ${JSON.stringify(attributeFrequency, null, 2)}
 
 TOTAL RESULTS: ${resultsSummary.length}
 
-Evaluate if these results match the image. If they do (same type of product), route to P3 and suggest filter options based on the COMMON ATTRIBUTES found above (like voltage, size, brand). Do NOT suggest the obvious category match.`;
+Evaluate if these results match ${evaluationTarget}. If they do (same type of product), route to P3 and suggest filter options based on the COMMON ATTRIBUTES found above (like voltage, size, brand). Do NOT suggest the obvious category match.`;
 
         const productsForImages = activeProducts.slice(0, 30);
         const imageResults = await Promise.all(
@@ -268,24 +286,27 @@ Evaluate if these results match the image. If they do (same type of product), ro
           }
         });
 
-        const requestImage = useRequestStore.getState().requestImages;
-        const regions = useRequestStore.getState().regions;
-        const croppedCanvas = cropImage(requestImage[0], regions[0]);
-        const base64Image = canvasToBase64(croppedCanvas, 'image/jpeg', 1);
+        const multimodalInputs: any[] = [
+          {
+            metadata: userPrompt,
+          },
+        ];
+
+        if (hasRequestImage) {
+          const croppedCanvas = cropImage(requestImage[0], regions[0]);
+          const base64Image = canvasToBase64(croppedCanvas, 'image/jpeg', 1);
+          multimodalInputs.push({
+            metadata: 'request_image',
+            mimeType: 'image/jpeg',
+            image: base64Image,
+          });
+        }
+
+        multimodalInputs.push(...productImageParts);
 
         const response = await chatAnalysis({
           promptKey: 'result_evaluator_prompt',
-          multimodalInputs: [
-            {
-              metadata: userPrompt,
-            },
-            {
-              metadata: 'request_image',
-              mimeType: 'image/jpeg',
-              image: base64Image,
-            },
-            ...productImageParts,
-          ],
+          multimodalInputs,
         });
 
         const evaluation: P2EvaluationResult = response;
@@ -315,6 +336,8 @@ Evaluate if these results match the image. If they do (same type of product), ro
         // Check lookup table for related parts on fresh image searches and store globally.
         const table = await loadRelatedPartsTable();
 
+        if (isStale()) return;
+
         const tableSuggestions = lookupRelatedParts(
           table,
           imageAnalysis?.specification?.product_category || '',
@@ -371,6 +394,7 @@ Evaluate if these results match the image. If they do (same type of product), ro
         );
       } catch (err: any) {
         console.error('result_evaluator_prompt', err);
+        if (isStale()) return;
         setRelatedPartsTableSuggestions([]);
         setError(err.message || 'Failed to evaluate results');
 
@@ -390,7 +414,7 @@ Evaluate if these results match the image. If they do (same type of product), ro
           ],
         );
       } finally {
-        setIsLoading(false);
+        if (!isStale()) setIsLoading(false);
       }
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps

package/src/index.css

@@ -283,7 +283,7 @@ h2 {
 
 h1 {
   font-size: 25px;
-  margin: 0 auto 25px;
+  margin: 0 auto;
 }
 
 h1.entry-title a {