@nyris/nyris-webapp 0.3.98 → 0.4.0

package/src/hooks/useResultEvaluator.ts

@@ -14,6 +14,11 @@ import useConversationStore, {
 } from 'stores/chat/conversationStore';
 import useSmartFiltersStore from 'stores/smartFilters/smartFiltersStore';
 import { chatAnalysis } from 'services/vizo';
+import {
+  getChatAttributeFrequency,
+  getChatProductAttributes,
+  getChatProductMetadata,
+} from 'utils/chatProductMetadata';
 import useRequestStore from 'stores/request/requestStore';
 import { canvasToBase64, cropImage } from 'utils/cropImageToBase64';
 import {
@@ -47,10 +52,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([]);
@@ -66,29 +79,8 @@ export function useResultEvaluator() {
         const resultsSummary = activeProducts
           .slice(0, 30)
           .map((p: any, i: number) => {
-            // Extract all potentially useful metadata
-            const metadata: Record<string, any> = {};
-            const metadataFields = [
-              'voltage',
-              'size',
-              'brand',
-              'manufacturer',
-              'material',
-              'type',
-              'category',
-              'color',
-              'dimensions',
-              'power',
-              'current',
-              'connector',
-              'model',
-              'series',
-              'product_line',
-            ];
-
-            metadataFields.forEach(field => {
-              if (p[field]) metadata[field] = p[field];
-            });
+            const fullMetadata = getChatProductMetadata(p);
+            const metadata = getChatProductAttributes(fullMetadata);
 
             // Extract from title/description using common patterns
             const title = p.title || p.name || '';
@@ -173,11 +165,8 @@ export function useResultEvaluator() {
 
             return {
               rank: i + 1,
-              title: title || 'Untitled',
-              description: (p.description || '').substring(0, 100),
-              category: p.category || p.type || 'Unknown',
-              score: p.score || p.similarity || 0,
-              metadata: Object.keys(metadata).length > 0 ? metadata : null,
+              metadata: fullMetadata,
+              attributes: metadata,
             };
           });
 
@@ -195,39 +184,37 @@ export function useResultEvaluator() {
         });
 
         // Analyze common attributes across results for filter suggestions
-        const attributeFrequency: Record<string, Record<string, number>> = {};
-        resultsSummary.forEach(r => {
-          if (r.metadata) {
-            Object.entries(r.metadata).forEach(([key, value]) => {
-              if (!attributeFrequency[key]) attributeFrequency[key] = {};
-              const strValue = String(value);
-              attributeFrequency[key][strValue] =
-                (attributeFrequency[key][strValue] || 0) + 1;
-            });
-          }
-        });
+        const attributeFrequency = getChatAttributeFrequency(
+          resultsSummary.map(result => ({ metadata: result.attributes })),
+        );
+
+        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
-  .map(
-    r =>
-      `${r.rank}. ${r.title}${r.description ? ` - ${r.description}` : ''} (Score: ${r.score})${r.metadata ? `\n   Metadata: ${JSON.stringify(r.metadata)}` : ''}`,
-  )
-  .join('\n')}
 
 COMMON ATTRIBUTES FOUND IN RESULTS (for filter suggestions):
 ${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.
+
+${hasRequestImage ? 'The request image is available, use it for evaluation.' : 'The request image is not available, rely solely on the user query for evaluation. Rest of the image information is only result/response images.'}.
+`;
 
         const productsForImages = activeProducts.slice(0, 30);
         const imageResults = await Promise.all(
@@ -250,14 +237,9 @@ Evaluate if these results match the image. If they do (same type of product), ro
           mimeType?: string;
         }> = [];
 
-        resultsSummary.forEach((result, i) => {
-          const originalProduct = productsForImages[i];
-          const tags = originalProduct?._tags;
-          const tagStr = tags
-            ? ` | TAGS: type=${tags.productType}, color=${tags.color}, shape=${tags.shape}, material=${tags.material}`
-            : '';
-
-          const metaLine = `${result.rank}. ${result.title}${result.description ? ` - ${result.description}` : ''} (Score: ${result.score})${result.metadata ? ` | Metadata: ${JSON.stringify(result.metadata)}` : ''}${tagStr}`;
+        resultsSummary.forEach(({ rank, metadata }, i) => {
+          const result = { rank, metadata };
+          const metaLine = `${JSON.stringify(getChatProductMetadata(result))}. Result_images.`;
 
           if (hasVisualContext && imageResults[i]?.base64) {
             productImageParts.push({
@@ -265,27 +247,32 @@ Evaluate if these results match the image. If they do (same type of product), ro
               image: imageResults[i].base64 || '',
               mimeType: 'image/jpeg',
             });
+          } else {
+            productImageParts.push({ metadata: metaLine });
           }
         });
 
-        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 +302,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 +360,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 +380,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 {

package/src/layouts/AppLayout.tsx

@@ -1,4 +1,4 @@
-import { memo, useCallback, useEffect, useMemo } from 'react';
+import { memo, useCallback, useEffect, useMemo, useRef } from 'react';
 import { Outlet, useLocation } from 'react-router';
 
 import { useAuth0 } from '@auth0/auth0-react';
@@ -27,7 +27,9 @@ import {
   isNyrisApiKeyReady,
   useAuthApiKeyStore,
 } from 'utils/nyrisApiKey';
-import useScopeStore from 'stores/scope/scopeStore';
+import useScopeStore, { hasActiveMachineScope } from 'stores/scope/scopeStore';
+import useConversationStore from 'stores/chat/conversationStore';
+import { useResultEvaluator } from 'hooks/useResultEvaluator';
 
 i18n.use(initReactI18next).init({
   resources: translations,
@@ -66,9 +68,13 @@ function AppLayout(): JSX.Element {
   const requestImages = useRequestStore(state => state.requestImages);
   const showLoading = useRequestStore(state => state.showLoading);
 
-  const { status } = useInstantSearch();
+  const { status, results } = useInstantSearch();
   const { items } = useHits();
 
+  const isAiModeOpen = useUiStore(state => state.isAiModeOpen);
+  const { evaluateResults } = useResultEvaluator();
+  const lastAlgoliaEvaluationRef = useRef<string | null>(null);
+
   useEffect(() => {
     i18n.changeLanguage(window.settings.language);
     console.log('App version:', packageJson.version);
@@ -97,6 +103,40 @@ function AppLayout(): JSX.Element {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [items, scopeItemKeys]);
 
+  // Algolia text search never goes through singleImageSearch, so run P2 here
+  // on the Algolia hits once AI mode is open for the current query.
+  // Deliberately not keyed on the conversation session: singleImageSearch
+  // calls startNewSession before requestImages is set, and re-running on that
+  // session change would start a competing evaluation of stale Algolia hits.
+  useEffect(() => {
+    if (requestImages.length > 0 || hasActiveMachineScope()) {
+      // An image search or machine scope owns P2. Algolia hits are unscoped.
+      lastAlgoliaEvaluationRef.current = null;
+      return;
+    }
+
+    if (
+      !window.settings.algolia?.enabled ||
+      !window.settings.vizo?.chat ||
+      !isAiModeOpen ||
+      isFindApiLoading ||
+      !query ||
+      status !== 'idle' ||
+      results?.query !== query
+    ) {
+      return;
+    }
+
+    if (lastAlgoliaEvaluationRef.current === query) {
+      return;
+    }
+
+    useConversationStore.getState().startNewSession();
+    lastAlgoliaEvaluationRef.current = query;
+    evaluateResults({ activeProducts: items, imageAnalysis: undefined, query });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isAiModeOpen, isFindApiLoading, query, status, results, requestImages]);
+
   useEffect(() => {
     if (status === 'loading' || status === 'stalled') {
       setIsAlgoliaLoading(true);

package/src/pages/Home.tsx

@@ -1,5 +1,7 @@
 import { useEffect, useState } from 'react';
 import { twMerge } from 'tailwind-merge';
+import { useTranslation } from 'react-i18next';
+import { ArrowRight } from 'lucide-react';
 
 import DragDropFile from 'components/DragDropFile';
 import MobileCameraCTA from 'components/MobileCameraCTA';
@@ -15,6 +17,7 @@ import ImageUpload from 'components/ImageUpload';
 
 function Home() {
   const settings = window.settings;
+  const { t } = useTranslation();
   const { experienceVisualSearch, experienceVisualSearchImages, geoLocation } =
     settings;
   const navigate = useNavigate();
@@ -88,32 +91,75 @@ function Home() {
         ])}
       >
         {geoLocation && <LocationInfoPopup />}
-        <div className="relative flex items-center justify-center w-full gap-2">
+        <div className="relative flex w-full flex-col items-center gap-6">
           {settings.headerText && (
             <div
               className={twMerge([
                 'absolute',
-                'bottom-[49px]',
+                'bottom-full',
+                'mb-[25px]',
+                'flex',
+                'flex-col',
+                'items-center',
+                'gap-3',
                 'text-primary',
                 'font-bold',
               ])}
             >
-              <h1 className="text-[25px]">{settings.headerText}</h1>
+              <h1 className="text-[25px] m-0 mb-0">{settings.headerText}</h1>
+              {settings.scopes?.scopeID &&
+                Boolean(settings.scopes?.typePlateStepOne?.trim()) &&
+                Boolean(settings.scopes?.typePlateStepTwo?.trim()) && (
+                  <div
+                    className="flex w-full items-center justify-center"
+                    aria-label="Search flow"
+                  >
+                    <div className="flex items-center gap-1.5 shrink-0">
+                      <span className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-[#F3F4F8] border border-solid border-[#2B2C46] text-[#2B2C46] font-bold text-xs leading-none">
+                        1
+                      </span>
+                      <span className="font-semibold text-[14px] leading-none text-[#2B2C46] whitespace-nowrap">
+                        {t(settings.scopes!.typePlateStepOne!)}
+                      </span>
+                    </div>
+
+                    <div
+                      className="flex items-center flex-1 min-w-[20px] max-w-[60px] mx-2.5"
+                      aria-hidden="true"
+                    >
+                      <div className="h-[1.5px] flex-1 bg-[#2B2C46]" />
+                      <ArrowRight
+                        className="h-3.5 w-3.5 -ml-1 text-[#2B2C46] shrink-0"
+                        strokeWidth={2}
+                      />
+                    </div>
+
+                    <div className="flex items-center gap-1.5 shrink-0">
+                      <span className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-[#2B2C46] text-white font-bold text-xs leading-none">
+                        2
+                      </span>
+                      <span className="font-semibold text-[14px] leading-none text-[#2B2C46] whitespace-nowrap">
+                        {t(settings.scopes!.typePlateStepTwo!)}
+                      </span>
+                    </div>
+                  </div>
+                )}
             </div>
           )}
-
-          <TextSearch className="h-[56px]" showImageUpload={false} />
-          <div
-            className={twMerge(
-              'h-14 w-14 flex items-center justify-center rounded-full bg-[#FFFFFF] hover:bg-[#F3F4F8] border border-solid border-[#DDDEE7]',
-              'shadow-ds-2',
-            )}
-          >
-            <ImageUpload />
+          <div className="flex items-center justify-center w-full gap-2">
+            <TextSearch className="h-[56px]" showImageUpload={false} />
+            <div
+              className={twMerge(
+                'h-14 w-14 flex items-center justify-center rounded-full bg-[#FFFFFF] hover:bg-[#F3F4F8] border border-solid border-[#DDDEE7]',
+                'shadow-ds-2',
+              )}
+            >
+              <ImageUpload />
+            </div>
           </div>
         </div>
         <div className="max-w-[532px] relative w-full">
-          <DragDropFile />
+          {!settings.scopes?.scopeID && <DragDropFile />}
           {settings.experienceVisualSearch && (
             <ExperienceVisualSearchTrigger
               experienceVisualSearchBlobs={experienceVisualSearchBlobs}
@@ -148,7 +194,7 @@ function Home() {
           />
         )}
 
-        <div className="flex desktop:hidden w-full fixed bottom-12 px-2 gap-2">
+        <div className="flex desktop:hidden w-full fixed bottom-12 px-2 flex-col gap-4">
           <TextSearch className="flex md:hidden w-full " />
         </div>
       </div>