@nyris/nyris-webapp 0.3.98 → 0.3.99

package/src/layouts/AppLayout.tsx

@@ -1,4 +1,4 @@
-import { memo, useCallback, useEffect, useMemo } from 'react';
+import { memo, useCallback, useEffect, useMemo, useRef } from 'react';
 import { Outlet, useLocation } from 'react-router';
 
 import { useAuth0 } from '@auth0/auth0-react';
@@ -27,7 +27,9 @@ import {
   isNyrisApiKeyReady,
   useAuthApiKeyStore,
 } from 'utils/nyrisApiKey';
-import useScopeStore from 'stores/scope/scopeStore';
+import useScopeStore, { hasActiveMachineScope } from 'stores/scope/scopeStore';
+import useConversationStore from 'stores/chat/conversationStore';
+import { useResultEvaluator } from 'hooks/useResultEvaluator';
 
 i18n.use(initReactI18next).init({
   resources: translations,
@@ -66,9 +68,13 @@ function AppLayout(): JSX.Element {
   const requestImages = useRequestStore(state => state.requestImages);
   const showLoading = useRequestStore(state => state.showLoading);
 
-  const { status } = useInstantSearch();
+  const { status, results } = useInstantSearch();
   const { items } = useHits();
 
+  const isAiModeOpen = useUiStore(state => state.isAiModeOpen);
+  const { evaluateResults } = useResultEvaluator();
+  const lastAlgoliaEvaluationRef = useRef<string | null>(null);
+
   useEffect(() => {
     i18n.changeLanguage(window.settings.language);
     console.log('App version:', packageJson.version);
@@ -97,6 +103,40 @@ function AppLayout(): JSX.Element {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [items, scopeItemKeys]);
 
+  // Algolia text search never goes through singleImageSearch, so run P2 here
+  // on the Algolia hits once AI mode is open for the current query.
+  // Deliberately not keyed on the conversation session: singleImageSearch
+  // calls startNewSession before requestImages is set, and re-running on that
+  // session change would start a competing evaluation of stale Algolia hits.
+  useEffect(() => {
+    if (requestImages.length > 0 || hasActiveMachineScope()) {
+      // An image search or machine scope owns P2. Algolia hits are unscoped.
+      lastAlgoliaEvaluationRef.current = null;
+      return;
+    }
+
+    if (
+      !window.settings.algolia?.enabled ||
+      !window.settings.vizo?.chat ||
+      !isAiModeOpen ||
+      isFindApiLoading ||
+      !query ||
+      status !== 'idle' ||
+      results?.query !== query
+    ) {
+      return;
+    }
+
+    if (lastAlgoliaEvaluationRef.current === query) {
+      return;
+    }
+
+    useConversationStore.getState().startNewSession();
+    lastAlgoliaEvaluationRef.current = query;
+    evaluateResults({ activeProducts: items, imageAnalysis: undefined, query });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isAiModeOpen, isFindApiLoading, query, status, results, requestImages]);
+
   useEffect(() => {
     if (status === 'loading' || status === 'stalled') {
       setIsAlgoliaLoading(true);

package/src/pages/Home.tsx

@@ -1,5 +1,7 @@
 import { useEffect, useState } from 'react';
 import { twMerge } from 'tailwind-merge';
+import { useTranslation } from 'react-i18next';
+import { ArrowRight } from 'lucide-react';
 
 import DragDropFile from 'components/DragDropFile';
 import MobileCameraCTA from 'components/MobileCameraCTA';
@@ -15,6 +17,7 @@ import ImageUpload from 'components/ImageUpload';
 
 function Home() {
   const settings = window.settings;
+  const { t } = useTranslation();
   const { experienceVisualSearch, experienceVisualSearchImages, geoLocation } =
     settings;
   const navigate = useNavigate();
@@ -88,32 +91,75 @@ function Home() {
         ])}
       >
         {geoLocation && <LocationInfoPopup />}
-        <div className="relative flex items-center justify-center w-full gap-2">
+        <div className="relative flex w-full flex-col items-center gap-6">
           {settings.headerText && (
             <div
               className={twMerge([
                 'absolute',
-                'bottom-[49px]',
+                'bottom-full',
+                'mb-[25px]',
+                'flex',
+                'flex-col',
+                'items-center',
+                'gap-3',
                 'text-primary',
                 'font-bold',
               ])}
             >
-              <h1 className="text-[25px]">{settings.headerText}</h1>
+              <h1 className="text-[25px] m-0 mb-0">{settings.headerText}</h1>
+              {settings.scopes?.scopeID &&
+                Boolean(settings.scopes?.typePlateStepOne?.trim()) &&
+                Boolean(settings.scopes?.typePlateStepTwo?.trim()) && (
+                  <div
+                    className="flex w-full items-center justify-center"
+                    aria-label="Search flow"
+                  >
+                    <div className="flex items-center gap-1.5 shrink-0">
+                      <span className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-[#F3F4F8] border border-solid border-[#2B2C46] text-[#2B2C46] font-bold text-xs leading-none">
+                        1
+                      </span>
+                      <span className="font-semibold text-[14px] leading-none text-[#2B2C46] whitespace-nowrap">
+                        {t(settings.scopes!.typePlateStepOne!)}
+                      </span>
+                    </div>
+
+                    <div
+                      className="flex items-center flex-1 min-w-[20px] max-w-[60px] mx-2.5"
+                      aria-hidden="true"
+                    >
+                      <div className="h-[1.5px] flex-1 bg-[#2B2C46]" />
+                      <ArrowRight
+                        className="h-3.5 w-3.5 -ml-1 text-[#2B2C46] shrink-0"
+                        strokeWidth={2}
+                      />
+                    </div>
+
+                    <div className="flex items-center gap-1.5 shrink-0">
+                      <span className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-[#2B2C46] text-white font-bold text-xs leading-none">
+                        2
+                      </span>
+                      <span className="font-semibold text-[14px] leading-none text-[#2B2C46] whitespace-nowrap">
+                        {t(settings.scopes!.typePlateStepTwo!)}
+                      </span>
+                    </div>
+                  </div>
+                )}
             </div>
           )}
-
-          <TextSearch className="h-[56px]" showImageUpload={false} />
-          <div
-            className={twMerge(
-              'h-14 w-14 flex items-center justify-center rounded-full bg-[#FFFFFF] hover:bg-[#F3F4F8] border border-solid border-[#DDDEE7]',
-              'shadow-ds-2',
-            )}
-          >
-            <ImageUpload />
+          <div className="flex items-center justify-center w-full gap-2">
+            <TextSearch className="h-[56px]" showImageUpload={false} />
+            <div
+              className={twMerge(
+                'h-14 w-14 flex items-center justify-center rounded-full bg-[#FFFFFF] hover:bg-[#F3F4F8] border border-solid border-[#DDDEE7]',
+                'shadow-ds-2',
+              )}
+            >
+              <ImageUpload />
+            </div>
           </div>
         </div>
         <div className="max-w-[532px] relative w-full">
-          <DragDropFile />
+          {!settings.scopes?.scopeID && <DragDropFile />}
           {settings.experienceVisualSearch && (
             <ExperienceVisualSearchTrigger
               experienceVisualSearchBlobs={experienceVisualSearchBlobs}
@@ -148,7 +194,7 @@ function Home() {
           />
         )}
 
-        <div className="flex desktop:hidden w-full fixed bottom-12 px-2 gap-2">
+        <div className="flex desktop:hidden w-full fixed bottom-12 px-2 flex-col gap-4">
           <TextSearch className="flex md:hidden w-full " />
         </div>
       </div>

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={() => {