@nyris/nyris-webapp 0.3.93 → 0.3.95

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/hooks/useUploadSearch.ts

@@ -0,0 +1,170 @@
+import { useCallback } from 'react';
+import { clone } from 'lodash';
+import { useNavigate } from 'react-router';
+import { useTranslation } from 'react-i18next';
+import { isCadFile } from '@nyris/nyris-api';
+
+import { useImageSearch } from 'hooks/useImageSearch';
+import { useCadSearch } from 'hooks/useCadSearch';
+import useRequestStore from 'stores/request/requestStore';
+
+interface UploadFileOptions {
+  showPreFilter?: boolean;
+  resetTextSearch?: boolean;
+}
+
+export const useUploadSearch = () => {
+  const settings = window.settings;
+  const navigate = useNavigate();
+  const { t } = useTranslation();
+
+  const { singleImageSearch } = useImageSearch();
+  const { cadSearch } = useCadSearch();
+
+  const preFilterList = useRequestStore(state => state.preFilterList);
+  const specifications = useRequestStore(state => state.specifications);
+
+  const setQuery = useRequestStore(state => state.setQuery);
+  const setValueInput = useRequestStore(state => state.setValueInput);
+
+  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 uploadFile = useCallback(
+    (
+      file: File,
+      {
+        showPreFilter = settings.preFilterOption,
+        resetTextSearch = true,
+      }: UploadFileOptions = {},
+    ) => {
+      if (resetTextSearch) {
+        setValueInput('');
+        setQuery('');
+      }
+
+      if (isCadFile(file)) {
+        return cadSearch({ file, settings, newSearch: true }).then(() => {});
+      }
+
+      setShowLoading(true);
+
+      return singleImageSearch({
+        image: file,
+        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(file);
+            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');
+        }
+      });
+    },
+    [
+      cadSearch,
+      navigate,
+      preFilterList,
+      setAlgoliaFilter,
+      setNameplateImage,
+      setNameplateNotificationText,
+      setPreFilter,
+      setQuery,
+      setRequestImages,
+      setShowLoading,
+      setShowNotMatchedError,
+      setSpecifications,
+      setValueInput,
+      settings,
+      singleImageSearch,
+      specifications,
+      t,
+    ],
+  );
+
+  return {
+    uploadFile,
+  };
+};

package/src/layouts/AppLayout.tsx

@@ -19,6 +19,9 @@ import useResultStore from 'stores/result/resultStore';
 import useUiStore from 'stores/ui/uiStore';
 import { Toaster } from 'components/Toaster';
 import { getFilters } from 'services/filter';
+import { useUploadSearch } from 'hooks/useUploadSearch';
+import { ToastHelper } from 'helpers/ToastHelper';
+import { useTranslation } from 'react-i18next';
 
 i18n.use(initReactI18next).init({
   resources: translations,
@@ -31,7 +34,9 @@ i18n.use(initReactI18next).init({
 
 function AppLayout(): JSX.Element {
   const { isAuthenticated } = useAuth0();
+  const { t } = useTranslation();
   const { auth0, alogoliaFilterField, showPoweredByNyris } = window.settings;
+  const { uploadFile } = useUploadSearch();
 
   const showLayout = !auth0.enabled || (auth0.enabled && isAuthenticated);
   const location = useLocation();
@@ -47,10 +52,12 @@ function AppLayout(): JSX.Element {
 
   const setAlgoliaProducts = useResultStore(state => state.setAlgoliaProducts);
   const setIsAlgoliaLoading = useUiStore(state => state.setIsAlgoliaLoading);
+  const isFindApiLoading = useUiStore(state => state.isFindApiLoading);
 
   const setIsCadenasLoaded = useUiStore(state => state.setIsCadenasLoaded);
   const specifications = useRequestStore(state => state.specifications);
   const requestImages = useRequestStore(state => state.requestImages);
+  const showLoading = useRequestStore(state => state.showLoading);
 
   const { status } = useInstantSearch();
   const { items } = useHits();
@@ -143,6 +150,69 @@ function AppLayout(): JSX.Element {
     }
   }, [getPreFilters, showPreFilter]);
 
+  const getImageFromClipboard = useCallback(
+    (event: ClipboardEvent): File | null => {
+      const clipboardData = event.clipboardData;
+      if (!clipboardData) {
+        return null;
+      }
+
+      const imageItem = Array.from(clipboardData.items || []).find(
+        item => item.kind === 'file' && item.type.startsWith('image/'),
+      );
+
+      if (imageItem) {
+        return imageItem.getAsFile();
+      }
+
+      return (
+        Array.from(clipboardData.files || []).find(file =>
+          file.type.startsWith('image/'),
+        ) || null
+      );
+    },
+    [],
+  );
+
+  const handleClipboardPaste = useCallback(
+    (event: ClipboardEvent) => {
+      if (isFindApiLoading || showLoading) {
+        return;
+      }
+
+      const imageFile = getImageFromClipboard(event);
+      if (!imageFile) {
+        return;
+      }
+
+      event.preventDefault();
+      ToastHelper.success(
+        t('Image pasted from clipboard. Starting visual search.'),
+      );
+      uploadFile(imageFile, { showPreFilter });
+    },
+    [
+      getImageFromClipboard,
+      isFindApiLoading,
+      showLoading,
+      showPreFilter,
+      t,
+      uploadFile,
+    ],
+  );
+
+  useEffect(() => {
+    if (!showLayout) {
+      return;
+    }
+
+    document.addEventListener('paste', handleClipboardPaste);
+
+    return () => {
+      document.removeEventListener('paste', handleClipboardPaste);
+    };
+  }, [handleClipboardPaste, showLayout]);
+
   if (!showLayout) {
     return <Outlet />;
   }

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,17 +223,14 @@ function Results() {
               >
                 <div className="block desktop:hidden desktop:mb-0 mx-2">
                   {requestImages[0] && <ImagePreview />}
-                  {isSmartFiltersEnabled &&
-                    (imageAnalysis?.imageDescription ||
-                      Object.keys(imageAnalysis?.specification || {}).length >
-                        0) && (
-                      <div className="my-4">
-                        <SmartFilter
-                          imageAnalysis={imageAnalysis}
-                          specificationFilter={specificationFilter}
-                        />
-                      </div>
-                    )}
+                  {isSmartFiltersEnabled && (
+                    <div className="my-4">
+                      <SmartFilter
+                        imageAnalysis={imageAnalysis}
+                        specificationFilter={specificationFilter}
+                      />
+                    </div>
+                  )}
                   {window.settings.showImageDetails &&
                     (imageAnalysis?.imageDescription ||
                       Object.keys(imageAnalysis?.specification || {}).length >
@@ -338,6 +335,7 @@ function Results() {
                         'mx-0.5',
                         'mobile-md:mx-2',
                         'desktop:mx-4',
+                        'h-full',
                       ])}
                     >
                       <div className="max-w-[840px] w-full relative flex flex-col justify-between mb-20 desktop:mb-0">

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/translations.ts

@@ -4,6 +4,8 @@ export const translations = {
       Search: 'Search',
       'Drag and drop': 'Drag and drop',
       'an image here': 'an image here',
+      'Image pasted from clipboard. Starting visual search.':
+        'Image pasted from clipboard. Starting visual search.',
       'Manufacturer Number': 'Manufacturer No.',
       'Mfr. No.': 'Mfr. No.',
       'Close group': 'Close group',
@@ -65,13 +67,16 @@ export const translations = {
       'Please enable location services when prompted.':
         'Please enable location services when prompted.',
       'I understand': 'I understand',
-      'We have successfully defined the search criteria': 'Nameplate detected and matched to {{prefilter_value}}. Items are shown for this {{preFilterTitle}}. You can now upload an image or enter a keyword to search.',
+      'We have successfully defined the search criteria':
+        'Nameplate detected and matched to {{prefilter_value}}. Items are shown for this {{preFilterTitle}}. You can now upload an image or enter a keyword to search.',
       'Type plates': 'Type plates',
-      'Parts': 'Parts',
-      'Labels': 'Labels',
-      'Barcodes': 'Barcodes',
-      'Nameplate not matching': 'Nameplate detected, but {{prefilter_value}} was not found in the list. You can select the correct {{preFilterTitle}} to continue.',
-      'Extracted details from the nameplate could not be matched': 'The extracted details could not be matched to a known {{preFilterTitle}}. Please select a different {{preFilterTitle}} and continue searching.',
+      Parts: 'Parts',
+      Labels: 'Labels',
+      Barcodes: 'Barcodes',
+      'Nameplate not matching':
+        'Nameplate detected, but {{prefilter_value}} was not found in the list. You can select the correct {{preFilterTitle}} to continue.',
+      'Extracted details from the nameplate could not be matched':
+        'The extracted details could not be matched to a known {{preFilterTitle}}. Please select a different {{preFilterTitle}} and continue searching.',
       'Showing results for machine': `Showing results for {{prefilter_title}} '{{prefilter_value}}'`,
       'No matches found for': `No matches found for {{prefilter_title}} '{{prefilter_value}}'. Showing all items instead.`,
     },
@@ -81,6 +86,8 @@ export const translations = {
       Search: 'Suche',
       'Drag and drop': 'Bild hierher ziehen',
       'an image here': '',
+      'Image pasted from clipboard. Starting visual search.':
+        'Bild aus der Zwischenablage eingefügt. Visuelle Suche gestartet.',
       'Mfr. No.': 'Herst. Teile-Nr.',
       'Manufacturer Number': 'Herstellerteilenummer',
       'Close group': 'Schließe Gruppe',
@@ -144,13 +151,16 @@ export const translations = {
       'Please enable location services when prompted.':
         'Bitte erlauben Sie den Zugriff auf Ihren Standort.',
       'I understand': 'Weiter',
-      'We have successfully defined the search criteria': 'Typenschild erkannt und mit {{prefilter_value}} abgeglichen. Es werden Artikel für dieses {{preFilterTitle}}. Sie können nun ein Bild hochladen oder ein Stichwort zur Suche eingeben.',
+      'We have successfully defined the search criteria':
+        'Typenschild erkannt und mit {{prefilter_value}} abgeglichen. Es werden Artikel für dieses {{preFilterTitle}}. Sie können nun ein Bild hochladen oder ein Stichwort zur Suche eingeben.',
       'Type plates': 'Typenschilder',
-      'Parts': 'Teile',
-      'Labels': 'Etiketten',
-      'Barcodes': 'Barcodes',
-      'Nameplate not matching': 'Typenschild erkannt, aber {{prefilter_value}} wurde nicht in der Liste gefunden. Sie können die richtigen {{preFilterTitle}}, um fortzufahren.',
-      'Extracted details from the nameplate could not be matched': 'Die extrahierten Details konnten keinem bekannten {{preFilterTitle}} zugeordnet werden. Bitte wählen Sie einen anderen {{preFilterTitle}} aus und setzen Sie die Suche fort.',
+      Parts: 'Teile',
+      Labels: 'Etiketten',
+      Barcodes: 'Barcodes',
+      'Nameplate not matching':
+        'Typenschild erkannt, aber {{prefilter_value}} wurde nicht in der Liste gefunden. Sie können die richtigen {{preFilterTitle}}, um fortzufahren.',
+      'Extracted details from the nameplate could not be matched':
+        'Die extrahierten Details konnten keinem bekannten {{preFilterTitle}} zugeordnet werden. Bitte wählen Sie einen anderen {{preFilterTitle}} aus und setzen Sie die Suche fort.',
       'Showing results for machine': `Ergebnisse für {{prefilter_title}} '{{prefilter_value}}' anzeigen`,
       'No matches found for': `Keine Übereinstimmungen gefunden für {{prefilter_title}} '{{prefilter_value}}'. Alle Artikel anzeigen stattdessen.`,
     },
@@ -160,6 +170,8 @@ export const translations = {
       Search: 'Busca',
       'Drag and drop': 'Escolha uma imagem',
       'an image here': '',
+      'Image pasted from clipboard. Starting visual search.':
+        'Imagem colada da área de transferência. A iniciar pesquisa visual.',
       'Manufacturer Number': 'Número do fabricante',
       'Mfr. No.': 'Nr. do Fab',
       'Close group': 'Fechar grupo',
@@ -224,13 +236,16 @@ export const translations = {
       'Please enable location services when prompted.':
         'Por favor, ative os serviços de localização quando solicitado',
       'I understand': 'Compreendo',
-      'We have successfully defined the search criteria': 'Placa de identificação detetada e correspondente a {{prefilter_value}}. São apresentados os itens para esta {{preFilterTitle}}. Agora pode carregar uma imagem ou introduzir uma palavra-chave para pesquisar.',
+      'We have successfully defined the search criteria':
+        'Placa de identificação detetada e correspondente a {{prefilter_value}}. São apresentados os itens para esta {{preFilterTitle}}. Agora pode carregar uma imagem ou introduzir uma palavra-chave para pesquisar.',
       'Type plates': 'Placa de identificação',
-      'Parts': 'Peças',
-      'Labels': 'Etiquetas',
-      'Barcodes': 'Códigos de barras',
-      'Nameplate not matching': 'Placa de identificação detetada, mas {{prefilter_value}} não foi encontrado na lista. Pode selecionar os {{preFilterTitle}} corretos para continuar.', 
-      'Extracted details from the nameplate could not be matched': 'Os detalhes extraídos não puderam ser correspondidos a um {{preFilterTitle}} conhecido. Selecione um {{preFilterTitle}} diferente e continue a pesquisa.',
+      Parts: 'Peças',
+      Labels: 'Etiquetas',
+      Barcodes: 'Códigos de barras',
+      'Nameplate not matching':
+        'Placa de identificação detetada, mas {{prefilter_value}} não foi encontrado na lista. Pode selecionar os {{preFilterTitle}} corretos para continuar.',
+      'Extracted details from the nameplate could not be matched':
+        'Os detalhes extraídos não puderam ser correspondidos a um {{preFilterTitle}} conhecido. Selecione um {{preFilterTitle}} diferente e continue a pesquisa.',
       'Showing results for machine': `Mostrando resultados para {{prefilter_title}} '{{prefilter_value}}'`,
       'No matches found for': `Não foram encontrados resultados para {{prefilter_title}} '{{prefilter_value}}'. Mostrando todos os itens em vez disso.`,
     },

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 {