@nyris/nyris-webapp 0.3.98 → 0.4.0

package/src/pages/Result.tsx

@@ -11,7 +11,7 @@ import SidePanel from 'components/SidePanel';
 import Loading from 'components/Loading';
 
 import Feedback from 'components/Feedback';
-import { feedbackSuccessEpic } from 'services/Feedback';
+import { trackResultFeedback } from 'services/Feedback';
 import useRequestStore from 'stores/request/requestStore';
 import RfqBanner from 'components/Rfq/RfqBanner';
 import InquiryBanner from 'components/Inquiry/InquiryBanner';
@@ -22,15 +22,24 @@ import ImagePreview from 'components/ImagePreview';
 import PoweredBy from 'components/PoweredBy';
 import CurrentRefinements from 'components/CurrentRefinements';
 import { GoBackButton } from 'components/GoBackButton';
+import { useNavigate } from 'react-router';
 import { useCurrentRefinements } from 'react-instantsearch';
 import CustomCamera from 'components/CustomCameraDrawer';
 import { useTranslation } from 'react-i18next';
 import { useImageSearch } from 'hooks/useImageSearch';
+import { useMachinePartsListingPagination } from 'hooks/useMachinePartsListingPagination';
 import MatchNotificationBanner from 'components/MatchNotificationBanner';
 import ImageUpload from 'components/ImageUpload';
 import SmartFilter from 'components/SmartFilter';
 import { ChatAssistant, MobileChatAssistant } from 'components/ChatAssistant';
 import IdentifiedAttributes from 'components/IdentifiedAttributes';
+import useScopeStore from 'stores/scope/scopeStore';
+import { TypePlateUpload } from 'components/TypePlateUpload';
+import { ScopeSelectModal } from 'components/ScopeSelect/ScopeSelectModal';
+
+const DEFAULT_SCOPE_RESULTS_LABEL =
+  'Searching within parts for {{scope_id}}. ' +
+  'You can search with keyword or image to find the right item';
 
 function Results() {
   const settings = window.settings;
@@ -55,8 +64,10 @@ function Results() {
   const showFeedback = useUiStore(state => state.showFeedback);
   const setIsFindApiLoading = useUiStore(state => state.setIsFindApiLoading);
   const isAiModeOpen = useUiStore(state => state.isAiModeOpen);
+  const requestQuality = useResultStore(state => state.requestQuality);
+  const [isRequestQualityExpanded, setIsRequestQualityExpanded] =
+    useState(true);
 
-  const requestId = useResultStore(state => state.requestId);
   const imageAnalysis = useResultStore(state => state.imageAnalysis);
 
   const specificationFilter = useRequestStore(
@@ -64,13 +75,32 @@ function Results() {
   );
   const requestImages = useRequestStore(state => state.requestImages);
   const specifications = useRequestStore(state => state.specifications);
-  const query = useRequestStore(state => state.query);
   const regions = useRequestStore(state => state.regions);
-
+  const query = useRequestStore(state => state.query);
+  const scopeItemKeys = useScopeStore(state => state.itemKeys);
+  const activeScopeId = useScopeStore(state => state.scopeId);
+  const resetScope = useScopeStore(state => state.resetScope);
+  const navigate = useNavigate();
   const [showPostFilter, setShowPostFilter] = useState(false);
   const [isOpenModalCamera, setOpenModalCamera] = useState<boolean>(false);
 
   const isShowFilter = query || requestImages[0];
+  const isScopeFeatureEnabled = Boolean(window.settings?.scopes?.scopeID);
+  const isScopeFilterActive =
+    isScopeFeatureEnabled && scopeItemKeys.length > 0 && Boolean(activeScopeId);
+  const [isTypePlateOpen, setIsTypePlateOpen] = useState(false);
+  const [isNoScopeBannerDismissed, setIsNoScopeBannerDismissed] =
+    useState<boolean>(false);
+
+  useEffect(() => {
+    if (isScopeFilterActive) {
+      setIsNoScopeBannerDismissed(false);
+    }
+  }, [isScopeFilterActive]);
+
+  useEffect(() => {
+    setIsNoScopeBannerDismissed(false);
+  }, [query, requestImages]);
 
   const { items } = useCurrentRefinements();
 
@@ -80,6 +110,46 @@ function Results() {
     document.title = 'Search results';
   }, [cadenas?.cadenas3dWebView, cadenas?.cadenasAPIKey]);
   const { singleImageSearch } = useImageSearch();
+  const listingPagination = useMachinePartsListingPagination();
+  // Scoped keyword/image results come from Find API, which has no paging, so
+  // the Algolia page-size control would only change hidden results.
+  const isFindApiSearchUnderAlgolia =
+    isScopeFilterActive &&
+    Boolean(settings.algolia?.enabled) &&
+    !listingPagination.isListing;
+
+  const clearActiveScopeFilter = () => {
+    const keyword = (useRequestStore.getState().query || '').trim();
+    const searchImage = useRequestStore.getState().requestImages[0];
+    const region = useRequestStore.getState().regions[0];
+    resetScope();
+    if (searchImage) {
+      void singleImageSearch({
+        image: searchImage,
+        imageRegion: region,
+        settings,
+        showFeedback: false,
+        newSearch: false,
+      });
+      return;
+    }
+    if (keyword) {
+      if (window.settings.algolia?.enabled) {
+        useRequestStore.getState().setAlgoliaFilter('');
+        return;
+      }
+      void singleImageSearch({
+        text: keyword,
+        settings,
+        showFeedback: false,
+        newSearch: false,
+      });
+      return;
+    }
+    useResultStore.getState().reset();
+    useRequestStore.getState().reset();
+    navigate('/');
+  };
 
   const getImageFromUrl = async (
     url: string,
@@ -134,7 +204,7 @@ function Results() {
     }, 3000);
     setFeedbackStatus('submitted');
     setShowFeedback(false);
-    feedbackSuccessEpic(requestId, data);
+    trackResultFeedback(data);
   };
 
   useEffect(() => {
@@ -236,6 +306,33 @@ function Results() {
                       />
                     </div>
                   )}
+                  {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>
+                  )}
                   {window.settings.showImageDetails &&
                     (imageAnalysis?.imageDescription ||
                       Object.keys(imageAnalysis?.specification || {}).length >
@@ -354,6 +451,69 @@ function Results() {
                           <GoBackButton className="col-span-full mb-2 desktop:mb-0 mt-2 desktop:mt-0" />
                           <CurrentRefinements className="col-span-full" />
                           <MatchNotificationBanner className="col-span-full" />
+                          {isScopeFilterActive && (
+                            <div className="col-span-full flex items-center justify-between gap-4 rounded-2xl border border-solid border-theme-primary bg-white px-4 py-[.8rem] text-sm text-primary">
+                              <p className="min-w-0 flex-1 font-normal text-left">
+                                {t(
+                                  window.settings.scopes
+                                    ?.typePlateResultsScopeLabel ||
+                                    DEFAULT_SCOPE_RESULTS_LABEL,
+                                  { scope_id: activeScopeId },
+                                )}
+                              </p>
+                              <button
+                                type="button"
+                                className="flex h-5 w-5 shrink-0 items-center justify-center rounded-sm text-primary hover:text-black cursor-pointer"
+                                onClick={clearActiveScopeFilter}
+                                aria-label={t(
+                                  window.settings.scopes
+                                    ?.typePlateResultsClearScopeLabel ||
+                                    'Search all products',
+                                )}
+                                title={t(
+                                  window.settings.scopes
+                                    ?.typePlateResultsClearScopeLabel ||
+                                    'Search all products',
+                                )}
+                              >
+                                <Icon name="close" className="h-3 w-3" />
+                              </button>
+                            </div>
+                          )}
+                          {isScopeFeatureEnabled &&
+                            !isScopeFilterActive &&
+                            !isNoScopeBannerDismissed && (
+                              <div className="col-span-full flex items-center justify-between gap-4 rounded-2xl border border-solid border-theme-primary bg-white px-4 py-2.5 text-sm text-[#2B2C46]">
+                                <div className="min-w-0 flex-1 text-left">
+                                  <p className="font-normal text-[#2B2C46]">
+                                    {t(
+                                      window.settings.scopes
+                                        ?.typePlateResultsNoScopeLabel ||
+                                        'Scan your type plate to see only parts for your equipment.',
+                                    )}
+                                  </p>
+                                </div>
+                                <div className="flex shrink-0 items-center gap-2 desktop:gap-3">
+                                  <TypePlateUpload
+                                    alternativeView
+                                    showModal={false}
+                                    open={isTypePlateOpen}
+                                    onOpenChange={setIsTypePlateOpen}
+                                  />
+                                  <button
+                                    type="button"
+                                    className="flex h-5 w-5 shrink-0 items-center justify-center rounded-sm text-primary hover:text-black cursor-pointer"
+                                    onClick={() =>
+                                      setIsNoScopeBannerDismissed(true)
+                                    }
+                                    aria-label={t('Close')}
+                                    title={t('Close')}
+                                  >
+                                    <Icon name="close" className="h-3 w-3" />
+                                  </button>
+                                </div>
+                              </div>
+                            )}
                           <ProductList />
                         </div>
 
@@ -386,15 +546,26 @@ function Results() {
                             </div>
                           )}
                         <div>
-                          <Pagination
-                            isLoading={isFindApiLoading || isAlgoliaLoading}
-                            className={
-                              productsFromAlgolia.length === 0 &&
-                              !isAlgoliaLoading
-                                ? 'opacity-0 hidden'
-                                : ''
-                            }
-                          />
+                          {listingPagination.isListing ? (
+                            <Pagination
+                              isLoading={isFindApiLoading || isAlgoliaLoading}
+                              pageCount={listingPagination.pageCount}
+                              pageIndex={listingPagination.pageIndex}
+                              onPageChange={listingPagination.changePage}
+                            />
+                          ) : (
+                            !isScopeFilterActive && (
+                              <Pagination
+                                isLoading={isFindApiLoading || isAlgoliaLoading}
+                                className={
+                                  productsFromAlgolia.length === 0 &&
+                                  !isAlgoliaLoading
+                                    ? 'opacity-0 hidden'
+                                    : ''
+                                }
+                              />
+                            )
+                          )}
                           <div
                             style={{
                               display: 'flex',
@@ -442,6 +613,9 @@ function Results() {
                         { label: '40', value: 40 },
                         { label: '50', value: 50 },
                       ]}
+                      onFindApiPageSizeChange={listingPagination.changePageSize}
+                      useFindApiPageSize={listingPagination.isListing}
+                      showPageSize={!isFindApiSearchUnderAlgolia}
                     />
                   </div>
                 </div>
@@ -571,6 +745,12 @@ function Results() {
           openModal={showPostFilter}
           handleClose={() => setShowPostFilter(false)}
         />
+        {isScopeFeatureEnabled && (
+          <ScopeSelectModal
+            openModal={isTypePlateOpen}
+            handleClose={() => setIsTypePlateOpen(false)}
+          />
+        )}
         <CustomCamera
           show={isOpenModalCamera}
           onClose={() => {

package/src/services/Feedback.ts

@@ -1,74 +1,265 @@
 import NyrisAPI, {
+  ConversionRevenue,
   FeedbackEventPayload,
   NyrisAPISettings,
   RectCoords,
 } from '@nyris/nyris-api';
 import { getNyrisSettings } from 'utils/nyrisApiKey';
+import useResultStore from 'stores/result/resultStore';
+import useConversationStore from 'stores/chat/conversationStore';
+import { CONVERSION_SUBTYPE, normalizeSubtype } from './feedbackSubtypes';
 
-export const feedbackSuccessEpic = async (
-  requestId: string,
+export interface FeedbackIds {
+  requestId?: string;
+  sessionId?: string;
+}
+
+interface ProductRef {
+  sku?: string;
+  position?: number;
+}
+
+interface ProductRefs {
+  skus?: (string | undefined)[];
+  positions?: (number | undefined)[];
+}
+
+type ConversionDetails = ProductRefs & {
+  quantity?: number;
+  revenue?: ConversionRevenue;
+};
+
+const compactStrings = (values?: (string | undefined)[]) =>
+  values?.filter((value): value is string => !!value) ?? [];
+
+const compactNumbers = (values?: (number | undefined)[]) =>
+  values?.filter(
+    (value): value is number => typeof value === 'number' && value >= 0,
+  ) ?? [];
+
+/**
+ * Builds the `product_ids` / `positions` part of a click or conversion payload,
+ * dropping empty arrays so the payload matches the API examples.
+ */
+const productData = ({ skus, positions }: ProductRefs) => {
+  const product_ids = compactStrings(skus);
+  const cleanPositions = compactNumbers(positions);
+  return {
+    ...(product_ids.length ? { product_ids } : {}),
+    ...(cleanPositions.length ? { positions: cleanPositions } : {}),
+  };
+};
+
+const resolveIds = (ids?: FeedbackIds): FeedbackIds => {
+  if (ids && (ids.requestId || ids.sessionId)) {
+    return ids;
+  }
+  const { requestId, sessionId } = useResultStore.getState();
+  return { requestId, sessionId };
+};
+
+/**
+ * An event is suppressed when its event type OR its subtype appears in
+ * `window.settings.disabledFeedbackEvents` (case-insensitive).
+ */
+export const isFeedbackEventEnabled = (event: string, subtype?: string) => {
+  const disabled = (window.settings?.disabledFeedbackEvents || [])
+    .filter((entry): entry is string => typeof entry === 'string')
+    .map(entry => entry.trim().toLowerCase())
+    .filter(Boolean);
+
+  if (disabled.length === 0) return true;
+  if (disabled.includes(event.trim().toLowerCase())) return false;
+
+  const normalized = normalizeSubtype(subtype);
+  return !(normalized && disabled.includes(normalized));
+};
+
+/**
+ * Central dispatcher: resolves request/session ids from the result store when
+ * not provided, applies the disabled-events setting, normalizes the subtype,
+ * and sends the event.
+ */
+export const trackFeedbackEvent = async (
+  payload: FeedbackEventPayload,
+  ids?: FeedbackIds,
+) => {
+  const data = payload.data as { subtype?: string } | undefined;
+  const subtype = normalizeSubtype(data?.subtype);
+
+  if (!isFeedbackEventEnabled(payload.event, subtype)) return;
+
+  const normalizedPayload = (
+    data
+      ? {
+          ...payload,
+          data: subtype ? { ...data, subtype } : omitSubtype(data),
+        }
+      : payload
+  ) as FeedbackEventPayload;
+
+  const { requestId, sessionId } = resolveIds(ids);
+  return sendFeedbackByApi(
+    window.settings,
+    sessionId,
+    requestId,
+    normalizedPayload,
+  );
+};
+
+const omitSubtype = <T extends { subtype?: string }>(data: T) => {
+  const { subtype: _ignored, ...rest } = data;
+  return rest;
+};
+
+/** `click` event for a single result or a product-less interaction. */
+export const trackClick = (
+  subtype: string,
+  product?: ProductRef,
+  ids?: FeedbackIds,
+) =>
+  trackFeedbackEvent(
+    {
+      event: 'click',
+      data: {
+        subtype,
+        ...productData({
+          skus: [product?.sku],
+          positions: [product?.position],
+        }),
+      },
+    },
+    ids,
+  );
+
+/** `conversion` event. Pass `undefined` as subtype for a legacy conversion. */
+export const trackConversion = (
+  subtype: string | undefined,
+  details: ConversionDetails = {},
+  ids?: FeedbackIds,
+) => {
+  const { quantity, revenue, ...refs } = details;
+  return trackFeedbackEvent(
+    {
+      event: 'conversion',
+      data: {
+        ...(subtype ? { subtype } : {}),
+        ...productData(refs),
+        ...(typeof quantity === 'number' ? { quantity } : {}),
+        ...(revenue ? { revenue } : {}),
+      },
+    },
+    ids,
+  );
+};
+
+/**
+ * `conversion` / `purchase`. There is no checkout flow in the search suite
+ * today, so this is provided for host integrations and future use.
+ */
+export const trackPurchase = (details: ConversionDetails, ids?: FeedbackIds) =>
+  trackConversion(CONVERSION_SUBTYPE.PURCHASE, details, ids);
+
+/** `feedback` event from the "Did we find what you were looking for?" prompt. */
+export const trackResultFeedback = (
   success: boolean,
+  comment?: string,
+  ids?: FeedbackIds,
 ) => {
-  const settings = window.settings;
+  useConversationStore.getState().setSearchResolved(success);
+  return trackFeedbackEvent(
+    {
+      event: 'feedback',
+      data: {
+        success,
+        ...(comment ? { comment } : {}),
+      },
+    },
+    ids,
+  );
+};
 
-  return await sendFeedbackByApi(settings, undefined, requestId, {
-    event: 'feedback',
-    data: { success },
-  });
+/** `region` event; converts x1/y1/x2/y2 to the API's x/y/w/h rectangle. */
+export const trackRegion = (
+  region: RectCoords,
+  subtype: string,
+  ids?: FeedbackIds,
+) => {
+  const { x1, x2, y1, y2 } = region;
+  return trackFeedbackEvent(
+    {
+      event: 'region',
+      data: { subtype, rect: { x: x1, y: y1, w: x2 - x1, h: y2 - y1 } },
+    },
+    ids,
+  );
 };
 
+// ---------------------------------------------------------------------------
+// Legacy wrappers kept for backwards compatibility.
+// ---------------------------------------------------------------------------
+
+export const feedbackSuccessEpic = async (
+  requestId: string,
+  success: boolean,
+) => trackResultFeedback(success, undefined, { requestId });
+
 export const feedbackClickEpic = async (
   requestId: string,
   sessionId: string,
   position: number,
   id?: string,
-) => {
-  const settings = window.settings;
-  return await sendFeedbackByApi(settings, sessionId, requestId, {
-    event: 'click',
-    data: { positions: [position], ...(id ? { product_ids: [id] } : {}) },
-  });
-};
+) =>
+  trackFeedbackEvent(
+    {
+      event: 'click',
+      data: { positions: [position], ...(id ? { product_ids: [id] } : {}) },
+    },
+    { requestId, sessionId },
+  );
 
 export const feedbackConversionEpic = async (
   requestId: string,
   sessionId: string,
   position: number,
   id?: string,
-) => {
-  const settings = window.settings;
-  return await sendFeedbackByApi(settings, sessionId, requestId, {
-    event: 'conversion',
-    data: { positions: [position], ...(id ? { product_ids: [id] } : {}) },
-  });
-};
+) =>
+  trackConversion(
+    undefined,
+    { skus: [id], positions: [position] },
+    {
+      requestId,
+      sessionId,
+    },
+  );
 
 export const feedbackRegionEpic = async (
   requestId: string,
   sessionId: string,
   region: RectCoords,
 ) => {
-  const settings = window.settings;
   const { x1, x2, y1, y2 } = region;
-  const payload: FeedbackEventPayload = {
-    event: 'region',
-    data: { rect: { x: x1, y: y1, w: x2 - x1, h: y2 - y1 } },
-  };
-  return await sendFeedbackByApi(settings, sessionId, requestId, payload);
+  return trackFeedbackEvent(
+    {
+      event: 'region',
+      data: { rect: { x: x1, y: y1, w: x2 - x1, h: y2 - y1 } },
+    },
+    { requestId, sessionId },
+  );
 };
 
+/** Transport. Silently skips when there is no request id to attach to. */
 export const sendFeedbackByApi = async (
   settings: NyrisAPISettings,
   sessionId: string | undefined,
   requestId: string | undefined,
   payload: FeedbackEventPayload,
 ) => {
-  const api = new NyrisAPI(getNyrisSettings(settings));
-  if (requestId) {
-    try {
-      await api.sendFeedback({ sessionId, requestId, payload }).then(() => {});
-    } catch (error) {
-      console.log('error sendFeedbackByApi', error);
-    }
+  if (!requestId || !window.settings.showFeedback) return;
+  try {
+    const api = new NyrisAPI(getNyrisSettings(settings));
+    await api.sendFeedback({ sessionId, requestId, payload });
+  } catch (error) {
+    console.log('error sendFeedbackByApi', error);
   }
 };

package/src/services/feedbackSubtypes.ts

@@ -0,0 +1,63 @@
+/**
+ * Recommended subtype vocabulary for Feedback API events.
+ *
+ * Subtypes are free strings on the API side, so customers can add their own,
+ * but these constants are the default vocabulary the search suite converges on.
+ * Casing is normalized (trimmed + lowercased) before sending; the API does the
+ * same at ingestion.
+ */
+
+export const FEEDBACK_EVENT = {
+  CLICK: 'click',
+  CONVERSION: 'conversion',
+  FEEDBACK: 'feedback',
+  REGION: 'region',
+} as const;
+
+/** Interaction actions on the result set. */
+export const CLICK_SUBTYPE = {
+  RESULT_CARD: 'result_card',
+  EXPAND_DETAILS: 'expand_details',
+  SIMILAR_PART_SEARCH: 'similar_part_search',
+  COPY_DETAILS: 'copy_details',
+  RAISE_INQUIRY: 'raise_inquiry',
+  FILTER_APPLIED: 'filter_applied',
+  PRE_FILTER_APPLIED: 'pre_filter_applied',
+  CHAT_WITH_VIZO: 'chat_with_vizo',
+} as const;
+
+/** Actions that create business value. Omit subtype for legacy conversions. */
+export const CONVERSION_SUBTYPE = {
+  ADD_TO_CART: 'add_to_cart',
+  PURCHASE: 'purchase',
+  DOWNLOAD_CART: 'download_cart',
+  SHARE_CART: 'share_cart',
+} as const;
+
+/** Explicit result-quality feedback. */
+export const FEEDBACK_SUBTYPE = {
+  THUMBS_UP: 'thumbs_up',
+  THUMBS_DOWN: 'thumbs_down',
+} as const;
+
+/** How the searched image region was selected. */
+export const REGION_SUBTYPE = {
+  CROP: 'crop',
+  OBJECT_DETECTION_CLICK: 'object_detection_click',
+} as const;
+
+export type FeedbackEventType =
+  (typeof FEEDBACK_EVENT)[keyof typeof FEEDBACK_EVENT];
+export type ClickSubtype = (typeof CLICK_SUBTYPE)[keyof typeof CLICK_SUBTYPE];
+export type ConversionSubtype =
+  (typeof CONVERSION_SUBTYPE)[keyof typeof CONVERSION_SUBTYPE];
+export type FeedbackSubtype =
+  (typeof FEEDBACK_SUBTYPE)[keyof typeof FEEDBACK_SUBTYPE];
+export type RegionSubtype =
+  (typeof REGION_SUBTYPE)[keyof typeof REGION_SUBTYPE];
+
+/** Normalizes a subtype the same way the API does at ingestion. */
+export const normalizeSubtype = (subtype?: string): string | undefined => {
+  const normalized = subtype?.trim().toLowerCase();
+  return normalized ? normalized : undefined;
+};

package/src/services/filter.ts

@@ -33,6 +33,6 @@ export const getScopes = async (
   scopeIds: string,
   settings: NyrisAPISettings,
 ): Promise<ScopeResponse> => {
-  const nyrisApi = new NyrisAPI(settings);
+  const nyrisApi = new NyrisAPI(getNyrisSettings(settings));
   return nyrisApi.getScopes(scopeIds);
 };