Fix issues related to search apps, notification duration, and loading icon on the explore page (#6374)

web/app/components/app/configuration/debug/index.tsx

@@ -136,7 +136,7 @@ const Debug: FC<IDebug> = ({
 
   const { notify } = useContext(ToastContext)
   const logError = useCallback((message: string) => {
-    notify({ type: 'error', message, duration: 3000 })
+    notify({ type: 'error', message })
   }, [notify])
   const [completionFiles, setCompletionFiles] = useState<VisionFile[]>([])
 
@@ -144,11 +144,11 @@ const Debug: FC<IDebug> = ({
     if (isAdvancedMode && mode !== AppType.completion) {
       if (modelModeType === ModelModeType.completion) {
         if (!hasSetBlockStatus.history) {
-          notify({ type: 'error', message: t('appDebug.otherError.historyNoBeEmpty'), duration: 3000 })
+          notify({ type: 'error', message: t('appDebug.otherError.historyNoBeEmpty') })
           return false
         }
         if (!hasSetBlockStatus.query) {
-          notify({ type: 'error', message: t('appDebug.otherError.queryNoBeEmpty'), duration: 3000 })
+          notify({ type: 'error', message: t('appDebug.otherError.queryNoBeEmpty') })
           return false
         }
       }

web/app/components/app/configuration/index.tsx

@@ -555,23 +555,23 @@ const Configuration: FC = () => {
     const promptVariables = modelConfig.configs.prompt_variables
 
     if (promptEmpty) {
-      notify({ type: 'error', message: t('appDebug.otherError.promptNoBeEmpty'), duration: 3000 })
+      notify({ type: 'error', message: t('appDebug.otherError.promptNoBeEmpty') })
       return
     }
     if (isAdvancedMode && mode !== AppType.completion) {
       if (modelModeType === ModelModeType.completion) {
         if (!hasSetBlockStatus.history) {
-          notify({ type: 'error', message: t('appDebug.otherError.historyNoBeEmpty'), duration: 3000 })
+          notify({ type: 'error', message: t('appDebug.otherError.historyNoBeEmpty') })
           return
         }
         if (!hasSetBlockStatus.query) {
-          notify({ type: 'error', message: t('appDebug.otherError.queryNoBeEmpty'), duration: 3000 })
+          notify({ type: 'error', message: t('appDebug.otherError.queryNoBeEmpty') })
           return
         }
       }
     }
     if (contextVarEmpty) {
-      notify({ type: 'error', message: t('appDebug.feature.dataSet.queryVariable.contextVarNotEmpty'), duration: 3000 })
+      notify({ type: 'error', message: t('appDebug.feature.dataSet.queryVariable.contextVarNotEmpty') })
       return
     }
     const postDatasets = dataSets.map(({ id }) => ({
@@ -638,7 +638,7 @@ const Configuration: FC = () => {
       modelConfig: newModelConfig,
       completionParams,
     })
-    notify({ type: 'success', message: t('common.api.success'), duration: 3000 })
+    notify({ type: 'success', message: t('common.api.success') })
 
     setCanReturnToSimpleMode(false)
     return true

web/app/components/base/chat/chat/chat-input.tsx

@@ -106,7 +106,7 @@ const ChatInput: FC<ChatInputProps> = ({
   }
 
   const logError = (message: string) => {
-    notify({ type: 'error', message, duration: 3000 })
+    notify({ type: 'error', message })
   }
   const handleVoiceInputShow = () => {
     (Recorder as any).getPermission().then(() => {

web/app/components/base/toast/index.tsx

@@ -22,7 +22,6 @@ export type IToastProps = {
 type IToastContext = {
   notify: (props: IToastProps) => void
 }
-const defaultDuring = 3000
 
 export const ToastContext = createContext<IToastContext>({} as IToastContext)
 export const useToastContext = () => useContext(ToastContext)
@@ -89,10 +88,10 @@ export const ToastProvider = ({
   const placeholder: IToastProps = {
     type: 'info',
     message: 'Toast message',
-    duration: 3000,
+    duration: 6000,
   }
   const [params, setParams] = React.useState<IToastProps>(placeholder)
-
+  const defaultDuring = params.type === 'success' ? 3000 : 6000
   const [mounted, setMounted] = useState(false)
 
   useEffect(() => {

web/app/components/datasets/settings/permission-selector/index.tsx

@@ -51,9 +51,11 @@ const PermissionSelector = ({ disabled, permission, value, memberList, onChange,
       ...memberList.filter(member => member.id !== userProfile.id).filter(member => value.includes(member.id)),
     ].map(member => member.name).join(', ')
   }, [userProfile, value, memberList])
+
   const showMe = useMemo(() => {
     return userProfile.name.includes(searchKeywords) || userProfile.email.includes(searchKeywords)
   }, [searchKeywords, userProfile])
+
   const filteredMemberList = useMemo(() => {
     return memberList.filter(member => (member.name.includes(searchKeywords) || member.email.includes(searchKeywords)) && member.id !== userProfile.id && ['owner', 'admin', 'editor', 'dataset_operator'].includes(member.role))
   }, [memberList, searchKeywords, userProfile])

web/app/components/explore/app-list/index.tsx

@@ -5,6 +5,7 @@ import { useRouter } from 'next/navigation'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import useSWR from 'swr'
+import { useDebounceFn } from 'ahooks'
 import Toast from '../../base/toast'
 import s from './style.module.css'
 import cn from '@/utils/classnames'
@@ -22,6 +23,7 @@ import Loading from '@/app/components/base/loading'
 import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
 import { useAppContext } from '@/context/app-context'
 import { getRedirection } from '@/utils/app-redirection'
+import SearchInput from '@/app/components/base/search-input'
 
 type AppsProps = {
   pageType?: PageType
@@ -43,6 +45,18 @@ const Apps = ({
   const { hasEditPermission } = useContext(ExploreContext)
   const allCategoriesEn = t('explore.apps.allCategories', { lng: 'en' })
 
+  const [keywords, setKeywords] = useState('')
+  const [searchKeywords, setSearchKeywords] = useState('')
+
+  const { run: handleSearch } = useDebounceFn(() => {
+    setSearchKeywords(keywords)
+  }, { wait: 500 })
+
+  const handleKeywordsChange = (value: string) => {
+    setKeywords(value)
+    handleSearch()
+  }
+
   const [currentType, setCurrentType] = useState<string>('')
   const [currCategory, setCurrCategory] = useTabSearchParams({
     defaultTab: allCategoriesEn,
@@ -89,6 +103,17 @@ const Apps = ({
     }
   }, [currentType, currCategory, allCategoriesEn, allList])
 
+  const searchFilteredList = useMemo(() => {
+    if (!searchKeywords || !filteredList || filteredList.length === 0)
+      return filteredList
+
+    const lowerCaseSearchKeywords = searchKeywords.toLowerCase()
+
+    return filteredList.filter(item =>
+      item.app && item.app.name && item.app.name.toLowerCase().includes(lowerCaseSearchKeywords),
+    )
+  }, [searchKeywords, filteredList])
+
   const [currApp, setCurrApp] = React.useState<App | null>(null)
   const [isShowCreateModal, setIsShowCreateModal] = React.useState(false)
   const onCreate: CreateAppModalProps['onConfirm'] = async ({
@@ -123,7 +148,7 @@ const Apps = ({
     }
   }
 
-  if (!categories) {
+  if (!categories || categories.length === 0) {
     return (
       <div className="flex h-full items-center">
         <Loading type="area" />
@@ -143,25 +168,30 @@ const Apps = ({
         </div>
       )}
       <div className={cn(
-        'flex items-center mt-6',
+        'flex items-center justify-between mt-6',
         pageType === PageType.EXPLORE ? 'px-12' : 'px-8',
       )}>
-        {pageType !== PageType.EXPLORE && (
+        <>
-          <>
+          {pageType !== PageType.EXPLORE && (
-            <AppTypeSelector value={currentType} onChange={setCurrentType} />
+            <>
-            <div className='mx-2 w-[1px] h-3.5 bg-gray-200' />
+              <AppTypeSelector value={currentType} onChange={setCurrentType}/>
-          </>
+              <div className='mx-2 w-[1px] h-3.5 bg-gray-200'/>
-        )}
+            </>
-        <Category
+          )}
-          list={categories}
+          <Category
-          value={currCategory}
+            list={categories}
-          onChange={setCurrCategory}
+            value={currCategory}
-          allCategoriesEn={allCategoriesEn}
+            onChange={setCurrCategory}
-        />
+            allCategoriesEn={allCategoriesEn}
+          />
+        </>
+        <SearchInput value={keywords} onChange={handleKeywordsChange}/>
+
       </div>
+
       <div className={cn(
         'relative flex flex-1 pb-6 flex-col overflow-auto bg-gray-100 shrink-0 grow',
-        pageType === PageType.EXPLORE ? 'mt-6' : 'mt-0 pt-2',
+        pageType === PageType.EXPLORE ? 'mt-4' : 'mt-0 pt-2',
       )}>
         <nav
           className={cn(
@@ -169,7 +199,7 @@ const Apps = ({
             'grid content-start shrink-0',
             pageType === PageType.EXPLORE ? 'gap-4 px-6 sm:px-12' : 'gap-3 px-8  sm:!grid-cols-2 md:!grid-cols-3 lg:!grid-cols-4',
           )}>
-          {filteredList.map(app => (
+          {searchFilteredList.map(app => (
             <AppCard
               key={app.app_id}
               isExplore={pageType === PageType.EXPLORE}