@nyris/nyris-webapp 0.3.98 → 0.4.0

package/src/hooks/useGoodResultsChat.ts

@@ -7,18 +7,20 @@
  */
 
 import { useCallback, useRef } from 'react';
-import useConversationStore, {
-  QuickReplyOption,
-  ActionType,
-} from 'stores/chat/conversationStore';
+import useConversationStore from 'stores/chat/conversationStore';
 import useSmartFiltersStore from 'stores/smartFilters/smartFiltersStore';
 import useResultStore from 'stores/result/resultStore';
 import useRequestStore from 'stores/request/requestStore';
 import { chatAnalysis } from 'services/vizo';
+import { getChatProductMetadata } from 'utils/chatProductMetadata';
 import {
   fetchProductImageBase64,
   getProductImageUrl,
 } from 'utils/fetchProductImage';
+import {
+  normalizeChatAssistantResponse,
+  P3Response,
+} from 'utils/normalizeChatAssistantResponse';
 
 /**
  * Extracts search keywords from a user's natural language description.
@@ -138,18 +140,6 @@ function extractSearchKeywords(description: string): string {
   );
 }
 
-interface P3Response {
-  message: string;
-  action: {
-    type: ActionType;
-    key?: string;
-    value?: string;
-    matched_ids?: string[];
-    matched_indices?: number[]; // Legacy fallback
-  };
-  options: QuickReplyOption[];
-}
-
 export function useGoodResultsChat() {
   const {
     messages,
@@ -245,7 +235,7 @@ export function useGoodResultsChat() {
               id: p.sku || p.objectID || `product-${i}`,
               title: title || 'Untitled',
               brand: p.brand || '',
-              description: (p.description || '').substring(0, 200),
+              description: p.description || '',
               mpn: p.customIds?.mpn || p.ids?.mpn || '',
             };
           });
@@ -278,7 +268,7 @@ export function useGoodResultsChat() {
               content: m.content,
             }));
 
-        // Fetch product thumbnail images with caching — send images for ALL results (up to 50)
+        // Fetch product thumbnail images with caching — send images for ALL results (up to 30)
         // Cache persists across filter operations; only clears on new search session
         const productsForImages = poolForAI.slice(0, 30);
         const currentSessionId = useConversationStore.getState().sessionId;
@@ -328,19 +318,18 @@ ${JSON.stringify(attributeFrequency, null, 2)}
 
 ${visualNotice}
 
-PRODUCT LIST (up to 50 results — each has a unique ID in [brackets] and AI-generated TAGS for type/color/shape/material. Use TAGS for filtering — they are pre-analyzed from product images. Return matching IDs in matched_ids array):
+PRODUCT LIST (up to 30 results — each JSON entry has a unique id and complete product metadata. When present, metadata._tags contains AI-generated type/color/shape/material tags pre-analyzed from product images. Use these tags for filtering. Return matching id values in matched_ids array):
 `,
         });
 
-        // Part 2: Product entries with interleaved images (for all results up to 50)
+        // Part 2: Product entries with interleaved images (for all results up to 30)
         visibleResults.forEach((r, i) => {
-          // Include AI-generated tags if available (from useProductTagger)
-          const originalProduct = poolForAI[i];
-          const tags = originalProduct?._tags;
-          const tagStr = tags
-            ? ` | TAGS: type=${tags.productType}, color=${tags.color}, shape=${tags.shape}, material=${tags.material}`
-            : '';
-          const metaLine = `id: ${r.id} | ${r.title} | brand: ${r.brand} | mpn: ${r.mpn} | desc: ${r.description}${tagStr}`;
+          const metaLine = JSON.stringify(
+            getChatProductMetadata({
+              id: r.id,
+              metadata: getChatProductMetadata(poolForAI[i]),
+            }),
+          );
 
           // Include product image if available
           if (
@@ -374,7 +363,7 @@ USER MESSAGE: ${userMessage}
 Respond to the user's message with an appropriate action and follow-up options.`,
         });
 
-        const response: P3Response = await chatAnalysis({
+        const rawResponse = await chatAnalysis({
           promptKey: 'chat_assistant_prompt',
           multimodalInputs: userParts.map(part => ({
             metadata: part.text,
@@ -382,11 +371,8 @@ Respond to the user's message with an appropriate action and follow-up options.`
             mimeType: part.inlineData?.mimeType,
           })),
         });
-
-        const responseText = response;
-
-        // Parse the JSON response
-        const p3Response: P3Response = responseText;
+        const p3Response: P3Response =
+          normalizeChatAssistantResponse(rawResponse);
 
         // Silent mode: only suggest filters, never apply actions
         if (options?.silent && p3Response.action) {
@@ -601,12 +587,15 @@ Respond to the user's message with an appropriate action and follow-up options.`
         }
 
         // Add assistant message
-        addMessage({
-          role: 'assistant',
-          content: finalMessage,
-          action: p3Response.action,
-          options: finalOptions,
-        });
+        addMessage(
+          {
+            role: 'assistant',
+            content: finalMessage,
+            action: p3Response.action,
+            options: finalOptions,
+          },
+          { isApiResponse: true },
+        );
       } catch (err: any) {
         console.error('[P3] Error:', err);
         setError(err.message || 'Failed to process message');

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,
+  };
+}