Feat/portuguese support (#2075)

web/app/(commonLayout)/apps/page.tsx

@@ -14,12 +14,6 @@ const AppList = async () => {
       <footer className='px-12 py-6 grow-0 shrink-0'>
         <h3 className='text-xl font-semibold leading-tight text-gradient'>{t('join')}</h3>
         <p className='mt-1 text-sm font-normal leading-tight text-gray-700'>{t('communityIntro')}</p>
-        {/* <p className='mt-3 text-sm'> */}
-        {/*  <a className='inline-flex items-center gap-1 link' target='_blank' href={`https://docs.dify.ai${locale === 'en' ? '' : '/v/zh-hans'}/community/product-roadmap`}> */}
-        {/*    {t('roadmap')} */}
-        {/*    <span className={style.linkIcon} /> */}
-        {/*  </a> */}
-        {/* </p> */}
         <div className='flex items-center gap-2 mt-3'>
           <a className={style.socialMediaLink} target='_blank' href='https://github.com/langgenius/dify'><span className={classNames(style.socialMediaIcon, style.githubIcon)} /></a>
           <a className={style.socialMediaLink} target='_blank' href='https://discord.gg/FngNHpbcY7'><span className={classNames(style.socialMediaIcon, style.discordIcon)} /></a>

web/app/activate/activateForm.tsx

@@ -12,7 +12,7 @@ import Button from '@/app/components/base/button'
 
 import { SimpleSelect } from '@/app/components/base/select'
 import { timezones } from '@/utils/timezone'
-import { languageMaps, languages } from '@/utils/language'
+import { LanguagesSupported, languages } from '@/utils/language'
 import { activateMember, invitationCheck } from '@/service/common'
 import Toast from '@/app/components/base/toast'
 import Loading from '@/app/components/base/loading'
@@ -45,7 +45,7 @@ const ActivateForm = () => {
   const [timezone, setTimezone] = useState('Asia/Shanghai')
   const [language, setLanguage] = useState('en-US')
   const [showSuccess, setShowSuccess] = useState(false)
-  const defaultLanguage = useCallback(() => (window.navigator.language.startsWith('zh') ? languageMaps['zh-Hans'] : languageMaps.en) || languageMaps.en, [])
+  const defaultLanguage = useCallback(() => (window.navigator.language.startsWith('zh') ? LanguagesSupported[1] : LanguagesSupported[0]) || LanguagesSupported[0], [])
 
   const showErrorMessage = useCallback((message: string) => {
     Toast.notify({

web/app/components/app/overview/settings/index.tsx

@@ -13,6 +13,8 @@ import type { AppDetailResponse } from '@/models/app'
 import type { Language } from '@/types/app'
 import EmojiPicker from '@/app/components/base/emoji-picker'
 
+import { languages } from '@/utils/language'
+
 export type ISettingsModalProps = {
   appInfo: AppDetailResponse
   isShow: boolean
@@ -32,11 +34,6 @@ export type ConfigParams = {
   icon_background: string
 }
 
-const LANGUAGE_MAP: Record<Language, string> = {
-  'en-US': 'English(United States)',
-  'zh-Hans': '简体中文',
-}
-
 const prefixSettings = 'appOverview.overview.appInfo.settings'
 
 const SettingsModal: FC<ISettingsModalProps> = ({
@@ -125,7 +122,7 @@ const SettingsModal: FC<ISettingsModalProps> = ({
         />
         <div className={`mt-6 mb-2 font-medium ${s.settingTitle} text-gray-900 `}>{t(`${prefixSettings}.language`)}</div>
         <SimpleSelect
-          items={Object.keys(LANGUAGE_MAP).map(lang => ({ name: LANGUAGE_MAP[lang as Language], value: lang }))}
+          items={languages}
           defaultValue={language}
           onSelect={item => setLanguage(item.value as Language)}
         />

web/app/components/base/auto-height-textarea/index.tsx

@@ -25,12 +25,10 @@ const AutoHeightTextarea = forwardRef(
 
     const doFocus = () => {
       if (ref.current) {
-        // console.log('focus')
         ref.current.setSelectionRange(value.length, value.length)
         ref.current.focus()
         return true
       }
-      // console.log(autoFocus, 'not focus')
       return false
     }
 

web/app/components/base/select/locale.tsx

@@ -3,14 +3,6 @@ import { Menu, Transition } from '@headlessui/react'
 import { Fragment } from 'react'
 import { GlobeAltIcon } from '@heroicons/react/24/outline'
 
-export const LOCALES = [
-  { value: 'en', name: 'EN' },
-  { value: 'zh-Hans', name: '简体中文' },
-]
-export const RFC_LOCALES = [
-  { value: 'en-US', name: 'EN' },
-  { value: 'zh-Hans', name: '简体中文' },
-]
 type ISelectProps = {
   items: Array<{ value: string; name: string }>
   value?: string
@@ -47,7 +39,7 @@ export default function Select({
           leaveFrom="transform opacity-100 scale-100"
           leaveTo="transform opacity-0 scale-95"
         >
-          <Menu.Items className="absolute right-0 mt-2 w-[120px] origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+          <Menu.Items className="absolute right-0 mt-2 w-[200px] origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none z-10">
             <div className="px-1 py-1 ">
               {items.map((item) => {
                 return <Menu.Item key={item.value}>

web/app/components/header/account-setting/language-page/index.tsx

@@ -10,7 +10,7 @@ import { updateUserProfile } from '@/service/common'
 import { ToastContext } from '@/app/components/base/toast'
 import I18n from '@/context/i18n'
 import { timezones } from '@/utils/timezone'
-import { languageMaps, languages } from '@/utils/language'
+import { languages } from '@/utils/language'
 
 const titleClassName = `
   mb-2 text-sm font-medium text-gray-900
@@ -28,7 +28,7 @@ export default function LanguagePage() {
     if (type === 'language') {
       url = '/account/interface-language'
       bodyKey = 'interface_language'
-      setLocaleOnClient(item.value === 'en-US' ? 'en' : 'zh-Hans')
+      setLocaleOnClient(item.value.toString())
     }
     if (type === 'timezone') {
       url = '/account/timezone'
@@ -52,7 +52,7 @@ export default function LanguagePage() {
       <div className='mb-8'>
         <div className={titleClassName}>{t('common.language.displayLanguage')}</div>
         <SimpleSelect
-          defaultValue={languageMaps[locale] || userProfile.interface_language}
+          defaultValue={locale || userProfile.interface_language}
           items={languages}
           onSelect={item => handleSelect('language', item)}
           disabled={editing}

web/app/components/header/account-setting/model-provider-page/declarations.ts

@@ -3,6 +3,7 @@ export type FormValue = Record<string, any>
 export type TypeWithI18N<T = string> = {
   'en_US': T
   'zh_Hans': T
+  [key: string]: T
 }
 
 export enum FormTypeEnum {

web/app/components/header/account-setting/model-provider-page/hooks.ts

@@ -16,7 +16,7 @@ import {
   ConfigurateMethodEnum,
   ModelTypeEnum,
 } from './declarations'
-import { languageMaps } from './utils'
+import { getModelRuntimeSupported } from '@/utils/language'
 import I18n from '@/context/i18n'
 import {
   fetchDefaultModal,
@@ -59,8 +59,7 @@ export const useSystemDefaultModelAndModelList: UseDefaultModelAndModelList = (
 
 export const useLanguage = () => {
   const { locale } = useContext(I18n)
-
-  return languageMaps[locale]
+  return getModelRuntimeSupported(locale)
 }
 
 export const useProviderCrenditialsFormSchemasValue = (

web/app/components/header/account-setting/model-provider-page/utils.ts

@@ -15,14 +15,6 @@ import {
   validateModelProvider,
 } from '@/service/common'
 
-export const languageMaps = {
-  'en': 'en_US',
-  'zh-Hans': 'zh_Hans',
-} as {
-  'en': 'en_US'
-  'zh-Hans': 'zh_Hans'
-}
-
 export const MODEL_PROVIDER_QUOTA_GET_FREE = ['minimax', 'spark', 'zhipuai']
 export const MODEL_PROVIDER_QUOTA_GET_PAID = ['anthropic', 'openai', 'azure_openai']
 

web/app/components/header/maintenance-notice.tsx

@@ -2,17 +2,7 @@ import { useState } from 'react'
 import { useContext } from 'use-context-selector'
 import I18n from '@/context/i18n'
 import { X } from '@/app/components/base/icons/src/vender/line/general'
-
-const NOTICE_I18N = {
-  title: {
-    'en': 'Important Notice',
-    'zh-Hans': '重要公告',
-  },
-  desc: {
-    'en': 'Our system will be unavailable from 19:00 to 24:00 UTC on August 28 for an upgrade. For questions, kindly contact our support team (support@dify.ai). We value your patience.',
-    'zh-Hans': '为了有效提升数据检索能力及稳定性，Dify 将于 2023 年 8 月 29 日 03:00 至 08:00 期间进行服务升级，届时 Dify 云端版及应用将无法访问。感谢您的耐心与支持。',
-  },
-}
+import { NOTICE_I18N } from '@/utils/language'
 
 const MaintenanceNotice = () => {
   const { locale } = useContext(I18n)
@@ -23,13 +13,16 @@ const MaintenanceNotice = () => {
     setShowNotice(false)
   }
 
+  const titleByLocale: { [key: string]: string } = NOTICE_I18N.title
+  const descByLocale: { [key: string]: string } = NOTICE_I18N.desc
+
   if (!showNotice)
     return null
 
   return (
     <div className='shrink-0 flex items-center px-4 h-[38px] bg-[#FFFAEB] border-b border-[0.5px] border-b-[#FEF0C7] z-20'>
-      <div className='shrink-0 flex items-center mr-2 px-2 h-[22px] bg-[#F79009] text-white text-[11px] font-medium rounded-xl'>{NOTICE_I18N.title[locale]}</div>
-      <div className='grow text-xs font-medium text-gray-700'>{NOTICE_I18N.desc[locale]}</div>
+      <div className='shrink-0 flex items-center mr-2 px-2 h-[22px] bg-[#F79009] text-white text-[11px] font-medium rounded-xl'>{titleByLocale[locale]}</div>
+      <div className='grow text-xs font-medium text-gray-700'>{descByLocale[locale]}</div>
       <X className='shrink-0 w-4 h-4 text-gray-500 cursor-pointer' onClick={handleCloseNotice} />
     </div>
   )

web/app/components/tools/index.tsx

@@ -138,7 +138,7 @@ const Tools: FC<Props> = ({
           {isInToolsPage && (
             <Button className='mt-6 flex items-center !h-8 pl-4' type='primary' onClick={handleCreateToolCollection}>
               <Plus className='w-4 h-4 mr-1' />
-              <div className='leading-[18px] text-[13px] font-medium'>{t('tools.createCustomTool')}</div>
+              <div className='leading-[18px] text-[13px] font-medium truncate'>{t('tools.createCustomTool')}</div>
             </Button>
           )}
 

web/app/signin/_header.tsx

@@ -1,7 +1,8 @@
 'use client'
 import React from 'react'
 import { useContext } from 'use-context-selector'
-import Select, { LOCALES } from '@/app/components/base/select/locale'
+import Select from '@/app/components/base/select/locale'
+import { languages } from '@/utils/language'
 import { type Locale } from '@/i18n'
 import I18n from '@/context/i18n'
 import LogoSite from '@/app/components/base/logo/logo-site'
@@ -16,7 +17,7 @@ const Header = () => {
     <LogoSite />
     <Select
       value={locale}
-      items={LOCALES}
+      items={languages}
       onChange={(value) => {
         setLocaleOnClient(value as Locale)
       }}

web/app/signin/oneMoreStep.tsx

@@ -10,7 +10,7 @@ import Tooltip from '@/app/components/base/tooltip/index'
 
 import { SimpleSelect } from '@/app/components/base/select'
 import { timezones } from '@/utils/timezone'
-import { languageMaps, languages } from '@/utils/language'
+import { LanguagesSupported, languages } from '@/utils/language'
 import { oneMoreStep } from '@/service/common'
 import Toast from '@/app/components/base/toast'
 import I18n from '@/context/i18n'
@@ -121,7 +121,7 @@ const OneMoreStep = () => {
             </label>
             <div className="relative mt-1 rounded-md shadow-sm">
               <SimpleSelect
-                defaultValue={languageMaps.en}
+                defaultValue={LanguagesSupported[0]}
                 items={languages}
                 onSelect={(item) => {
                   dispatch({ type: 'interface_language', value: item.value })