@nyris/nyris-webapp 0.3.99 → 0.4.1

package/src/components/PostFilter/PostFilterComponent.tsx

@@ -6,6 +6,7 @@ import {
 import React, { useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { twMerge } from 'tailwind-merge';
+import PostFilter from './PostFilter';
 import PostFilterFindApi from './PostFilterFindApi';
 
 function PostFilterComponent({ className }: { className?: string }) {
@@ -116,14 +117,27 @@ function PostFilterComponent({ className }: { className?: string }) {
               refinement.attribute;
 
             return (
-              <PostFilterFindApi
-                key={index}
-                attribute={refinement.attribute}
-                label={refinement.header}
-                searchable={false}
-                onVisibilityChange={handleVisibilityChange}
-                isLastVisible={isLastVisible}
-              />
+              <React.Fragment key={index}>
+                {window.settings.algolia.enabled && (
+                  <PostFilter
+                    attribute={refinement.attribute}
+                    label={refinement.header}
+                    searchable={refinement.searchable}
+                    onVisibilityChange={handleVisibilityChange}
+                    isLastVisible={isLastVisible}
+                  />
+                )}
+
+                {!window.settings.algolia.enabled && (
+                  <PostFilterFindApi
+                    attribute={refinement.attribute}
+                    label={refinement.header}
+                    searchable={false}
+                    onVisibilityChange={handleVisibilityChange}
+                    isLastVisible={isLastVisible}
+                  />
+                )}
+              </React.Fragment>
             );
           },
         )}

package/src/components/SidePanel.tsx

@@ -16,7 +16,8 @@ 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 [isRequestQualityExpanded, setIsRequestQualityExpanded] =
+    useState(true);
 
   const specificationFilter = useRequestStore(
     state => state.specificationFilter,
@@ -181,9 +182,7 @@ export default function SidePanel({ className }: { className?: string }) {
                 <button
                   type="button"
                   className="w-full flex items-center justify-between gap-2"
-                  onClick={() =>
-                    setIsRequestQualityExpanded(prev => !prev)
-                  }
+                  onClick={() => setIsRequestQualityExpanded(prev => !prev)}
                 >
                   <span className="text-[#3B3E5F] font-bold text-sm leading-4">
                     Request Image Quality

package/src/components/TextSearch.tsx

@@ -23,6 +23,8 @@ function machinePartsListingText() {
   return firstMachinePartsListingText();
 }
 
+const TEXT_SEARCH_DEBOUNCE = 1500;
+
 function TextSearch({
   className,
   onCameraClick,
@@ -137,7 +139,7 @@ function TextSearch({
       }
 
       navigate('/result');
-    }, 350),
+    }, TEXT_SEARCH_DEBOUNCE),
     [requestImages, preFilter, regions],
   );
 
@@ -226,9 +228,7 @@ function TextSearch({
               }
             >
               {isScopeMode && (
-                <TypePlateUpload
-                  iconOnly={location.pathname === '/result'}
-                />
+                <TypePlateUpload iconOnly={location.pathname === '/result'} />
               )}
               {showPreFilter && (
                 <Tooltip
@@ -444,6 +444,14 @@ function TextSearch({
               placeholder={t('Search part names, SKU, or description...')}
               value={valueInput}
               onChange={onChangeText}
+              onKeyDown={event => {
+                if (event.key === 'Enter') {
+                  event.preventDefault();
+                  searchOrRedirect.cancel();
+                  searchOrRedirect(event.currentTarget.value);
+                  searchOrRedirect.flush();
+                }
+              }}
               onFocus={() => setIsInputFocused(true)}
               onBlur={() => setIsInputFocused(false)}
               ref={focusInp}

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

@@ -12,6 +12,7 @@ import useSmartFiltersStore from 'stores/smartFilters/smartFiltersStore';
 import useResultStore from 'stores/result/resultStore';
 import useRequestStore from 'stores/request/requestStore';
 import { chatAnalysis } from 'services/vizo';
+import { getChatProductMetadata } from 'utils/chatProductMetadata';
 import {
   fetchProductImageBase64,
   getProductImageUrl,
@@ -234,7 +235,7 @@ export function useGoodResultsChat() {
               id: p.sku || p.objectID || `product-${i}`,
               title: title || 'Untitled',
               brand: p.brand || '',
-              description: (p.description || '').substring(0, 200),
+              description: p.description || '',
               mpn: p.customIds?.mpn || p.ids?.mpn || '',
             };
           });
@@ -267,7 +268,7 @@ export function useGoodResultsChat() {
               content: m.content,
             }));
 
-        // Fetch product thumbnail images with caching — send images for ALL results (up to 50)
+        // Fetch product thumbnail images with caching — send images for ALL results (up to 30)
         // Cache persists across filter operations; only clears on new search session
         const productsForImages = poolForAI.slice(0, 30);
         const currentSessionId = useConversationStore.getState().sessionId;
@@ -317,19 +318,18 @@ ${JSON.stringify(attributeFrequency, null, 2)}
 
 ${visualNotice}
 
-PRODUCT LIST (up to 50 results — each has a unique ID in [brackets] and AI-generated TAGS for type/color/shape/material. Use TAGS for filtering — they are pre-analyzed from product images. Return matching IDs in matched_ids array):
+PRODUCT LIST (up to 30 results — each JSON entry has a unique id and complete product metadata. When present, metadata._tags contains AI-generated type/color/shape/material tags pre-analyzed from product images. Use these tags for filtering. Return matching id values in matched_ids array):
 `,
         });
 
-        // Part 2: Product entries with interleaved images (for all results up to 50)
+        // Part 2: Product entries with interleaved images (for all results up to 30)
         visibleResults.forEach((r, i) => {
-          // Include AI-generated tags if available (from useProductTagger)
-          const originalProduct = poolForAI[i];
-          const tags = originalProduct?._tags;
-          const tagStr = tags
-            ? ` | TAGS: type=${tags.productType}, color=${tags.color}, shape=${tags.shape}, material=${tags.material}`
-            : '';
-          const metaLine = `id: ${r.id} | ${r.title} | brand: ${r.brand} | mpn: ${r.mpn} | desc: ${r.description}${tagStr}`;
+          const metaLine = JSON.stringify(
+            getChatProductMetadata({
+              id: r.id,
+              metadata: getChatProductMetadata(poolForAI[i]),
+            }),
+          );
 
           // Include product image if available
           if (
@@ -587,12 +587,15 @@ Respond to the user's message with an appropriate action and follow-up options.`
         }
 
         // Add assistant message
-        addMessage({
-          role: 'assistant',
-          content: finalMessage,
-          action: p3Response.action,
-          options: finalOptions,
-        });
+        addMessage(
+          {
+            role: 'assistant',
+            content: finalMessage,
+            action: p3Response.action,
+            options: finalOptions,
+          },
+          { isApiResponse: true },
+        );
       } catch (err: any) {
         console.error('[P3] Error:', err);
         setError(err.message || 'Failed to process message');