feat: tool list use query

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>

web/i18n/en-US/common.ts

@@ -44,6 +44,7 @@ const translation = {
     zoomOut: 'Zoom Out',
     zoomIn: 'Zoom In',
     openInNewTab: 'Open in new tab',
+    in: 'in',
   },
   errorMsg: {
     fieldRequired: '{{field}} is required',

web/i18n/en-US/plugin.ts

@@ -126,7 +126,7 @@ const translation = {
     empower: 'Empower your AI development',
     discover: 'Discover',
     and: 'and',
-    inDifyMarketplace: 'in Dify Marketplace',
+    difyMarketplace: 'Dify Marketplace',
     moreFrom: 'More from Marketplace',
     noPluginFound: 'No plugin found',
     pluginsResult: '{{num}} results',

web/i18n/zh-Hans/common.ts

@@ -44,6 +44,7 @@ const translation = {
     zoomOut: '缩小',
     zoomIn: '放大',
     openInNewTab: '在新标签页打开',
+    in: '在',
   },
   errorMsg: {
     fieldRequired: '{{field}} 为必填项',

web/i18n/zh-Hans/plugin.ts

@@ -126,7 +126,7 @@ const translation = {
     empower: '助力您的 AI 开发',
     discover: '探索',
     and: '和',
-    inDifyMarketplace: '在 Dify 市场中',
+    difyMarketplace: 'Dify 市场',
     moreFrom: '更多来自市场',
     noPluginFound: '未找到插件',
     pluginsResult: '{{num}} 个插件结果',

web/service/use-tools.ts

@@ -13,6 +13,15 @@ import {
 
 const NAME_SPACE = 'tools'
 
+const useAllToolProvidersKey = [NAME_SPACE, 'allToolProviders']
+export const useAllToolProviders = () => {
+  return useQuery({
+    queryKey: useAllToolProvidersKey,
+    queryFn: () => get<Collection[]>('/workspaces/current/tool-providers'),
+    initialData: [],
+  })
+}
+
 const useAllBuiltInToolsKey = [NAME_SPACE, 'builtIn']
 export const useAllBuiltInTools = () => {
   return useQuery<ToolWithProvider[]>({