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

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

@@ -11,6 +11,7 @@ const Description = async ({
 }: DescriptionProps) => {
   const localeDefault = getLocaleOnServer()
   const { t } = await translate(localeFromProps || localeDefault, 'plugin')
+  const { t: tCommon } = await translate(localeFromProps || localeDefault, 'common')
 
   return (
     <>
@@ -34,7 +35,8 @@ const Description = async ({
         <span className="relative ml-1 mr-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 z-[1]">
           <span className='relative z-[2]'>{t('category.bundles')}</span>
         </span>
-        {t('marketplace.inDifyMarketplace')}
+        <span className='mr-1'>{tCommon('operation.in')}</span>
+        {t('marketplace.difyMarketplace')}
       </h2>
     </>
   )

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

@@ -1,9 +1,13 @@
-import { RiArrowUpDoubleLine } from '@remixicon/react'
+import {
+  RiArrowRightUpLine,
+  RiArrowUpDoubleLine,
+} from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import { useMarketplace } from './hooks'
 import List from '@/app/components/plugins/marketplace/list'
 import Loading from '@/app/components/base/loading'
 import { getLocaleOnClient } from '@/i18n'
+import { MARKETPLACE_URL_PREFIX } from '@/config'
 
 type MarketplaceProps = {
   searchPluginText: string
@@ -51,7 +55,15 @@ const Marketplace = ({
           <span className="relative ml-1 mr-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('plugin.category.bundles')}
           </span>
-          {t('plugin.marketplace.inDifyMarketplace')}
+          {t('common.operation.in')}
+          <a
+            href={`${MARKETPLACE_URL_PREFIX}`}
+            className='flex items-center ml-1 system-sm-medium text-text-accent'
+            target='_blank'
+          >
+            {t('plugin.marketplace.difyMarketplace')}
+            <RiArrowRightUpLine className='w-4 h-4' />
+          </a>
         </div>
       </div>
       {

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

@@ -10,10 +10,10 @@ import LabelFilter from '@/app/components/tools/labels/filter'
 import Input from '@/app/components/base/input'
 import ProviderDetail from '@/app/components/tools/provider/detail'
 import Empty from '@/app/components/tools/add-tool-modal/empty'
-import { fetchCollectionList } from '@/service/tools'
 import Card from '@/app/components/plugins/card'
 import CardMoreInfo from '@/app/components/plugins/card/card-more-info'
 import { useSelector as useAppContextSelector } from '@/context/app-context'
+import { useAllToolProviders } from '@/service/use-tools'
 
 const ProviderList = () => {
   const { t } = useTranslation()
@@ -36,8 +36,7 @@ const ProviderList = () => {
   const handleKeywordsChange = (value: string) => {
     setKeywords(value)
   }
-
-  const [collectionList, setCollectionList] = useState<Collection[]>([])
+  const { data: collectionList, refetch } = useAllToolProviders()
   const filteredCollectionList = useMemo(() => {
     return collectionList.filter((collection) => {
       if (collection.type !== activeTab)
@@ -49,13 +48,6 @@ const ProviderList = () => {
       return true
     })
   }, [activeTab, tagFilterValue, keywords, collectionList])
-  const getProviderList = async () => {
-    const list = await fetchCollectionList()
-    setCollectionList([...list])
-  }
-  useEffect(() => {
-    getProviderList()
-  }, [])
 
   const [currentProvider, setCurrentProvider] = useState<Collection | undefined>()
   useEffect(() => {
@@ -106,7 +98,7 @@ const ProviderList = () => {
             >
               <Card
                 className={cn(
-                  'border-[1.5px] border-transparent',
+                  'border-[1.5px] border-transparent cursor-pointer',
                   currentProvider?.id === collection.id && 'border-components-option-card-option-selected-border',
                 )}
                 hideCornerMark
@@ -140,7 +132,7 @@ const ProviderList = () => {
         <ProviderDetail
           collection={currentProvider}
           onHide={() => setCurrentProvider(undefined)}
-          onRefreshData={getProviderList}
+          onRefreshData={refetch}
         />
       )}
     </div>