@nyris/nyris-webapp 0.3.96 → 0.3.98

package/src/components/PostFilter/PostFilterFindApi.tsx

@@ -10,7 +10,9 @@ import { isEmpty } from 'lodash';
 import useResultStore from 'stores/result/resultStore';
 import useRequestStore from 'stores/request/requestStore';
 import useUiStore from 'stores/ui/uiStore';
+import useScopeStore from 'stores/scope/scopeStore';
 import { find } from 'services/visualSearch';
+import { useAuth0 } from '@auth0/auth0-react';
 
 let postFilterRequestCounter = 0;
 
@@ -31,6 +33,8 @@ function PostFilterFindApi({
   onVisibilityChange?: (attribute: string, isVisible: boolean) => void;
   isLastVisible?: boolean;
 }) {
+  const { user } = useAuth0();
+
   const [itemsLimit, setItemsLimit] = useState(10);
   const [searchInput, setSearchInput] = useState<string>('');
 
@@ -52,6 +56,23 @@ function PostFilterFindApi({
   const { t } = useTranslation();
   const settings = window.settings;
 
+  const scopeFilterEnabled = settings.scopeFilter;
+  const scopeFilterAttributes = useScopeStore(state => state.filterAttributes);
+
+  const scopedAllowedValues = useMemo(() => {
+    if (!scopeFilterEnabled || !window.settings.auth0?.enabled) {
+      return null;
+    }
+    // todo: support multiple attributes in the future
+    const scopeAttribute = scopeFilterAttributes[0];
+    if (!scopeAttribute) {
+      return new Set<string>();
+    }
+    return new Set(
+      scopeAttribute.values.map(value => value.toLocaleLowerCase()),
+    );
+  }, [scopeFilterEnabled, scopeFilterAttributes]);
+
   const matchedFacet = useMemo(() => {
     const facets = Array.isArray(postFilterFacets) ? postFilterFacets : [];
     return facets.find(
@@ -96,6 +117,11 @@ function PostFilterFindApi({
         count: valueCounts[label] || 0,
         isRefined: selectedValues.includes(label),
       }))
+      .filter(
+        item =>
+          !scopedAllowedValues ||
+          scopedAllowedValues.has(item.value.toLocaleLowerCase()),
+      )
       .filter(
         item =>
           !searchInput ||
@@ -103,13 +129,22 @@ function PostFilterFindApi({
       )
       .sort((a, b) => b.count - a.count || a.label.localeCompare(b.label))
       .slice(0, itemsLimit);
-  }, [attribute, itemsLimit, postFilterSelections, searchInput, valueCounts]);
+  }, [
+    attribute,
+    itemsLimit,
+    postFilterSelections,
+    scopedAllowedValues,
+    searchInput,
+    valueCounts,
+  ]);
 
   const selectedValues = postFilterSelections?.[attribute] || [];
   const hasSelection = selectedValues.length > 0;
   const hasAvailableValues = Object.keys(valueCounts).length > 0;
   const hasSearch = searchable && searchInput.length > 0;
-  const isVisible = hasAvailableValues || hasSelection || hasSearch;
+  const isVisible =
+    (!scopedAllowedValues || scopedAllowedValues.size > 0) &&
+    (hasAvailableValues || hasSelection || hasSearch);
 
   useEffect(() => {
     onVisibilityChange?.(attribute, isVisible);
@@ -180,6 +215,7 @@ function PostFilterFindApi({
       region: regions[0],
       filters,
       text: !requestImages[0] ? query : undefined,
+      scopeIds: window.settings?.scopeFilter ? user?.email : undefined,
     })
       .then(response => {
         if (requestId !== postFilterRequestCounter) {
@@ -264,7 +300,9 @@ function PostFilterFindApi({
                   <input
                     type="checkbox"
                     checked={item.isRefined}
-                    onChange={() => handleFilterClick(item.value, item.isRefined)}
+                    onChange={() =>
+                      handleFilterClick(item.value, item.isRefined)
+                    }
                     className="cursor-pointer"
                   />
                   <span className="text-xs font-normal pl-2 pr-1">

package/src/components/PreFilter/PreFilter.tsx

@@ -10,6 +10,7 @@ import { truncateString } from 'utils/truncateString';
 import { twMerge } from 'tailwind-merge';
 import Tooltip from 'components/Tooltip/TooltipComponent';
 import useResultStore from '../../stores/result/resultStore';
+import useScopeStore from 'stores/scope/scopeStore';
 
 interface Props {
   handleClose?: any;
@@ -42,6 +43,9 @@ const PreFilterComponent = (props: Props) => {
   const setImageAnalysis = useResultStore(state => state.setImageAnalysis);
   const regions = useRequestStore(state => state.regions);
 
+  const scopeFilterEnabled = !!settings.scopeFilter;
+  const scopeFilterAttributes = useScopeStore(state => state.filterAttributes);
+
   const [keyFilter, setKeyFilter] = useState<Record<string, boolean>>(
     keyFilterState || {},
   );
@@ -66,7 +70,7 @@ const PreFilterComponent = (props: Props) => {
     setLoading(true);
     getDataFilterDesktop();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [preFilterList, searchKey]);
+  }, [preFilterList, scopeFilterAttributes, searchKey]);
 
   useEffect(() => {
     return () => {
@@ -76,7 +80,11 @@ const PreFilterComponent = (props: Props) => {
     };
   }, []);
 
-  const matchedPreFilter = preFilterList.find(
+  const activeFilterList = scopeFilterEnabled
+    ? scopeFilterAttributes
+    : preFilterList;
+
+  const matchedPreFilter = activeFilterList.find(
     value =>
       value.key?.toLocaleLowerCase() ===
       settings.visualSearchFilterKey?.toLocaleLowerCase(),
@@ -105,6 +113,26 @@ const PreFilterComponent = (props: Props) => {
       return;
     }
     setLoading(true);
+
+    if (scopeFilterEnabled) {
+      const arrResult = matchedPreFilter?.values || [];
+      const lowerValue = String(value).toLocaleLowerCase();
+      const res = arrResult.filter(item =>
+        String(item).toLocaleLowerCase().includes(lowerValue),
+      );
+      if (res.length > 0) {
+        setResultFilter({ [res[0][0].toLocaleUpperCase()]: res });
+        if (res.length <= 20) setColumns(1);
+        else if (res.length <= 40) setColumns(2);
+        else setColumns(4);
+      } else {
+        setResultFilter({});
+        setColumns(4);
+      }
+      setLoading(false);
+      return;
+    }
+
     const data = await searchFilters(
       preFilterApiKey,
       encodeURIComponent(value),

package/src/components/Product/Product.tsx

@@ -673,7 +673,7 @@ function Product(props: Props) {
                 </div>
               )}
 
-              {settings.cart && (
+              {settings.cart?.enabled && (
                 <div
                   style={{
                     boxShadow: '-2px 2px 4px rgba(170, 171, 181, 0.5)',
@@ -717,7 +717,7 @@ function Product(props: Props) {
                         paddingRight: '8px',
                       }}
                     >
-                      Add to cart
+                      {settings.cart?.buttonText || 'Add to cart'}
                     </div>
                     <div style={{ width: '16px' }}>
                       <Icon

package/src/components/Product/ProductDetailView.tsx

@@ -456,7 +456,7 @@ function ProductDetailView(props: Props) {
                       </div>
                     )}
                   </div>
-                  {settings.cart && (
+                  {settings.cart?.enabled && (
                     <div
                       className="bg-[#2B2C46] rounded mt-2 flex justify-between items-center h-8 desktop:h-12 w-full btn-detail-item"
                       style={{
@@ -472,7 +472,7 @@ function ProductDetailView(props: Props) {
                         }}
                       >
                         <div className="text-f16 fw-600 max-line-1 text-white pr-1.5">
-                          Add to cart
+                          {settings.cart?.buttonText || 'Add to cart'}
                         </div>
                         <div style={{ width: '16px' }}>
                           <Icon

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/ScopeMissing.tsx

@@ -0,0 +1,50 @@
+const ScopeMissing = () => {
+  const { supportEmail } = window.settings.auth0;
+
+  return (
+    <div className="pl-8 desktop:pl-16 pt-6 desktop:pt-8 flex flex-col gap-4 bg-white h-full">
+      <div
+        style={{
+          fontSize: '20px',
+          fontWeight: 'bold',
+          color: '#2B2C46',
+        }}
+      >
+        Access Denied
+      </div>
+
+      <div
+        style={{
+          width: '200px',
+          height: '4px',
+          borderRadius: '4px',
+        }}
+        className="bg-red-500"
+      />
+
+      <p style={{ color: '#2B2C46', fontSize: '13px' }}>
+        You do not have access to the {window.settings.visualSearchFilterKey}.
+        If you believe this is an error, please contact support.
+      </p>
+      <a
+        className="contact-support"
+        style={{
+          backgroundColor: '#2B2C46',
+          padding: '8px 16px 8px 16px',
+          color: '#fff',
+          border: 'none',
+          cursor: 'pointer',
+          fontSize: '14px',
+          width: 'fit-content',
+        }}
+        href={`mailto:${
+          supportEmail || 'support@nyris.io'
+        }?subject=Access Denied&body=`}
+      >
+        Contact Support
+      </a>
+    </div>
+  );
+};
+
+export default ScopeMissing;

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/SmartFilter.tsx

@@ -1,5 +1,4 @@
 import React, { useMemo } from 'react';
-import ItemSpecification from './ItemSpecification';
 import { Icon } from '@nyris/nyris-react-components';
 import useRequestStore from 'stores/request/requestStore';
 import useResultStore from 'stores/result/resultStore';
@@ -19,8 +18,12 @@ function SmartFilter({
   const isSmartFiltersEnabled = !!settings.useSmartFilters;
   const smartFilters = useResultStore(state => state.smartFilters);
   const setSmartFilters = useResultStore(state => state.setSmartFilters);
-  const productsFromFindApi = useResultStore(state => state.productsFromFindApi);
-  const productsFromAlgolia = useResultStore(state => state.productsFromAlgolia);
+  const productsFromFindApi = useResultStore(
+    state => state.productsFromFindApi,
+  );
+  const productsFromAlgolia = useResultStore(
+    state => state.productsFromAlgolia,
+  );
   const firstSearchResults = useResultStore(state => state.firstSearchResults);
   const setFindApiProducts = useResultStore(state => state.setFindApiProducts);
   const setAlgoliaProducts = useResultStore(state => state.setAlgoliaProducts);
@@ -194,7 +197,10 @@ function SmartFilter({
         return;
       }
 
-      if (rerankedSkus.length === 0 || !applySkuOrderingToCurrentResults(rerankedSkus)) {
+      if (
+        rerankedSkus.length === 0 ||
+        !applySkuOrderingToCurrentResults(rerankedSkus)
+      ) {
         setSmartFilters({
           ...smartFilters,
           selectedFilterKey: filter.key,
@@ -214,7 +220,9 @@ function SmartFilter({
         errorMessage: null,
       });
     } catch (error: any) {
-      const timeout = String(error?.message || '').includes('SMART_FILTER_TIMEOUT');
+      const timeout = String(error?.message || '').includes(
+        'SMART_FILTER_TIMEOUT',
+      );
       setSmartFilters({
         ...smartFilters,
         selectedFilterKey: filter.key,
@@ -241,25 +249,7 @@ function SmartFilter({
         </div>
         <Icon name="smart_filter_indication" className="mt-1" />
       </div>
-      <div className={`flex flex-wrap mx-4 gap-2 ${imageAnalysis?.specification ? 'mt-4' : ''}`}>
-        {Object.keys(imageAnalysis?.specification || {})
-          .filter(key => key !== 'is_nameplate' && key !== 'prefilter_value')
-          .map(key => {
-            const value = imageAnalysis?.specification[key];
-            if (!value) {
-              return null;
-            }
-            return (
-              <ItemSpecification
-                key={key}
-                attr={key}
-                value={value}
-                specificationFilter={specificationFilter}
-                imageAnalysis={imageAnalysis}
-              />
-            );
-          })}
-      </div>
+
       {smartFilters.status === 'loading' && (
         <div className="ml-[30px] mt-3 text-xs text-[#3E36DC]">
           Loading smart filters...
@@ -270,11 +260,12 @@ function SmartFilter({
           {smartFilters.errorMessage || 'Could not generate smart filters.'}
         </div>
       )}
-      {smartFilters.status === 'success' && smartFilters.filters.length === 0 && (
-        <div className="ml-[30px] mt-3 text-xs text-[#767A9F]">
-          No smart filters available for this image.
-        </div>
-      )}
+      {smartFilters.status === 'success' &&
+        smartFilters.filters.length === 0 && (
+          <div className="ml-[30px] mt-3 text-xs text-[#767A9F]">
+            No smart filters available for this image.
+          </div>
+        )}
       <div
         className={
           variant === 'results'
@@ -298,47 +289,46 @@ function SmartFilter({
               ? 'flex flex-row flex-nowrap gap-2 pb-1'
               : 'flex flex-row flex-wrap gap-2 pb-1'
           }
-          style={variant === 'results' ? { width: 'max-content' } : { width: 'auto' }}
+          style={
+            variant === 'results' ? { width: 'max-content' } : { width: 'auto' }
+          }
         >
-        {smartFilters.filters.map((filter, index) => {
-          const isSelected =
-            smartFilters.selectedFilterKey === filter.key &&
-            smartFilters.selectedFilterValue === filter.value;
-          const hasSelection =
-            !!smartFilters.selectedFilterKey &&
-            !!smartFilters.selectedFilterValue;
-          const isRerankLoading = smartFilters.rerankStatus === 'loading';
-          const isDisabled = !isSelected && (hasSelection || isRerankLoading);
-          return (
-            <button
-              key={`${filter.key}-${filter.value}-${index}`}
-              type="button"
-              disabled={isDisabled}
-              aria-pressed={isSelected}
-              style={variant === 'results' ? { flex: '0 0 auto' } : undefined}
-              className={`px-3.5 py-2 rounded-lg border text-sm inline-flex items-center gap-1.5 ${
-                isSelected
-                  ? 'bg-[#545987] text-white border-[#545987]'
-                  : 'bg-[#E7E8F1] text-[#767A9F] border-transparent'
-              } ${isDisabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`}
-              onClick={() => {
-                if (isRerankLoading) return;
-                void onFilterClick({
-                  key: filter.key,
-                  value: filter.value,
-                });
-              }}
-            >
-              <span>{filter.value}</span>
-              {isSelected && (
-                <Icon
-                  name="close"
-                  className="w-3 h-3 text-white"
-                />
-              )}
-            </button>
-          );
-        })}
+          {smartFilters.filters.map((filter, index) => {
+            const isSelected =
+              smartFilters.selectedFilterKey === filter.key &&
+              smartFilters.selectedFilterValue === filter.value;
+            const hasSelection =
+              !!smartFilters.selectedFilterKey &&
+              !!smartFilters.selectedFilterValue;
+            const isRerankLoading = smartFilters.rerankStatus === 'loading';
+            const isDisabled = !isSelected && (hasSelection || isRerankLoading);
+            return (
+              <button
+                key={`${filter.key}-${filter.value}-${index}`}
+                type="button"
+                disabled={isDisabled}
+                aria-pressed={isSelected}
+                style={variant === 'results' ? { flex: '0 0 auto' } : undefined}
+                className={`px-3.5 py-2 rounded-lg border text-sm inline-flex items-center gap-1.5 ${
+                  isSelected
+                    ? 'bg-[#545987] text-white border-[#545987]'
+                    : 'bg-[#E7E8F1] text-[#767A9F] border-transparent'
+                } ${isDisabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`}
+                onClick={() => {
+                  if (isRerankLoading) return;
+                  void onFilterClick({
+                    key: filter.key,
+                    value: filter.value,
+                  });
+                }}
+              >
+                <span>{filter.value}</span>
+                {isSelected && (
+                  <Icon name="close" className="w-3 h-3 text-white" />
+                )}
+              </button>
+            );
+          })}
         </div>
       </div>
     </div>

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,
         });
       }
@@ -204,7 +204,9 @@ function TextSearch({
                         !isEmpty(preFilter)
                           ? 'fill-theme-primary'
                           : 'fill-[#2B2C46]',
-                        `desktop:fill-[#3B3E5F]`,
+                        !isEmpty(preFilter)
+                          ? 'desktop:fill-white'
+                          : 'desktop:fill-[#2B2C46]',
                       )}
                     />
                   </div>

package/src/hooks/useImageSearch.ts

@@ -20,8 +20,12 @@ 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 = () => {
+  const { user } = useAuth0();
+
   const setRegions = useRequestStore(state => state.setRegions);
   const query = useRequestStore(state => state.query);
 
@@ -69,7 +73,9 @@ export const useImageSearch = () => {
     state => state.setGroundingFilterResult,
   );
   const setSmartFilters = useResultStore(state => state.setSmartFilters);
-  const setPostFilterFacets = useResultStore(state => state.setPostFilterFacets);
+  const setPostFilterFacets = useResultStore(
+    state => state.setPostFilterFacets,
+  );
   const setInitialFindSearchSnapshot = useResultStore(
     state => state.setInitialFindSearchSnapshot,
   );
@@ -208,6 +214,7 @@ export const useImageSearch = () => {
       ];
 
       let smartFilterPromise: Promise<void> | null = null;
+
       if (isSmartFiltersEnabled && requestImage && (newSearch || imageRegion)) {
         setSmartFilters({
           status: 'loading',
@@ -287,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);
         }
@@ -324,16 +334,40 @@ export const useImageSearch = () => {
                 ? query
                 : text
               : undefined,
+          scopeIds: window.settings?.scopeFilter ? user?.email : undefined,
         });
         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);
@@ -421,6 +455,7 @@ export const useImageSearch = () => {
       setSmartFilters,
       setPostFilterFacets,
       setInitialFindSearchSnapshot,
+      user,
     ],
   );
 

package/src/hooks/useResultEvaluator.ts

@@ -339,14 +339,14 @@ Evaluate if these results match the image. If they do (same type of product), ro
 
         // Enforce ≤5 rule: if initial results are ≤5, strip filter options, keep only text_search_prompt
         if (activeProducts.length <= 5 && activeProducts.length > 0) {
-          mappedOptions = [
-            {
-              label: "Describe what you're looking for",
-              action_type: 'text_search_prompt' as const,
-              key: 'text_search',
-              value: 'text_search',
-            },
-          ];
+          // mappedOptions = [
+          //   {
+          //     label: "Describe what you're looking for",
+          //     action_type: 'text_search_prompt' as const,
+          //     key: 'text_search',
+          //     value: 'text_search',
+          //   },
+          // ];
 
           if (
             window.settings.vizo?.findRelatedParts &&

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,