@nyris/nyris-webapp 0.3.91 → 0.3.93

package/src/components/SidePanel.tsx

@@ -4,20 +4,27 @@ import ImagePreview from './ImagePreview';
 import useRequestStore from 'stores/request/requestStore';
 import PostFilterComponent from './PostFilter/PostFilterComponent';
 import useResultStore from 'stores/result/resultStore';
-import ItemSpecification from './ItemSpecification';
 import useUiStore from 'stores/ui/uiStore';
 import GroundingSpecs from './GroundingSpecs';
+import SmartFilter from './SmartFilter';
+import { useEffectiveGroundingResults } from 'hooks/useEffectiveGroundingResults';
+import IdentifiedAttributes from './IdentifiedAttributes';
 
 export default function SidePanel({ className }: { className?: string }) {
+  const settings = window.settings;
+  const isSmartFiltersEnabled = !!settings.useSmartFilters;
   const requestImages = useRequestStore(state => state.requestImages);
 
   const specificationFilter = useRequestStore(
     state => state.specificationFilter,
   );
 
+  const findApiProducts = useResultStore(state => state.productsFromFindApi);
+
   const showSidePanel = useUiStore(state => state.showSidePanel);
 
   const imageAnalysis = useResultStore(state => state.imageAnalysis);
+  const smartFilters = useResultStore(state => state.smartFilters);
 
   const showPostFilter = window.settings?.postFilterOption;
 
@@ -31,42 +38,54 @@ export default function SidePanel({ className }: { className?: string }) {
   const googleGroundingResponse = useResultStore(
     state => state.googleGroundingResponse,
   );
-  const groundingFilterResult = useResultStore(
-    state => state.groundingFilterResult,
-  );
+  const groundingError = useResultStore(state => state.groundingError);
   const groundingProduct =
     googleGroundingResponse?.identified_product ||
     googleGroundingResponse ||
     null;
 
+  const effectiveGroundingResults = useEffectiveGroundingResults();
+
   if (!showPostFilter && requestImages.length === 0) {
     return <></>;
   }
 
+  if (
+    requestImages.length === 0 &&
+    findApiProducts.length === 0 &&
+    !window.settings.algolia.enabled
+  ) {
+    return <></>;
+  }
+
   return (
     <div
       className={twMerge(
         [
-          'max-w-[325px]',
           'w-full',
-          'shadow-[3px_-2px_3px_-3px_#d3d4d8]',
-          'overflow-x-hidden',
-          'overflow-y-auto',
+          'overflow-hidden',
           'bg-white',
           'relative',
           'flex',
           'flex-col',
+          'ml-4',
+          'mb-4',
+          showSidePanel && 'border border-solid border-[#DDDEE7]',
+          showSidePanel ? 'rounded-[32px]' : 'rounded-2xl',
+          'transition-all',
+          showSidePanel ? 'w-[334px] min-w-[334px]' : 'w-0 min-w-0',
+          'shadow-ds-1',
         ],
         className,
       )}
     >
       <div
         className={twMerge(
-          ' w-full h-full overflow-y-auto overflow-x-hidden',
+          ' w-full overflow-y-auto overflow-x-hidden',
           showSidePanel ? 'block' : 'hidden',
         )}
       >
-        <div className="w-full h-full">
+        <div className="w-full">
           <div
             className={twMerge([
               'w-full',
@@ -76,7 +95,8 @@ export default function SidePanel({ className }: { className?: string }) {
               'flex',
               'justify-center',
               'items-center',
-              'min-w-[283px]',
+              'w-[295px]',
+              'm-4',
               // 'mx-4',
               // 'mt-4',
               // 'rounded',
@@ -84,7 +104,18 @@ export default function SidePanel({ className }: { className?: string }) {
           >
             {requestImages[0] && <ImagePreview />}
           </div>
-          <div className="pb-4">
+          <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) && (
@@ -123,7 +154,7 @@ export default function SidePanel({ className }: { className?: string }) {
                         return null;
                       }
                       return (
-                        <ItemSpecification
+                        <IdentifiedAttributes
                           attr={key}
                           value={value}
                           specificationFilter={specificationFilter}
@@ -134,28 +165,71 @@ export default function SidePanel({ className }: { className?: string }) {
                 </div>
               )}
 
-            {(isGoogleGroundingLoading || googleGroundingResponse) && (
-              <div className="mx-4 mb-4 mt-4 rounded-3xl bg-[#F3F4F8] border border-[#e4e3ff] p-3.5 text-[#3B3E5F] ">
+            {(isGoogleGroundingLoading ||
+              googleGroundingResponse ||
+              groundingError) && (
+              <div className="mx-4 rounded-3xl bg-[#F3F4F8] border border-[#e4e3ff] p-3.5 text-[#3B3E5F] ">
                 <div className="flex items-center justify-between">
                   {!isGoogleGroundingLoading && (
                     <div className="flex items-center gap-2 text-base font-semibold">
                       <span className="text-[#3B3E5F] font-bold text-sm leading-4">
                         Smart Product Search
                       </span>
-                      <svg
-                        width="18"
-                        height="18"
-                        viewBox="0 0 18 18"
-                        fill="none"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          fill-rule="evenodd"
-                          clip-rule="evenodd"
-                          d="M7.92274 17.0815C8.14851 17.0509 9.50523 17.0531 9.68837 17.1069C10.0943 17.2269 10.0579 17.8935 9.66298 17.977C9.51665 18.0079 7.97566 18.0068 7.8202 17.977C7.37018 17.8902 7.31801 17.1641 7.92274 17.0815ZM6.43739 15.5718C6.93914 15.4849 10.5164 15.4852 11.0194 15.5718C11.5127 15.6567 11.5125 16.3802 11.0194 16.4673C10.5501 16.55 6.90241 16.5509 6.43739 16.4673C5.94907 16.3791 5.93794 15.6585 6.43739 15.5718ZM11.5575 14.1128C12.0542 14.2692 12.0136 14.9036 11.5057 15.0083H5.95106C5.44374 14.9029 5.40011 14.2659 5.90028 14.1128H11.5575ZM8.3827 0.00828993C14.342 -0.281826 17.6069 7.14091 13.0927 11.2456C12.8954 11.4249 12.3055 11.7912 12.2099 11.9751C11.9627 12.4507 12.3894 13.3278 11.6854 13.5493H5.77235C5.07649 13.3197 5.49332 12.4477 5.24794 11.9751C5.17094 11.827 4.07408 10.991 3.81434 10.6948C0.284508 6.66896 3.12542 0.264519 8.3827 0.00828993ZM8.40907 0.878407C4.05152 1.10169 1.53289 6.2906 4.22352 9.8247C4.76536 10.5363 6.01331 11.1906 6.16884 11.9751C6.19322 12.0982 6.1777 12.6441 6.25868 12.6792H11.1991C11.2727 12.6437 11.2775 12.0209 11.3143 11.8725C11.4808 11.2037 12.6134 10.5761 13.1054 9.97802C16.1901 6.22819 13.1583 0.635396 8.40907 0.878407ZM7.58973 5.5122C7.98646 5.46307 8.45858 5.63311 8.72841 5.93407C9.03408 6.2751 9.04196 6.64401 9.0995 7.07274C10.3076 7.27893 9.28147 6.27654 9.94423 6.04931C10.706 5.78845 10.8635 7.24438 10.2001 7.73876C9.82323 8.01942 9.48381 7.89542 9.06141 7.98192V12.0259C8.87496 12.4562 8.31043 12.4151 8.1913 11.9751V7.98192C7.81441 7.90152 7.50855 7.99688 7.15419 7.78954C6.23495 7.25134 6.49448 5.648 7.58973 5.5122ZM7.69227 6.38231C7.46368 6.42187 7.42105 6.76141 7.49989 6.93212C7.58326 7.11216 7.99291 7.06945 8.15223 7.07274C8.30758 6.75232 8.0614 6.3187 7.69227 6.38231ZM8.69032 1.72313C9.11035 1.61732 10.1708 1.90654 10.5839 2.08153C12.1761 2.75648 13.4423 4.46569 13.5155 6.21532C13.5407 6.81775 13.4838 7.13782 12.7597 6.99657C12.3736 6.92088 12.5135 6.31131 12.4657 6.01122C12.2302 4.53827 11.0312 3.15282 9.56044 2.82372C9.29861 2.76515 8.63971 2.79266 8.52333 2.58056C8.42292 2.39652 8.42838 1.78927 8.69032 1.72313ZM8.99794 3.61766C10.0217 3.49673 11.4103 4.65574 11.5956 5.65282C11.7437 6.4509 10.9592 6.46744 10.7763 6.062C10.5385 5.53507 10.6087 5.21626 10.0214 4.82079C9.55464 4.50653 9.25994 4.6364 8.87001 4.48778C8.51994 4.35422 8.58644 3.6664 8.99794 3.61766Z"
-                          fill="#3B3E5F"
-                        />
-                      </svg>
+                      {groundingError && (
+                        <svg
+                          width="19"
+                          height="18"
+                          viewBox="0 0 19 18"
+                          fill="none"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <mask
+                            id="mask0_15292_25467"
+                            style={{ maskType: 'luminance' }}
+                            maskUnits="userSpaceOnUse"
+                            x="0"
+                            y="0"
+                            width="19"
+                            height="18"
+                          >
+                            <path
+                              fill-rule="evenodd"
+                              clip-rule="evenodd"
+                              d="M0.5 1.02344H18.5V16.9764H0.5V1.02344Z"
+                              fill="white"
+                              stroke="white"
+                            />
+                          </mask>
+                          <g mask="url(#mask0_15292_25467)">
+                            <path
+                              d="M8.31042 1.71025L0.686092 14.916C0.157364 15.8317 0.818246 16.9764 1.87565 16.9764H17.1244C18.1818 16.9764 18.8426 15.8317 18.3139 14.916L10.6896 1.71025C10.1609 0.794501 8.83915 0.794501 8.31042 1.71025"
+                              stroke="#3B3E5F"
+                            />
+                          </g>
+                          <path
+                            fill-rule="evenodd"
+                            clip-rule="evenodd"
+                            d="M8.54758 4.94824H10.4785L10.1523 11.0541H8.86071L8.54758 4.94824ZM8.45624 13.1547C8.45624 12.5937 8.89986 12.1501 9.51307 12.1501C10.1132 12.1501 10.5437 12.5937 10.5437 13.1547C10.5437 13.7157 10.1132 14.1723 9.51307 14.1723C8.89986 14.1723 8.45624 13.7157 8.45624 13.1547V13.1547Z"
+                            fill="#3B3E5F"
+                          />
+                        </svg>
+                      )}
+                      {!groundingError && (
+                        <svg
+                          width="18"
+                          height="18"
+                          viewBox="0 0 18 18"
+                          fill="none"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            fill-rule="evenodd"
+                            clip-rule="evenodd"
+                            d="M7.92274 17.0815C8.14851 17.0509 9.50523 17.0531 9.68837 17.1069C10.0943 17.2269 10.0579 17.8935 9.66298 17.977C9.51665 18.0079 7.97566 18.0068 7.8202 17.977C7.37018 17.8902 7.31801 17.1641 7.92274 17.0815ZM6.43739 15.5718C6.93914 15.4849 10.5164 15.4852 11.0194 15.5718C11.5127 15.6567 11.5125 16.3802 11.0194 16.4673C10.5501 16.55 6.90241 16.5509 6.43739 16.4673C5.94907 16.3791 5.93794 15.6585 6.43739 15.5718ZM11.5575 14.1128C12.0542 14.2692 12.0136 14.9036 11.5057 15.0083H5.95106C5.44374 14.9029 5.40011 14.2659 5.90028 14.1128H11.5575ZM8.3827 0.00828993C14.342 -0.281826 17.6069 7.14091 13.0927 11.2456C12.8954 11.4249 12.3055 11.7912 12.2099 11.9751C11.9627 12.4507 12.3894 13.3278 11.6854 13.5493H5.77235C5.07649 13.3197 5.49332 12.4477 5.24794 11.9751C5.17094 11.827 4.07408 10.991 3.81434 10.6948C0.284508 6.66896 3.12542 0.264519 8.3827 0.00828993ZM8.40907 0.878407C4.05152 1.10169 1.53289 6.2906 4.22352 9.8247C4.76536 10.5363 6.01331 11.1906 6.16884 11.9751C6.19322 12.0982 6.1777 12.6441 6.25868 12.6792H11.1991C11.2727 12.6437 11.2775 12.0209 11.3143 11.8725C11.4808 11.2037 12.6134 10.5761 13.1054 9.97802C16.1901 6.22819 13.1583 0.635396 8.40907 0.878407ZM7.58973 5.5122C7.98646 5.46307 8.45858 5.63311 8.72841 5.93407C9.03408 6.2751 9.04196 6.64401 9.0995 7.07274C10.3076 7.27893 9.28147 6.27654 9.94423 6.04931C10.706 5.78845 10.8635 7.24438 10.2001 7.73876C9.82323 8.01942 9.48381 7.89542 9.06141 7.98192V12.0259C8.87496 12.4562 8.31043 12.4151 8.1913 11.9751V7.98192C7.81441 7.90152 7.50855 7.99688 7.15419 7.78954C6.23495 7.25134 6.49448 5.648 7.58973 5.5122ZM7.69227 6.38231C7.46368 6.42187 7.42105 6.76141 7.49989 6.93212C7.58326 7.11216 7.99291 7.06945 8.15223 7.07274C8.30758 6.75232 8.0614 6.3187 7.69227 6.38231ZM8.69032 1.72313C9.11035 1.61732 10.1708 1.90654 10.5839 2.08153C12.1761 2.75648 13.4423 4.46569 13.5155 6.21532C13.5407 6.81775 13.4838 7.13782 12.7597 6.99657C12.3736 6.92088 12.5135 6.31131 12.4657 6.01122C12.2302 4.53827 11.0312 3.15282 9.56044 2.82372C9.29861 2.76515 8.63971 2.79266 8.52333 2.58056C8.42292 2.39652 8.42838 1.78927 8.69032 1.72313ZM8.99794 3.61766C10.0217 3.49673 11.4103 4.65574 11.5956 5.65282C11.7437 6.4509 10.9592 6.46744 10.7763 6.062C10.5385 5.53507 10.6087 5.21626 10.0214 4.82079C9.55464 4.50653 9.25994 4.6364 8.87001 4.48778C8.51994 4.35422 8.58644 3.6664 8.99794 3.61766Z"
+                            fill="#3B3E5F"
+                          />
+                        </svg>
+                      )}
                     </div>
                   )}
 
@@ -197,23 +271,31 @@ export default function SidePanel({ className }: { className?: string }) {
                     <div className="h-full w-1/2 animate-pulse rounded bg-[#3E36DC]" />
                   </div>
                 )}
+                {groundingError && (
+                  <div className="text-[#767A9F] text-sm mt-2.5">
+                    Unable to search the Internet.
+                  </div>
+                )}
+                {googleGroundingResponse &&
+                  !groundingError &&
+                  !isGoogleGroundingLoading && (
+                    <>
+                      <div className="mt-4 flex gap-2 items-center">
+                        <div className="w-[8px] h-[8px] bg-green-500 rounded-full "></div>
 
-                {googleGroundingResponse && (
-                  <>
-                    <div className="mt-4 flex gap-2 items-center">
-                      <div className="w-[8px] h-[8px] bg-green-500 rounded-full "></div>
-
-                      <div className="text-sm font-semibold leading-4">
-                        1. Results from the internet
+                        <div className="text-sm font-semibold leading-4">
+                          1. Results from the internet
+                        </div>
                       </div>
-                    </div>
-                    <div className="mt-3 text-[10px]">
-                      <GroundingSpecs data={groundingProduct} />
-                    </div>
-                  </>
-                )}
-                {groundingFilterResult?.length > 0 &&
-                  showingGroundingFilterResult && (
+                      <div className="mt-3 text-[10px]">
+                        <GroundingSpecs data={groundingProduct} />
+                      </div>
+                    </>
+                  )}
+                {effectiveGroundingResults?.length > 0 &&
+                  showingGroundingFilterResult &&
+                  !groundingError &&
+                  !isGoogleGroundingLoading && (
                     <div className="mt-3.5 text-[#3B3E5F]">
                       <div className="flex gap-2 items-center">
                         <div className="w-[8px] h-[8px] bg-green-500 rounded-full "></div>
@@ -225,12 +307,12 @@ export default function SidePanel({ className }: { className?: string }) {
                       <div className="text-xs text-[#22C55E] mb-1 mt-1">
                         Found{' '}
                         <span className="font-bold leading-4">
-                          {groundingFilterResult?.length} matching{' '}
+                          {effectiveGroundingResults?.length} matching{' '}
                         </span>{' '}
                         product
                       </div>
                       <div className="flex flex-col gap-2">
-                        {groundingFilterResult?.map(
+                        {effectiveGroundingResults?.map(
                           (item: any, index: number) => (
                             <div
                               key={`${item?.sku || 'sku'}-${index}`}

package/src/components/SmartFilter.tsx

@@ -0,0 +1,320 @@
+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';
+import { rerankSmartFilters, SmartFilterRerankItem } from 'services/vizo';
+
+function SmartFilter({
+  imageAnalysis,
+  specificationFilter,
+  variant = 'results',
+}: {
+  imageAnalysis?: any;
+  specificationFilter?: any;
+  variant?: 'sidepanel' | 'results';
+}) {
+  const settings = window.settings;
+  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 firstSearchResults = useResultStore(state => state.firstSearchResults);
+  const setFindApiProducts = useResultStore(state => state.setFindApiProducts);
+  const setAlgoliaProducts = useResultStore(state => state.setAlgoliaProducts);
+  const requestImages = useRequestStore(state => state.requestImages);
+  const setAlgoliaFilter = useRequestStore(state => state.setAlgoliaFilter);
+  const isAlgoliaEnabled = !!window.settings?.algolia?.enabled;
+
+  const activeProducts =
+    isAlgoliaEnabled && productsFromAlgolia.length > 0
+      ? productsFromAlgolia
+      : productsFromFindApi;
+
+  const rerankItems: SmartFilterRerankItem[] = useMemo(() => {
+    return (activeProducts || [])
+      .slice(0, 50)
+      .map((product: any): SmartFilterRerankItem | null => {
+        const sku = product?.sku || product?.objectID;
+        const imageUrl =
+          product?.matches?.[0]?.url ||
+          product?.['image(main_similarity)'] ||
+          product?.main_image_link ||
+          product?.image ||
+          product?.images?.[0];
+
+        if (!sku || !imageUrl) {
+          return null;
+        }
+
+        return {
+          sku: String(sku),
+          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]);
+
+  const applySkuOrderingToCurrentResults = (orderedSkus: string[]) => {
+    const sourceResults = activeProducts || [];
+    const map = new Map<string, any>(
+      sourceResults.map((item: any) => [
+        String(item?.sku || item?.objectID || '').trim(),
+        item,
+      ]),
+    );
+
+    const reordered = orderedSkus
+      .map(sku => map.get(String(sku).trim()))
+      .filter(Boolean);
+
+    if (reordered.length === 0) {
+      return false;
+    }
+
+    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 '));
+    }
+    return true;
+  };
+
+  const onFilterClick = async (filter: { key: string; value: string }) => {
+    if (!isSmartFiltersEnabled) {
+      return;
+    }
+    if (
+      smartFilters.selectedFilterKey === filter.key &&
+      smartFilters.selectedFilterValue === filter.value
+    ) {
+      setSmartFilters({
+        ...smartFilters,
+        selectedFilterKey: null,
+        selectedFilterValue: null,
+        rerankStatus: 'idle',
+        errorMessage: null,
+      });
+      if (firstSearchResults.length > 0) {
+        setFindApiProducts(firstSearchResults);
+      }
+      return;
+    }
+
+    if (!requestImages[0] || rerankItems.length === 0) {
+      setSmartFilters({
+        ...smartFilters,
+        selectedFilterKey: filter.key,
+        selectedFilterValue: filter.value,
+        rerankStatus: 'error',
+        errorMessage: 'Smart filters are unavailable right now.',
+      });
+      return;
+    }
+
+    setSmartFilters({
+      ...smartFilters,
+      selectedFilterKey: filter.key,
+      selectedFilterValue: filter.value,
+      rerankStatus: 'loading',
+      errorMessage: null,
+    });
+
+    try {
+      const rerankResponse = await rerankSmartFilters({
+        image: requestImages[0],
+        payload: {
+          filters: { [filter.key]: filter.value },
+          items: rerankItems,
+        },
+      });
+
+      const rerankedSkus = (rerankResponse?.filtered_items || []).map(item =>
+        String(item.sku),
+      );
+      const rerankingApplied =
+        (rerankResponse?.reranked as boolean | undefined) ??
+        rerankResponse?.rerankingApplied ??
+        (rerankedSkus.length > 0 ? true : false);
+
+      if (!Array.isArray(rerankResponse?.filtered_items)) {
+        setSmartFilters({
+          ...smartFilters,
+          selectedFilterKey: filter.key,
+          selectedFilterValue: filter.value,
+          rerankStatus: 'error',
+          errorMessage: 'Could not rerank results.',
+        });
+        return;
+      }
+
+      if (!rerankingApplied) {
+        setSmartFilters({
+          ...smartFilters,
+          selectedFilterKey: filter.key,
+          selectedFilterValue: filter.value,
+          rerankStatus: 'success',
+          errorMessage: null,
+        });
+        return;
+      }
+
+      if (rerankedSkus.length === 0 || !applySkuOrderingToCurrentResults(rerankedSkus)) {
+        setSmartFilters({
+          ...smartFilters,
+          selectedFilterKey: filter.key,
+          selectedFilterValue: filter.value,
+          rerankStatus: 'error',
+          errorMessage: 'Could not rerank results.',
+        });
+        return;
+      }
+
+      setSmartFilters({
+        ...smartFilters,
+        selectedFilterKey: filter.key,
+        selectedFilterValue: filter.value,
+        rerankedSkus,
+        rerankStatus: 'success',
+        errorMessage: null,
+      });
+    } catch (error: any) {
+      const timeout = String(error?.message || '').includes('SMART_FILTER_TIMEOUT');
+      setSmartFilters({
+        ...smartFilters,
+        selectedFilterKey: filter.key,
+        selectedFilterValue: filter.value,
+        rerankStatus: 'error',
+        errorMessage: timeout
+          ? 'Smart filters are unavailable right now.'
+          : 'Could not rerank results.',
+      });
+    }
+  };
+
+  if (!isSmartFiltersEnabled) {
+    return null;
+  }
+
+  return (
+    <div>
+      <div className="flex gap-2 ml-[30px]">
+        <div className="text-[#3B3E5F] font-bold text-sm">
+          Smart generated filters
+        </div>
+        <Icon name="smart_filter_indication" className="mt-1" />
+      </div>
+      <div className="flex flex-wrap mx-4 gap-2 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="mx-4 mt-3 text-xs text-[#3E36DC]">
+          Loading smart filters...
+        </div>
+      )}
+      {smartFilters.status === 'error' && (
+        <div className="mx-4 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]">
+          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'
+            ? 'smartFilters--results mx-4 mt-4 overflow-x-auto overflow-y-hidden'
+            : 'smartFilters--sidepanel mx-4 mt-4'
+        }
+        style={
+          variant === 'results'
+            ? {
+                WebkitOverflowScrolling: 'touch',
+                scrollbarWidth: 'none',
+                msOverflowStyle: 'none',
+                scrollBehavior: 'smooth',
+              }
+            : undefined
+        }
+      >
+        <div
+          className={
+            variant === 'results'
+              ? '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' }}
+        >
+        {smartFilters.filters.map((filter, index) => {
+          const isSelected =
+            smartFilters.selectedFilterKey === filter.key &&
+            smartFilters.selectedFilterValue === filter.value;
+          return (
+            <button
+              key={`${filter.key}-${filter.value}-${index}`}
+              style={variant === 'results' ? { flex: '0 0 auto' } : undefined}
+              className={`px-3.5 py-2 rounded-lg border text-sm ${
+                isSelected
+                  ? 'bg-[#545987] text-white border-[#545987]'
+                  : 'bg-[#E7E8F1] text-[#767A9F] border-transparent'
+              }`}
+              onClick={() => {
+                if (smartFilters.rerankStatus === 'loading') return;
+                void onFilterClick({
+                  key: filter.key,
+                  value: filter.value,
+                });
+              }}
+            >
+              {filter.label}: {filter.value}
+            </button>
+          );
+        })}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default SmartFilter;