@nyris/nyris-webapp 0.3.97 → 0.3.98

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@nyris/nyris-webapp",
-  "version": "0.3.97",
+  "version": "0.3.98",
   "dependencies": {
     "@auth0/auth0-react": "^2.2.4",
     "@emailjs/browser": "^4.3.3",
     "@google/genai": "^1.46.0",
-    "@nyris/nyris-api": "^0.3.97",
-    "@nyris/nyris-react-components": "^0.3.97",
+    "@nyris/nyris-api": "^0.3.98",
+    "@nyris/nyris-react-components": "^0.3.98",
     "@radix-ui/react-accordion": "^1.2.2",
     "@radix-ui/react-dialog": "^1.1.4",
     "@radix-ui/react-popover": "^1.1.4",

package/public/js/settings.example.js

@@ -23,6 +23,7 @@ var settings = {
     },
   ],
   // Nyris - visual search
+  // When auth0.enabled is true, leave apiKey empty — the app uses Auth0 claim
   apiKey: '',
   aiApiKey: '',
   baseUrl: 'https://api.nyris.io',

package/src/components/AuthApiKeySync.tsx

@@ -0,0 +1,34 @@
+import { useAuth0 } from '@auth0/auth0-react';
+import { useEffect } from 'react';
+import {
+  applyAuthApiKey,
+  clearAuthApiKey,
+  readAuthApiKeyFromUser,
+} from 'utils/nyrisApiKey';
+
+/**
+ * Keeps window.settings.apiKey in sync with Auth0 claim
+ * `https://nyris.io/authApiKey`.
+ * Must only render inside Auth0Provider when auth0.enabled is true.
+ */
+export function AuthApiKeySync() {
+  const { user, isAuthenticated, isLoading } = useAuth0();
+
+  useEffect(() => {
+    if (isLoading) {
+      return;
+    }
+
+    if (!isAuthenticated || !user) {
+      clearAuthApiKey();
+      return;
+    }
+
+    const authApiKey = readAuthApiKeyFromUser(
+      user as Record<string, unknown>,
+    );
+    applyAuthApiKey(authApiKey);
+  }, [user, isAuthenticated, isLoading]);
+
+  return null;
+}

package/src/components/ChatAssistant/useChatAssistantLogic.ts

@@ -12,6 +12,7 @@ import {
   fetchProductImageBase64,
   getProductImageUrl,
 } from 'utils/fetchProductImage';
+import { getEffectiveApiKey } from 'utils/nyrisApiKey';
 
 export function useChatAssistantLogic() {
   const [inputValue, setInputValue] = useState('');
@@ -482,7 +483,7 @@ Each result includes a unique SKU in brackets. Use the result thumbnails and met
     setCatalogSearching(true);
     try {
       const settings = (window as any).settings;
-      const nyrisKey = settings?.apiKey || settings?.nyrisApiKey;
+      const nyrisKey = getEffectiveApiKey();
       const baseUrl = settings?.baseUrl || 'https://api.nyris.io';
 
       store.setPreCatalogResults([...activeProducts]);
@@ -580,7 +581,7 @@ Each result includes a unique SKU in brackets. Use the result thumbnails and met
 
     try {
       const settings = (window as any).settings;
-      const nyrisKey = settings?.apiKey || settings?.nyrisApiKey;
+      const nyrisKey = getEffectiveApiKey();
       const baseUrl = settings?.baseUrl || 'https://api.nyris.io';
 
       let searchQuery = rawText;

package/src/components/ImageUpload.tsx

@@ -31,13 +31,13 @@ function ImageUpload({
 
   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;

package/src/components/LogoutModal.tsx

@@ -1,5 +1,6 @@
 import { useAuth0 } from '@auth0/auth0-react';
 import { Dialog, DialogContent } from './Modal/Dialog';
+import { clearAuthApiKey } from 'utils/nyrisApiKey';
 
 function LogoutModal({
   setShowLogoutModal,
@@ -41,6 +42,7 @@ function LogoutModal({
               cursor: 'pointer',
             }}
             onClick={() => {
+              clearAuthApiKey();
               logout({
                 logoutParams: { returnTo: window.location.origin },
               });

package/src/components/PostFilter/PostFilterComponent.tsx

@@ -6,7 +6,6 @@ import {
 import React, { useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { twMerge } from 'tailwind-merge';
-import PostFilter from './PostFilter';
 import PostFilterFindApi from './PostFilterFindApi';
 
 function PostFilterComponent({ className }: { className?: string }) {
@@ -117,27 +116,14 @@ function PostFilterComponent({ className }: { className?: string }) {
               refinement.attribute;
 
             return (
-              <React.Fragment key={index}>
-                {window.settings.algolia.enabled && (
-                  <PostFilter
-                    attribute={refinement.attribute}
-                    label={refinement.header}
-                    searchable={refinement.searchable}
-                    onVisibilityChange={handleVisibilityChange}
-                    isLastVisible={isLastVisible}
-                  />
-                )}
-
-                {!window.settings.algolia.enabled && (
-                  <PostFilterFindApi
-                    attribute={refinement.attribute}
-                    label={refinement.header}
-                    searchable={false}
-                    onVisibilityChange={handleVisibilityChange}
-                    isLastVisible={isLastVisible}
-                  />
-                )}
-              </React.Fragment>
+              <PostFilterFindApi
+                key={index}
+                attribute={refinement.attribute}
+                label={refinement.header}
+                searchable={false}
+                onVisibilityChange={handleVisibilityChange}
+                isLastVisible={isLastVisible}
+              />
             );
           },
         )}

package/src/components/Product/ProductList.tsx

@@ -63,6 +63,7 @@ function ProductList({ sendFeedBackAction }: Props): JSX.Element {
   }, [productsFromFindApi, query, requestImages]);
 
   const postFilteredProducts = useMemo(() => {
+    // Find-API post-filters re-query when Algolia is off; do not also client-filter.
     if (!window.settings.algolia?.enabled && window.settings.postFilterOption) {
       return textFilteredProducts;
     }
@@ -114,6 +115,7 @@ function ProductList({ sendFeedBackAction }: Props): JSX.Element {
       );
     }
 
+    // Product source follows search backend (Algolia vs Find API), not postFilterOption.
     if (!isAlgoliaEnabled) {
       return baseFindApiProducts;
     }

package/src/components/SidePanel.tsx

@@ -18,6 +18,9 @@ export default function SidePanel({ className }: { className?: string }) {
   const specificationFilter = useRequestStore(
     state => state.specificationFilter,
   );
+  const postFilterSelections = useRequestStore(
+    state => state.postFilterSelections,
+  );
 
   const findApiProducts = useResultStore(state => state.productsFromFindApi);
 
@@ -45,13 +48,20 @@ export default function SidePanel({ className }: { className?: string }) {
 
   const effectiveGroundingResults = useEffectiveGroundingResults();
 
+  const hasPostFilterSelections = Object.values(
+    postFilterSelections || {},
+  ).some(values => values?.length > 0);
+
   if (!showPostFilter && requestImages.length === 0) {
     return <></>;
   }
 
+  // Keep the panel when post-filters are applied so the user can unselect
+  // after a filtered find returns zero results.
   if (
     requestImages.length === 0 &&
     findApiProducts.length === 0 &&
+    !hasPostFilterSelections &&
     !window.settings.algolia.enabled
   ) {
     return <></>;

package/src/components/TextSearch.tsx

@@ -65,13 +65,13 @@ function TextSearch({
 
   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;
@@ -103,7 +103,7 @@ function TextSearch({
           imageRegion: regions[0],
           text: value,
           settings,
-          showFeedback: false,
+          showFeedback: true,
           newSearch: false,
         });
       }

package/src/hooks/useImageSearch.ts

@@ -20,6 +20,7 @@ import { useGroundedSearch } from './useGroundedSearch';
 import { generateSmartFilters } from '../services/vizo';
 import { cropImage } from 'utils/cropImageToBase64';
 import { invalidatePostFilterRequests } from 'components/PostFilter/PostFilterFindApi';
+import { derivePostFilterFacetsFromResults } from 'utils/derivePostFilterFacets';
 import { useAuth0 } from '@auth0/auth0-react';
 
 export const useImageSearch = () => {
@@ -293,17 +294,20 @@ export const useImageSearch = () => {
           });
       }
 
+      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);
         }
@@ -335,12 +339,35 @@ export const useImageSearch = () => {
         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);

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

@@ -22,6 +22,11 @@ import { getFilters } from 'services/filter';
 import { useUploadSearch } from 'hooks/useUploadSearch';
 import { ToastHelper } from 'helpers/ToastHelper';
 import { useTranslation } from 'react-i18next';
+import {
+  clearAuthApiKey,
+  isNyrisApiKeyReady,
+  useAuthApiKeyStore,
+} from 'utils/nyrisApiKey';
 import useScopeStore from 'stores/scope/scopeStore';
 
 i18n.use(initReactI18next).init({
@@ -34,7 +39,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();
@@ -114,13 +119,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 +139,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 +160,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 +221,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 +256,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/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 = '/';

package/src/pages/Result.tsx

@@ -174,16 +174,21 @@ function Results() {
   ]);
 
   const disablePostFilter = useMemo(() => {
-    if (!settings.algolia.enabled) {
+    // Find-API post-filters do not depend on Algolia hits.
+    if (!settings.algolia.enabled || settings.postFilterOption) {
       return false;
     }
 
-    return settings.postFilterOption && productsFromAlgolia.length > 0
-      ? false
-      : true;
+    return productsFromAlgolia.length > 0 ? false : true;
   }, [settings, productsFromAlgolia]);
 
-  const isPostFilterApplied = items.length > 0;
+  const postFilterSelections = useRequestStore(
+    state => state.postFilterSelections,
+  );
+  const hasFindApiPostFilterSelection = Object.values(
+    postFilterSelections || {},
+  ).some(values => values?.length > 0);
+  const isPostFilterApplied = items.length > 0 || hasFindApiPostFilterSelection;
 
   return (
     <>
@@ -364,7 +369,8 @@ function Results() {
 
                         {feedbackStatus === 'visible' &&
                           !showFeedbackSuccess &&
-                          productsFromAlgolia.length > 0 && (
+                          (productsFromAlgolia.length > 0 ||
+                            productsFromFindApi.length > 0) && (
                             <div className={'feedback-floating'}>
                               <div className="feedback-section feedback-backdrop-blur" />
 

package/src/providers/AuthProvider.tsx

@@ -1,4 +1,8 @@
 import { Auth0Provider } from '@auth0/auth0-react';
+import { AuthApiKeySync } from 'components/AuthApiKeySync';
+import { bootstrapAuth0ApiKeyGuard } from 'utils/nyrisApiKey';
+
+bootstrapAuth0ApiKeyGuard();
 
 const AuthProvider = ({ children }: any) => {
   const settings = window.settings;
@@ -15,6 +19,7 @@ const AuthProvider = ({ children }: any) => {
         redirect_uri: window.location.origin,
       }}
     >
+      <AuthApiKeySync />
       {children}
     </Auth0Provider>
   );

package/src/services/Feedback.ts

@@ -3,6 +3,7 @@ import NyrisAPI, {
   NyrisAPISettings,
   RectCoords,
 } from '@nyris/nyris-api';
+import { getNyrisSettings } from 'utils/nyrisApiKey';
 
 export const feedbackSuccessEpic = async (
   requestId: string,
@@ -62,7 +63,7 @@ export const sendFeedbackByApi = async (
   requestId: string | undefined,
   payload: FeedbackEventPayload,
 ) => {
-  const api = new NyrisAPI(settings);
+  const api = new NyrisAPI(getNyrisSettings(settings));
   if (requestId) {
     try {
       await api.sendFeedback({ sessionId, requestId, payload }).then(() => {});

package/src/services/filter.ts

@@ -1,4 +1,5 @@
 import NyrisAPI, { NyrisAPISettings } from '@nyris/nyris-api';
+import { getNyrisSettings } from 'utils/nyrisApiKey';
 
 export interface Filter {
   key?: string;
@@ -9,7 +10,7 @@ export const getFilters = async (
   number: number = 10,
   settings: NyrisAPISettings,
 ) => {
-  const nyrisApi = new NyrisAPI(settings);
+  const nyrisApi = new NyrisAPI(getNyrisSettings(settings));
   return nyrisApi.getFilters(number);
 };
 
@@ -18,7 +19,7 @@ export const searchFilters = async (
   value: string,
   settingsNyris: NyrisAPISettings,
 ) => {
-  const nyrisApi = new NyrisAPI(settingsNyris);
+  const nyrisApi = new NyrisAPI(getNyrisSettings(settingsNyris));
   const newValue = value ? value : '';
   return nyrisApi.searchFilters(key, newValue);
 };

package/src/services/visualSearch.ts

@@ -9,6 +9,7 @@ import { isEqual } from 'lodash';
 
 import { DEFAULT_REGION } from '../constants';
 import { getUserLocation } from 'helpers/getGeoLocation';
+import { getNyrisSettings } from 'utils/nyrisApiKey';
 
 export interface Filter {
   key?: string;
@@ -41,7 +42,7 @@ export const findRegions = async (
   image: HTMLCanvasElement,
   settings: NyrisAPISettings,
 ) => {
-  const nyrisApi = new NyrisAPI(settings);
+  const nyrisApi = new NyrisAPI(getNyrisSettings(settings));
   let regions = await nyrisApi.findRegions(image);
   const selectedRegion = getRegionByMaxConfidence(regions);
   return {
@@ -67,7 +68,7 @@ export const find = async ({
   text?: string;
   scopeIds?: string;
 }) => {
-  const nyrisApi = new NyrisAPI(settings);
+  const nyrisApi = new NyrisAPI(getNyrisSettings(settings));
   let options: ImageSearchOptions = text ? { text } : {};
 
   if (window.settings?.geoLocation) {
@@ -103,7 +104,7 @@ export const findCad = ({
   settings: NyrisAPISettings;
   filters?: Filter[];
 }) => {
-  const nyrisApi = new NyrisAPI(settings);
+  const nyrisApi = new NyrisAPI(getNyrisSettings(settings));
 
   return nyrisApi.findByCad(file, {}, filters);
 };
@@ -115,7 +116,7 @@ export const getRequestImage = ({
   url: string;
   settings: NyrisAPISettings;
 }) => {
-  const nyrisApi = new NyrisAPI(settings);
+  const nyrisApi = new NyrisAPI(getNyrisSettings(settings));
 
   return nyrisApi.getCadRequestImage(url);
 };

package/src/services/vizo.ts

@@ -1,6 +1,17 @@
 import { RectCoords } from '@nyris/nyris-api';
 import axios from 'axios';
 import { cropImage } from 'utils/cropImageToBase64';
+import { getEffectiveApiKey } from 'utils/nyrisApiKey';
+
+function resolveAiOrNyrisApiKey(explicitApiKey?: string): string {
+  if (explicitApiKey) {
+    return explicitApiKey;
+  }
+  if (window.settings.aiApiKey) {
+    return window.settings.aiApiKey;
+  }
+  return getEffectiveApiKey();
+}
 
 export interface ChatMultimodalInput {
   metadata: string;
@@ -111,7 +122,7 @@ export async function rerankSmartFilters({
       formData,
       {
         headers: {
-          'x-api-key': apiKey || window.settings.aiApiKey || window.settings.apiKey,
+          'x-api-key': resolveAiOrNyrisApiKey(apiKey),
         },
       },
     );
@@ -156,7 +167,7 @@ export async function generateSmartFilters({
       formData,
       {
         headers: {
-          'x-api-key':  window.settings.aiApiKey || window.settings.apiKey,
+          'x-api-key': resolveAiOrNyrisApiKey(),
         },
       },
     );