@nyris/nyris-webapp 0.3.93 → 0.3.95

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@nyris/nyris-webapp",
-  "version": "0.3.93",
+  "version": "0.3.95",
   "dependencies": {
     "@auth0/auth0-react": "^2.2.4",
     "@emailjs/browser": "^4.3.3",
     "@google/genai": "^1.46.0",
-    "@nyris/nyris-api": "^0.3.93",
-    "@nyris/nyris-react-components": "^0.3.93",
+    "@nyris/nyris-api": "^0.3.95",
+    "@nyris/nyris-react-components": "^0.3.95",
     "@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

@@ -110,6 +110,7 @@ var settings = {
   geoLocation: false,
   geoLocationMessage: '',
   showImageDetails: false,
+  supportButtonLabel: 'Request a Quote',
   rfq: {
     enabled: '',
     emailTemplateId: '',

package/src/components/ChatAssistant/useChatAssistantLogic.ts

@@ -682,7 +682,7 @@ Each result includes a unique SKU in brackets. Use the result thumbnails and met
 
       const tableSuggestions = lookupRelatedParts(
         table,
-        imageAnalysis.specification.product_category,
+        imageAnalysis?.specification?.product_category,
       );
 
       if (tableSuggestions && tableSuggestions.length > 0) {

package/src/components/CustomCameraDrawer.tsx

@@ -95,7 +95,7 @@ function CustomCamera(props: Props) {
       showFeedback: true,
     }).then(singleImageResp => {
       const specificationPrefilter =
-        singleImageResp.image_analysis?.specification?.prefilter_value || null;
+        singleImageResp?.image_analysis?.specification?.prefilter_value || null;
 
       const hasPrefilter = preFilterList.filter((filter: any) =>
         filter.values.includes(specificationPrefilter),
@@ -105,15 +105,15 @@ function CustomCamera(props: Props) {
         setShowNotMatchedError(false);
         if (hasPrefilter.length) {
           setSpecifications(
-            clone(singleImageResp.image_analysis.specification),
+            clone(singleImageResp?.image_analysis?.specification),
           );
           setNameplateImage(image);
           setPreFilter({
-            [singleImageResp.image_analysis?.specification?.prefilter_value]:
+            [singleImageResp?.image_analysis?.specification?.prefilter_value]:
               true,
           });
           setAlgoliaFilter(
-            `${settings.alogoliaFilterField}:'${singleImageResp.image_analysis?.specification?.prefilter_value}'`,
+            `${settings.alogoliaFilterField}:'${singleImageResp?.image_analysis?.specification?.prefilter_value}'`,
           );
 
           setShowLoading(false);
@@ -133,7 +133,7 @@ function CustomCamera(props: Props) {
         if (!hasPrefilter.length && window.settings.preFilterOption) {
           setSpecifications(
             clone({
-              ...singleImageResp.image_analysis.specification,
+              ...singleImageResp?.image_analysis?.specification,
               specificationPrefilter,
             }),
           );

package/src/components/DragDropFile.tsx

@@ -70,15 +70,15 @@ function DragDropFile(props: Props) {
         setShowNotMatchedError(false);
         if (hasPrefilter.length) {
           setSpecifications(
-            clone(singleImageResp.image_analysis.specification),
+            clone(singleImageResp?.image_analysis?.specification),
           );
           setNameplateImage(file);
           setPreFilter({
-            [singleImageResp.image_analysis?.specification?.prefilter_value]:
+            [singleImageResp?.image_analysis?.specification?.prefilter_value]:
               true,
           });
           setAlgoliaFilter(
-            `${window.settings.alogoliaFilterField}:'${singleImageResp.image_analysis?.specification?.prefilter_value}'`,
+            `${window.settings.alogoliaFilterField}:'${singleImageResp?.image_analysis?.specification?.prefilter_value}'`,
           );
 
           setShowLoading(false);
@@ -100,7 +100,7 @@ function DragDropFile(props: Props) {
         if (!hasPrefilter.length && window.settings.preFilterOption) {
           setSpecifications(
             clone({
-              ...singleImageResp.image_analysis.specification,
+              ...singleImageResp?.image_analysis?.specification,
               specificationPrefilter,
             }),
           );

package/src/components/ExperienceVisualSearch/ExperienceVisualSearchModal.tsx

@@ -23,7 +23,7 @@ function ExperienceVisualSearchModal(props: Props) {
     return (
       <Dialog open={openModal} onOpenChange={handleClose}>
         <DialogContent
-          className="bg-white p-0 max-w-[1500px] w-fit max-h-[95vh] h-fit m-auto overflow-y-hidden rounded-lg"
+          className="bg-white p-0 max-w-[1500px] w-fit max-h-[95vh] m-auto overflow-y-hidden rounded-lg"
           closeButton={false}
         >
           <DialogTitle className="h-0 w-0 hidden">

package/src/components/ExperienceVisualSearch/ExperienceVisualSearchTrigger.tsx

@@ -46,7 +46,7 @@ function ExperienceVisualSearchTrigger({
 
   return (
     <>
-      <div className="flex flex-col items-center">
+      <div className={`flex flex-col items-center ${window.settings.experienceVisualSearch ? 'mb-[80px]' : ''}`}>
         <div
           className={`group bg-[#3E36DC] w-10 hover:w-[215px] hover:gap-2 ${
             expand ? 'w-[215px] gap-2' : ''

package/src/components/ImagePreview.tsx

@@ -116,13 +116,13 @@ function ImagePreviewComponent({
           setRequestImages([]);
           setShowNotMatchedError(false);
           if (hasPrefilter.length) {
-            setSpecifications(clone(res.image_analysis.specification));
+            setSpecifications(clone(res?.image_analysis?.specification));
             setNameplateImage(image);
             setPreFilter({
-              [res.image_analysis?.specification?.prefilter_value]: true,
+              [res?.image_analysis?.specification?.prefilter_value]: true,
             });
             setAlgoliaFilter(
-              `${settings.alogoliaFilterField}:'${res.image_analysis?.specification?.prefilter_value}'`,
+              `${settings.alogoliaFilterField}:'${res?.image_analysis?.specification?.prefilter_value}'`,
             );
 
             setShowLoading(false);
@@ -144,7 +144,7 @@ function ImagePreviewComponent({
           if (!hasPrefilter.length && window.settings.preFilterOption) {
             setSpecifications(
               clone({
-                ...res.image_analysis.specification,
+                ...res?.image_analysis?.specification,
                 specificationPrefilter,
               }),
             );

package/src/components/ImageUpload.tsx

@@ -4,13 +4,10 @@ import { twMerge } from 'tailwind-merge';
 import Tooltip from './Tooltip/TooltipComponent';
 import { useAuth0 } from '@auth0/auth0-react';
 import { useMemo, useState } from 'react';
-import { useLocation, useNavigate } from 'react-router';
+import { useLocation } from 'react-router';
 import useRequestStore from 'stores/request/requestStore';
-import { useImageSearch } from 'hooks/useImageSearch';
-import { clone } from 'lodash';
-import { useCadSearch } from 'hooks/useCadSearch';
-import { isCadFile } from '@nyris/nyris-api';
 import UploadDisclaimer from './UploadDisclaimer';
+import { useUploadSearch } from 'hooks/useUploadSearch';
 
 function ImageUpload({
   onCameraClick,
@@ -25,27 +22,10 @@ function ImageUpload({
   const { t } = useTranslation();
 
   const location = useLocation();
-  const navigate = useNavigate();
+  const { uploadFile } = useUploadSearch();
 
-  const preFilterList = useRequestStore(state => state.preFilterList);
   const requestImages = useRequestStore(state => state.requestImages);
-  const setQuery = useRequestStore(state => state.setQuery);
-  const setValueInput = useRequestStore(state => state.setValueInput);
   const setMetaFilter = useRequestStore(state => state.setMetaFilter);
-  const specifications = useRequestStore(state => state.specifications);
-
-  const setRequestImages = useRequestStore(state => state.setRequestImages);
-  const setSpecifications = useRequestStore(state => state.setSpecifications);
-  const setShowLoading = useRequestStore(state => state.setShowLoading);
-  const setNameplateNotificationText = useRequestStore(
-    state => state.setNameplateNotificationText,
-  );
-  const setShowNotMatchedError = useRequestStore(
-    state => state.setShowNotMatchedError,
-  );
-  const setAlgoliaFilter = useRequestStore(state => state.setAlgoliaFilter);
-  const setPreFilter = useRequestStore(state => state.setPreFilter);
-  const setNameplateImage = useRequestStore(state => state.setNameplateImage);
 
   const [showDisclaimer, setShowDisclaimer] = useState(false);
 
@@ -80,97 +60,13 @@ function ImageUpload({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [showDisclaimer, requestImages, disableDisclaimer]);
 
-  const { singleImageSearch } = useImageSearch();
-  const { cadSearch } = useCadSearch();
-
   const handleUpload = (files: File[]) => {
-    setValueInput('');
-    setQuery('');
-
-    if (isCadFile(files[0])) {
-      cadSearch({ file: files[0], settings, newSearch: true }).then(() => {});
-
+    const file = files[0];
+    if (!file) {
       return;
     }
 
-    setShowLoading(true);
-
-    singleImageSearch({
-      image: files[0],
-      settings: window.settings,
-      showFeedback: true,
-      newSearch: true,
-      clearPostFilter: true,
-    }).then(singleImageResp => {
-      const specificationPrefilter =
-        singleImageResp.image_analysis?.specification?.prefilter_value || null;
-      const hasPrefilter = preFilterList.filter((filter: any) =>
-        filter.values.includes(specificationPrefilter),
-      );
-      if (specificationPrefilter) {
-        setRequestImages([]);
-        setShowNotMatchedError(false);
-        if (hasPrefilter.length) {
-          setSpecifications(
-            clone(singleImageResp.image_analysis.specification),
-          );
-          setNameplateImage(files[0]);
-          setPreFilter({
-            [singleImageResp.image_analysis?.specification?.prefilter_value]:
-              true,
-          });
-          setAlgoliaFilter(
-            `${settings.alogoliaFilterField}:'${singleImageResp.image_analysis?.specification?.prefilter_value}'`,
-          );
-
-          setShowLoading(false);
-          navigate('/result');
-
-          setTimeout(() => {
-            setNameplateNotificationText(
-              t('We have successfully defined the search criteria', {
-                prefilter_value: specificationPrefilter,
-                preFilterTitle:
-                  window.settings.preFilterTitle?.toLocaleLowerCase(),
-              }),
-            );
-          }, 1000);
-          setTimeout(() => {
-            setNameplateNotificationText('');
-          }, 10000);
-        }
-        if (!hasPrefilter.length && showPreFilter) {
-          setSpecifications(
-            clone({
-              ...singleImageResp.image_analysis.specification,
-              specificationPrefilter,
-            }),
-          );
-          navigate('/result');
-          setPreFilter({});
-          setAlgoliaFilter('');
-          setShowLoading(false);
-          setShowNotMatchedError(true);
-          setTimeout(() => {
-            setNameplateNotificationText(
-              t('Extracted details from the nameplate could not be matched', {
-                preFilterTitle:
-                  window.settings.preFilterTitle?.toLocaleLowerCase(),
-              }),
-            );
-          }, 1000);
-          setTimeout(() => {
-            setNameplateNotificationText('');
-          }, 15000);
-        }
-      } else {
-        if (!specifications?.is_nameplate) {
-          setSpecifications({ ...specifications, is_nameplate: false });
-        }
-        setShowLoading(false);
-        navigate('/result');
-      }
-    });
+    uploadFile(file, { showPreFilter });
   };
 
   return (

package/src/components/MobileCameraCTA.tsx

@@ -4,7 +4,7 @@ import '../styles/mobileCameraCTA.scss';
 
 function MobileCameraCTA({ setOpenModalCamera }: { setOpenModalCamera: any }) {
   return (
-    <div className="take-photo">
+    <div className={`take-photo ${window.settings.experienceVisualSearch ? 'mt-[180px]' : ''}`}>
       <div
         className="take-photo-wrapper"
       >

package/src/components/Rfq/RfqBanner.tsx

@@ -29,7 +29,6 @@ function RfqBanner({
       <div
         style={{
           padding: '0px 16px 0px 16px',
-          backgroundColor: '#F6F3F1',
           width: '100%',
           alignSelf: 'end',
           height: '248px',
@@ -72,9 +71,9 @@ function RfqBanner({
                   fontWeight: 'bold',
                 }}
               >
-                <p className="desktop:hidden">{`${t('No matches found')}?`}</p>
+                <p className="desktop:hidden">{`${t('No matches found')}`}?</p>
                 <p className="hidden desktop:block">
-                  `${t('No matches found for your request')}?`
+                  {`${t('No matches found for your request')}`}?
                 </p>
               </div>
               <div
@@ -112,7 +111,7 @@ function RfqBanner({
                 setIsRfqModalOpen(true);
               }}
             >
-              Request a Quote
+              {window.settings.supportButtonLabel}
             </button>
           </div>
         </div>

package/src/components/SidePanel.tsx

@@ -24,7 +24,6 @@ export default function SidePanel({ className }: { className?: string }) {
   const showSidePanel = useUiStore(state => state.showSidePanel);
 
   const imageAnalysis = useResultStore(state => state.imageAnalysis);
-  const smartFilters = useResultStore(state => state.smartFilters);
 
   const showPostFilter = window.settings?.postFilterOption;
 
@@ -105,17 +104,6 @@ export default function SidePanel({ className }: { className?: string }) {
             {requestImages[0] && <ImagePreview />}
           </div>
           <div className="pb-4 flex flex-col gap-6">
-            {isSmartFiltersEnabled &&
-              (imageAnalysis?.imageDescription ||
-                Object.keys(imageAnalysis?.specification || {}).length > 0 ||
-                smartFilters.status !== 'idle') && (
-                <SmartFilter
-                  imageAnalysis={imageAnalysis}
-                  specificationFilter={specificationFilter}
-                  variant="sidepanel"
-                />
-              )}
-
             {window.settings.showImageDetails &&
               (imageAnalysis?.imageDescription ||
                 Object.keys(imageAnalysis?.specification || {}).length > 0) && (
@@ -165,6 +153,14 @@ export default function SidePanel({ className }: { className?: string }) {
                 </div>
               )}
 
+            {isSmartFiltersEnabled && (
+              <SmartFilter
+                imageAnalysis={imageAnalysis}
+                specificationFilter={specificationFilter}
+                variant="sidepanel"
+              />
+            )}
+
             {(isGoogleGroundingLoading ||
               googleGroundingResponse ||
               groundingError) && (

package/src/components/SmartFilter.tsx

@@ -3,6 +3,7 @@ import ItemSpecification from './ItemSpecification';
 import { Icon } from '@nyris/nyris-react-components';
 import useRequestStore from 'stores/request/requestStore';
 import useResultStore from 'stores/result/resultStore';
+import useUiStore from 'stores/ui/uiStore';
 import { rerankSmartFilters, SmartFilterRerankItem } from 'services/vizo';
 
 function SmartFilter({
@@ -25,6 +26,7 @@ function SmartFilter({
   const setAlgoliaProducts = useResultStore(state => state.setAlgoliaProducts);
   const requestImages = useRequestStore(state => state.requestImages);
   const setAlgoliaFilter = useRequestStore(state => state.setAlgoliaFilter);
+  const setIsFindApiLoading = useUiStore(state => state.setIsFindApiLoading);
   const isAlgoliaEnabled = !!window.settings?.algolia?.enabled;
 
   const activeProducts =
@@ -32,10 +34,20 @@ function SmartFilter({
       ? productsFromAlgolia
       : productsFromFindApi;
 
-  const rerankItems: SmartFilterRerankItem[] = useMemo(() => {
-    return (activeProducts || [])
-      .slice(0, 50)
-      .map((product: any): SmartFilterRerankItem | null => {
+  // Always rerank against the original, unfiltered result set. Reranking
+  // mutates `productsFromFindApi`/`productsFromAlgolia`, so deriving items
+  // from those would shrink the payload on every subsequent rerank.
+  const originalResults = useMemo(
+    () =>
+      firstSearchResults && firstSearchResults.length > 0
+        ? firstSearchResults
+        : activeProducts || [],
+    [firstSearchResults, activeProducts],
+  );
+
+  const rerankItems: any[] = useMemo(() => {
+    return originalResults
+      .map((product: any): any | null => {
         const sku = product?.sku || product?.objectID;
         const imageUrl =
           product?.matches?.[0]?.url ||
@@ -49,31 +61,39 @@ function SmartFilter({
         }
 
         return {
-          sku: String(sku),
+          ...product,
           imageUrl: String(imageUrl),
-          metadata: {
-            title: product?.title || product?.name || product?.Bezeichnung || '',
-            description:
-              product?.description ||
-              product?.VK_Text_Englisch ||
-              product?.VK_Text_Deutsch ||
-              '',
-            language: window.settings.language || 'en',
-            sku: String(sku),
-            score:
-              typeof (product?.score ?? product?.similarity) === 'number'
-                ? Number(product?.score ?? product?.similarity)
-                : null,
-          },
         };
       })
       .filter((item): item is SmartFilterRerankItem => item !== null);
-  }, [activeProducts]);
+  }, [originalResults]);
+
+  const buildAlgoliaSkuFilter = (skus: string[]) => {
+    const nonEmptyFilter: string[] = ['sku:DOES_NOT_EXIST<score=1> '];
+    const rankedFilters = skus
+      .slice()
+      .reverse()
+      .map((sku, i) => `sku:'${sku}'<score=${i}> `);
+    return [...nonEmptyFilter, ...rankedFilters].join('OR ');
+  };
+
+  const restoreOriginalResults = () => {
+    if (originalResults.length === 0) {
+      return;
+    }
+    setFindApiProducts(originalResults);
+    if (isAlgoliaEnabled) {
+      setAlgoliaProducts(originalResults);
+      const skus = originalResults
+        .map((p: any) => String(p?.sku || p?.objectID || '').trim())
+        .filter(Boolean);
+      setAlgoliaFilter(buildAlgoliaSkuFilter(skus));
+    }
+  };
 
   const applySkuOrderingToCurrentResults = (orderedSkus: string[]) => {
-    const sourceResults = activeProducts || [];
     const map = new Map<string, any>(
-      sourceResults.map((item: any) => [
+      originalResults.map((item: any) => [
         String(item?.sku || item?.objectID || '').trim(),
         item,
       ]),
@@ -90,12 +110,7 @@ function SmartFilter({
     setFindApiProducts(reordered);
     if (isAlgoliaEnabled) {
       setAlgoliaProducts(reordered);
-      const nonEmptyFilter: string[] = ['sku:DOES_NOT_EXIST<score=1> '];
-      const rankedFilters = orderedSkus
-        .slice()
-        .reverse()
-        .map((sku, i) => `sku:'${sku}'<score=${i}> `);
-      setAlgoliaFilter([...nonEmptyFilter, ...rankedFilters].join('OR '));
+      setAlgoliaFilter(buildAlgoliaSkuFilter(orderedSkus));
     }
     return true;
   };
@@ -112,12 +127,11 @@ function SmartFilter({
         ...smartFilters,
         selectedFilterKey: null,
         selectedFilterValue: null,
+        rerankedSkus: [],
         rerankStatus: 'idle',
         errorMessage: null,
       });
-      if (firstSearchResults.length > 0) {
-        setFindApiProducts(firstSearchResults);
-      }
+      restoreOriginalResults();
       return;
     }
 
@@ -139,6 +153,7 @@ function SmartFilter({
       rerankStatus: 'loading',
       errorMessage: null,
     });
+    setIsFindApiLoading(true);
 
     try {
       const rerankResponse = await rerankSmartFilters({
@@ -209,6 +224,8 @@ function SmartFilter({
           ? 'Smart filters are unavailable right now.'
           : 'Could not rerank results.',
       });
+    } finally {
+      setIsFindApiLoading(false);
     }
   };
 
@@ -224,7 +241,7 @@ function SmartFilter({
         </div>
         <Icon name="smart_filter_indication" className="mt-1" />
       </div>
-      <div className="flex flex-wrap mx-4 gap-2 mt-4">
+      <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 => {
@@ -244,23 +261,20 @@ function SmartFilter({
           })}
       </div>
       {smartFilters.status === 'loading' && (
-        <div className="mx-4 mt-3 text-xs text-[#3E36DC]">
+        <div className="ml-[30px] mt-3 text-xs text-[#3E36DC]">
           Loading smart filters...
         </div>
       )}
       {smartFilters.status === 'error' && (
-        <div className="mx-4 mt-3 text-xs text-[#D14343]">
+        <div className="ml-[30px] mt-3 text-xs text-[#D14343]">
           {smartFilters.errorMessage || 'Could not generate smart filters.'}
         </div>
       )}
       {smartFilters.status === 'success' && smartFilters.filters.length === 0 && (
-        <div className="mx-4 mt-3 text-xs text-[#767A9F]">
+        <div className="ml-[30px] mt-3 text-xs text-[#767A9F]">
           No smart filters available for this image.
         </div>
       )}
-      {smartFilters.rerankStatus === 'loading' && (
-        <div className="mx-4 mt-1 text-xs text-[#3E36DC]">Applying rerank...</div>
-      )}
       <div
         className={
           variant === 'results'
@@ -290,24 +304,38 @@ function SmartFilter({
           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 ${
+              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 (smartFilters.rerankStatus === 'loading') return;
+                if (isRerankLoading) return;
                 void onFilterClick({
                   key: filter.key,
                   value: filter.value,
                 });
               }}
             >
-              {filter.label}: {filter.value}
+              <span>{filter.value}</span>
+              {isSelected && (
+                <Icon
+                  name="close"
+                  className="w-3 h-3 text-white"
+                />
+              )}
             </button>
           );
         })}

package/src/components/Toaster.tsx

@@ -15,8 +15,9 @@ export const Toaster = () => {
     <ReactHotToaster
       position={isMobile ? 'bottom-center' : 'top-right'}
       containerStyle={{
-        top: 80,
-        bottom: isMobile ? 80 : 'auto',
+        top: 100,
+        bottom: isMobile ? 90 : 'auto',
+        right: isMobile ? 15 : 25,
       }}
     >
       {t => (

package/src/hooks/useGoodResultsChat.ts

@@ -592,7 +592,7 @@ Respond to the user's message with an appropriate action and follow-up options.`
           finalOptions = [
             ...finalOptions,
             {
-              label: `Find parts related to ${imageAnalysis.specification.product_category || 'request image'}`,
+              label: `Find parts related to ${imageAnalysis?.specification?.product_category || 'request image'}`,
               action_type: 'find_related_parts' as const,
               key: 'find_related',
               value: 'find_related_parts',

package/src/hooks/useImageSearch.ts

@@ -18,9 +18,7 @@ import useResultEvaluator from './useResultEvaluator';
 import useConversationStore from 'stores/chat/conversationStore';
 import { useGroundedSearch } from './useGroundedSearch';
 import { generateSmartFilters } from '../services/vizo';
-
-const DEFAULT_SMART_FILTER_PROMPT =
-  'Extract at most 4 relevant product intent filters from the request image. Return strict JSON only.';
+import { cropImage } from 'utils/cropImageToBase64';
 
 export const useImageSearch = () => {
   const setRegions = useRequestStore(state => state.setRegions);
@@ -195,7 +193,7 @@ export const useImageSearch = () => {
       ];
 
       let smartFilterPromise: Promise<void> | null = null;
-      if (isSmartFiltersEnabled && requestImage && newSearch) {
+      if (isSmartFiltersEnabled && requestImage && (newSearch || imageRegion)) {
         setSmartFilters({
           status: 'loading',
           filters: [],
@@ -206,10 +204,8 @@ export const useImageSearch = () => {
           errorMessage: null,
         });
 
-        smartFilterPromise = generateSmartFilters({
-          image: requestImage,
-          prompt: DEFAULT_SMART_FILTER_PROMPT,
-        })
+        const smartFilterImage = cropImage(requestImage, region);
+        smartFilterPromise = generateSmartFilters({ image: smartFilterImage })
           .then(response => {
             const rawFilters = response?.filters;
             if (!rawFilters || typeof rawFilters !== 'object') {