@nyris/nyris-webapp 0.3.97 → 0.3.99

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 {

package/src/index.tsx

@@ -1,6 +1,10 @@
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
+import { bootstrapAuth0ApiKeyGuard } from 'utils/nyrisApiKey';
+
+// Clear settings.js apiKey before any React tree can issue Nyris requests (Auth0 mode).
+bootstrapAuth0ApiKeyGuard();
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement,

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';
@@ -22,7 +22,14 @@ import { getFilters } from 'services/filter';
 import { useUploadSearch } from 'hooks/useUploadSearch';
 import { ToastHelper } from 'helpers/ToastHelper';
 import { useTranslation } from 'react-i18next';
-import useScopeStore from 'stores/scope/scopeStore';
+import {
+  clearAuthApiKey,
+  isNyrisApiKeyReady,
+  useAuthApiKeyStore,
+} from 'utils/nyrisApiKey';
+import useScopeStore, { hasActiveMachineScope } from 'stores/scope/scopeStore';
+import useConversationStore from 'stores/chat/conversationStore';
+import { useResultEvaluator } from 'hooks/useResultEvaluator';
 
 i18n.use(initReactI18next).init({
   resources: translations,
@@ -34,7 +41,7 @@ i18n.use(initReactI18next).init({
 });
 
 function AppLayout(): JSX.Element {
-  const { isAuthenticated } = useAuth0();
+  const { isAuthenticated, logout } = useAuth0();
   const { t } = useTranslation();
   const { auth0, alogoliaFilterField, showPoweredByNyris } = window.settings;
   const { uploadFile } = useUploadSearch();
@@ -61,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);
@@ -92,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);
@@ -114,13 +159,13 @@ function AppLayout(): JSX.Element {
 
   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;
@@ -134,7 +179,15 @@ function AppLayout(): JSX.Element {
     user,
   ]);
 
+  const authApiKeyVersion = useAuthApiKeyStore(state => state.version);
+  const isMissingAuthApiKey = useAuthApiKeyStore(state => state.isMissingClaim);
+  const isApiKeyReady = isNyrisApiKeyReady();
+
   const getPreFilters = useCallback(async () => {
+    if (!isNyrisApiKeyReady()) {
+      return;
+    }
+
     setPreFilterLoading(true);
     try {
       const res = await getFilters(1000, settings);
@@ -147,10 +200,10 @@ function AppLayout(): JSX.Element {
   }, [settings, setPreFilterList, setPreFilterLoading]);
 
   useEffect(() => {
-    if (showPreFilter && !settings.scopeFilter) {
+    if (showPreFilter && !settings.scopeFilter && isApiKeyReady) {
       getPreFilters();
     }
-  }, [getPreFilters, showPreFilter, settings.scopeFilter]);
+  }, [getPreFilters, showPreFilter, settings.scopeFilter, isApiKeyReady, authApiKeyVersion]);
 
   const getImageFromClipboard = useCallback(
     (event: ClipboardEvent): File | null => {
@@ -208,12 +261,17 @@ function AppLayout(): JSX.Element {
       return;
     }
 
+    // Auth0: only listen once authApiKey is resolved (not while waiting / missing claim).
+    if (auth0.enabled && !isApiKeyReady) {
+      return;
+    }
+
     document.addEventListener('paste', handleClipboardPaste);
 
     return () => {
       document.removeEventListener('paste', handleClipboardPaste);
     };
-  }, [handleClipboardPaste, showLayout]);
+  }, [auth0.enabled, handleClipboardPaste, isApiKeyReady, showLayout]);
 
   const applyScopeFilter = (filters: string | undefined) => {
     const scopeFilterClause =
@@ -238,6 +296,34 @@ function AppLayout(): JSX.Element {
     return <Outlet />;
   }
 
+  // Auth0 mode: wait for AuthApiKeySync before rendering search UI / prefilters.
+  if (auth0.enabled && !isApiKeyReady && !isMissingAuthApiKey) {
+    return <div />;
+  }
+
+  if (isMissingAuthApiKey) {
+    return (
+      <div className="full-height flex flex-col items-center justify-center bg-[#F3F4F8] p-6 text-center">
+        <p className="mt-2 max-w-md text-sm text-gray-600">
+          Search is currently unavailable for your account. Please contact your
+          administrator.
+        </p>
+        <button
+          type="button"
+          className="mt-6 bg-[#2B2C46] px-6 py-3 text-sm text-white"
+          onClick={() => {
+            clearAuthApiKey();
+            logout({
+              logoutParams: { returnTo: window.location.origin },
+            });
+          }}
+        >
+          {t('Log out')}
+        </button>
+      </div>
+    );
+  }
+
   return (
     <div className="full-height flex flex-col bg-[#F3F4F8]">
       <div>

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>

package/src/pages/Logout.tsx

@@ -1,5 +1,6 @@
 import { useEffect } from 'react';
 import { useAuth0 } from '@auth0/auth0-react';
+import { clearAuthApiKey } from 'utils/nyrisApiKey';
 
 const Logout = () => {
   const { user, isAuthenticated, isLoading, loginWithRedirect, logout } =
@@ -10,6 +11,7 @@ const Logout = () => {
     if (!isLoading && !user && !isAuthenticated && auth0.enabled) {
       loginWithRedirect();
     } else if (isAuthenticated) {
+      clearAuthApiKey();
       logout({ logoutParams: { returnTo: window.location.origin } });
     } else if (!auth0.enabled) {
       window.location.href = '/';