refactor I18n render in plugin detail

web/app/components/plugins/plugin-detail-panel/endpoint-modal.tsx

@@ -8,7 +8,7 @@ import Button from '@/app/components/base/button'
 import Drawer from '@/app/components/base/drawer'
 import Form from '@/app/components/header/account-setting/model-provider-page/model-modal/Form'
 import Toast from '@/app/components/base/toast'
-import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
+import { useRenderI18nObject } from '@/hooks/use-i18n'
 import cn from '@/utils/classnames'
 
 type Props = {
@@ -24,14 +24,14 @@ const EndpointModal: FC<Props> = ({
   onCancel,
   onSaved,
 }) => {
+  const getValueFromI18nObject = useRenderI18nObject()
   const { t } = useTranslation()
-  const language = useLanguage()
   const [tempCredential, setTempCredential] = React.useState<any>(defaultValues)
 
   const handleSave = () => {
     for (const field of formSchemas) {
       if (field.required && !tempCredential[field.name]) {
-        Toast.notify({ type: 'error', message: t('common.errorMsg.fieldRequired', { field: field.label[language] || field.label.en_US }) })
+        Toast.notify({ type: 'error', message: t('common.errorMsg.fieldRequired', { field: getValueFromI18nObject(field.label) }) })
         return
       }
     }

web/app/components/plugins/plugin-detail-panel/strategy-detail.tsx

@@ -2,7 +2,6 @@
 import type { FC } from 'react'
 import React, { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useContext } from 'use-context-selector'
 import {
   RiArrowLeftLine,
   RiCloseLine,
@@ -16,8 +15,7 @@ import type {
   StrategyDetail,
 } from '@/app/components/plugins/types'
 import type { Locale } from '@/i18n'
-import I18n from '@/context/i18n'
-import { getLanguage } from '@/i18n/language'
+import { useRenderI18nObject } from '@/hooks/use-i18n'
 import cn from '@/utils/classnames'
 
 type Props = {
@@ -38,8 +36,7 @@ const StrategyDetail: FC<Props> = ({
   detail,
   onHide,
 }) => {
-  const { locale } = useContext(I18n)
-  const language = getLanguage(locale)
+  const getValueFromI18nObject = useRenderI18nObject()
   const { t } = useTranslation()
 
   const outputSchema = useMemo(() => {
@@ -98,10 +95,10 @@ const StrategyDetail: FC<Props> = ({
           </div>
           <div className='flex items-center gap-1'>
             <Icon size='tiny' className='w-6 h-6' src={provider.icon} />
-            <div className=''>{provider.label[language]}</div>
+            <div className=''>{getValueFromI18nObject(provider.label)}</div>
           </div>
-          <div className='mt-1 text-text-primary system-md-semibold'>{detail.identity.label[language]}</div>
-          <Description className='mt-3' text={detail.description[language]} descriptionLineRows={2}></Description>
+          <div className='mt-1 text-text-primary system-md-semibold'>{getValueFromI18nObject(detail.identity.label)}</div>
+          <Description className='mt-3' text={getValueFromI18nObject(detail.description)} descriptionLineRows={2}></Description>
         </div>
         {/* form */}
         <div className='h-full'>
@@ -113,7 +110,7 @@ const StrategyDetail: FC<Props> = ({
                   {detail.parameters.map((item: any, index) => (
                     <div key={index} className='py-1'>
                       <div className='flex items-center gap-2'>
-                        <div className='text-text-secondary code-sm-semibold'>{item.label[language]}</div>
+                        <div className='text-text-secondary code-sm-semibold'>{getValueFromI18nObject(item.label)}</div>
                         <div className='text-text-tertiary system-xs-regular'>
                           {getType(item.type)}
                         </div>
@@ -123,7 +120,7 @@ const StrategyDetail: FC<Props> = ({
                       </div>
                       {item.human_description && (
                         <div className='mt-0.5 text-text-tertiary system-xs-regular'>
-                          {item.human_description?.[language]}
+                          {getValueFromI18nObject(item.human_description)}
                         </div>
                       )}
                     </div>

web/app/components/plugins/plugin-detail-panel/strategy-item.tsx

@@ -1,13 +1,11 @@
 'use client'
 import React, { useState } from 'react'
-import { useContext } from 'use-context-selector'
 import StrategyDetailPanel from './strategy-detail'
 import type {
   StrategyDetail,
 } from '@/app/components/plugins/types'
 import type { Locale } from '@/i18n'
-import I18n from '@/context/i18n'
-import { getLanguage } from '@/i18n/language'
+import { useRenderI18nObject } from '@/hooks/use-i18n'
 import cn from '@/utils/classnames'
 
 type Props = {
@@ -26,8 +24,7 @@ const StrategyItem = ({
   provider,
   detail,
 }: Props) => {
-  const { locale } = useContext(I18n)
-  const language = getLanguage(locale)
+  const getValueFromI18nObject = useRenderI18nObject()
   const [showDetail, setShowDetail] = useState(false)
 
   return (
@@ -36,8 +33,8 @@ const StrategyItem = ({
         className={cn('mb-2 px-4 py-3 bg-components-panel-item-bg rounded-xl border-[0.5px] border-components-panel-border-subtle shadow-xs cursor-pointer hover:bg-components-panel-on-panel-item-bg-hover')}
         onClick={() => setShowDetail(true)}
       >
-        <div className='pb-0.5 text-text-secondary system-md-semibold'>{detail.identity.label[language]}</div>
-        <div className='text-text-tertiary system-xs-regular line-clamp-2' title={detail.description[language]}>{detail.description[language]}</div>
+        <div className='pb-0.5 text-text-secondary system-md-semibold'>{getValueFromI18nObject(detail.identity.label)}</div>
+        <div className='text-text-tertiary system-xs-regular line-clamp-2' title={getValueFromI18nObject(detail.description)}>{getValueFromI18nObject(detail.description)}</div>
       </div>
       {showDetail && (
         <StrategyDetailPanel

web/app/components/plugins/plugin-detail-panel/tool-selector/tool-credentials-form.tsx

@@ -12,7 +12,7 @@ import Toast from '@/app/components/base/toast'
 import { fetchBuiltInToolCredential, fetchBuiltInToolCredentialSchema } from '@/service/tools'
 import Loading from '@/app/components/base/loading'
 import Form from '@/app/components/header/account-setting/model-provider-page/model-modal/Form'
-import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
+import { useRenderI18nObject } from '@/hooks/use-i18n'
 import cn from '@/utils/classnames'
 
 type Props = {
@@ -26,8 +26,8 @@ const ToolCredentialForm: FC<Props> = ({
   onCancel,
   onSaved,
 }) => {
+  const getValueFromI18nObject = useRenderI18nObject()
   const { t } = useTranslation()
-  const language = useLanguage()
   const [credentialSchema, setCredentialSchema] = useState<any>(null)
   const { name: collectionName } = collection
   const [tempCredential, setTempCredential] = React.useState<any>({})
@@ -45,7 +45,7 @@ const ToolCredentialForm: FC<Props> = ({
   const handleSave = () => {
     for (const field of credentialSchema) {
       if (field.required && !tempCredential[field.name]) {
-        Toast.notify({ type: 'error', message: t('common.errorMsg.fieldRequired', { field: field.label[language] || field.label.en_US }) })
+        Toast.notify({ type: 'error', message: t('common.errorMsg.fieldRequired', { field: getValueFromI18nObject(field.label) }) })
         return
       }
     }

web/app/components/plugins/provider-card.tsx

@@ -10,12 +10,12 @@ import Icon from './card/base/card-icon'
 import Title from './card/base/title'
 import DownloadCount from './card/base/download-count'
 import Button from '@/app/components/base/button'
-import { useGetLanguage } from '@/context/i18n'
 import InstallFromMarketplace from '@/app/components/plugins/install-plugin/install-from-marketplace'
 import cn from '@/utils/classnames'
 import { useBoolean } from 'ahooks'
 import { getPluginLinkInMarketplace } from '@/app/components/plugins/marketplace/utils'
 import { useI18N } from '@/context/i18n'
+import { useRenderI18nObject } from '@/hooks/use-i18n'
 
 type Props = {
   className?: string
@@ -26,12 +26,12 @@ const ProviderCard: FC<Props> = ({
   className,
   payload,
 }) => {
+  const getValueFromI18nObject = useRenderI18nObject()
   const { t } = useTranslation()
   const [isShowInstallFromMarketplace, {
     setTrue: showInstallFromMarketplace,
     setFalse: hideInstallFromMarketplace,
   }] = useBoolean(false)
-  const language = useGetLanguage()
   const { org, label } = payload
   const { locale } = useI18N()
 
@@ -42,7 +42,7 @@ const ProviderCard: FC<Props> = ({
         <Icon src={payload.icon} />
         <div className="ml-3 w-0 grow">
           <div className="flex items-center h-5">
-            <Title title={label[language] || label.en_US} />
+            <Title title={getValueFromI18nObject(label)} />
             {/* <RiVerifiedBadgeLine className="shrink-0 ml-0.5 w-4 h-4 text-text-accent" /> */}
           </div>
           <div className='mb-1 flex justify-between items-center h-4'>
@@ -54,7 +54,7 @@ const ProviderCard: FC<Props> = ({
           </div>
         </div>
       </div>
-      <Description className='mt-3' text={payload.brief[language] || payload.brief.en_US} descriptionLineRows={2}></Description>
+      <Description className='mt-3' text={getValueFromI18nObject(payload.brief)} descriptionLineRows={2}></Description>
       <div className='mt-3 flex space-x-0.5'>
         {payload.tags.map(tag => (
           <Badge key={tag.name} text={tag.name} />