Merge remote-tracking branch 'origin/main' into feat/model-total-credits

web/app/components/plugins/card/base/card-icon.tsx

@@ -1,6 +1,8 @@
 import { RiCheckLine, RiCloseLine } from '@remixicon/react'
+import { Mcp } from '@/app/components/base/icons/src/vender/other'
 import AppIcon from '@/app/components/base/app-icon'
 import cn from '@/utils/classnames'
+import { shouldUseMcpIcon } from '@/utils/mcp'
 
 const iconSizeMap = {
   xs: 'w-4 h-4 text-base',
@@ -35,6 +37,7 @@ const Icon = ({
           icon={src.content}
           background={src.background}
           className='rounded-md'
+          innerIcon={shouldUseMcpIcon(src) ? <Mcp className='h-8 w-8 text-text-primary-on-surface' /> : undefined}
         />
       </div>
     )

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,