Fix/language support (#2154)

web/app/components/tools/edit-custom-collection-modal/test-api.tsx

@@ -10,6 +10,7 @@ import Button from '@/app/components/base/button'
 import Drawer from '@/app/components/base/drawer-plus'
 import I18n from '@/context/i18n'
 import { testAPIAvailable } from '@/service/tools'
+import { getModelRuntimeSupported } from '@/utils/language'
 
 type Props = {
   customCollection: CustomCollectionBackend
@@ -26,6 +27,7 @@ const TestApi: FC<Props> = ({
 }) => {
   const { t } = useTranslation()
   const { locale } = useContext(I18n)
+  const language = getModelRuntimeSupported(locale)
   const [credentialsModalShow, setCredentialsModalShow] = useState(false)
   const [tempCredential, setTempCredential] = React.useState<Credential>(customCollection.credentials)
   const [result, setResult] = useState<string>('')
@@ -78,7 +80,7 @@ const TestApi: FC<Props> = ({
                       {parameters.map((item, index) => (
                         <tr key={index} className='border-b last:border-0 border-gray-200'>
                           <td className="py-2 pl-3 pr-2.5">
-                            {item.label[locale === 'en' ? 'en_US' : 'zh_Hans']}
+                            {item.label[language]}
                           </td>
                           <td className="">
                             <input

web/app/components/tools/tool-list/header.tsx

@@ -8,6 +8,7 @@ import type { Collection } from '../types'
 import { CollectionType, LOC } from '../types'
 import { Settings01 } from '../../base/icons/src/vender/line/general'
 import I18n from '@/context/i18n'
+import { getModelRuntimeSupported } from '@/utils/language'
 
 type Props = {
   icon: JSX.Element
@@ -25,6 +26,7 @@ const Header: FC<Props> = ({
   onShowEditCustomCollection,
 }) => {
   const { locale } = useContext(I18n)
+  const language = getModelRuntimeSupported(locale)
   const { t } = useTranslation()
   const isInToolsPage = loc === LOC.tools
   const isInDebugPage = !isInToolsPage
@@ -38,13 +40,13 @@ const Header: FC<Props> = ({
         {icon}
         <div className='ml-3 grow w-0'>
           <div className='flex items-center h-6 space-x-1'>
-            <div className={cn(isInDebugPage && 'truncate', 'text-base font-semibold text-gray-900')}>{collection.label[locale === 'en' ? 'en_US' : 'zh_Hans']}</div>
+            <div className={cn(isInDebugPage && 'truncate', 'text-base font-semibold text-gray-900')}>{collection.label[language]}</div>
             <div className='text-xs font-normal text-gray-500'>·</div>
             <div className='text-xs font-normal text-gray-500'>{t('tools.author')}&nbsp;{collection.author}</div>
           </div>
           {collection.description && (
             <div className={cn('leading-[18px] text-[13px] font-normal text-gray-500')}>
-              {collection.description[locale === 'en' ? 'en_US' : 'zh_Hans']}
+              {collection.description[language]}
             </div>
           )}
         </div>

web/app/components/tools/tool-list/item.tsx

@@ -10,6 +10,7 @@ import { CollectionType } from '../types'
 import TooltipPlus from '../../base/tooltip-plus'
 import I18n from '@/context/i18n'
 import SettingBuiltInTool from '@/app/components/app/configuration/config/agent/agent-tools/setting-built-in-tool'
+import { getModelRuntimeSupported } from '@/utils/language'
 
 type Props = {
   collection: Collection
@@ -32,6 +33,7 @@ const Item: FC<Props> = ({
 }) => {
   const { t } = useTranslation()
   const { locale } = useContext(I18n)
+  const language = getModelRuntimeSupported(locale)
   const isBuiltIn = collection.type === CollectionType.builtIn
   const canShowDetail = !isBuiltIn || (isBuiltIn && isInToolsPage)
   const [showDetail, setShowDetail] = useState(false)
@@ -45,9 +47,9 @@ const Item: FC<Props> = ({
         <div className='flex items-start w-full'>
           {icon}
           <div className='ml-3 w-0 grow'>
-            <div className={cn('text-base font-semibold text-gray-900 truncate')}>{payload.label[locale === 'en' ? 'en_US' : 'zh_Hans']}</div>
+            <div className={cn('text-base font-semibold text-gray-900 truncate')}>{payload.label[language]}</div>
             <div className={cn('leading-[18px] text-[13px] font-normal text-gray-500')}>
-              {payload.description[locale === 'en' ? 'en_US' : 'zh_Hans']}
+              {payload.description[language]}
             </div>
           </div>
         </div>

web/app/components/tools/tool-nav-list/item.tsx

@@ -6,6 +6,7 @@ import cn from 'classnames'
 import AppIcon from '../../base/app-icon'
 import type { Collection } from '@/app/components/tools/types'
 import I18n from '@/context/i18n'
+import { getModelRuntimeSupported } from '@/utils/language'
 
 type Props = {
   isCurrent: boolean
@@ -19,7 +20,7 @@ const Item: FC<Props> = ({
   onClick,
 }) => {
   const { locale } = useContext(I18n)
-
+  const language = getModelRuntimeSupported(locale)
   return (
     <div
       className={cn(isCurrent && 'bg-white shadow-xs rounded-lg', 'mt-1 flex h-9 items-center px-2 space-x-2 cursor-pointer')}
@@ -41,7 +42,7 @@ const Item: FC<Props> = ({
             background={payload.icon.background}
           />
         )}
-      <div className={cn(isCurrent && 'text-primary-600 font-semibold', 'leading-5 text-sm font-normal truncate')}>{payload.label[locale === 'en' ? 'en_US' : 'zh_Hans']}</div>
+      <div className={cn(isCurrent && 'text-primary-600 font-semibold', 'leading-5 text-sm font-normal truncate')}>{payload.label[language]}</div>
 
     </div>
   )

web/app/components/tools/types.ts

@@ -55,10 +55,7 @@ export type ToolParameter = {
 export type Tool = {
   name: string
   label: TypeWithI18N
-  description: {
-    zh_Hans: string
-    en_US: string
-  }
+  description: any
   parameters: ToolParameter[]
 }