search model in provider settings

web/app/components/header/account-setting/index.tsx

@@ -199,13 +199,13 @@ export default function AccountSetting({
             )}
           </div>
           <div className='px-4 sm:px-8 pt-2'>
+            {activeMenu === 'provider' && <ModelProviderPage searchText={searchValue} />}
             {activeMenu === 'members' && <MembersPage />}
             {activeMenu === 'billing' && <BillingPage />}
-            {activeMenu === 'language' && <LanguagePage />}
-            {activeMenu === 'provider' && <ModelProviderPage />}
             {activeMenu === 'data-source' && <DataSourcePage />}
             {activeMenu === 'api-based-extension' && <ApiBasedExtensionPage />}
             {activeMenu === 'custom' && <CustomPage />}
+            {activeMenu === 'language' && <LanguagePage />}
           </div>
         </div>
       </div>

web/app/components/header/account-setting/model-provider-page/index.tsx

@@ -1,13 +1,13 @@
-import { useMemo, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Link from 'next/link'
+import { useDebounce } from 'ahooks'
 import {
   RiAlertFill,
   RiArrowDownSLine,
   RiArrowRightUpLine,
   RiBrainLine,
 } from '@remixicon/react'
-import { useContext } from 'use-context-selector'
 import SystemModelSelector from './system-model-selector'
 import ProviderAddedCard, { UPDATE_MODEL_PROVIDER_CUSTOM_MODEL_LIST } from './provider-added-card'
 // import ProviderCard from './provider-card'
@@ -26,16 +26,23 @@ import {
   useUpdateModelProviders,
 } from './hooks'
 import Divider from '@/app/components/base/divider'
+import Loading from '@/app/components/base/loading'
 import ProviderCard from '@/app/components/plugins/provider-card'
-import I18n from '@/context/i18n'
 import { useProviderContext } from '@/context/provider-context'
 import { useModalContextSelector } from '@/context/modal-context'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
+import {
+  useMarketplacePlugins,
+} from '@/app/components/plugins/marketplace/hooks'
+import { PluginType } from '@/app/components/plugins/types'
 import cn from '@/utils/classnames'
 
-import { extensionDallE, modelGPT4, toolNotion } from '@/app/components/plugins/card/card-mock'
+type Props = {
+  searchText: string
+}
 
-const ModelProviderPage = () => {
+const ModelProviderPage = ({ searchText }: Props) => {
+  const debouncedSearchText = useDebounce(searchText, { wait: 500 })
   const { t } = useTranslation()
   const { eventEmitter } = useEventEmitterContextContext()
   const updateModelProviders = useUpdateModelProviders()
@@ -67,6 +74,18 @@ const ModelProviderPage = () => {
 
     return [configuredProviders, notConfiguredProviders]
   }, [providers])
+  const [filteredConfiguredProviders, filteredNotConfiguredProviders] = useMemo(() => {
+    const filteredConfiguredProviders = configuredProviders.filter(
+      provider => provider.provider.toLowerCase().includes(debouncedSearchText.toLowerCase())
+      || Object.values(provider.label).some(text => text.toLowerCase().includes(debouncedSearchText.toLowerCase())),
+    )
+    const filteredNotConfiguredProviders = notConfiguredProviders.filter(
+      provider => provider.provider.toLowerCase().includes(debouncedSearchText.toLowerCase())
+      || Object.values(provider.label).some(text => text.toLowerCase().includes(debouncedSearchText.toLowerCase())),
+    )
+
+    return [filteredConfiguredProviders, filteredNotConfiguredProviders]
+  }, [configuredProviders, debouncedSearchText, notConfiguredProviders])
 
   const handleOpenModal = (
     provider: ModelProvider,
@@ -102,10 +121,28 @@ const ModelProviderPage = () => {
   }
 
   const [collapse, setCollapse] = useState(false)
-  const { locale } = useContext(I18n)
 
-  // TODO #Plugin list API#
-  const pluginList = [toolNotion, extensionDallE, modelGPT4]
+  const {
+    plugins,
+    queryPlugins,
+    queryPluginsWithDebounced,
+    isLoading: isPluginsLoading,
+  } = useMarketplacePlugins()
+
+  useEffect(() => {
+    if (searchText) {
+      queryPluginsWithDebounced({
+        query: searchText,
+        category: PluginType.model,
+      })
+    }
+    else {
+      queryPlugins({
+        query: searchText,
+        category: PluginType.model,
+      })
+    }
+  }, [queryPlugins, queryPluginsWithDebounced, searchText])
 
   return (
     <div className='relative pt-1 -mt-2'>
@@ -132,7 +169,7 @@ const ModelProviderPage = () => {
           />
         </div>
       </div>
-      {!configuredProviders?.length && (
+      {!filteredConfiguredProviders?.length && (
         <div className='mb-2 p-4 rounded-[10px]' style={{ background: 'linear-gradient(90deg, rgba(200, 206, 218, 0.20) 0%, rgba(200, 206, 218, 0.04) 100%)' }}>
           <div className='w-10 h-10 flex items-center justify-center rounded-[10px] border-[0.5px] border-components-card-border bg-components-card-bg shadow-lg backdrop-blur'>
             <RiBrainLine className='w-5 h-5 text-text-primary' />
@@ -141,9 +178,9 @@ const ModelProviderPage = () => {
           <div className='mt-1 text-text-tertiary system-xs-regular'>{t('common.modelProvider.emptyProviderTip')}</div>
         </div>
       )}
-      {!!configuredProviders?.length && (
+      {!!filteredConfiguredProviders?.length && (
         <div className='relative'>
-          {configuredProviders?.map(provider => (
+          {filteredConfiguredProviders?.map(provider => (
             <ProviderAddedCard
               key={provider.provider}
               provider={provider}
@@ -152,11 +189,11 @@ const ModelProviderPage = () => {
           ))}
         </div>
       )}
-      {false && !!notConfiguredProviders?.length && (
+      {!!filteredNotConfiguredProviders?.length && (
         <>
           <div className='flex items-center mb-2 pt-2 text-text-primary system-md-semibold'>{t('common.modelProvider.configureRequired')}</div>
           <div className='relative'>
-            {notConfiguredProviders?.map(provider => (
+            {filteredNotConfiguredProviders?.map(provider => (
               <ProviderAddedCard
                 notConfigured
                 key={provider.provider}
@@ -182,13 +219,14 @@ const ModelProviderPage = () => {
             </Link>
           </div>
         </div>
-        {!collapse && (
+        {!collapse && !isPluginsLoading && (
           <div className='grid grid-cols-2 gap-2'>
-            {pluginList.map((plugin, index) => (
+            {plugins.map((plugin, index) => (
               <ProviderCard key={index} installed={false} payload={plugin as any} />
             ))}
           </div>
         )}
+        {!collapse && isPluginsLoading && <Loading type='area' />}
       </div>
     </div>
   )

web/app/components/header/account-setting/model-provider-page/system-model-selector/index.tsx

@@ -132,6 +132,7 @@ const SystemModel: FC<SystemModelSelectorProps> = ({
     >
       <PortalToFollowElemTrigger onClick={() => setOpen(v => !v)}>
         <Button
+          className='relative'
           variant={notConfigured ? 'primary' : 'secondary'}
           size='small'
         >

web/app/components/plugins/marketplace/context.tsx

@@ -130,7 +130,7 @@ export const MarketplaceContextProvider = ({
       queryMarketplaceCollectionsAndPlugins({
         category: type === PLUGIN_TYPE_SEARCH_MAP.all ? undefined : type,
       })
-      setPlugins(undefined)
+      setPlugins([])
 
       return
     }

web/app/components/plugins/marketplace/hooks.ts

@@ -40,7 +40,7 @@ export const useMarketplaceCollectionsAndPlugins = () => {
 
 export const useMarketplacePlugins = () => {
   const [isLoading, setIsLoading] = useState(false)
-  const [plugins, setPlugins] = useState<Plugin[]>()
+  const [plugins, setPlugins] = useState<Plugin[]>([])
 
   const queryPlugins = useCallback(async (query: PluginsSearchParams) => {
     setIsLoading(true)

web/app/components/tools/marketplace/hooks.ts

@@ -37,7 +37,7 @@ export const useMarketplace = (searchPluginText: string, filterPluginTags: strin
     }
     else {
       queryMarketplaceCollectionsAndPlugins()
-      setPlugins(undefined)
+      setPlugins([])
     }
   }, [searchPluginText, filterPluginTags, queryPlugins, queryMarketplaceCollectionsAndPlugins, queryPluginsWithDebounced, setPlugins])