@nyris/nyris-webapp 0.3.94 → 0.3.95

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@nyris/nyris-webapp",
-  "version": "0.3.94",
+  "version": "0.3.95",
   "dependencies": {
     "@auth0/auth0-react": "^2.2.4",
     "@emailjs/browser": "^4.3.3",
     "@google/genai": "^1.46.0",
-    "@nyris/nyris-api": "^0.3.94",
-    "@nyris/nyris-react-components": "^0.3.94",
+    "@nyris/nyris-api": "^0.3.95",
+    "@nyris/nyris-react-components": "^0.3.95",
     "@radix-ui/react-accordion": "^1.2.2",
     "@radix-ui/react-dialog": "^1.1.4",
     "@radix-ui/react-popover": "^1.1.4",

package/src/components/ImageUpload.tsx

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

package/src/components/Toaster.tsx

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

package/src/hooks/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/Result.tsx

@@ -224,13 +224,13 @@ function Results() {
                 <div className="block desktop:hidden desktop:mb-0 mx-2">
                   {requestImages[0] && <ImagePreview />}
                   {isSmartFiltersEnabled && (
-                      <div className="my-4">
-                        <SmartFilter
-                          imageAnalysis={imageAnalysis}
-                          specificationFilter={specificationFilter}
-                        />
-                      </div>
-                    )}
+                    <div className="my-4">
+                      <SmartFilter
+                        imageAnalysis={imageAnalysis}
+                        specificationFilter={specificationFilter}
+                      />
+                    </div>
+                  )}
                   {window.settings.showImageDetails &&
                     (imageAnalysis?.imageDescription ||
                       Object.keys(imageAnalysis?.specification || {}).length >
@@ -335,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/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.`,
     },