@nyris/nyris-webapp 0.3.93 → 0.3.94

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@nyris/nyris-webapp",
-  "version": "0.3.93",
+  "version": "0.3.94",
   "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.94",
+    "@nyris/nyris-react-components": "^0.3.94",
     "@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

@@ -103,7 +103,7 @@ function ImageUpload({
       clearPostFilter: 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),
       );
@@ -112,15 +112,15 @@ function ImageUpload({
         setShowNotMatchedError(false);
         if (hasPrefilter.length) {
           setSpecifications(
-            clone(singleImageResp.image_analysis.specification),
+            clone(singleImageResp?.image_analysis?.specification),
           );
           setNameplateImage(files[0]);
           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);
@@ -142,7 +142,7 @@ function ImageUpload({
         if (!hasPrefilter.length && showPreFilter) {
           setSpecifications(
             clone({
-              ...singleImageResp.image_analysis.specification,
+              ...singleImageResp?.image_analysis?.specification,
               specificationPrefilter,
             }),
           );

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/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') {

package/src/hooks/useResultEvaluator.ts

@@ -219,7 +219,8 @@ ${resultsSummary
   .map(
     r =>
       `${r.rank}. ${r.title}${r.description ? ` - ${r.description}` : ''} (Score: ${r.score})${r.metadata ? `\n   Metadata: ${JSON.stringify(r.metadata)}` : ''}`,
-  ).join('\n')}
+  )
+  .join('\n')}
 
 COMMON ATTRIBUTES FOUND IN RESULTS (for filter suggestions):
 ${JSON.stringify(attributeFrequency, null, 2)}
@@ -316,7 +317,7 @@ Evaluate if these results match the image. If they do (same type of product), ro
 
         const tableSuggestions = lookupRelatedParts(
           table,
-          imageAnalysis.specification.product_category || '',
+          imageAnalysis?.specification?.product_category || '',
         );
         const hasTableSuggestions =
           !!tableSuggestions && tableSuggestions.length > 0;
@@ -329,7 +330,7 @@ Evaluate if these results match the image. If they do (same type of product), ro
           !relatedPartsUsed
         ) {
           mappedOptions.push({
-            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',
             key: 'find_related',
             value: 'find_related_parts',
@@ -353,7 +354,7 @@ Evaluate if these results match the image. If they do (same type of product), ro
             !relatedPartsUsed
           ) {
             mappedOptions.push({
-              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',
               key: 'find_related',
               value: 'find_related_parts',

package/src/pages/Home.tsx

@@ -84,7 +84,7 @@ function Home() {
           'items-center',
           'justify-center',
           'h-auto',
-          'mt-[calc(50vh-110px)]',
+          !window.settings.experienceVisualSearch ? 'mt-[calc(50vh-110px)]' : 'mt-[calc(50vh-156px)]',
         ])}
       >
         {geoLocation && <LocationInfoPopup />}
@@ -122,7 +122,7 @@ function Home() {
         </div>
       </div>
 
-      <div className="flex flex-col desktop:hidden justify-center items-center w-full h-full ">
+      <div className="flex flex-col desktop:hidden justify-center items-center w-full h-full overflow-y-auto">
         <MobileCameraCTA setOpenModalCamera={setOpenModalCamera} />
         <div className="box-screenshot-camera">
           <CustomCamera

package/src/pages/Result.tsx

@@ -223,10 +223,7 @@ function Results() {
               >
                 <div className="block desktop:hidden desktop:mb-0 mx-2">
                   {requestImages[0] && <ImagePreview />}
-                  {isSmartFiltersEnabled &&
-                    (imageAnalysis?.imageDescription ||
-                      Object.keys(imageAnalysis?.specification || {}).length >
-                        0) && (
+                  {isSmartFiltersEnabled && (
                       <div className="my-4">
                         <SmartFilter
                           imageAnalysis={imageAnalysis}

package/src/services/vizo.ts

@@ -71,10 +71,6 @@ export interface SmartFilterRerankResponse {
 
 export interface SmartFilterGenerateParams {
   image: File | HTMLCanvasElement;
-  prompt: string;
-  model?: string;
-  timeoutMs?: number;
-  apiKey?: string;
 }
 
 export interface SmartFilterGenerateResponse {
@@ -135,7 +131,6 @@ export async function rerankSmartFilters({
 
 export async function generateSmartFilters({
   image,
-  prompt,
 }: SmartFilterGenerateParams): Promise<SmartFilterGenerateResponse> {
   const settings = window.settings;
   const isSmartFiltersEnabled = !!settings.useSmartFilters;
@@ -154,7 +149,6 @@ export async function generateSmartFilters({
   } else {
     formData.append('image', image);
   }
-  formData.append('prompt', prompt);
 
   try {
     const response = await axios.post<SmartFilterGenerateResponse>(

package/src/styles/common.scss

@@ -143,6 +143,7 @@
   justify-content: center;
   background-color: #16161680;
   &-body {
+    overflow-y: auto;
     padding: 32px;
     background: #F3F3F5;
     &.geolocation {

package/src/styles/experienceVisualSearch.scss

@@ -65,6 +65,7 @@ body.overflow-hidden {
         display: flex;
         flex-direction: row;
         flex-wrap: wrap;
+        justify-content: center;
         gap: 16px;
         width: 376px;
         .experience-visual-search-image-container {
@@ -166,6 +167,7 @@ body.overflow-hidden {
       padding: 32px 8px;
       &-content {
         &.experience-visual-search-images {
+          max-width: calc(100vw - 32px);
           width: 300px;
           gap: 8px;
           .experience-visual-search-image-container {

package/src/types.ts

@@ -126,6 +126,7 @@ export interface AppSettings extends NyrisAPISettings {
   textSearchScoring?: Record<string, Record<string, number>>;
   theme: SearchSuiteSettings;
   visualSearchFilterKey?: string;
+  supportButtonLabel?: string;
 }
 
 export interface SearchSuiteSettings {