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,