@nyris/nyris-webapp 0.3.91 → 0.3.92

package/src/hooks/useResultEvaluator.ts

@@ -0,0 +1,417 @@
+/**
+ * P2 - Result Evaluator
+ *
+ * Fires once when results are returned from the API.
+ * Evaluates whether results match the uploaded image.
+ * Routes to P3 (good results) or P5 (bad results recovery).
+ */
+
+import { useCallback, useRef } from 'react';
+import useConversationStore, {
+  QuickReplyOption,
+  ConversationRoute,
+  ResultQuality,
+} from 'stores/chat/conversationStore';
+import useSmartFiltersStore from 'stores/smartFilters/smartFiltersStore';
+import { chatAnalysis } from 'services/vizo';
+import useRequestStore from 'stores/request/requestStore';
+import { canvasToBase64, cropImage } from 'utils/cropImageToBase64';
+import {
+  fetchProductImageBase64,
+  getProductImageUrl,
+} from 'utils/fetchProductImage';
+import { loadRelatedPartsTable, lookupRelatedParts } from 'utils/relatedParts';
+
+interface P2EvaluationResult {
+  quality: ResultQuality;
+  route: ConversationRoute;
+  opening_message: string;
+  options: QuickReplyOption[];
+  keyword?: string;
+}
+
+export function useResultEvaluator() {
+  const {
+    isEvaluated,
+    relatedPartsUsed,
+    setEvaluationResult,
+    setIsLoading,
+    setError,
+    setRelatedPartsTableSuggestions,
+  } = useConversationStore();
+  const { filters } = useSmartFiltersStore();
+
+  const evaluatingRef = useRef(false);
+
+  const evaluateResults = useCallback(
+    async ({
+      imageAnalysis,
+      activeProducts,
+    }: {
+      imageAnalysis: any;
+      activeProducts: any[];
+    }) => {
+      setIsLoading(true);
+      setError(null);
+      setRelatedPartsTableSuggestions([]);
+
+      try {
+        // Build context for P2
+        const specification = imageAnalysis?.specification || {};
+        const imageDescription =
+          imageAnalysis?.imageDescription || 'No description available';
+
+        // Get results (up to 30) with DETAILED metadata for finding differentiating attributes
+
+        const resultsSummary = activeProducts
+          .slice(0, 30)
+          .map((p: any, i: number) => {
+            // Extract all potentially useful metadata
+            const metadata: Record<string, any> = {};
+            const metadataFields = [
+              'voltage',
+              'size',
+              'brand',
+              'manufacturer',
+              'material',
+              'type',
+              'category',
+              'color',
+              'dimensions',
+              'power',
+              'current',
+              'connector',
+              'model',
+              'series',
+              'product_line',
+            ];
+
+            metadataFields.forEach(field => {
+              if (p[field]) metadata[field] = p[field];
+            });
+
+            // Extract from title/description using common patterns
+            const title = p.title || p.name || '';
+            const titleDesc = `${title} ${p.description || ''}`;
+
+            // Extract brand from title - often first word(s) in CAPS or before asterisk
+            if (!metadata.brand && !metadata.manufacturer) {
+              // Pattern 1: First word in all caps (e.g., "MANDRINO*...")
+              const capsMatch = title.match(/^([A-Z][A-Z0-9]+)(?:\*|\s)/);
+              if (capsMatch) {
+                metadata.brand = capsMatch[1];
+              }
+              // Pattern 2: Text before asterisk (e.g., "MANDRINO*TOOL")
+              const asteriskMatch = title.match(/^([^*]+)\*/);
+              if (asteriskMatch && asteriskMatch[1].length <= 20) {
+                metadata.brand = asteriskMatch[1].trim();
+              }
+              // Pattern 3: Generic all-caps token in title/description
+              const tokenMatch = titleDesc.match(/\b([A-Z][A-Z0-9]{2,})\b/);
+              if (tokenMatch) {
+                metadata.brand = tokenMatch[1].toUpperCase();
+              }
+            }
+
+            // Extract dimensions like "382 mm x 260 mm x 3 mm" or "344 x 221 x 3"
+            const dimensionMatch = titleDesc.match(
+              /(\d+)\s*(?:mm)?\s*[xX×]\s*(\d+)\s*(?:mm)?\s*(?:[xX×]\s*(\d+))?/i,
+            );
+            if (dimensionMatch && !metadata.dimensions) {
+              const dims = dimensionMatch[3]
+                ? `${dimensionMatch[1]}x${dimensionMatch[2]}x${dimensionMatch[3]}mm`
+                : `${dimensionMatch[1]}x${dimensionMatch[2]}mm`;
+              metadata.dimensions = dims;
+            }
+
+            // Extract voltage - multiple patterns for different formats
+            // Patterns: "24V DC", "12 V", "DC 24V", "24VDC", "AC 230V"
+            const voltagePatterns = [
+              /(\d+)\s*V\s*(DC|AC)?/i, // "24V DC", "12 V", "24V"
+              /(DC|AC)\s*(\d+)\s*V/i, // "DC 24V", "AC 230V"
+              /(\d+)\s*(VDC|VAC)/i, // "24VDC", "230VAC"
+            ];
+            for (const pattern of voltagePatterns) {
+              const voltageMatch = titleDesc.match(pattern);
+              if (voltageMatch && !metadata.voltage) {
+                // Normalize to format like "24V" or "24V DC"
+                const fullMatch = voltageMatch[0]
+                  .toUpperCase()
+                  .replace(/\s+/g, ' ')
+                  .trim();
+                // Extract just the number and V
+                const numMatch = fullMatch.match(/(\d+)/);
+                if (numMatch) {
+                  const voltage = numMatch[1];
+                  const dcAc = fullMatch.includes('DC')
+                    ? ' DC'
+                    : fullMatch.includes('AC')
+                      ? ' AC'
+                      : '';
+                  metadata.voltage = `${voltage}V${dcAc}`;
+                }
+                break;
+              }
+            }
+
+            // Extract generic product type keywords from title/description
+            if (!metadata.product_type) {
+              const typeMatch = titleDesc.match(
+                /\b(bearing|ring|relay|sensor|motor|fan|contactor|valve|pump|faucet|thermostat|filter|housing)\b/i,
+              );
+              if (typeMatch) {
+                metadata.product_type = typeMatch[1].toUpperCase();
+              }
+            }
+
+            // Extract material
+            const materialMatch = titleDesc.match(
+              /\b(steel|aluminum|aluminium|brass|copper|plastic|rubber|stainless)\b/i,
+            );
+            if (materialMatch && !metadata.material)
+              metadata.material = materialMatch[1].toLowerCase();
+
+            return {
+              rank: i + 1,
+              title: title || 'Untitled',
+              description: (p.description || '').substring(0, 100),
+              category: p.category || p.type || 'Unknown',
+              score: p.score || p.similarity || 0,
+              metadata: Object.keys(metadata).length > 0 ? metadata : null,
+            };
+          });
+
+        // Build specification from P4 (smart filters)
+        const p4Specification: Record<string, string> = {};
+        filters.forEach(f => {
+          p4Specification[f.label.toLowerCase()] = f.value;
+        });
+
+        // Add image analysis specification
+        Object.entries(specification).forEach(([key, value]) => {
+          if (value && typeof value === 'string') {
+            p4Specification[key] = value;
+          }
+        });
+
+        // Analyze common attributes across results for filter suggestions
+        const attributeFrequency: Record<string, Record<string, number>> = {};
+        resultsSummary.forEach(r => {
+          if (r.metadata) {
+            Object.entries(r.metadata).forEach(([key, value]) => {
+              if (!attributeFrequency[key]) attributeFrequency[key] = {};
+              const strValue = String(value);
+              attributeFrequency[key][strValue] =
+                (attributeFrequency[key][strValue] || 0) + 1;
+            });
+          }
+        });
+
+        const userPrompt = `Evaluate these search results:
+
+IMAGE DESCRIPTION: ${imageDescription}
+
+SPECIFICATION (from image analysis):
+${JSON.stringify(p4Specification, null, 2)}
+
+TOP 20 RESULTS WITH METADATA:
+${resultsSummary
+  .map(
+    r =>
+      `${r.rank}. ${r.title}${r.description ? ` - ${r.description}` : ''} (Score: ${r.score})${r.metadata ? `\n   Metadata: ${JSON.stringify(r.metadata)}` : ''}`,
+  ).join('\n')}
+
+COMMON ATTRIBUTES FOUND IN RESULTS (for filter suggestions):
+${JSON.stringify(attributeFrequency, null, 2)}
+
+TOTAL RESULTS: ${resultsSummary.length}
+
+Evaluate if these results match the image. If they do (same type of product), route to P3 and suggest filter options based on the COMMON ATTRIBUTES found above (like voltage, size, brand). Do NOT suggest the obvious category match.`;
+
+        const productsForImages = activeProducts.slice(0, 30);
+        const imageResults = await Promise.all(
+          productsForImages.map(async (p: any, i: number) => {
+            const url = getProductImageUrl(p);
+            if (!url) return { rank: i + 1, base64: null };
+
+            const base64 = await fetchProductImageBase64(url);
+
+            return { rank: i + 1, base64 };
+          }),
+        );
+
+        const hasVisualContext =
+          imageResults.filter(r => r.base64 !== null).length >= 1;
+
+        const productImageParts: Array<{
+          metadata: string;
+          image?: string;
+          mimeType?: string;
+        }> = [];
+
+        resultsSummary.forEach((result, i) => {
+          const originalProduct = productsForImages[i];
+          const tags = originalProduct?._tags;
+          const tagStr = tags
+            ? ` | TAGS: type=${tags.productType}, color=${tags.color}, shape=${tags.shape}, material=${tags.material}`
+            : '';
+
+          const metaLine = `${result.rank}. ${result.title}${result.description ? ` - ${result.description}` : ''} (Score: ${result.score})${result.metadata ? ` | Metadata: ${JSON.stringify(result.metadata)}` : ''}${tagStr}`;
+
+          if (hasVisualContext && imageResults[i]?.base64) {
+            productImageParts.push({
+              metadata: metaLine,
+              image: imageResults[i].base64 || '',
+              mimeType: 'image/jpeg',
+            });
+          }
+        });
+
+        const requestImage = useRequestStore.getState().requestImages;
+        const regions = useRequestStore.getState().regions;
+        const croppedCanvas = cropImage(requestImage[0], regions[0]);
+        const base64Image = canvasToBase64(croppedCanvas, 'image/jpeg', 1);
+
+        const response = await chatAnalysis({
+          promptKey: 'result_evaluator_prompt',
+          multimodalInputs: [
+            {
+              metadata: userPrompt,
+            },
+            {
+              metadata: 'request_image',
+              mimeType: 'image/jpeg',
+              image: base64Image,
+            },
+            ...productImageParts,
+          ],
+        });
+
+        const evaluation: P2EvaluationResult = response;
+
+        let mappedOptions = (evaluation?.options || []).map(opt => ({
+          label: opt.label,
+          action_type: opt.action_type as
+            | 'filter'
+            | 'clarify'
+            | 'text_search_prompt'
+            | 'find_related_parts',
+          key: (opt as any).key,
+          value: (opt as any).value,
+        }));
+        if (relatedPartsUsed) {
+          mappedOptions = mappedOptions.filter(
+            opt => opt.action_type !== 'find_related_parts',
+          );
+        }
+        mappedOptions.push({
+          label: "Describe what you're looking for",
+          action_type: 'text_search_prompt',
+          key: 'text_search',
+          value: 'text_search',
+        });
+
+        // Check lookup table for related parts on fresh image searches and store globally.
+        const table = await loadRelatedPartsTable();
+
+        const tableSuggestions = lookupRelatedParts(
+          table,
+          imageAnalysis.specification.product_category || '',
+        );
+        const hasTableSuggestions =
+          !!tableSuggestions && tableSuggestions.length > 0;
+        setRelatedPartsTableSuggestions(tableSuggestions || []);
+
+        // GC Gruppe: offer "Find related parts" in initial P2 response
+        if (
+          window.settings.vizo?.findRelatedParts &&
+          hasTableSuggestions &&
+          !relatedPartsUsed
+        ) {
+          mappedOptions.push({
+            label: `Find parts related to ${imageAnalysis.specification.product_category || 'request image'}`,
+            action_type: 'find_related_parts',
+            key: 'find_related',
+            value: 'find_related_parts',
+          });
+        }
+
+        // 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',
+            },
+          ];
+
+          if (
+            window.settings.vizo?.findRelatedParts &&
+            hasTableSuggestions &&
+            !relatedPartsUsed
+          ) {
+            mappedOptions.push({
+              label: `Find parts related to ${imageAnalysis.specification.product_category || 'request image'}`,
+              action_type: 'find_related_parts',
+              key: 'find_related',
+              value: 'find_related_parts',
+            });
+          }
+        }
+
+        setEvaluationResult(
+          evaluation.quality,
+          evaluation.route,
+          evaluation.opening_message,
+          mappedOptions,
+          evaluation.keyword,
+        );
+      } catch (err: any) {
+        console.error('result_evaluator_prompt', err);
+        setRelatedPartsTableSuggestions([]);
+        setError(err.message || 'Failed to evaluate results');
+
+        // Fallback to good results on error
+        setEvaluationResult(
+          'good',
+          'P3',
+          "I found some results for your image. How can I help you find what you're looking for?",
+          [
+            { label: 'Show me options', action_type: 'filter' as const },
+            {
+              label: "Describe what you're looking for",
+              action_type: 'text_search_prompt' as const,
+              key: 'text_search',
+              value: 'text_search',
+            },
+          ],
+        );
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      setIsLoading,
+      setError,
+      setRelatedPartsTableSuggestions,
+      filters,
+      relatedPartsUsed,
+      setEvaluationResult,
+    ],
+  );
+
+  // Reset the guard ref when a new session starts (isEvaluated goes back to false)
+  if (!isEvaluated) {
+    evaluatingRef.current = false;
+  }
+
+  return {
+    evaluateResults,
+    isEvaluated,
+  };
+}
+
+export default useResultEvaluator;

package/src/index.css

@@ -9,7 +9,7 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  color: #2B2C46
+  color: #3B3E5F
 }
 
 /* Source Sans 3 fonts  */

package/src/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';

package/src/layouts/AppLayout.tsx

@@ -1,4 +1,4 @@
-import { memo, useEffect } from 'react';
+import { memo, useCallback, useEffect, useMemo } from 'react';
 import { Outlet, useLocation } from 'react-router';
 
 import { useAuth0 } from '@auth0/auth0-react';
@@ -18,6 +18,7 @@ import useRequestStore from 'stores/request/requestStore';
 import useResultStore from 'stores/result/resultStore';
 import useUiStore from 'stores/ui/uiStore';
 import { Toaster } from 'components/Toaster';
+import { getFilters } from 'services/filter';
 
 i18n.use(initReactI18next).init({
   resources: translations,
@@ -92,12 +93,62 @@ function AppLayout(): JSX.Element {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [status]);
 
+  const user = useAuth0().user;
+
+  const setPreFilterList = useRequestStore(state => state.setPreFilterList);
+  const setPreFilterLoading = useRequestStore(
+    state => state.setPreFilterLoading,
+  );
+
+  const settings = window.settings;
+  const setMetaFilter = useRequestStore(state => state.setMetaFilter);
+
+  const showPreFilter = useMemo(() => {
+    if (settings.shouldUseUserMetadata && user) {
+      if (user['/user_metadata'].value) {
+        setMetaFilter(user['/user_metadata'].value);
+      }
+    }
+
+    if (settings.shouldUseUserMetadata && user) {
+      if (settings.preFilterOption && !user['/user_metadata'].value) {
+        return true;
+      }
+      return false;
+    }
+
+    return settings.preFilterOption;
+  }, [
+    setMetaFilter,
+    settings.preFilterOption,
+    settings.shouldUseUserMetadata,
+    user,
+  ]);
+
+  const getPreFilters = useCallback(async () => {
+    setPreFilterLoading(true);
+    try {
+      const res = await getFilters(1000, settings);
+      setPreFilterList(res);
+    } catch (e: any) {
+      console.log('err getDataFilterDesktop', e);
+    } finally {
+      setPreFilterLoading(false);
+    }
+  }, [settings, setPreFilterList, setPreFilterLoading]);
+
+  useEffect(() => {
+    if (showPreFilter) {
+      getPreFilters();
+    }
+  }, [getPreFilters, showPreFilter]);
+
   if (!showLayout) {
     return <Outlet />;
   }
 
   return (
-    <div className="full-height flex flex-col ">
+    <div className="full-height flex flex-col bg-[#F3F4F8]">
       <div>
         <Toaster />
       </div>

package/src/pages/Home.tsx

@@ -1,5 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { useAuth0 } from '@auth0/auth0-react';
+import { useEffect, useState } from 'react';
 import { twMerge } from 'tailwind-merge';
 
 import DragDropFile from 'components/DragDropFile';
@@ -12,11 +11,10 @@ import LocationInfoPopup from '../components/LocationInfoPopup';
 import Hint from '../components/Hint';
 import Loading from '../components/Loading';
 import useRequestStore from '../stores/request/requestStore';
-import { getFilters } from '../services/filter';
+import ImageUpload from 'components/ImageUpload';
 
 function Home() {
   const settings = window.settings;
-  const user = useAuth0().user;
   const { experienceVisualSearch, experienceVisualSearchImages, geoLocation } =
     settings;
   const navigate = useNavigate();
@@ -25,33 +23,6 @@ function Home() {
     useState<Blob[]>([]);
   const [isOpenModalCamera, setOpenModalCamera] = useState<boolean>(false);
   const showLoading = useRequestStore(store => store.showLoading);
-  const setPreFilterList = useRequestStore(state => state.setPreFilterList);
-  const setPreFilterLoading = useRequestStore(
-    state => state.setPreFilterLoading,
-  );
-  const setMetaFilter = useRequestStore(state => state.setMetaFilter);
-
-  const showPreFilter = useMemo(() => {
-    if (settings.shouldUseUserMetadata && user) {
-      if (user['/user_metadata'].value) {
-        setMetaFilter(user['/user_metadata'].value);
-      }
-    }
-
-    if (settings.shouldUseUserMetadata && user) {
-      if (settings.preFilterOption && !user['/user_metadata'].value) {
-        return true;
-      }
-      return false;
-    }
-
-    return settings.preFilterOption;
-  }, [
-    setMetaFilter,
-    settings.preFilterOption,
-    settings.shouldUseUserMetadata,
-    user,
-  ]);
 
   const fetchImage = async (url: string) => {
     const response = await fetch(url, { cache: 'force-cache' });
@@ -98,24 +69,6 @@ function Home() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const getPreFilters = useCallback(async () => {
-    setPreFilterLoading(true);
-    try {
-      const res = await getFilters(1000, settings);
-      setPreFilterList(res);
-    } catch (e: any) {
-      console.log('err getDataFilterDesktop', e);
-    } finally {
-      setPreFilterLoading(false);
-    }
-  }, [settings, setPreFilterList, setPreFilterLoading]);
-
-  useEffect(() => {
-    if (showPreFilter) {
-      getPreFilters();
-    }
-  }, [getPreFilters, showPreFilter]);
-
   return (
     <>
       {showLoading && (
@@ -149,8 +102,15 @@ function Home() {
             </div>
           )}
 
-          <TextSearch />
-          {/* <ImageUpload /> */}
+          <TextSearch className="h-[56px]" showImageUpload={false} />
+          <div
+            className={twMerge(
+              'h-14 w-14 flex items-center justify-center rounded-full bg-[#FFFFFF] hover:bg-[#F3F4F8] border border-solid border-[#DDDEE7]',
+              'shadow-ds-2',
+            )}
+          >
+            <ImageUpload />
+          </div>
         </div>
         <div className="max-w-[532px] relative w-full">
           <DragDropFile />
@@ -190,7 +150,6 @@ function Home() {
 
         <div className="flex desktop:hidden w-full fixed bottom-12 px-2 gap-2">
           <TextSearch className="flex md:hidden w-full " />
-          {/* <ImageUpload /> */}
         </div>
       </div>
     </>

package/src/pages/Login.tsx

@@ -1,10 +1,9 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { useAuth0 } from '@auth0/auth0-react';
 
 const Login = () => {
   const { user, isAuthenticated, isLoading, loginWithRedirect } = useAuth0();
   const { auth0 } = window.settings;
-  console.log({ auth0 });
 
   useEffect(() => {
     if (!isLoading && !user && !isAuthenticated && auth0.enabled) {

package/src/pages/Logout.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { useAuth0 } from '@auth0/auth0-react';
 
 const Logout = () => {