From c458c28c62cc0074583c95b9a681cb4ce8e50046 Mon Sep 17 00:00:00 2001
From: twwu <twwu@dify.ai>
Date: Thu, 2 Jan 2025 17:35:11 +0800
Subject: [PATCH] feat: enhance plugin item localization with i18n support

---
 web/app/components/plugins/plugin-item/index.tsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/web/app/components/plugins/plugin-item/index.tsx b/web/app/components/plugins/plugin-item/index.tsx
index d997299844..1b853a4d4c 100644
--- a/web/app/components/plugins/plugin-item/index.tsx
+++ b/web/app/components/plugins/plugin-item/index.tsx
@@ -20,11 +20,11 @@ import Title from '../card/base/title'
 import Action from './action'
 import cn from '@/utils/classnames'
 import { API_PREFIX, MARKETPLACE_URL_PREFIX } from '@/config'
-import { useLanguage } from '../../header/account-setting/model-provider-page/hooks'
 import { useInvalidateInstalledPluginList } from '@/service/use-plugins'
 import { useInvalidateAllToolProviders } from '@/service/use-tools'
 import { useCategories } from '../hooks'
 import { useProviderContext } from '@/context/provider-context'
+import { useRenderI18nObject } from '@/hooks/use-i18n'
 
 type Props = {
   className?: string
@@ -35,7 +35,6 @@ const PluginItem: FC<Props> = ({
   className,
   plugin,
 }) => {
-  const locale = useLanguage()
   const { t } = useTranslation()
   const { categoriesMap } = useCategories()
   const currentPluginID = usePluginPageContext(v => v.currentPluginID)
@@ -66,6 +65,10 @@ const PluginItem: FC<Props> = ({
     if (PluginType.tool.includes(category))
       invalidateAllToolProviders()
   }
+  const renderI18nObject = useRenderI18nObject()
+  const title = renderI18nObject(label)
+  const descriptionText = renderI18nObject(description)
+
   return (
     <div
       className={cn(
@@ -92,12 +95,12 @@ const PluginItem: FC<Props> = ({
           </div>
           <div className="ml-3 w-0 grow">
             <div className="flex items-center h-5">
-              <Title title={label[locale]} />
+              <Title title={title} />
               {verified && <RiVerifiedBadgeLine className="shrink-0 ml-0.5 w-4 h-4 text-text-accent" />}
               <Badge className='shrink-0 ml-1' text={source === PluginSource.github ? plugin.meta!.version : plugin.version} />
             </div>
             <div className='flex items-center justify-between'>
-              <Description text={description[locale]} descriptionLineRows={1}></Description>
+              <Description text={descriptionText} descriptionLineRows={1}></Description>
               <div onClick={e => e.stopPropagation()}>
                 <Action
                   pluginUniqueIdentifier={plugin_unique_identifier}