@nyris/nyris-webapp 0.3.91 → 0.3.92

package/src/components/TextSearch.tsx

@@ -4,22 +4,26 @@ import { twMerge } from 'tailwind-merge';
 import { useAuth0 } from '@auth0/auth0-react';
 import { useLocation, useNavigate } from 'react-router';
 import { useTranslation } from 'react-i18next';
-
 import { Icon } from '@nyris/nyris-react-components';
-
 import { useImageSearch } from 'hooks/useImageSearch';
 import PreFilterModal from './PreFilter/PreFilterModal';
 import useRequestStore from 'stores/request/requestStore';
 import Tooltip from './Tooltip/TooltipComponent';
 import { useMediaQuery } from 'react-responsive';
 import ImageUpload from './ImageUpload';
+import useUiStore from 'stores/ui/uiStore';
+import useConversationStore from 'stores/chat/conversationStore';
 
 function TextSearch({
   className,
   onCameraClick,
+  showImageUpload = true,
+  aiMode = false,
 }: {
   className?: string;
   onCameraClick?: () => void;
+  showImageUpload?: boolean;
+  aiMode?: boolean;
 }) {
   const settings = window.settings;
   const user = useAuth0().user;
@@ -32,6 +36,13 @@ function TextSearch({
   const location = useLocation();
   const navigate = useNavigate();
 
+  const toggleAiMode = useUiStore(state => state.toggleAiMode);
+  const isAiModeOpen = useUiStore(state => state.isAiModeOpen);
+  const hasAiNotification = useConversationStore(
+    state => state.hasNotification,
+  );
+  const setIsChatOpen = useConversationStore(state => state.setIsOpen);
+
   const preFilter = useRequestStore(state => state.preFilter);
   const requestImages = useRequestStore(state => state.requestImages);
   const setQuery = useRequestStore(state => state.setQuery);
@@ -50,6 +61,7 @@ function TextSearch({
 
   const [isOpenModalFilterDesktop, setToggleModalFilterDesktop] =
     useState<boolean>(false);
+  const [isInputFocused, setIsInputFocused] = useState(false);
 
   const showPreFilter = useMemo(() => {
     if (settings.shouldUseUserMetadata && user) {
@@ -114,27 +126,26 @@ function TextSearch({
   return (
     <div
       className={twMerge(
-        'w-[426px]',
+        'w-[636px]',
         'h-12',
-        location.pathname === '/result' && 'desktop:h-10',
+        location.pathname === '/result' && 'desktop:h-[52px]',
         className,
       )}
     >
       <div
         className={twMerge([
           'bg-white',
-          'desktop:bg-gray-200',
-          'desktop:border border-solid',
-          'desktop:border-gray-300',
-          'desktop:focus-within:bg-white',
-          'desktop:focus-within:shadow-[0px_0px_6px_rgba(202,202,209,1)]',
-          'shadow-[0px_0px_16px_0px_rgba(170,171,181,0.50)]',
-          'desktop:shadow-none',
+          location.pathname === '/result' &&
+            'desktop:bg-[#E7E8F1] desktop:has-[input:focus]:bg-[#FFFFFF] desktop:has-[input:focus]:shadow-ds-2',
+          'border border-solid',
+          'border-[#DDDEE7]',
+          location.pathname !== '/result' && 'shadow-ds-2',
+          location.pathname === '/result' && 'shadow-ds-2 desktop:shadow-none',
           'flex',
           'h-full',
           'justify-between',
-          'p-0',
-          'rounded-3xl',
+          'pr-1.5',
+          'rounded-[32px]',
           'w-full',
         ])}
       >
@@ -154,15 +165,12 @@ function TextSearch({
                 'flex',
                 'py-2',
                 'px-2',
-                'desktop:py-1',
-                'desktop:pl-1',
-                'pr-2',
+                'desktop:py-1.5',
+                'desktop:pl-1.5',
+                'pr-1.5',
                 'h-full',
                 'justify-center',
                 'items-center',
-                'desktop:border-r',
-                'border-solid',
-                'border-[#CACAD1]',
               ])}
               style={{
                 cursor: showPreFilter ? 'pointer' : 'default',
@@ -183,11 +191,11 @@ function TextSearch({
                     ref={iconRef}
                     className={twMerge(
                       'p-2 desktop:p-3',
-                      location.pathname === '/result' && 'desktop:p-2',
+                      location.pathname === '/result' && 'desktop:p-3',
                       `flex rounded-full bg-[#f3f3f5]`,
                       !isEmpty(preFilter)
                         ? 'desktop:bg-theme-primary'
-                        : 'desktop:bg-[#2B2C46]',
+                        : 'desktop:bg-[#FAFAFA]',
                     )}
                   >
                     <Icon
@@ -196,7 +204,7 @@ function TextSearch({
                         !isEmpty(preFilter)
                           ? 'fill-theme-primary'
                           : 'fill-[#2B2C46]',
-                        `desktop:fill-white`,
+                        `desktop:fill-[#3B3E5F]`,
                       )}
                     />
                   </div>
@@ -374,62 +382,118 @@ function TextSearch({
                 fontSize: 14,
                 color: '#2B2C46',
               }}
-              className="peer desktop:bg-gray-200 focus:bg-white pl-1.5 outline-none"
+              className={twMerge(
+                'peer pl-1.5 outline-none',
+                'bg-white',
+                location.pathname === '/result' &&
+                  'desktop:bg-[#E7E8F1] focus:bg-[#FFFFFF]',
+              )}
               placeholder={t('Search')}
               value={valueInput}
               onChange={onChangeText}
+              onFocus={() => setIsInputFocused(true)}
+              onBlur={() => setIsInputFocused(false)}
               ref={focusInp}
             />
           </div>
-
-          {location.pathname === '/result' && (valueInput || query) && (
-            <Tooltip content={t('Clear text search')}>
-              <button
-                className={twMerge([
-                  'flex',
-                  'justify-center',
-                  'items-center',
-                  'rounded-full',
-                  'cursor-pointer',
-                  'min-w-10 min-h-10',
-                  'z-10',
-                  'hover:bg-gray-100',
-                  'mr-2',
-                  location.pathname === '/result' &&
-                    'desktop:min-w-8 desktop:min-h-8',
-                ])}
-                onClick={() => {
-                  if (visualSearch) {
-                    navigate('/result');
-                    setValueInput('');
-                    setQuery('');
-                    if (
-                      !window.settings?.algolia.enabled &&
-                      requestImages.length === 0
-                    ) {
-                      singleImageSearch({
-                        image: requestImages[0],
-                        imageRegion: regions[0],
-                        text: '',
-                        settings,
-                        showFeedback: false,
-                        newSearch: false,
-                      });
+          <div className="flex gap-2">
+            {location.pathname === '/result' && (valueInput || query) && (
+              <Tooltip content={t('Clear text search')}>
+                <button
+                  className={twMerge([
+                    'flex',
+                    'justify-center',
+                    'items-center',
+                    'rounded-full',
+                    'cursor-pointer',
+                    'min-w-10 min-h-10',
+                    'z-10',
+                    'hover:bg-gray-100',
+                    location.pathname === '/result' &&
+                      'desktop:min-w-10 desktop:min-h-10',
+                  ])}
+                  onPointerDown={event => {
+                    // Keep focus on input until click runs so mobile AI button doesn't pop in first.
+                    event.preventDefault();
+                  }}
+                  onClick={() => {
+                    if (visualSearch) {
+                      navigate('/result');
+                      setValueInput('');
+                      setQuery('');
+                      if (
+                        !window.settings?.algolia.enabled &&
+                        requestImages.length === 0
+                      ) {
+                        singleImageSearch({
+                          image: requestImages[0],
+                          imageRegion: regions[0],
+                          text: '',
+                          settings,
+                          showFeedback: false,
+                          newSearch: false,
+                        });
+                      }
+                      return;
                     }
-                    return;
-                  }
-                  setSpecifications(null);
-                  setQuery('');
-                  setValueInput('');
-                  navigate('/');
-                }}
-              >
-                <Icon name="close" className="w-3 h-3 text-primary" />
-              </button>
-            </Tooltip>
-          )}
+                    setSpecifications(null);
+                    setQuery('');
+                    setValueInput('');
+                    navigate('/');
+                  }}
+                >
+                  <Icon name="close" className="w-3 h-3 text-primary" />
+                </button>
+              </Tooltip>
+            )}
+            {showImageUpload && <ImageUpload onCameraClick={onCameraClick} />}
+            {aiMode &&
+              window.settings.vizo?.chat &&
+              requestImages.length !== 0 &&
+              !(isMobile && isInputFocused) && (
+                <div className="relative">
+                  <button
+                    type="button"
+                    className={twMerge(
+                      'px-[10px] h-10 rounded-full text-[14px] text-[#989BB7] flex items-center justify-center gap-2 whitespace-nowrap bg-[#FAFAFA] border border-solid border-transparent',
+                      !isAiModeOpen &&
+                        'hover:bg-gradient-to-r hover:from-white hover:to-[#E4E3FF]',
+                      !isAiModeOpen &&
+                        'hover:border-[#DDDEE7] hover:text-[#3B3E5F]',
+                      isAiModeOpen &&
+                        'bg-[#3B3E5F] text-white hover:bg-[#3B3E5F]',
+                    )}
+                    onClick={() => {
+                      const nextIsAiModeOpen = !isAiModeOpen;
+                      toggleAiMode();
+                      setIsChatOpen(nextIsAiModeOpen);
+                    }}
+                  >
+                    <Icon
+                      name="search_ai"
+                      width={14}
+                      height={14}
+                      className={twMerge(
+                        'text-[#3B3E5F]',
+                        isAiModeOpen && 'text-white',
+                      )}
+                    />
+                    AI mode
+                  </button>
 
-          <ImageUpload onCameraClick={onCameraClick} />
+                  {hasAiNotification && !isAiModeOpen && (
+                    <>
+                      <span
+                        className="absolute -top-0.5 right-1 w-3 h-3 rounded-full border-2 border-solid border-white"
+                        style={{
+                          background: window.settings?.theme?.primaryColor,
+                        }}
+                      />
+                    </>
+                  )}
+                </div>
+              )}
+          </div>
         </div>
       </div>
 

package/src/components/UploadDisclaimer.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { createPortal } from 'react-dom';
 
 import { Icon, makeFileHandler } from '@nyris/nyris-react-components';