@nyris/nyris-webapp 0.3.98 → 0.4.0

package/src/components/ScopeSelect/identifyTypePlateImage.test.ts

@@ -0,0 +1,129 @@
+import { parseScopeIdChatResponse } from './parseScopeIdResponse';
+import {
+  identifyTypePlateImage,
+  TypePlateExtractResult,
+  TypePlateLookupResult,
+} from './identifyTypePlateImage';
+
+const file = new File(['plate'], 'plate.jpg', { type: 'image/jpeg' });
+
+function extractFromResponse(response: unknown): TypePlateExtractResult {
+  const parsed = parseScopeIdChatResponse(response);
+  if (parsed.status !== 'extracted') {
+    return { status: 'not_found', extractedScopeId: '' };
+  }
+  return { status: 'extracted', extractedScopeId: parsed.serialNumber };
+}
+
+describe('identifyTypePlateImage', () => {
+  it('does not look up a machine when OCR returns null', async () => {
+    const lookup = jest.fn();
+    const result = await identifyTypePlateImage({
+      file,
+      isCurrent: () => true,
+      extract: async () => extractFromResponse({ serial_number: null }),
+      lookup,
+    });
+
+    expect(result).toEqual({ status: 'not_found' });
+    expect(lookup).not.toHaveBeenCalled();
+  });
+
+  it('returns not found when the scopes lookup has no item keys', async () => {
+    const lookup = jest.fn(
+      async (): Promise<TypePlateLookupResult> => ({ status: 'empty' }),
+    );
+    const result = await identifyTypePlateImage({
+      file,
+      isCurrent: () => true,
+      extract: async () => extractFromResponse({ serial_number: '2234GH' }),
+      lookup,
+    });
+
+    expect(lookup).toHaveBeenCalledWith('2234GH');
+    expect(result).toEqual({ status: 'not_found' });
+  });
+
+  it('returns not found when the scopes request fails', async () => {
+    const result = await identifyTypePlateImage({
+      file,
+      isCurrent: () => true,
+      extract: async () => extractFromResponse({ serial_number: '2234GH' }),
+      lookup: async () => {
+        throw new Error('network');
+      },
+    });
+
+    expect(result).toEqual({ status: 'not_found' });
+  });
+
+  it('identifies a machine only after the lookup succeeds', async () => {
+    const result = await identifyTypePlateImage({
+      file,
+      isCurrent: () => true,
+      extract: async () =>
+        extractFromResponse({ serial_number: 'Ab-12/c 9' }),
+      lookup: async () => ({
+        status: 'found',
+        itemKeys: ['sku-1'],
+        filterAttributes: [],
+      }),
+    });
+
+    expect(result).toEqual({
+      status: 'identified',
+      serialNumber: 'Ab-12/c 9',
+    });
+  });
+
+  it('ignores an OCR response after a newer attempt or manual switch', async () => {
+    let current = true;
+    const lookup = jest.fn();
+    const result = await identifyTypePlateImage({
+      file,
+      isCurrent: () => current,
+      extract: async () => {
+        current = false;
+        return extractFromResponse({ serial_number: 'OLD' });
+      },
+      lookup,
+    });
+
+    expect(result).toEqual({ status: 'ignored' });
+    expect(lookup).not.toHaveBeenCalled();
+  });
+
+  it('ignores a scopes lookup that finishes after the popup closes', async () => {
+    let current = true;
+    const result = await identifyTypePlateImage({
+      file,
+      isCurrent: () => current,
+      extract: async () => extractFromResponse({ serial_number: '2234GH' }),
+      lookup: async () => {
+        current = false;
+        return {
+          status: 'found',
+          itemKeys: ['sku-1'],
+          filterAttributes: [],
+        };
+      },
+    });
+
+    expect(result).toEqual({ status: 'ignored' });
+  });
+
+  it('ignores a failed OCR response after the attempt is no longer current', async () => {
+    let current = true;
+    const result = await identifyTypePlateImage({
+      file,
+      isCurrent: () => current,
+      extract: async () => {
+        current = false;
+        throw new Error('ai failed');
+      },
+      lookup: async () => ({ status: 'not_found' }),
+    });
+
+    expect(result).toEqual({ status: 'ignored' });
+  });
+});

package/src/components/ScopeSelect/identifyTypePlateImage.ts

@@ -0,0 +1,83 @@
+export interface TypePlateExtractResult {
+  extractedScopeId: string;
+  status: 'extracted' | 'not_found' | 'unavailable';
+}
+
+export type TypePlateLookupResult =
+  | {
+      status: 'found';
+      itemKeys: string[];
+      filterAttributes: { key?: string; values: string[] }[];
+    }
+  | { status: 'empty' | 'not_found' | 'unavailable' };
+
+export type TypePlateImageIdentification =
+  | { status: 'ignored' }
+  | { status: 'identified'; serialNumber: string }
+  | { status: 'not_found' }
+  | { status: 'unavailable' };
+
+interface IdentifyTypePlateImageOptions {
+  file: File;
+  isCurrent: () => boolean;
+  extract: (file: File) => Promise<TypePlateExtractResult>;
+  lookup: (serialNumber: string) => Promise<TypePlateLookupResult>;
+}
+
+/**
+ * OCR and the scopes lookup are separate. Confirmation is returned only when
+ * the lookup finds item keys. A stale attempt returns `ignored` and must not
+ * update the popup.
+ */
+export async function identifyTypePlateImage({
+  file,
+  isCurrent,
+  extract,
+  lookup,
+}: IdentifyTypePlateImageOptions): Promise<TypePlateImageIdentification> {
+  let extracted: TypePlateExtractResult;
+  try {
+    extracted = await extract(file);
+  } catch {
+    if (!isCurrent()) {
+      return { status: 'ignored' };
+    }
+    return { status: 'not_found' };
+  }
+
+  if (!isCurrent()) {
+    return { status: 'ignored' };
+  }
+
+  if (extracted.status !== 'extracted') {
+    return {
+      status: extracted.status === 'unavailable' ? 'unavailable' : 'not_found',
+    };
+  }
+
+  let lookupResult: TypePlateLookupResult;
+  try {
+    lookupResult = await lookup(extracted.extractedScopeId);
+  } catch {
+    if (!isCurrent()) {
+      return { status: 'ignored' };
+    }
+    return { status: 'not_found' };
+  }
+
+  if (!isCurrent()) {
+    return { status: 'ignored' };
+  }
+
+  if (lookupResult.status !== 'found') {
+    return {
+      status:
+        lookupResult.status === 'unavailable' ? 'unavailable' : 'not_found',
+    };
+  }
+
+  return {
+    status: 'identified',
+    serialNumber: extracted.extractedScopeId,
+  };
+}

package/src/components/ScopeSelect/parseScopeIdResponse.test.ts

@@ -0,0 +1,103 @@
+import { parseScopeIdChatResponse } from './parseScopeIdResponse';
+
+describe('parseScopeIdChatResponse', () => {
+  it('reads a serial number from the parsed chatAnalysis object', () => {
+    expect(parseScopeIdChatResponse({ serial_number: '2234GH' })).toEqual({
+      status: 'extracted',
+      serialNumber: '2234GH',
+    });
+  });
+
+  it('reads a JSON string', () => {
+    expect(
+      parseScopeIdChatResponse('{"serial_number":"2234GH"}'),
+    ).toEqual({
+      status: 'extracted',
+      serialNumber: '2234GH',
+    });
+  });
+
+  it('reads markdown-fenced JSON', () => {
+    expect(
+      parseScopeIdChatResponse('```json\n{"serial_number":"2234GH"}\n```'),
+    ).toEqual({
+      status: 'extracted',
+      serialNumber: '2234GH',
+    });
+  });
+
+  it('preserves case, internal characters, and surrounding spaces', () => {
+    expect(
+      parseScopeIdChatResponse({ serial_number: ' Ab-12/c 9 ' }),
+    ).toEqual({
+      status: 'extracted',
+      serialNumber: ' Ab-12/c 9 ',
+    });
+  });
+
+  it('treats null as not found', () => {
+    expect(parseScopeIdChatResponse({ serial_number: null })).toEqual({
+      status: 'not_found',
+    });
+  });
+
+  it('rejects an empty or whitespace-only value', () => {
+    expect(parseScopeIdChatResponse({ serial_number: '' })).toEqual({
+      status: 'not_found',
+    });
+    expect(parseScopeIdChatResponse({ serial_number: '   ' })).toEqual({
+      status: 'not_found',
+    });
+  });
+
+  it('rejects invalid value types', () => {
+    expect(parseScopeIdChatResponse({ serial_number: 12345 })).toEqual({
+      status: 'not_found',
+    });
+    expect(parseScopeIdChatResponse({ serial_number: false })).toEqual({
+      status: 'not_found',
+    });
+    expect(parseScopeIdChatResponse({ serial_number: {} })).toEqual({
+      status: 'not_found',
+    });
+    expect(parseScopeIdChatResponse({ serial_number: [] })).toEqual({
+      status: 'not_found',
+    });
+  });
+
+  it('rejects a missing serial_number property', () => {
+    expect(parseScopeIdChatResponse({})).toEqual({ status: 'not_found' });
+    expect(
+      parseScopeIdChatResponse({ other: '2234GH' }),
+    ).toEqual({ status: 'not_found' });
+  });
+
+  it('does not use malformed JSON as a serial number', () => {
+    expect(parseScopeIdChatResponse('{"serial_number":')).toEqual({
+      status: 'not_found',
+    });
+    expect(
+      parseScopeIdChatResponse('```json\n{"serial_number":\n```'),
+    ).toEqual({ status: 'not_found' });
+    expect(
+      parseScopeIdChatResponse('Result: {"serial_number":"2234GH"}'),
+    ).toEqual({ status: 'not_found' });
+  });
+
+  it('still accepts a legacy plain serial and NOT_FOUND', () => {
+    expect(parseScopeIdChatResponse('2234GH')).toEqual({
+      status: 'extracted',
+      serialNumber: '2234GH',
+    });
+    expect(parseScopeIdChatResponse('  Ab-12  ')).toEqual({
+      status: 'extracted',
+      serialNumber: 'Ab-12',
+    });
+    expect(parseScopeIdChatResponse('NOT_FOUND')).toEqual({
+      status: 'not_found',
+    });
+    expect(parseScopeIdChatResponse('  NOT_FOUND  ')).toEqual({
+      status: 'not_found',
+    });
+  });
+});

package/src/components/ScopeSelect/parseScopeIdResponse.ts

@@ -0,0 +1,72 @@
+import { normalizeChatResponse } from 'services/normalizeChatResponse';
+
+export type ScopeIdParseResult =
+  | { status: 'extracted'; serialNumber: string }
+  | { status: 'not_found' };
+
+const LEGACY_NOT_FOUND = 'NOT_FOUND';
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+
+/**
+ * Legacy plain-string responses are still accepted during rollout.
+ * Anything that looks like JSON, including a failed parse, is not a serial.
+ */
+function isUnparsedStructuredText(value: string): boolean {
+  const trimmed = value.trim();
+  return (
+    trimmed.startsWith('{') ||
+    trimmed.startsWith('[') ||
+    trimmed.startsWith('```') ||
+    trimmed.includes('{')
+  );
+}
+
+function parseSerialNumberValue(value: unknown): ScopeIdParseResult {
+  if (typeof value !== 'string') {
+    return { status: 'not_found' };
+  }
+  if (value.trim().length === 0 || value.trim() === LEGACY_NOT_FOUND) {
+    return { status: 'not_found' };
+  }
+  return { status: 'extracted', serialNumber: value };
+}
+
+/**
+ * `chatAnalysis` returns `normalizeChatResponse(response.data)`.
+ * Axios already parses a JSON body into an object. A string body may still be
+ * raw JSON or a markdown fence; `normalizeChatResponse` parses those.
+ * There is no extra content wrapper around the model output.
+ *
+ * Only `serial_number` is read. The string is kept exactly, including case
+ * and internal characters. Trimming is used only to reject a blank value.
+ */
+export function parseScopeIdChatResponse(
+  response: unknown,
+): ScopeIdParseResult {
+  const normalized = normalizeChatResponse(response);
+
+  if (isRecord(normalized)) {
+    if (!Object.prototype.hasOwnProperty.call(normalized, 'serial_number')) {
+      return { status: 'not_found' };
+    }
+    return parseSerialNumberValue(normalized.serial_number);
+  }
+
+  if (typeof normalized !== 'string') {
+    return { status: 'not_found' };
+  }
+
+  if (isUnparsedStructuredText(normalized)) {
+    return { status: 'not_found' };
+  }
+
+  const trimmed = normalized.trim();
+  if (trimmed.length === 0 || trimmed === LEGACY_NOT_FOUND) {
+    return { status: 'not_found' };
+  }
+
+  return { status: 'extracted', serialNumber: trimmed };
+}

package/src/components/ScopeSelect/scopeSelectHelpers.ts

@@ -0,0 +1,54 @@
+import { ToastHelper } from 'helpers/ToastHelper';
+import { TypePlateScopeResult } from 'hooks/useImageSearch';
+import { ScopeSource, AppliedScopeInput } from 'stores/scope/scopeStore';
+
+export type { ScopeSource, AppliedScopeInput };
+
+export function notifyScopeResult(
+  result: TypePlateScopeResult,
+  t: (key: string) => string,
+) {
+  if (result.status === 'not_found' || result.status === 'empty') {
+    const defaultErrorMessage =
+      window.settings.scopes?.typePlatePopupErrorMessage ||
+      'The serial number was not found. Please check again.';
+    ToastHelper.error(t(defaultErrorMessage));
+  }
+}
+
+export function getImageFileKey(file: File): string {
+  return `${file.name}:${file.size}:${file.lastModified}`;
+}
+
+export function isSameAppliedInput(
+  current: AppliedScopeInput,
+  lastApplied: AppliedScopeInput,
+): boolean {
+  if (current.source !== lastApplied.source) {
+    return false;
+  }
+  if (current.source === 'manual' && lastApplied.source === 'manual') {
+    return current.value === lastApplied.value;
+  }
+  return (
+    current.source === 'image' &&
+    lastApplied.source === 'image' &&
+    current.fileKey === lastApplied.fileKey
+  );
+}
+
+export async function toImageFile(
+  image: File | string | null | undefined,
+): Promise<File | null> {
+  if (image instanceof File) {
+    return image;
+  }
+  if (typeof image !== 'string' || image.length === 0) {
+    return null;
+  }
+  const response = await fetch(image);
+  const blob = await response.blob();
+  return new File([blob], 'type-plate.jpg', {
+    type: blob.type || 'image/jpeg',
+  });
+}

package/src/components/SidePanel.tsx

@@ -1,4 +1,6 @@
+import { useState } from 'react';
 import { twMerge } from 'tailwind-merge';
+import { Icon } from '@nyris/nyris-react-components';
 
 import ImagePreview from './ImagePreview';
 import useRequestStore from 'stores/request/requestStore';
@@ -14,6 +16,7 @@ export default function SidePanel({ className }: { className?: string }) {
   const settings = window.settings;
   const isSmartFiltersEnabled = !!settings.useSmartFilters;
   const requestImages = useRequestStore(state => state.requestImages);
+  const [isRequestQualityExpanded, setIsRequestQualityExpanded] = useState(true);
 
   const specificationFilter = useRequestStore(
     state => state.specificationFilter,
@@ -27,6 +30,7 @@ export default function SidePanel({ className }: { className?: string }) {
   const showSidePanel = useUiStore(state => state.showSidePanel);
 
   const imageAnalysis = useResultStore(state => state.imageAnalysis);
+  const requestQuality = useResultStore(state => state.requestQuality);
 
   const showPostFilter = window.settings?.postFilterOption;
 
@@ -153,6 +157,7 @@ export default function SidePanel({ className }: { className?: string }) {
                       }
                       return (
                         <IdentifiedAttributes
+                          key={key}
                           attr={key}
                           value={value}
                           specificationFilter={specificationFilter}
@@ -171,6 +176,34 @@ export default function SidePanel({ className }: { className?: string }) {
               />
             )}
 
+            {window.settings.requestQuality && requestQuality && (
+              <div className="mx-4 rounded-3xl bg-[#F3F4F8] border border-[#e4e3ff] p-3.5 text-[#3B3E5F]">
+                <button
+                  type="button"
+                  className="w-full flex items-center justify-between gap-2"
+                  onClick={() =>
+                    setIsRequestQualityExpanded(prev => !prev)
+                  }
+                >
+                  <span className="text-[#3B3E5F] font-bold text-sm leading-4">
+                    Request Image Quality
+                  </span>
+                  <Icon
+                    name="arrow_down"
+                    className={twMerge(
+                      'fill-[#3B3E5F] w-3 h-3 shrink-0 transition-transform',
+                      isRequestQualityExpanded && 'rotate-180',
+                    )}
+                  />
+                </button>
+                {isRequestQualityExpanded && (
+                  <div className="text-[#767A9F] text-sm mt-2.5">
+                    {requestQuality}
+                  </div>
+                )}
+              </div>
+            )}
+
             {(isGoogleGroundingLoading ||
               googleGroundingResponse ||
               groundingError) && (

package/src/components/TextSearch.tsx

@@ -8,11 +8,20 @@ import { Icon } from '@nyris/nyris-react-components';
 import { useImageSearch } from 'hooks/useImageSearch';
 import PreFilterModal from './PreFilter/PreFilterModal';
 import useRequestStore from 'stores/request/requestStore';
+import { hasActiveMachineScope } from 'stores/scope/scopeStore';
+import { firstMachinePartsListingText } from 'stores/machinePartsListing/machinePartsListingStore';
 import Tooltip from './Tooltip/TooltipComponent';
 import { useMediaQuery } from 'react-responsive';
 import ImageUpload from './ImageUpload';
+import { TypePlateUpload } from './TypePlateUpload';
 import useUiStore from 'stores/ui/uiStore';
 import useConversationStore from 'stores/chat/conversationStore';
+import { trackClick } from 'services/Feedback';
+import { CLICK_SUBTYPE } from 'services/feedbackSubtypes';
+
+function machinePartsListingText() {
+  return firstMachinePartsListingText();
+}
 
 function TextSearch({
   className,
@@ -63,7 +72,11 @@ function TextSearch({
     useState<boolean>(false);
   const [isInputFocused, setIsInputFocused] = useState(false);
 
+  const isScopeMode = !!settings.scopes?.scopeID;
   const showPreFilter = useMemo(() => {
+    if (settings.scopes?.scopeID) {
+      return false;
+    }
     if (settings.shouldUseUserMetadata && user) {
       if (user['/user_metadata']?.value) {
         setMetaFilter(user['/user_metadata'].value);
@@ -81,23 +94,38 @@ function TextSearch({
   }, [
     setMetaFilter,
     settings.preFilterOption,
+    settings.scopes?.scopeID,
     settings.shouldUseUserMetadata,
     user,
   ]);
 
   const visualSearch = useMemo(() => requestImages.length > 0, [requestImages]);
-  const { singleImageSearch } = useImageSearch();
+  const { singleImageSearch, searchMachinePartsListing } = useImageSearch();
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const searchOrRedirect = useCallback(
     debounce((value: any) => {
       setQuery(value);
-      if (requestImages.length === 0 && value === '' && !specifications) {
-        navigate('/');
-        return;
+      if (requestImages.length === 0 && value === '') {
+        if (hasActiveMachineScope()) {
+          searchMachinePartsListing({
+            text: machinePartsListingText() || '',
+            showFeedback: true,
+            clearPostFilters: true,
+          });
+          navigate('/result');
+          return;
+        }
+        if (!specifications) {
+          navigate('/');
+          return;
+        }
       }
 
-      if (!window.settings?.algolia.enabled && requestImages.length === 0) {
+      if (
+        requestImages.length === 0 &&
+        (hasActiveMachineScope() || !window.settings?.algolia.enabled)
+      ) {
         singleImageSearch({
           image: requestImages[0],
           imageRegion: regions[0],
@@ -114,10 +142,28 @@ function TextSearch({
   );
 
   const onChangeText = (event: any) => {
-    setValueInput(event.currentTarget.value);
-    searchOrRedirect(event.currentTarget.value);
+    const nextValue = event.currentTarget.value;
+    setValueInput(nextValue);
+
+    if (
+      nextValue === '' &&
+      requestImages.length === 0 &&
+      hasActiveMachineScope()
+    ) {
+      searchOrRedirect.cancel();
+      setQuery('');
+      searchMachinePartsListing({
+        text: machinePartsListingText() || '',
+        showFeedback: true,
+        clearPostFilters: true,
+      });
+      navigate('/result');
+      return;
+    }
 
-    if (event.currentTarget.value === '' && !specifications) {
+    searchOrRedirect(nextValue);
+
+    if (nextValue === '' && !specifications) {
       setValueInput('');
       setQuery('');
     }
@@ -179,6 +225,11 @@ function TextSearch({
                 showPreFilter ? setToggleModalFilterDesktop(true) : false
               }
             >
+              {isScopeMode && (
+                <TypePlateUpload
+                  iconOnly={location.pathname === '/result'}
+                />
+              )}
               {showPreFilter && (
                 <Tooltip
                   content={
@@ -342,7 +393,7 @@ function TextSearch({
                   {nameplateNotificationText}
                 </div>
               )}
-              {!showPreFilter && (
+              {!isScopeMode && !showPreFilter && (
                 <div className="p-2 hidden desktop:block">
                   <Icon name="search" width={16} height={16} />
                 </div>
@@ -390,7 +441,7 @@ function TextSearch({
                 location.pathname === '/result' &&
                   'desktop:bg-[#E7E8F1] focus:bg-[#FFFFFF]',
               )}
-              placeholder={t('Search')}
+              placeholder={t('Search part names, SKU, or description...')}
               value={valueInput}
               onChange={onChangeText}
               onFocus={() => setIsInputFocused(true)}
@@ -419,6 +470,7 @@ function TextSearch({
                     event.preventDefault();
                   }}
                   onClick={() => {
+                    searchOrRedirect.cancel();
                     if (visualSearch) {
                       navigate('/result');
                       setValueInput('');
@@ -438,6 +490,17 @@ function TextSearch({
                       }
                       return;
                     }
+                    if (hasActiveMachineScope()) {
+                      setQuery('');
+                      setValueInput('');
+                      searchMachinePartsListing({
+                        text: machinePartsListingText() || '',
+                        showFeedback: false,
+                        clearPostFilters: true,
+                      });
+                      navigate('/result');
+                      return;
+                    }
                     setSpecifications(null);
                     setQuery('');
                     setValueInput('');
@@ -451,7 +514,7 @@ function TextSearch({
             {showImageUpload && <ImageUpload onCameraClick={onCameraClick} />}
             {aiMode &&
               window.settings.vizo?.chat &&
-              requestImages.length !== 0 &&
+              (requestImages.length !== 0 || valueInput) &&
               !(isMobile && isInputFocused) && (
                 <div className="relative">
                   <button
@@ -467,6 +530,9 @@ function TextSearch({
                     )}
                     onClick={() => {
                       const nextIsAiModeOpen = !isAiModeOpen;
+                      if (nextIsAiModeOpen) {
+                        trackClick(CLICK_SUBTYPE.CHAT_WITH_VIZO);
+                      }
                       toggleAiMode();
                       setIsChatOpen(nextIsAiModeOpen);
                     }}