@nyris/nyris-webapp 0.3.88 → 0.3.90

package/src/services/vizo.ts

@@ -0,0 +1,161 @@
+import axios from 'axios';
+// Utility: Convert HTMLCanvasElement to Blob
+export function canvasToBlob(
+  canvas: HTMLCanvasElement,
+  type = 'image/jpeg',
+  quality = 0.95,
+): Promise<Blob> {
+  return new Promise((resolve, reject) => {
+    canvas.toBlob(
+      blob => {
+        if (blob) {
+          resolve(blob);
+        } else {
+          reject(new Error('Canvas toBlob failed'));
+        }
+      },
+      type,
+      quality,
+    );
+  });
+}
+
+function buildProductEntry(p: any, index: number): string {
+  const title = p.Bezeichnung || p.title || p.name || '';
+  const desc =
+    p.VK_Text_Englisch ||
+    p.VK_Text_Deutsch ||
+    p.description ||
+    p.description_short ||
+    '';
+  const sku = p.sku || '';
+  const brand = p.brand || '';
+
+  // Include customIds metadata
+  const customIds = p.customIds || {};
+  const mpn = customIds.mpn || customIds.mpn_original || p.mpn || '';
+  const normalizedPN =
+    customIds['normalized PN'] || customIds['normalized_PN'] || '';
+  const normalizedModel =
+    customIds['normalized model'] || customIds['normalized_model'] || '';
+  const gtin = customIds.gtin || '';
+
+  const idParts: string[] = [];
+  if (mpn) idParts.push(`MPN: ${mpn}`);
+  if (normalizedPN && normalizedPN !== mpn)
+    idParts.push(`NormalizedPN: ${normalizedPN}`);
+  if (normalizedModel && normalizedModel !== normalizedPN)
+    idParts.push(`Model: ${normalizedModel}`);
+  if (gtin) idParts.push(`GTIN: ${gtin}`);
+
+  const idStr = idParts.length > 0 ? ` | IDs: ${idParts.join(', ')}` : '';
+
+  return `[${index}] SKU: ${sku} | Brand: ${brand} | ${title} | ${desc}${idStr}`;
+}
+
+/**
+ * Calls the nyris grounded search API with a File or HTMLCanvasElement.
+ * @param imageInput File or HTMLCanvasElement
+ * @param apiKey nyris API key
+ */
+export async function groundedSearch(
+  imageInput: File | HTMLCanvasElement,
+  apiKey: string,
+): Promise<any> {
+  const formData = new FormData();
+  let imageBlobOrFile: File | Blob;
+
+  if (imageInput instanceof HTMLCanvasElement) {
+    imageBlobOrFile = await canvasToBlob(imageInput);
+    formData.append('image', imageBlobOrFile, 'canvas.jpg');
+  } else {
+    formData.append('image', imageInput);
+  }
+
+  try {
+    const response = await axios.post(
+      'https://api.nyris.io/api/ai-analysis/grounded-search',
+      formData,
+      {
+        headers: {
+          'x-api-key': window.settings.aiApiKey || '',
+          // Let axios set Content-Type with boundary automatically
+        },
+      },
+    );
+    return response.data;
+  } catch (error: any) {
+    if (error.response) {
+      throw new Error(`API error: ${error.response.statusText}`);
+    } else {
+      throw new Error(`API error: ${error.message}`);
+    }
+  }
+}
+
+export async function groundedSearchFilter({
+  products,
+  groundingSummary,
+  apiKey,
+}: {
+  products: any[];
+  groundingSummary: string;
+  apiKey: string;
+}): Promise<any> {
+  const productList = products
+    .map((p, i) => buildProductEntry(p, i))
+    .join('\n');
+
+  try {
+    const response = await axios.post(
+      'https://api.nyris.io/api/ai-analysis/filtering-items',
+      {
+        itemsDataSummary: productList,
+        groundingSummary,
+      },
+      {
+        headers: {
+          'x-api-key': apiKey || window.settings.aiApiKey || '',
+          'Content-Type': 'application/json',
+        },
+      },
+    );
+    return response.data;
+  } catch (error: any) {
+    if (error.response) {
+      throw new Error(`API error: ${error.response.statusText}`);
+    } else {
+      throw new Error(`API error: ${error.message}`);
+    }
+  }
+}
+
+export async function groundingSearchQuery({
+  groundingSummary,
+  apiKey,
+}: {
+  groundingSummary: string;
+  apiKey: string;
+}): Promise<any> {
+  try {
+    const response = await axios.post(
+      'https://api.nyris.io/api/ai-analysis/search-query',
+      {
+        groundingSummary,
+      },
+      {
+        headers: {
+          'x-api-key': apiKey || window.settings.aiApiKey || '',
+          'Content-Type': 'application/json',
+        },
+      },
+    );
+    return response.data;
+  } catch (error: any) {
+    if (error.response) {
+      throw new Error(`API error: ${error.response.statusText}`);
+    } else {
+      throw new Error(`API error: ${error.message}`);
+    }
+  }
+}

package/src/stores/request/Misc/misc.initialstate.ts

@@ -2,4 +2,5 @@ import { MiscState } from 'stores/types';
 
 export const initialState: MiscState = {
   metaFilter: '',
+  groundingQuery: '',
 };

package/src/stores/request/Misc/misc.slice.ts

@@ -5,6 +5,7 @@ import { initialState } from './misc.initialstate';
 const miscSlice: StateCreator<MiscState & MiscAction> = set => ({
   ...initialState,
   setMetaFilter: filter => set(state => ({ metaFilter: filter })),
+  setGroundingQuery: query => set(state => ({ groundingQuery: query })),
 });
 
 export default miscSlice;

package/src/stores/request/filter/filter.initialState.ts

@@ -3,6 +3,9 @@ import { FilterState } from 'stores/types';
 export const initialState: FilterState = {
   algoliaFilter: '',
   preFilter: {},
+  preFilterList: [],
   firstSearchPreFilter: {},
   specificationFilter: {},
+  postFilterSelections: {},
+  preFilterLoading: false,
 };

package/src/stores/request/filter/filter.slice.ts

@@ -10,6 +10,29 @@ const filterSlice: StateCreator<FilterState & FilterAction> = set => ({
     set(state => ({ firstSearchPreFilter: filter })),
   setSpecificationFilter: filter =>
     set(state => ({ specificationFilter: filter })),
+  setPreFilterList: filter => set(state => ({ preFilterList: filter })),
+  setPreFilterLoading: isLoading =>
+    set(state => ({ preFilterLoading: isLoading })),
+  setPostFilterSelections: filters =>
+    set(state => ({ postFilterSelections: filters })),
+  togglePostFilterSelection: (attribute, value) =>
+    set(state => {
+      const current = state.postFilterSelections?.[attribute] || [];
+      const exists = current.includes(value);
+      const nextValues = exists
+        ? current.filter(item => item !== value)
+        : [...current, value];
+      const nextSelections = { ...state.postFilterSelections };
+
+      if (nextValues.length > 0) {
+        nextSelections[attribute] = nextValues;
+      } else {
+        delete nextSelections[attribute];
+      }
+
+      return { postFilterSelections: nextSelections };
+    }),
+  clearPostFilterSelections: () => set(state => ({ postFilterSelections: {} })),
 });
 
 export default filterSlice;

package/src/stores/result/prodcuts/products.initialState.ts

@@ -15,4 +15,8 @@ export const initialState: ProductsState = {
     optimizedSearchQuery: '',
     specification: {},
   },
+
+  googleGroundingResponse: null,
+  groundingFilterResult: [],
+  showingGroundingFilterResult: false,
 };

package/src/stores/result/prodcuts/products.slice.ts

@@ -26,6 +26,21 @@ const productsSlice: StateCreator<ProductsState & ProductsAction> = set => ({
         ...analysis,
       },
     })),
+  setGoogleGroundingResponse: result =>
+    set(state => ({
+      googleGroundingResponse: result,
+    })),
+
+  setGroundingFilterResult: result =>
+    set(state => ({
+      groundingFilterResult: result,
+    })),
+  setShowingGroundingFilterResult: (val?: boolean) =>
+    set(state =>
+      val === undefined
+        ? { showingGroundingFilterResult: !state.showingGroundingFilterResult }
+        : { showingGroundingFilterResult: val },
+    ),
 });
 
 export default productsSlice;

package/src/stores/types.ts

@@ -1,4 +1,4 @@
-import { RectCoords, Region } from '@nyris/nyris-api';
+import { Filter, RectCoords, Region } from '@nyris/nyris-api';
 
 export interface RequestImageState {
   requestImages: HTMLCanvasElement[];
@@ -30,12 +30,14 @@ export interface LoadingState {
   isFindApiLoading: boolean;
   isAlgoliaLoading: boolean;
   isCadenasLoaded: boolean;
+  isGoogleGroundingLoading: boolean;
 }
 
 export interface LoadingAction {
   setIsFindApiLoading: (isLoading: boolean) => void;
   setIsAlgoliaLoading: (isLoading: boolean) => void;
   setIsCadenasLoaded: (isLoading: boolean) => void;
+  setIsGoogleGroundingLoading: (isLoading: boolean) => void;
 }
 
 export interface ProductsState {
@@ -54,6 +56,9 @@ export interface ProductsState {
   };
 
   specificationFilteredProducts: any[];
+  googleGroundingResponse: Record<string, any> | null;
+  groundingFilterResult: any[];
+  showingGroundingFilterResult: boolean;
 }
 
 export interface ProductsAction {
@@ -67,6 +72,9 @@ export interface ProductsAction {
     specification: Record<string, string>;
   }) => void;
   setSpecificationFilteredProducts: (products: any[]) => void;
+  setGoogleGroundingResponse: (result: any | null) => void;
+  setGroundingFilterResult: (result: any[]) => void;
+  setShowingGroundingFilterResult: (val?: boolean) => void;
 }
 
 export interface DetectedRegionsState {
@@ -79,24 +87,34 @@ export interface DetectedRegionsAction {
 
 export interface FilterState {
   preFilter: Record<string, boolean>;
+  preFilterList: Filter[];
   algoliaFilter: string;
   firstSearchPreFilter: Record<string, boolean>;
   specificationFilter: Record<string, string>;
+  postFilterSelections: Record<string, string[]>;
+  preFilterLoading: boolean;
 }
 
 export interface FilterAction {
   setPreFilter: (query: Record<string, boolean>) => void;
+  setPreFilterList: (any: Filter[]) => void;
   setFirstSearchPreFilter: (query: Record<string, boolean>) => void;
   setAlgoliaFilter: (query: string) => void;
   setSpecificationFilter: (query: Record<string, string>) => void;
+  setPostFilterSelections: (filters: Record<string, string[]>) => void;
+  togglePostFilterSelection: (attribute: string, value: string) => void;
+  clearPostFilterSelections: () => void;
+  setPreFilterLoading: (isLoading: boolean) => void;
 }
 
 export interface MiscState {
   metaFilter: string;
+  groundingQuery: string;
 }
 
 export interface MiscAction {
   setMetaFilter: (filter: string) => void;
+  setGroundingQuery: (query: string) => void;
 }
 
 export interface FeedbackState {
@@ -107,6 +125,14 @@ export interface FeedbackAction {
   setShowFeedback: (show: boolean) => void;
 }
 
+export interface SidePanelState {
+  showSidePanel: boolean;
+}
+
+export interface SidePanelAction {
+  setShowSidePanel: (show: boolean) => void;
+}
+
 export interface SessionState {
   requestId: string;
   sessionId: string;

package/src/stores/ui/loading/loading.initialState.ts

@@ -4,4 +4,5 @@ export const initialState: LoadingState = {
   isAlgoliaLoading: false,
   isFindApiLoading: false,
   isCadenasLoaded: false,
+  isGoogleGroundingLoading: false,
 };

package/src/stores/ui/loading/loading.slice.ts

@@ -10,6 +10,10 @@ const loadingSlice: StateCreator<LoadingState & LoadingAction> = set => ({
     set(state => ({ isFindApiLoading: isLoading })),
   setIsCadenasLoaded: (isLoading: boolean) =>
     set(state => ({ isCadenasLoaded: isLoading })),
+  setIsGoogleGroundingLoading: isLoading =>
+    set(state => ({
+      isGoogleGroundingLoading: isLoading,
+    })),
 });
 
 export default loadingSlice;

package/src/stores/ui/sidePanel/sidePanel.initialState.ts

@@ -0,0 +1,5 @@
+import { SidePanelState } from 'stores/types';
+
+export const initialState: SidePanelState = {
+  showSidePanel: true,
+};

package/src/stores/ui/sidePanel/sidePanel.slice.ts

@@ -0,0 +1,11 @@
+import { StateCreator } from 'zustand';
+import { SidePanelAction, SidePanelState } from 'stores/types';
+
+import { initialState } from './sidePanel.initialState';
+
+const sidePanelSlice: StateCreator<SidePanelState & SidePanelAction> = set => ({
+  ...initialState,
+  setShowSidePanel: (showSidePanel: boolean) => set(() => ({ showSidePanel })),
+});
+
+export default sidePanelSlice;

package/src/stores/ui/uiStore.ts

@@ -1,12 +1,15 @@
 import { create } from 'zustand';
 import loadingSlice from './loading/loading.slice';
 import feedbackSlice from './feedback/feedback.slice';
+import sidePanelSlice from './sidePanel/sidePanel.slice';
 
 type UiStore = ReturnType<typeof loadingSlice> &
-  ReturnType<typeof feedbackSlice>;
+  ReturnType<typeof feedbackSlice> &
+  ReturnType<typeof sidePanelSlice>;
 
 const useUiStore = create<UiStore>()((...a) => ({
   ...loadingSlice(...a),
   ...feedbackSlice(...a),
+  ...sidePanelSlice(...a),
 }));
 export default useUiStore;

package/src/styles/Cart.scss

@@ -0,0 +1,210 @@
+.cart-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  &.active {
+    background-color: #2b2c46;
+  }
+  &.disabled {
+    pointer-events: none;
+    cursor: default;
+    background-color: #801e1e;
+  }
+  .cart-amount {
+    position: absolute;
+    width: 16px;
+    height: 16px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border: 2px solid #fff;
+    background-color: #009ea6;
+    border-radius: 50%;
+    color: #fff;
+    font-size: 10px;
+    top: -6px;
+    right: -4px;
+  }
+}
+
+.cart {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 51;
+  &-background {
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    position: absolute;
+    background-color: rgba(0, 0, 0, 0.2);
+  }
+  &-main {
+    height: 100vh;
+    width: 410px;
+    max-width: 100vw;
+    position: absolute;
+    right: 0;
+    background-color: #fff;
+    display: flex;
+    flex-direction: column;
+    @media (max-width: 410px) {
+      width: 100vw;
+      min-width: 0;
+    }
+    &-header {
+      height: 52px;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      padding: 8px 16px;
+      &-title {
+        font-weight: 600;
+        font-size: 24px;
+      }
+      &-buttons {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        .clear-all {
+          border: 1px solid #e31b5d;
+          padding: 4px 8px;
+          font-weight: 400;
+          font-size: 9px;
+          color: #e31b5d;
+          border-radius: 4px;
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          margin-right: 16px;
+        }
+      }
+    }
+    &-body {
+      flex: 1;
+      background-color: #f3f3f5;
+      padding: 16px;
+      overflow-x: auto;
+      &-category {
+        font-family: 'Fira Sans', sans-serif;
+        font-weight: 600;
+        font-size: 16px;
+        margin-bottom: 16px;
+      }
+      &-parts {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        margin-bottom: 16px;
+        &-item {
+          width: 100%;
+          height: 66px;
+          padding: 8px;
+          border: 1px #e0e0e0 solid;
+          border-radius: 8px;
+          background-color: #fafafa;
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          justify-content: space-between;
+          &-column {
+            flex: 1;
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+          }
+          img {
+            width: 50px;
+            height: 50px;
+            object-fit: cover;
+            background-color: #fff;
+            margin-right: 8px;
+          }
+          &-sku {
+            font-weight: 400;
+            font-size: 9px;
+            max-width: 150px;
+            word-break: break-all;
+          }
+          &-title {
+            font-weight: 600;
+            font-size: 12px;
+            max-width: 150px;
+            word-break: break-all;
+          }
+          &-quantity {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            gap: 16px;
+            padding-right: 16px;
+            margin-left: auto;
+            button {
+              width: 16px;
+              height: 16px;
+              border-radius: 50%;
+              background-color: #f3f3f5;
+            }
+            &-number {
+              min-width: 22px;
+              height: 22px;
+              background-color: #fff;
+              border-radius: 4px;
+              border: 1px solid #f3f3f5;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+            }
+          }
+          &-remove {
+            width: 28px;
+            height: 28px;
+            background-color: #ffe5ef4d;
+            padding: 6px;
+            border-radius: 4px;
+          }
+        }
+      }
+      &-empty {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        &-title {
+          font-weight: 600;
+          font-size: 16px;
+          line-height: 16px;
+          letter-spacing: 0.16px;
+        }
+        &-text {
+          font-weight: 400;
+          line-height: 16px;
+          letter-spacing: 0.16px;
+        }
+      }
+      .cart-download-button {
+        background-color: #3e36dc;
+        color: #fff;
+        width: 100%;
+        height: 48px;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        font-weight: 600;
+        font-size: 16px;
+        border-radius: 8px;
+        svg {
+          margin-right: 8px;
+        }
+      }
+    }
+  }
+}

package/src/styles/common.scss

@@ -12,6 +12,16 @@
     -webkit-box-orient: vertical;
   }
 
+   .max-line-2 {
+    word-break: break-word;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    max-height: 66px; /* fallback */
+    -webkit-line-clamp: 2; /* number of lines to show */
+    -webkit-box-orient: vertical;
+  }
+
   .box-wrap-loading {
     position: fixed;
     background: #00000075;

package/src/translations.ts

@@ -71,7 +71,7 @@ export const translations = {
       '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': 'Extracted details from the nameplate could not be matched to a known {{preFilterTitle}}. Select a different machine, send details to support via the Inquiry button, or continue searching.',
+      '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.`,
     },
@@ -150,7 +150,7 @@ export const translations = {
       '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 vom Typenschild extrahierten Angaben konnten keiner bekannten {{preFilterTitle}} zugeordnet werden. Wählen Sie einen anderen Maschine aus, senden Sie die Angaben über die Schaltfläche „Anfrage” an den Support oder setzen Sie die Suche fort.',
+      '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.`,
     },
@@ -229,8 +229,8 @@ export const translations = {
       '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 da placa de identificação não puderam ser correspondidos a uma {{preFilterTitle}} conhecida. Selecione um máquina diferente, envie os detalhes para o suporte através do botão Consulta ou continue a pesquisa.',
+      '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.`,
     },