@nyris/nyris-webapp 0.3.98 → 0.4.0

package/src/components/Tooltip/TooltipComponent.tsx

@@ -13,20 +13,28 @@ function Tooltip({
   disabled,
   sideOffset,
   delayDuration = 80,
+  open,
+  side = 'top',
 }: {
-  content: string;
+  content: React.ReactNode;
   children: React.ReactNode;
   disabled?: boolean;
   sideOffset?: number;
   delayDuration?: number;
+  open?: boolean;
+  side?: 'top' | 'right' | 'bottom' | 'left';
 }) {
   return (
     <TooltipProvider delayDuration={delayDuration}>
-      <RadixTooltip open={disabled ? false : undefined}>
+      <RadixTooltip open={disabled ? false : open}>
         <TooltipTrigger asChild>{children}</TooltipTrigger>
-        <TooltipContent sideOffset={sideOffset}>
+        <TooltipContent side={side} sideOffset={sideOffset}>
           <TooltipArrow />
-          <p className="text-white max-w-[350px]">{content}</p>
+          {typeof content === 'string' ? (
+            <p className="text-white max-w-[350px]">{content}</p>
+          ) : (
+            content
+          )}
         </TooltipContent>
       </RadixTooltip>
     </TooltipProvider>

package/src/components/TypePlateUpload.tsx

@@ -0,0 +1,132 @@
+import { useState } from 'react';
+import { Icon } from '@nyris/nyris-react-components';
+import { useTranslation } from 'react-i18next';
+import { twMerge } from 'tailwind-merge';
+import useScopeStore from 'stores/scope/scopeStore';
+import Tooltip from './Tooltip/TooltipComponent';
+import { ScopeSelectModal } from './ScopeSelect/ScopeSelectModal';
+
+export interface TypePlateUploadProps {
+  className?: string;
+  disabledTooltip?: boolean;
+  alternativeView?: boolean;
+  /** When false, the button only opens a modal owned by the parent. */
+  showModal?: boolean;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** Results-page text search: icon, tooltip, and active-scope marker. */
+  iconOnly?: boolean;
+}
+
+export function TypePlateUpload({
+  className,
+  alternativeView = false,
+  showModal = true,
+  open,
+  onOpenChange,
+  iconOnly = false,
+}: TypePlateUploadProps = {}) {
+  const { t } = useTranslation();
+  const scopeId = useScopeStore(state => state.scopeId);
+  const scopeItemKeys = useScopeStore(state => state.itemKeys);
+  const hasActiveScope = Boolean(scopeId) && scopeItemKeys.length > 0;
+  const [internalOpen, setInternalOpen] = useState(false);
+  const isControlled = open !== undefined;
+  const isOpen = isControlled ? open : internalOpen;
+  const setIsOpen = (next: boolean) => {
+    if (!isControlled) {
+      setInternalOpen(next);
+    }
+    onOpenChange?.(next);
+  };
+
+  if (!window.settings.scopes?.scopeID) return null;
+
+  const buttonLabel =
+    window.settings.scopes?.typePlateButtonLabel ||
+    window.settings.scopes?.typePlateButtonText ||
+    'Scan type plate';
+  const tooltipText =
+    iconOnly && hasActiveScope
+      ? t(
+          'Searching within parts for {{scopeId}}. You may scan another type plate.',
+          { scopeId },
+        )
+      : t('Scan Type plate');
+  const accessibleName = iconOnly ? tooltipText : t(buttonLabel);
+
+  const button = (
+    <button
+      type="button"
+      className={twMerge(
+        'p-2 desktop:p-3 flex items-center gap-2 rounded-full border border-solid cursor-pointer',
+        alternativeView
+          ? 'bg-theme-primary border-theme-primary'
+          : 'bg-[#f3f3f5] border-[#2B2C46] desktop:bg-[#FAFAFA]',
+        className,
+      )}
+      aria-label={accessibleName}
+      onClick={() => setIsOpen(true)}
+    >
+      <Icon
+        name="typeplate"
+        width={16}
+        height={16}
+        fill={alternativeView ? '#FFFFFF' : '#2B2C46'}
+      />
+      {!iconOnly && (
+        <span
+          className={twMerge(
+            'whitespace-nowrap pr-1 text-[14px] leading-none',
+            alternativeView ? 'text-white' : 'text-[#2B2C46]',
+          )}
+        >
+          {t(buttonLabel)}
+        </span>
+      )}
+    </button>
+  );
+
+  return (
+    <>
+      {iconOnly ? (
+        <div className="relative">
+          <Tooltip content={tooltipText}>{button}</Tooltip>
+          {hasActiveScope && (
+            <div
+              className="pointer-events-none top-2 left-8 desktop:top-[1px] desktop:left-[26px]"
+              style={{
+                position: 'absolute',
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                background: 'white',
+                width: '12px',
+                height: '12px',
+                borderRadius: '100%',
+              }}
+            >
+              <div
+                style={{
+                  width: '8px',
+                  height: '8px',
+                  background: window.settings.theme?.primaryColor,
+                  borderRadius: '100%',
+                  strokeWidth: '2px',
+                }}
+              />
+            </div>
+          )}
+        </div>
+      ) : (
+        button
+      )}
+      {showModal && (
+        <ScopeSelectModal
+          openModal={isOpen}
+          handleClose={() => setIsOpen(false)}
+        />
+      )}
+    </>
+  );
+}

package/src/hooks/chatProductMetadata.test.ts

@@ -0,0 +1,307 @@
+import { act, renderHook } from '@testing-library/react';
+import { chatAnalysis } from 'services/vizo';
+import useConversationStore from 'stores/chat/conversationStore';
+import { compressImage } from 'utils/compressImage';
+import {
+  fetchProductImageBase64,
+  getProductImageUrl,
+} from 'utils/fetchProductImage';
+import { loadRelatedPartsTable } from 'utils/relatedParts';
+import { useChatAssistantLogic } from 'components/ChatAssistant/useChatAssistantLogic';
+import { useBadResultsRecovery } from './useBadResultsRecovery';
+import { useGoodResultsChat } from './useGoodResultsChat';
+import { useResultEvaluator } from './useResultEvaluator';
+
+const mockProduct = {
+  sku: 'pump-1',
+  title: 'Pump',
+  description: 'Complete technical specification. '.repeat(20),
+  customIds: { mpn: 'MPN-1', gtin: '123456' },
+  attributes: { pressure: 0, available: false, material: 'steel' },
+  metadata: { customerAttribute: 'custom-value' },
+  categories: ['Industrial', 'Pumps'],
+  _tags: { productType: 'pump', color: 'blue', shape: 'round' },
+  url: 'https://example.com/product',
+  imageUrl: 'https://example.com/image.jpg',
+  images: [{ url: 'https://example.com/image.jpg', width: 300 }],
+};
+const mockResultState = {
+  productsFromFindApi: [mockProduct],
+  productsFromAlgolia: [] as typeof mockProduct[],
+  firstSearchResults: [mockProduct],
+  fullResultPool: [mockProduct],
+  imageAnalysis: {},
+  setFindApiProducts: jest.fn(),
+  setFullResultPool: jest.fn(),
+  setImageAnalysis: jest.fn(),
+};
+const mockRequestState = { requestImages: [], regions: [] };
+
+jest.mock('stores/result/resultStore', () => ({
+  __esModule: true,
+  default: Object.assign(
+    (selector: (state: typeof mockResultState) => unknown) =>
+      selector(mockResultState),
+    { getState: () => mockResultState },
+  ),
+}));
+jest.mock('stores/request/requestStore', () => ({
+  __esModule: true,
+  default: Object.assign(
+    (selector: (state: typeof mockRequestState) => unknown) =>
+      selector(mockRequestState),
+    { getState: () => mockRequestState },
+  ),
+}));
+jest.mock('stores/smartFilters/smartFiltersStore', () => ({
+  __esModule: true,
+  default: () => ({ filters: [] }),
+}));
+jest.mock('services/vizo', () => ({ chatAnalysis: jest.fn() }));
+jest.mock('utils/compressImage', () => ({ compressImage: jest.fn() }));
+jest.mock('utils/fetchProductImage', () => ({
+  fetchProductImageBase64: jest.fn(),
+  getProductImageUrl: jest.fn(),
+}));
+jest.mock('utils/relatedParts', () => ({
+  loadRelatedPartsTable: jest.fn(),
+  lookupRelatedParts: jest.fn(),
+}));
+jest.mock('utils/nyrisApiKey', () => ({ getEffectiveApiKey: jest.fn() }));
+
+const mockChatAnalysis = chatAnalysis as jest.MockedFunction<typeof chatAnalysis>;
+const mockFetchImage = fetchProductImageBase64 as jest.MockedFunction<
+  typeof fetchProductImageBase64
+>;
+const mockGetImageUrl = getProductImageUrl as jest.MockedFunction<
+  typeof getProductImageUrl
+>;
+const mockLoadRelatedParts = loadRelatedPartsTable as jest.MockedFunction<
+  typeof loadRelatedPartsTable
+>;
+const mockCompressImage = compressImage as jest.MockedFunction<
+  typeof compressImage
+>;
+
+beforeEach(() => {
+  jest.clearAllMocks();
+  window.settings = {
+    algolia: { enabled: false },
+    vizo: { findRelatedParts: false },
+  } as typeof window.settings;
+  mockResultState.productsFromFindApi = [mockProduct];
+  mockResultState.productsFromAlgolia = [];
+  mockResultState.firstSearchResults = [mockProduct];
+  mockResultState.fullResultPool = [mockProduct];
+  useConversationStore.getState().reset();
+  mockGetImageUrl.mockReturnValue(mockProduct.imageUrl);
+  mockFetchImage.mockResolvedValue(null);
+  mockLoadRelatedParts.mockResolvedValue({});
+  mockCompressImage.mockResolvedValue('data:image/jpeg;base64,new-image');
+  mockChatAnalysis.mockResolvedValue({
+    quality: 'good',
+    route: 'P3',
+    opening_message: 'How can I help?',
+    message: 'How can I help?',
+    action: { type: 'none' },
+    options: [],
+  });
+});
+
+function expectCompleteMetadata(promptKey: string) {
+  expect(mockChatAnalysis).toHaveBeenCalledTimes(1);
+  const request = mockChatAnalysis.mock.calls[0][0];
+  expect(request.promptKey).toBe(promptKey);
+  const text = request.multimodalInputs.map(input => input.metadata).join('\n');
+  expect(text).toContain(JSON.stringify(mockProduct.description));
+  expect(text).toContain(JSON.stringify(mockProduct.customIds));
+  expect(text).toContain(JSON.stringify(mockProduct.attributes));
+  expect(text).toContain(JSON.stringify(mockProduct.metadata));
+  expect(text).toContain(JSON.stringify(mockProduct.categories));
+  expect(text).toContain(JSON.stringify(mockProduct._tags));
+  expect(text).toContain('"images":[{"width":300}]');
+  expect(text).not.toContain('https://');
+  expect(text).not.toContain('"imageUrl"');
+  expect(text).not.toContain('"url"');
+  expect(mockProduct.url).toBe('https://example.com/product');
+  return request;
+}
+
+function expectProductEnvelope(text: string, key: string, value: string | number) {
+  const product = JSON.parse(text.replace(/\. Result_images\.$/, ''));
+  expect(Object.keys(product).sort()).toEqual([key, 'metadata'].sort());
+  expect(product[key]).toBe(value);
+  expect(product.metadata.title).toBe(mockProduct.title);
+  expect(product.metadata.description).toBe(mockProduct.description);
+}
+
+test.each([
+  { phase: 'evaluation', limit: 30 },
+  { phase: 'recovery', limit: 100 },
+])('$phase counts curated traits within its result limit', async ({ phase, limit }) => {
+  const products = Array.from({ length: limit + 1 }, (_, index) => ({
+    ...mockProduct,
+    sku: `pump-${index}`,
+    title: `ACME pump 24V DC ${index}`,
+    description: `steel housing ${index}`,
+    material: { name: 'steel' },
+    brand: { name: 'ACME' },
+    voltage: ['24V DC'],
+  }));
+  mockResultState.productsFromFindApi = products;
+  const snapshot = JSON.stringify(products);
+  const { result } = renderHook(() => ({
+    evaluator: useResultEvaluator(),
+    recovery: useBadResultsRecovery(),
+  }));
+
+  await act(async () => {
+    if (phase === 'evaluation') {
+      await result.current.evaluator.evaluateResults({
+        imageAnalysis: {},
+        activeProducts: products,
+        query: 'pump',
+      });
+    } else {
+      await result.current.recovery.sendMessage('Find a pump');
+    }
+  });
+
+  expect(mockChatAnalysis).toHaveBeenCalledTimes(1);
+  const request = mockChatAnalysis.mock.calls[0][0];
+  const context = request.multimodalInputs[0].metadata;
+  const frequency = JSON.parse(
+    context.split(/COMMON ATTRIBUTES FOUND IN RESULTS[^\n]*\n/)[1].split('\n\n')[0],
+  );
+  expect(frequency).toEqual({
+    brand: { ACME: limit },
+    voltage: { '24V DC': limit },
+    product_type: { PUMP: limit },
+    material: { steel: limit },
+  });
+  const product = JSON.parse(
+    request.multimodalInputs[1].metadata.replace(/\. Result_images\.$/, ''),
+  );
+  expect(product.metadata.sku).toBe('pump-0');
+  expect(product.metadata.description).toBe('steel housing 0');
+  expect(product.metadata.attributes).toEqual(mockProduct.attributes);
+  expect(product.metadata.customIds).toEqual(mockProduct.customIds);
+  expect(product.metadata.brand).toEqual({ name: 'ACME' });
+  expect(product.metadata.voltage).toEqual(['24V DC']);
+  expect(product.metadata.material).toEqual({ name: 'steel' });
+  expect(Object.keys(product).sort()).toEqual(
+    [phase === 'evaluation' ? 'rank' : 'index', 'metadata'].sort(),
+  );
+  expect(JSON.stringify(products)).toBe(snapshot);
+  expect(useConversationStore.getState().error).toBeNull();
+});
+
+test.each([false, true])(
+  'evaluation includes complete metadata even when thumbnails are available: %s',
+  async hasImages => {
+    mockFetchImage.mockResolvedValue(hasImages ? 'product-image' : null);
+    const { result } = renderHook(() => useResultEvaluator());
+    await act(async () => {
+      await result.current.evaluateResults({
+        imageAnalysis: {},
+        activeProducts: [mockProduct],
+        query: 'pump',
+      });
+    });
+    const request = expectCompleteMetadata('result_evaluator_prompt');
+    expectProductEnvelope(request.multimodalInputs[1].metadata, 'rank', 1);
+    expect(request.multimodalInputs[1].image).toBe(
+      hasImages ? 'product-image' : undefined,
+    );
+    expect(useConversationStore.getState().error).toBeNull();
+  },
+);
+
+test.each([
+  { silent: false, algolia: false, hasImages: false },
+  { silent: true, algolia: false, hasImages: true },
+  { silent: false, algolia: true, hasImages: true },
+])('chat sends full metadata for %j', async ({ silent, algolia, hasImages }) => {
+  window.settings.algolia.enabled = algolia;
+  if (algolia) {
+    mockResultState.productsFromAlgolia = [
+      mockProduct,
+      mockProduct,
+      mockProduct,
+    ];
+    mockResultState.fullResultPool = [];
+  } else {
+    mockResultState.fullResultPool = [mockProduct, mockProduct, mockProduct];
+  }
+  mockFetchImage.mockResolvedValue(hasImages ? 'product-image' : null);
+  const { result } = renderHook(() => useGoodResultsChat());
+  await act(async () => {
+    await result.current.sendMessage('Find a pump', { silent });
+  });
+  const request = expectCompleteMetadata('chat_assistant_prompt');
+  expectProductEnvelope(request.multimodalInputs[1].metadata, 'id', 'pump-1');
+  expect(request.multimodalInputs[1].image).toBe(
+    hasImages ? 'product-image' : undefined,
+  );
+  expect(useConversationStore.getState().error).toBeNull();
+});
+
+test.each([false, true])(
+  'recovery includes all metadata for thumbnail and text-only results: %s',
+  async hasImages => {
+    mockResultState.productsFromFindApi = Array.from(
+      { length: 31 },
+      (_, index) => ({ ...mockProduct, sku: `pump-${index}` }),
+    );
+    mockFetchImage.mockResolvedValue(hasImages ? 'product-image' : null);
+    mockChatAnalysis.mockResolvedValue({
+      message: 'What pressure do you need?',
+      action: 'ask',
+      options: [],
+    });
+    const { result } = renderHook(() => useBadResultsRecovery());
+    await act(async () => {
+      await result.current.sendMessage('Find a pump');
+    });
+    const request = expectCompleteMetadata('recovery_prompt');
+    expectProductEnvelope(request.multimodalInputs[1].metadata, 'index', 0);
+    expect(request.multimodalInputs[1].image).toBe(
+      hasImages ? 'product-image' : undefined,
+    );
+    const remaining = request.multimodalInputs.find(input =>
+      input.metadata.startsWith('REMAINING RESULTS'),
+    );
+    expect(remaining?.metadata).toContain('"index":30');
+    expectProductEnvelope(remaining!.metadata.split('\n')[1], 'index', 30);
+    expect(remaining?.metadata).toContain(
+      JSON.stringify(mockProduct.description),
+    );
+    expect(remaining?.metadata).toContain(JSON.stringify(mockProduct.attributes));
+    expect(useConversationStore.getState().error).toBeNull();
+  },
+);
+
+test.each([false, true])(
+  'image refinement sends complete metadata with thumbnails available: %s',
+  async hasImages => {
+    mockResultState.productsFromFindApi = [mockProduct, mockProduct, mockProduct];
+    mockFetchImage.mockResolvedValue(hasImages ? 'product-image' : null);
+    mockChatAnalysis.mockResolvedValue({
+      message: 'Found a pump',
+      matched_indices: [1],
+    });
+    const { result } = renderHook(() => useChatAssistantLogic());
+    await act(async () => {
+      await result.current.handleImageUpload('data:image/jpeg;base64,new-image');
+    });
+    const request = expectCompleteMetadata('image_refinement');
+    expectProductEnvelope(request.multimodalInputs[2].metadata, 'rank', 1);
+    expect(request.multimodalInputs[2].image).toBe(
+      hasImages ? 'product-image' : undefined,
+    );
+    expect(mockResultState.setFindApiProducts).toHaveBeenCalledWith([
+      mockProduct,
+    ]);
+    expect(useConversationStore.getState().error).toBeNull();
+  },
+);

package/src/hooks/useBadResultsRecovery.ts

@@ -14,6 +14,11 @@ import useConversationStore, {
 import useSmartFiltersStore from 'stores/smartFilters/smartFiltersStore';
 import useResultStore from 'stores/result/resultStore';
 import { chatAnalysis } from 'services/vizo';
+import {
+  getChatAttributeFrequency,
+  getChatProductAttributes,
+  getChatProductMetadata,
+} from 'utils/chatProductMetadata';
 import {
   getProductImageUrl,
   fetchProductImageBase64,
@@ -98,29 +103,8 @@ export function useBadResultsRecovery() {
         const allResults = originalProducts
           .slice(0, 100)
           .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];
-            });
+            const fullMetadata = getChatProductMetadata(p);
+            const metadata = getChatProductAttributes(fullMetadata);
 
             // Extract from title/description using common patterns
             const title = p.title || p.name || '';
@@ -172,26 +156,15 @@ export function useBadResultsRecovery() {
 
             return {
               index: i,
-              sku: p.sku || p.objectID || `product-${i}`,
-              title: title || 'Untitled',
-              description: (p.description || '').substring(0, 100),
-              category: p.category || p.type || '',
-              metadata: Object.keys(metadata).length > 0 ? metadata : null,
+              metadata: fullMetadata,
+              attributes: metadata,
             };
           });
 
         // Analyze common attributes across results for smart question options
-        const attributeFrequency: Record<string, Record<string, number>> = {};
-        allResults.forEach((r: any) => {
-          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 attributeFrequency = getChatAttributeFrequency(
+          allResults.map(result => ({ metadata: result.attributes })),
+        );
 
         // Build conversation history
         const conversationHistory = messages.map(m => ({
@@ -255,8 +228,9 @@ PRODUCT LIST (first 30 with thumbnails where available, indices 0-based for filt
         // Part 2: First 30 results interleaved with thumbnails
         allResults
           .slice(0, 30)
-          .forEach((r: (typeof allResults)[number], i: number) => {
-            const metaLine = `index: ${r.index} ${r.sku} | ${r.title}${r.metadata ? ` | ${JSON.stringify(r.metadata)}` : ''}`;
+          .forEach(({ index, metadata }, i: number) => {
+            const r = { index, metadata };
+            const metaLine = JSON.stringify(getChatProductMetadata(r));
 
             if (hasVisualContext && imageResults[i]?.base64) {
               multimodalParts.push({
@@ -276,8 +250,8 @@ PRODUCT LIST (first 30 with thumbnails where available, indices 0-based for filt
 ${allResults
   .slice(30)
   .map(
-    (r: (typeof allResults)[number]) =>
-      `index: ${r.index} | sku: ${r.sku} | ${r.title}${r.metadata ? ` | ${JSON.stringify(r.metadata)}` : ''}`,
+    ({ index, metadata }) =>
+      JSON.stringify(getChatProductMetadata({ index, metadata })),
   )
   .join('\n')}`,
           });
@@ -360,12 +334,15 @@ Based on the user's answer and the failure mode strategy, decide whether to ask
         }
 
         // Add assistant message
-        addMessage({
-          role: 'assistant',
-          content: p5Response.message,
-          action: { type: p5Response.action },
-          options: options,
-        });
+        addMessage(
+          {
+            role: 'assistant',
+            content: p5Response.message,
+            action: { type: p5Response.action },
+            options: options,
+          },
+          { isApiResponse: true },
+        );
       } catch (err: any) {
         console.error('[P5] Error:', err);
         setError(err.message || 'Failed to process message');

package/src/hooks/useEffectiveGroundingResults.ts

@@ -26,12 +26,14 @@ export function useEffectiveGroundingResults() {
     const postEntries = Object.entries(postFilterSelections || {}).filter(
       ([, values]) => values?.length,
     );
-    if (
-      postEntries.length > 0 &&
-      !(
-        !window.settings.algolia?.enabled && window.settings.postFilterOption
-      )
-    ) {
+    // Text-only find-API post-filters re-query; skip client-side narrowing.
+    // Image search uses the old client-side post-filter behavior.
+    const isTextOnlyFindApiPostFilter =
+      !window.settings.algolia?.enabled &&
+      window.settings.postFilterOption &&
+      !(requestImages?.length > 0);
+
+    if (postEntries.length > 0 && !isTextOnlyFindApiPostFilter) {
       filteredProducts = filteredProducts.filter((product: any) => {
         const productFilters = product?.filters || {};
         return postEntries.every(([attribute, selectedValues]) => {