fix: use English as the default i18n language (#2663)

web/app/components/header/account-setting/model-provider-page/model-icon/index.tsx

@@ -26,7 +26,7 @@ const ModelIcon: FC<ModelIconProps> = ({
     return (
       <img
         alt='model-icon'
-        src={`${provider.icon_small[language]}?_token=${localStorage.getItem('console_token')}`}
+        src={`${provider.icon_small[language] || provider.icon_small.en_US}?_token=${localStorage.getItem('console_token')}`}
         className={`w-4 h-4 ${className}`}
       />
     )

web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx

@@ -69,7 +69,7 @@ const Form: FC<FormProps> = ({
         <Tooltip popupContent={
           // w-[100px] caused problem
           <div className=''>
-            {tooltip[language]}
+            {tooltip[language] || tooltip.en_US}
           </div>
         } >
           <HelpCircle className='w-3 h-3  text-gray-500' />
@@ -91,7 +91,7 @@ const Form: FC<FormProps> = ({
       return (
         <div key={variable} className='py-3'>
           <div className='py-2 text-sm text-gray-900'>
-            {label[language]}
+            {label[language] || label.en_US}
             {
               required && (
                 <span className='ml-1 text-red-500'>*</span>
@@ -104,7 +104,7 @@ const Form: FC<FormProps> = ({
             value={(isShowDefaultValue && ((value[variable] as string) === '' || value[variable] === undefined || value[variable] === null)) ? formSchema.default : value[variable]}
             onChange={val => handleFormChange(variable, val)}
             validated={validatedSuccess}
-            placeholder={placeholder?.[language]}
+            placeholder={placeholder?.[language] || placeholder?.en_US}
             disabled={disabed}
             type={formSchema.type === FormTypeEnum.textNumber ? 'number' : 'text'}
             {...(formSchema.type === FormTypeEnum.textNumber ? { min: (formSchema as CredentialFormSchemaNumberInput).min, max: (formSchema as CredentialFormSchemaNumberInput).max } : {})}
@@ -132,7 +132,7 @@ const Form: FC<FormProps> = ({
       return (
         <div key={variable} className='py-3'>
           <div className='py-2 text-sm text-gray-900'>
-            {label[language]}
+            {label[language] || label.en_US}
             {
               required && (
                 <span className='ml-1 text-red-500'>*</span>
@@ -188,7 +188,7 @@ const Form: FC<FormProps> = ({
       return (
         <div key={variable} className='py-3'>
           <div className='py-2 text-sm text-gray-900'>
-            {label[language]}
+            {label[language] || label.en_US}
 
             {
               required && (
@@ -230,7 +230,7 @@ const Form: FC<FormProps> = ({
         <div key={variable} className='py-3'>
           <div className='flex items-center justify-between py-2 text-sm text-gray-900'>
             <div className='flex items-center space-x-2'>
-              <span>{label[language]}</span>
+              <span>{label[language] || label.en_US}</span>
               {tooltipContent}
             </div>
             <Radio.Group

web/app/components/header/account-setting/model-provider-page/model-modal/index.tsx

@@ -246,12 +246,12 @@ const ModelModal: FC<ModelModalProps> = ({
                   (provider.help && (provider.help.title || provider.help.url))
                     ? (
                       <a
-                        href={provider.help?.url[language]}
+                        href={provider.help?.url[language] || provider.help?.url.en_US}
                         target='_blank' rel='noopener noreferrer'
                         className='inline-flex items-center text-xs text-primary-600'
                         onClick={e => !provider.help.url && e.preventDefault()}
                       >
-                        {provider.help.title?.[language] || provider.help.url[language]}
+                        {provider.help.title?.[language] || provider.help.url[language] || provider.help.title?.en_US || provider.help.url.en_US}
                         <LinkExternal02 className='ml-1 w-3 h-3' />
                       </a>
                     )

web/app/components/header/account-setting/model-provider-page/model-name/index.tsx

@@ -34,7 +34,6 @@ const ModelName: FC<ModelNameProps> = ({
 
   if (!modelItem)
     return null
-
   return (
     <div
       className={`
@@ -44,9 +43,9 @@ const ModelName: FC<ModelNameProps> = ({
     >
       <div
         className='mr-1 truncate'
-        title={modelItem.label[language]}
+        title={modelItem.label[language] || modelItem.label.en_US}
       >
-        {modelItem.label[language]}
+        {modelItem.label[language] || modelItem.label.en_US}
       </div>
       {
         showModelType && modelItem.model_type && (

web/app/components/header/account-setting/model-provider-page/model-parameter-modal/parameter-item.tsx

@@ -218,16 +218,16 @@ const ParameterItem: FC<ParameterItemProps> = ({
         <div className='shrink-0 flex items-center w-[200px]'>
           <div
             className='mr-0.5 text-[13px] font-medium text-gray-700 truncate'
-            title={parameterRule.label[language]}
+            title={parameterRule.label[language] || parameterRule.label.en_US}
           >
-            {parameterRule.label[language]}
+            {parameterRule.label[language] || parameterRule.label.en_US}
           </div>
           {
             parameterRule.help && (
               <Tooltip
                 selector={`model-parameter-rule-${parameterRule.name}`}
                 htmlContent={(
-                  <div className='w-[200px] whitespace-pre-wrap'>{parameterRule.help[language]}</div>
+                  <div className='w-[200px] whitespace-pre-wrap'>{parameterRule.help[language] || parameterRule.help.en_US}</div>
                 )}
               >
                 <HelpCircle className='mr-1.5 w-3.5 h-3.5 text-gray-400' />

web/app/components/header/account-setting/model-provider-page/model-selector/popup-item.tsx

@@ -65,7 +65,7 @@ const PopupItem: FC<PopupItemProps> = ({
   return (
     <div className='mb-1'>
       <div className='flex items-center px-3 h-[22px] text-xs font-medium text-gray-500'>
-        {model.label[language]}
+        {model.label[language] || model.label.en_US}
       </div>
       {
         model.models.map(modelItem => (

web/app/components/header/account-setting/model-provider-page/model-selector/popup.tsx

@@ -23,7 +23,22 @@ const Popup: FC<PopupProps> = ({
   const language = useLanguage()
   const [searchText, setSearchText] = useState('')
 
-  const filteredModelList = modelList.filter(model => model.models.filter(modelItem => modelItem.label[language].includes(searchText)).length)
+  const filteredModelList = modelList.filter(
+    model => model.models.filter(
+      (modelItem) => {
+        if (modelItem.label[language] !== undefined)
+          return modelItem.label[language].includes(searchText)
+
+        let found = false
+        Object.keys(modelItem.label).forEach((key) => {
+          if (modelItem.label[key].includes(searchText))
+            found = true
+        })
+
+        return found
+      },
+    ).length,
+  )
 
   return (
     <div className='w-[320px] max-h-[480px] rounded-lg border-[0.5px] border-gray-200 bg-white shadow-lg overflow-y-auto'>

web/app/components/header/account-setting/model-provider-page/provider-card/index.tsx

@@ -69,7 +69,7 @@ const ProviderCard: FC<ProviderCardProps> = ({
         </div>
         {
           provider.description && (
-            <div className='mt-1 leading-4 text-xs text-black/[48]'>{provider.description[language]}</div>
+            <div className='mt-1 leading-4 text-xs text-black/[48]'>{provider.description[language] || provider.description.en_US}</div>
           )
         }
       </div>

web/app/components/header/account-setting/model-provider-page/provider-icon/index.tsx

@@ -16,7 +16,7 @@ const ProviderIcon: FC<ProviderIconProps> = ({
     return (
       <img
         alt='provider-icon'
-        src={`${provider.icon_large[language]}?_token=${localStorage.getItem('console_token')}`}
+        src={`${provider.icon_large[language] || provider.icon_large.en_US}?_token=${localStorage.getItem('console_token')}`}
         className={`w-auto h-6 ${className}`}
       />
     )