Merge branch 'feat/plugins' of https://github.com/langgenius/dify into feat/plugins

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

@@ -100,6 +100,15 @@ export const MarketplaceContextProvider = ({
     setSearchPluginText(text)
     searchPluginTextRef.current = text
 
+    if (!searchPluginTextRef.current && !filterPluginTagsRef.current.length) {
+      queryMarketplaceCollectionsAndPlugins({
+        category: activePluginTypeRef.current === PLUGIN_TYPE_SEARCH_MAP.all ? undefined : activePluginTypeRef.current,
+      })
+      setPlugins(undefined)
+
+      return
+    }
+
     queryPluginsWithDebounced({
       query: text,
       category: activePluginTypeRef.current === PLUGIN_TYPE_SEARCH_MAP.all ? undefined : activePluginTypeRef.current,
@@ -107,12 +116,21 @@ export const MarketplaceContextProvider = ({
       sortBy: sortRef.current.sortBy,
       sortOrder: sortRef.current.sortOrder,
     })
-  }, [queryPluginsWithDebounced])
+  }, [queryPluginsWithDebounced, queryMarketplaceCollectionsAndPlugins, setPlugins])
 
   const handleFilterPluginTagsChange = useCallback((tags: string[]) => {
     setFilterPluginTags(tags)
     filterPluginTagsRef.current = tags
 
+    if (!searchPluginTextRef.current && !filterPluginTagsRef.current.length) {
+      queryMarketplaceCollectionsAndPlugins({
+        category: activePluginTypeRef.current === PLUGIN_TYPE_SEARCH_MAP.all ? undefined : activePluginTypeRef.current,
+      })
+      setPlugins(undefined)
+
+      return
+    }
+
     queryPlugins({
       query: searchPluginTextRef.current,
       category: activePluginTypeRef.current === PLUGIN_TYPE_SEARCH_MAP.all ? undefined : activePluginTypeRef.current,
@@ -120,7 +138,7 @@ export const MarketplaceContextProvider = ({
       sortBy: sortRef.current.sortBy,
       sortOrder: sortRef.current.sortOrder,
     })
-  }, [queryPlugins])
+  }, [queryPlugins, setPlugins, queryMarketplaceCollectionsAndPlugins])
 
   const handleActivePluginTypeChange = useCallback((type: string) => {
     setActivePluginType(type)
@@ -130,7 +148,7 @@ export const MarketplaceContextProvider = ({
       queryMarketplaceCollectionsAndPlugins({
         category: type === PLUGIN_TYPE_SEARCH_MAP.all ? undefined : type,
       })
-      setPlugins([])
+      setPlugins(undefined)
 
       return
     }

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

@@ -14,10 +14,10 @@ const Description = async ({
 
   return (
     <>
-      <h1 className='mb-2 text-center title-4xl-semi-bold text-text-primary'>
+      <h1 className='shrink-0 mb-2 text-center title-4xl-semi-bold text-text-primary'>
         Empower your AI development
       </h1>
-      <h2 className='flex justify-center items-center text-center body-md-regular text-text-tertiary'>
+      <h2 className='shrink-0 flex justify-center items-center text-center body-md-regular text-text-tertiary'>
         Discover
         <span className="relative ml-1 body-md-medium text-text-secondary after:content-[''] after:absolute after:left-0 after:bottom-[1.5px] after:w-full after:h-2 after:bg-text-text-selected">
           {t('category.models')}

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

@@ -4,7 +4,7 @@ import Line from './line'
 const Empty = () => {
   return (
     <div
-      className='relative grid grid-cols-4 grid-rows-4 gap-3 p-2'
+      className='grow relative h-0 grid grid-cols-4 grid-rows-4 gap-3 p-2 overflow-hidden'
     >
       {
         Array.from({ length: 16 }).map((_, index) => (

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

@@ -28,60 +28,6 @@ const Marketplace = async ({
         marketplaceCollectionPluginsMap={marketplaceCollectionPluginsMap}
         showInstallButton={showInstallButton}
       />
-      <ListWrapper
-        locale={locale}
-        marketplaceCollections={marketplaceCollections}
-        marketplaceCollectionPluginsMap={marketplaceCollectionPluginsMap}
-        showInstallButton={showInstallButton}
-      />
-      <ListWrapper
-        locale={locale}
-        marketplaceCollections={marketplaceCollections}
-        marketplaceCollectionPluginsMap={marketplaceCollectionPluginsMap}
-        showInstallButton={showInstallButton}
-      />
-      <ListWrapper
-        locale={locale}
-        marketplaceCollections={marketplaceCollections}
-        marketplaceCollectionPluginsMap={marketplaceCollectionPluginsMap}
-        showInstallButton={showInstallButton}
-      />
-      <ListWrapper
-        locale={locale}
-        marketplaceCollections={marketplaceCollections}
-        marketplaceCollectionPluginsMap={marketplaceCollectionPluginsMap}
-        showInstallButton={showInstallButton}
-      />
-      <ListWrapper
-        locale={locale}
-        marketplaceCollections={marketplaceCollections}
-        marketplaceCollectionPluginsMap={marketplaceCollectionPluginsMap}
-        showInstallButton={showInstallButton}
-      />
-      <ListWrapper
-        locale={locale}
-        marketplaceCollections={marketplaceCollections}
-        marketplaceCollectionPluginsMap={marketplaceCollectionPluginsMap}
-        showInstallButton={showInstallButton}
-      />
-      <ListWrapper
-        locale={locale}
-        marketplaceCollections={marketplaceCollections}
-        marketplaceCollectionPluginsMap={marketplaceCollectionPluginsMap}
-        showInstallButton={showInstallButton}
-      />
-      <ListWrapper
-        locale={locale}
-        marketplaceCollections={marketplaceCollections}
-        marketplaceCollectionPluginsMap={marketplaceCollectionPluginsMap}
-        showInstallButton={showInstallButton}
-      />
-      <ListWrapper
-        locale={locale}
-        marketplaceCollections={marketplaceCollections}
-        marketplaceCollectionPluginsMap={marketplaceCollectionPluginsMap}
-        showInstallButton={showInstallButton}
-      />
     </MarketplaceContextProvider>
   )
 }

web/app/components/plugins/marketplace/list/list-wrapper.tsx

@@ -22,7 +22,7 @@ const ListWrapper = ({
   const marketplaceCollectionPluginsMapFromClient = useMarketplaceContext(v => v.marketplaceCollectionPluginsMapFromClient)
 
   return (
-    <div className='px-12 py-2 bg-background-default-subtle'>
+    <div className='flex flex-col grow px-12 py-2 bg-background-default-subtle'>
       {
         plugins && (
           <div className='flex items-center mb-4 pt-3'>

web/app/components/plugins/marketplace/plugin-type-switch.tsx

@@ -57,7 +57,7 @@ const PluginTypeSwitch = ({
 
   return (
     <div className={cn(
-      'sticky top-[60px] flex items-center justify-center py-3 bg-background-body space-x-2 z-10',
+      'sticky top-[60px] shrink-0 flex items-center justify-center py-3 bg-background-body space-x-2 z-10',
     )}>
       {
         options.map(option => (

web/app/components/plugins/marketplace/search-box/index.tsx

@@ -41,7 +41,7 @@ const SearchBox = ({
       />
       <div className='mx-1 w-[1px] h-3.5 bg-divider-regular'></div>
       <div className='grow flex items-center p-1 pl-2'>
-        <div className='flex items-center mr-2 py-0.5 w-full'>
+        <div className='flex items-center mr-2 w-full'>
           <input
             className={cn(
               'grow block outline-none appearance-none body-md-medium text-text-secondary bg-transparent',

web/app/components/plugins/marketplace/search-box/search-box-wrapper.tsx

@@ -20,7 +20,7 @@ const SearchBoxWrapper = ({
   return (
     <SearchBox
       inputClassName={cn(
-        'sticky top-3 mx-auto w-[640px]',
+        'sticky top-3 mx-auto w-[640px] shrink-0',
         !intersected && 'w-[508px] transition-[width] duration-300',
       )}
       search={searchPluginText}

web/package.json

@@ -31,7 +31,7 @@
     "@formatjs/intl-localematcher": "^0.5.6",
     "@headlessui/react": "^1.7.13",
     "@heroicons/react": "^2.0.16",
-    "@hookform/resolvers": "^3.3.4",
+    "@hookform/resolvers": "^3.9.0",
     "@lexical/react": "^0.18.0",
     "@mdx-js/loader": "^3.1.0",
     "@mdx-js/react": "^3.1.0",
@@ -82,7 +82,7 @@
     "react-easy-crop": "^5.1.0",
     "react-error-boundary": "^4.1.2",
     "react-headless-pagination": "^1.1.6",
-    "react-hook-form": "^7.51.4",
+    "react-hook-form": "^7.53.1",
     "react-i18next": "^15.1.0",
     "react-infinite-scroll-component": "^6.1.0",
     "react-multi-email": "^1.0.25",
@@ -110,7 +110,7 @@
     "tailwind-merge": "^2.4.0",
     "use-context-selector": "^2.0.0",
     "uuid": "^10.0.0",
-    "zod": "^3.23.6",
+    "zod": "^3.23.8",
     "zundo": "^2.1.0",
     "zustand": "^4.5.2"
   },

web/pnpm-lock.yaml

@@ -35,7 +35,7 @@ importers:
         specifier: ^2.0.16
         version: 2.1.5(react@18.2.0)
       '@hookform/resolvers':
-        specifier: ^3.3.4
+        specifier: ^3.9.0
         version: 3.9.0(react-hook-form@7.53.1(react@18.2.0))
       '@lexical/react':
         specifier: ^0.18.0
@@ -188,7 +188,7 @@ importers:
         specifier: ^1.1.6
         version: 1.1.6(react@18.2.0)
       react-hook-form:
-        specifier: ^7.51.4
+        specifier: ^7.53.1
         version: 7.53.1(react@18.2.0)
       react-i18next:
         specifier: ^15.1.0
@@ -272,7 +272,7 @@ importers:
         specifier: ^10.0.0
         version: 10.0.0
       zod:
-        specifier: ^3.23.6
+        specifier: ^3.23.8
         version: 3.23.8
       zundo:
         specifier: ^2.1.0