@nyris/nyris-webapp 0.3.97 → 0.3.99

package/src/components/TextSearch.tsx

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

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/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]) => {

package/src/hooks/useGoodResultsChat.ts

@@ -7,10 +7,7 @@
  */
 
 import { useCallback, useRef } from 'react';
-import useConversationStore, {
-  QuickReplyOption,
-  ActionType,
-} from 'stores/chat/conversationStore';
+import useConversationStore from 'stores/chat/conversationStore';
 import useSmartFiltersStore from 'stores/smartFilters/smartFiltersStore';
 import useResultStore from 'stores/result/resultStore';
 import useRequestStore from 'stores/request/requestStore';
@@ -19,6 +16,10 @@ import {
   fetchProductImageBase64,
   getProductImageUrl,
 } from 'utils/fetchProductImage';
+import {
+  normalizeChatAssistantResponse,
+  P3Response,
+} from 'utils/normalizeChatAssistantResponse';
 
 /**
  * Extracts search keywords from a user's natural language description.
@@ -138,18 +139,6 @@ function extractSearchKeywords(description: string): string {
   );
 }
 
-interface P3Response {
-  message: string;
-  action: {
-    type: ActionType;
-    key?: string;
-    value?: string;
-    matched_ids?: string[];
-    matched_indices?: number[]; // Legacy fallback
-  };
-  options: QuickReplyOption[];
-}
-
 export function useGoodResultsChat() {
   const {
     messages,
@@ -374,7 +363,7 @@ USER MESSAGE: ${userMessage}
 Respond to the user's message with an appropriate action and follow-up options.`,
         });
 
-        const response: P3Response = await chatAnalysis({
+        const rawResponse = await chatAnalysis({
           promptKey: 'chat_assistant_prompt',
           multimodalInputs: userParts.map(part => ({
             metadata: part.text,
@@ -382,11 +371,8 @@ Respond to the user's message with an appropriate action and follow-up options.`
             mimeType: part.inlineData?.mimeType,
           })),
         });
-
-        const responseText = response;
-
-        // Parse the JSON response
-        const p3Response: P3Response = responseText;
+        const p3Response: P3Response =
+          normalizeChatAssistantResponse(rawResponse);
 
         // Silent mode: only suggest filters, never apply actions
         if (options?.silent && p3Response.action) {