fix: tool list

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

@@ -218,7 +218,7 @@ const ModelProviderPage = ({ searchText }: Props) => {
         </div>
         {!collapse && (isPluginsLoading || isAllPluginsLoading) && <Loading type='area' />}
         {
-          !isPluginsLoading && (
+          !isPluginsLoading && !collapse && (
             <List
               marketplaceCollections={marketplaceCollections || []}
               marketplaceCollectionPluginsMap={marketplaceCollectionPluginsMap || {}}
@@ -231,7 +231,7 @@ const ModelProviderPage = ({ searchText }: Props) => {
           )
         }
         {
-          !isAllPluginsLoading && (
+          !isAllPluginsLoading && !collapse && (
             <List
               marketplaceCollections={[]}
               marketplaceCollectionPluginsMap={{}}

web/app/components/plugins/marketplace/empty/index.tsx

@@ -29,20 +29,24 @@ const Empty = ({
               'mr-3 mb-3  h-[144px] w-[calc((100%-36px)/4)] rounded-xl bg-background-section-burn',
               index % 4 === 3 && 'mr-0',
               index > 11 && 'mb-0',
-              lightCard && 'bg-background-default-lighter',
+              lightCard && 'bg-background-default-lighter opacity-75',
             )}
           >
           </div>
         ))
       }
-      <div
-        className='absolute inset-0 bg-marketplace-plugin-empty z-[1]'
-      ></div>
+      {
+        !lightCard && (
+          <div
+            className='absolute inset-0 bg-marketplace-plugin-empty z-[1]'
+          ></div>
+        )
+      }
       <div className='absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-[2] flex flex-col items-center'>
         <div className='relative flex items-center justify-center mb-3 w-14 h-14 rounded-xl border border-dashed border-divider-deep bg-components-card-bg shadow-lg'>
           <Group className='w-5 h-5' />
-          <Line className='absolute -right-[1px] top-1/2 -translate-y-1/2' />
-          <Line className='absolute -left-[1px] top-1/2 -translate-y-1/2' />
+          <Line className='absolute right-[-1px] top-1/2 -translate-y-1/2' />
+          <Line className='absolute left-[-1px] top-1/2 -translate-y-1/2' />
           <Line className='absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 rotate-90' />
           <Line className='absolute top-full left-1/2 -translate-x-1/2 -translate-y-1/2 rotate-90' />
         </div>

web/app/components/plugins/marketplace/list/index.tsx

@@ -14,6 +14,7 @@ type ListProps = {
   locale: string
   cardContainerClassName?: string
   cardRender?: (plugin: Plugin) => JSX.Element | null
+  onMoreClick?: () => void
 }
 const List = ({
   marketplaceCollections,
@@ -23,6 +24,7 @@ const List = ({
   locale,
   cardContainerClassName,
   cardRender,
+  onMoreClick,
 }: ListProps) => {
   return (
     <>
@@ -35,6 +37,7 @@ const List = ({
             locale={locale}
             cardContainerClassName={cardContainerClassName}
             cardRender={cardRender}
+            onMoreClick={onMoreClick}
           />
         )
       }

web/app/components/plugins/marketplace/list/list-with-collection.tsx

@@ -12,6 +12,7 @@ type ListWithCollectionProps = {
   locale: string
   cardContainerClassName?: string
   cardRender?: (plugin: Plugin) => JSX.Element | null
+  onMoreClick?: () => void
 }
 const ListWithCollection = ({
   marketplaceCollections,
@@ -20,6 +21,7 @@ const ListWithCollection = ({
   locale,
   cardContainerClassName,
   cardRender,
+  // onMoreClick,
 }: ListWithCollectionProps) => {
   return (
     <>
@@ -29,8 +31,16 @@ const ListWithCollection = ({
             key={collection.name}
             className='py-3'
           >
-            <div className='title-xl-semi-bold text-text-primary'>{collection.label[getLanguage(locale)]}</div>
-            <div className='system-xs-regular text-text-tertiary'>{collection.description[getLanguage(locale)]}</div>
+            <div className='flex justify-between'>
+              <div>
+                <div className='title-xl-semi-bold text-text-primary'>{collection.label[getLanguage(locale)]}</div>
+                <div className='system-xs-regular text-text-tertiary'>{collection.description[getLanguage(locale)]}</div>
+              </div>
+              {/* <div
+                className='system-xs-regular text-text-tertiary cursor-pointer hover:underline'
+                onClick={() => onMoreClick?.()}
+              >more</div> */}
+            </div>
             <div className={cn(
               'grid grid-cols-4 gap-3 mt-2',
               cardContainerClassName,

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

@@ -1,6 +1,9 @@
 import {
+  useCallback,
   useEffect,
   useMemo,
+  useRef,
+  useState,
 } from 'react'
 import {
   useMarketplaceCollectionsAndPlugins,
@@ -28,10 +31,22 @@ export const useMarketplace = (searchPluginText: string, filterPluginTags: strin
     queryPlugins,
     queryPluginsWithDebounced,
     isLoading: isPluginsLoading,
+    total: pluginsTotal,
   } = useMarketplacePlugins()
+  const [page, setPage] = useState(1)
+  const pageRef = useRef(page)
+  const searchPluginTextRef = useRef(searchPluginText)
+  const filterPluginTagsRef = useRef(filterPluginTags)
 
+  useEffect(() => {
+    searchPluginTextRef.current = searchPluginText
+    filterPluginTagsRef.current = filterPluginTags
+  }, [searchPluginText, filterPluginTags])
   useEffect(() => {
     if ((searchPluginText || filterPluginTags.length) && isSuccess) {
+      setPage(1)
+      pageRef.current = 1
+
       if (searchPluginText) {
         queryPluginsWithDebounced({
           category: PluginType.tool,
@@ -39,6 +54,7 @@ export const useMarketplace = (searchPluginText: string, filterPluginTags: strin
           tags: filterPluginTags,
           exclude,
           type: 'plugin',
+          page: pageRef.current,
         })
         return
       }
@@ -48,6 +64,7 @@ export const useMarketplace = (searchPluginText: string, filterPluginTags: strin
         tags: filterPluginTags,
         exclude,
         type: 'plugin',
+        page: pageRef.current,
       })
     }
     else {
@@ -63,10 +80,38 @@ export const useMarketplace = (searchPluginText: string, filterPluginTags: strin
     }
   }, [searchPluginText, filterPluginTags, queryPlugins, queryMarketplaceCollectionsAndPlugins, queryPluginsWithDebounced, resetPlugins, exclude, isSuccess])
 
+  const handleScroll = useCallback((e: Event) => {
+    const target = e.target as HTMLDivElement
+    const {
+      scrollTop,
+      scrollHeight,
+      clientHeight,
+    } = target
+    if (scrollTop + clientHeight >= scrollHeight - 5 && scrollTop > 0) {
+      const searchPluginText = searchPluginTextRef.current
+      const filterPluginTags = filterPluginTagsRef.current
+      if (pluginsTotal && plugins && pluginsTotal > plugins.length && (!!searchPluginText || !!filterPluginTags.length)) {
+        setPage(pageRef.current + 1)
+        pageRef.current++
+
+        queryPlugins({
+          category: PluginType.tool,
+          query: searchPluginText,
+          tags: filterPluginTags,
+          exclude,
+          type: 'plugin',
+          page: pageRef.current,
+        })
+      }
+    }
+  }, [exclude, plugins, pluginsTotal, queryPlugins])
+
   return {
     isLoading: isLoading || isPluginsLoading,
     marketplaceCollections,
     marketplaceCollectionPluginsMap,
     plugins,
+    handleScroll,
+    page,
   }
 }

web/app/components/tools/marketplace/index.tsx

@@ -1,3 +1,7 @@
+import {
+  useEffect,
+  useRef,
+} from 'react'
 import {
   RiArrowRightUpLine,
   RiArrowUpDoubleLine,
@@ -21,15 +25,33 @@ const Marketplace = ({
 }: MarketplaceProps) => {
   const locale = getLocaleOnClient()
   const { t } = useTranslation()
+
   const {
     isLoading,
     marketplaceCollections,
     marketplaceCollectionPluginsMap,
     plugins,
+    handleScroll,
+    page,
   } = useMarketplace(searchPluginText, filterPluginTags)
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const container = containerRef.current
+    if (container)
+      container.addEventListener('scroll', handleScroll)
+
+    return () => {
+      if (container)
+        container.removeEventListener('scroll', handleScroll)
+    }
+  }, [handleScroll])
 
   return (
-    <div className='flex flex-col shrink-0 sticky bottom-[-442px] h-[530px] overflow-y-auto px-12 py-2 pt-0 bg-background-default-subtle'>
+    <div
+      ref={containerRef}
+      className='grow flex flex-col shrink-0 sticky bottom-[-442px] h-[530px] overflow-y-auto px-12 py-2 pt-0 bg-background-default-subtle'
+    >
       <RiArrowUpDoubleLine
         className='absolute top-2 left-1/2 -translate-x-1/2 w-4 h-4 text-text-quaternary cursor-pointer'
         onClick={() => onMarketplaceScroll()}
@@ -67,14 +89,14 @@ const Marketplace = ({
         </div>
       </div>
       {
-        isLoading && (
+        isLoading && page === 1 && (
           <div className='absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2'>
             <Loading />
           </div>
         )
       }
       {
-        !isLoading && (
+        (!isLoading || page > 1) && (
           <List
             marketplaceCollections={marketplaceCollections || []}
             marketplaceCollectionPluginsMap={marketplaceCollectionPluginsMap || {}}

web/app/components/tools/provider-list.tsx

@@ -95,7 +95,7 @@ const ProviderList = () => {
           </div>
           {(filteredCollectionList.length > 0 || activeTab !== 'builtin') && (
             <div className={cn(
-              'relative grid content-start grid-cols-1 gap-4 px-12 pt-2 pb-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 grow shrink-0',
+              'relative grid content-start grid-cols-1 gap-4 px-12 pt-2 pb-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 shrink-0',
             )}>
               {activeTab === 'api' && <CustomCreateCard onRefreshData={refetch} />}
               {filteredCollectionList.map(collection => (
@@ -125,7 +125,7 @@ const ProviderList = () => {
             </div>
           )}
           {!filteredCollectionList.length && activeTab === 'builtin' && (
-            <Empty lightCard text={t('tools.noTools')} className='px-12' />
+            <Empty lightCard text={t('tools.noTools')} className='px-12 h-[224px]' />
           )}
           {
             enable_marketplace && activeTab === 'builtin' && (