Fix/tool provider tag internationalization (#26710)

Co-authored-by: qiaofenglin <qiaofenglin@baidu.com>

web/app/components/plugins/hooks.ts

@@ -1,3 +1,4 @@
+import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import type { TFunction } from 'i18next'
 import {
@@ -14,23 +15,29 @@ export const useTags = (translateFromOut?: TFunction) => {
   const { t: translation } = useTranslation()
   const t = translateFromOut || translation
 
-  const tags = tagKeys.map((tag) => {
-    return {
-      name: tag,
-      label: t(`pluginTags.tags.${tag}`),
+  const tags = useMemo(() => {
+    return tagKeys.map((tag) => {
+      return {
+        name: tag,
+        label: t(`pluginTags.tags.${tag}`),
+      }
+    })
+  }, [t])
+
+  const tagsMap = useMemo(() => {
+    return tags.reduce((acc, tag) => {
+      acc[tag.name] = tag
+      return acc
+    }, {} as Record<string, Tag>)
+  }, [tags])
+
+  const getTagLabel = useMemo(() => {
+    return (name: string) => {
+      if (!tagsMap[name])
+        return name
+      return tagsMap[name].label
     }
-  })
-
-  const tagsMap = tags.reduce((acc, tag) => {
-    acc[tag.name] = tag
-    return acc
-  }, {} as Record<string, Tag>)
-
-  const getTagLabel = (name: string) => {
-    if (!tagsMap[name])
-      return name
-    return tagsMap[name].label
-  }
+  }, [tagsMap])
 
   return {
     tags,
@@ -48,23 +55,27 @@ export const useCategories = (translateFromOut?: TFunction) => {
   const { t: translation } = useTranslation()
   const t = translateFromOut || translation
 
-  const categories = categoryKeys.map((category) => {
-    if (category === 'agent-strategy') {
-      return {
-        name: 'agent-strategy',
-        label: t('plugin.category.agents'),
+  const categories = useMemo(() => {
+    return categoryKeys.map((category) => {
+      if (category === 'agent-strategy') {
+        return {
+          name: 'agent-strategy',
+          label: t('plugin.category.agents'),
+        }
       }
-    }
-    return {
-      name: category,
-      label: t(`plugin.category.${category}s`),
-    }
-  })
+      return {
+        name: category,
+        label: t(`plugin.category.${category}s`),
+      }
+    })
+  }, [t])
 
-  const categoriesMap = categories.reduce((acc, category) => {
-    acc[category.name] = category
-    return acc
-  }, {} as Record<string, Category>)
+  const categoriesMap = useMemo(() => {
+    return categories.reduce((acc, category) => {
+      acc[category.name] = category
+      return acc
+    }, {} as Record<string, Category>)
+  }, [categories])
 
   return {
     categories,
@@ -76,23 +87,27 @@ export const useSingleCategories = (translateFromOut?: TFunction) => {
   const { t: translation } = useTranslation()
   const t = translateFromOut || translation
 
-  const categories = categoryKeys.map((category) => {
-    if (category === 'agent-strategy') {
-      return {
-        name: 'agent-strategy',
-        label: t('plugin.categorySingle.agent'),
+  const categories = useMemo(() => {
+    return categoryKeys.map((category) => {
+      if (category === 'agent-strategy') {
+        return {
+          name: 'agent-strategy',
+          label: t('plugin.categorySingle.agent'),
+        }
       }
-    }
-    return {
-      name: category,
-      label: t(`plugin.categorySingle.${category}`),
-    }
-  })
+      return {
+        name: category,
+        label: t(`plugin.categorySingle.${category}`),
+      }
+    })
+  }, [t])
 
-  const categoriesMap = categories.reduce((acc, category) => {
-    acc[category.name] = category
-    return acc
-  }, {} as Record<string, Category>)
+  const categoriesMap = useMemo(() => {
+    return categories.reduce((acc, category) => {
+      acc[category.name] = category
+      return acc
+    }, {} as Record<string, Category>)
+  }, [categories])
 
   return {
     categories,

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

@@ -21,6 +21,7 @@ import { useCheckInstalled, useInvalidateInstalledPluginList } from '@/service/u
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { ToolTypeEnum } from '../workflow/block-selector/types'
 import { useMarketplace } from './marketplace/hooks'
+import { useTags } from '@/app/components/plugins/hooks'
 
 const getToolType = (type: string) => {
   switch (type) {
@@ -40,6 +41,7 @@ const ProviderList = () => {
   // const searchParams = useSearchParams()
   // searchParams.get('category') === 'workflow'
   const { t } = useTranslation()
+  const { getTagLabel } = useTags()
   const { enable_marketplace } = useGlobalPublicStore(s => s.systemFeatures)
   const containerRef = useRef<HTMLDivElement>(null)
 
@@ -180,7 +182,7 @@ const ProviderList = () => {
                     } as any}
                     footer={
                       <CardMoreInfo
-                        tags={collection.labels}
+                        tags={collection.labels?.map(label => getTagLabel(label)) || []}
                       />
                     }
                   />