fix: Refactor i18n config and fix plugin search box styling issue (#22945)

web/app/(commonLayout)/app/(appDetailLayout)/[appId]/develop/page.tsx

 import React from 'react'
-import type { Locale } from '@/i18n'
+import type { Locale } from '@/i18n-config'
 import DevelopMain from '@/app/components/develop'
 
 export type IDevelopProps = {

web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/settings/page.tsx

 import React from 'react'
-import { getLocaleOnServer, useTranslation as translate } from '@/i18n/server'
+import { getLocaleOnServer, useTranslation as translate } from '@/i18n-config/server'
 import Form from '@/app/components/datasets/settings/form'
 
 const Settings = async () => {

web/app/(commonLayout)/datasets/Doc.tsx

 import TemplateZh from './template/template.zh.mdx'
 import TemplateJa from './template/template.ja.mdx'
 import I18n from '@/context/i18n'
-import { LanguagesSupported } from '@/i18n/language'
+import { LanguagesSupported } from '@/i18n-config/language'
 import useTheme from '@/hooks/use-theme'
 import { Theme } from '@/types/app'
 import cn from '@/utils/classnames'

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

 import PluginPage from '@/app/components/plugins/plugin-page'
 import PluginsPanel from '@/app/components/plugins/plugin-page/plugins-panel'
 import Marketplace from '@/app/components/plugins/marketplace'
-import { getLocaleOnServer } from '@/i18n/server'
+import { getLocaleOnServer } from '@/i18n-config/server'
 
 const PluginList = async () => {
   const locale = await getLocaleOnServer()

web/app/components/app/annotation/batch-add-annotation-modal/csv-downloader.tsx

 import { useContext } from 'use-context-selector'
 import { Download02 as DownloadIcon } from '@/app/components/base/icons/src/vender/solid/general'
 import I18n from '@/context/i18n'
-import { LanguagesSupported } from '@/i18n/language'
+import { LanguagesSupported } from '@/i18n-config/language'
 
 const CSV_TEMPLATE_QA_EN = [
   ['question', 'answer'],

web/app/components/app/annotation/header-opts/index.tsx

 
 import I18n from '@/context/i18n'
 import { fetchExportAnnotationList } from '@/service/annotation'
-import { LanguagesSupported } from '@/i18n/language'
+import { LanguagesSupported } from '@/i18n-config/language'
 
 const CSV_HEADER_QA_EN = ['Question', 'Answer']
 const CSV_HEADER_QA_CN = ['问题', '答案']

web/app/components/app/configuration/config/agent/agent-tools/setting-built-in-tool.tsx

 import { CollectionType } from '@/app/components/tools/types'
 import { fetchBuiltInToolList, fetchCustomToolList, fetchModelToolList, fetchWorkflowToolList } from '@/service/tools'
 import I18n from '@/context/i18n'
-import { getLanguage } from '@/i18n/language'
+import { getLanguage } from '@/i18n-config/language'
 import cn from '@/utils/classnames'
 import type { ToolWithProvider } from '@/app/components/workflow/types'
 import {

web/app/components/app/configuration/tools/external-data-tool-modal.tsx

 import { fetchCodeBasedExtensionList } from '@/service/common'
 import { SimpleSelect } from '@/app/components/base/select'
 import I18n from '@/context/i18n'
-import { LanguagesSupported } from '@/i18n/language'
+import { LanguagesSupported } from '@/i18n-config/language'
 import type {
   CodeBasedExtensionItem,
   ExternalDataTool,

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

 import type { AppDetailResponse } from '@/models/app'
 import type { AppIconType, AppSSO, Language } from '@/types/app'
 import { useToastContext } from '@/app/components/base/toast'
-import { languages } from '@/i18n/language'
+import { languages } from '@/i18n-config/language'
 import Tooltip from '@/app/components/base/tooltip'
 import { useProviderContext } from '@/context/provider-context'
 import { useModalContext } from '@/context/modal-context'

web/app/components/base/chat/chat-with-history/hooks.tsx

   ConversationItem,
 } from '@/models/share'
 import { useToastContext } from '@/app/components/base/toast'
-import { changeLanguage } from '@/i18n/i18next-config'
+import { changeLanguage } from '@/i18n-config/i18next-config'
 import { useAppFavicon } from '@/hooks/use-app-favicon'
 import { InputVarType } from '@/app/components/workflow/types'
 import { TransferMethod } from '@/types/app'

web/app/components/base/chat/embedded-chatbot/hooks.tsx

   ConversationItem,
 } from '@/models/share'
 import { useToastContext } from '@/app/components/base/toast'
-import { changeLanguage } from '@/i18n/i18next-config'
+import { changeLanguage } from '@/i18n-config/i18next-config'
 import { InputVarType } from '@/app/components/workflow/types'
 import { TransferMethod } from '@/types/app'
 import { addFileInfos, sortAgentSorts } from '@/app/components/tools/utils'

web/app/components/base/features/new-feature-panel/moderation/moderation-setting-modal.tsx

 } from '@/service/common'
 import type { CodeBasedExtensionItem } from '@/models/common'
 import I18n from '@/context/i18n'
-import { LanguagesSupported } from '@/i18n/language'
+import { LanguagesSupported } from '@/i18n-config/language'
 import { InfoCircle } from '@/app/components/base/icons/src/vender/line/general'
 import { useModalContext } from '@/context/modal-context'
 import { CustomConfigurationStatusEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'

web/app/components/base/features/new-feature-panel/text-to-speech/index.tsx

 import { useFeatures, useFeaturesStore } from '@/app/components/base/features/hooks'
 import type { OnFeaturesChange } from '@/app/components/base/features/types'
 import { FeatureEnum } from '@/app/components/base/features/types'
-import { languages } from '@/i18n/language'
+import { languages } from '@/i18n-config/language'
 import { TtsAutoPlay } from '@/types/app'
 
 type Props = {

web/app/components/base/features/new-feature-panel/text-to-speech/param-config-content.tsx

 import Tooltip from '@/app/components/base/tooltip'
 import Switch from '@/app/components/base/switch'
 import AudioBtn from '@/app/components/base/audio-btn'
-import { languages } from '@/i18n/language'
+import { languages } from '@/i18n-config/language'
 import { TtsAutoPlay } from '@/types/app'
 import type { OnFeaturesChange } from '@/app/components/base/features/types'
 import classNames from '@/utils/classnames'

web/app/components/datasets/create/file-uploader/index.tsx

 import { fetchFileUploadConfig } from '@/service/common'
 import { fetchSupportFileTypes } from '@/service/datasets'
 import I18n from '@/context/i18n'
-import { LanguagesSupported } from '@/i18n/language'
+import { LanguagesSupported } from '@/i18n-config/language'
 import { IS_CE_EDITION } from '@/config'
 import { Theme } from '@/types/app'
 import useTheme from '@/hooks/use-theme'

web/app/components/datasets/create/step-two/index.tsx

 import { RETRIEVE_METHOD } from '@/types/app'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import { useDefaultModel, useModelList, useModelListAndDefaultModelAndCurrentProviderAndModel } from '@/app/components/header/account-setting/model-provider-page/hooks'
-import { LanguagesSupported } from '@/i18n/language'
+import { LanguagesSupported } from '@/i18n-config/language'
 import ModelSelector from '@/app/components/header/account-setting/model-provider-page/model-selector'
 import type { DefaultModel } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
       score_threshold_enabled: false,
       score_threshold: 0.5,
     })
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [rerankDefaultModel, isRerankDefaultModelValid])
 
   const getCreationParams = () => {
       getRulesFromDetail()
       getDefaultMode()
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
   useEffect(() => {

web/app/components/datasets/create/step-two/language-select/index.tsx

 import { RiArrowDownSLine, RiCheckLine } from '@remixicon/react'
 import cn from '@/utils/classnames'
 import Popover from '@/app/components/base/popover'
-import { languages } from '@/i18n/language'
+import { languages } from '@/i18n-config/language'
 
 export type ILanguageSelectProps = {
   currentLanguage: string

web/app/components/datasets/documents/detail/batch-modal/csv-downloader.tsx

 import { Download02 as DownloadIcon } from '@/app/components/base/icons/src/vender/solid/general'
 import { ChunkingMode } from '@/models/datasets'
 import I18n from '@/context/i18n'
-import { LanguagesSupported } from '@/i18n/language'
+import { LanguagesSupported } from '@/i18n-config/language'
 
 const CSV_TEMPLATE_QA_EN = [
   ['question', 'answer'],

web/app/components/develop/doc.tsx

 import TemplateChatZh from './template/template_chat.zh.mdx'
 import TemplateChatJa from './template/template_chat.ja.mdx'
 import I18n from '@/context/i18n'
-import { LanguagesSupported } from '@/i18n/language'
+import { LanguagesSupported } from '@/i18n-config/language'
 import useTheme from '@/hooks/use-theme'
 import { Theme } from '@/types/app'
 import cn from '@/utils/classnames'

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

 import { ToastContext } from '@/app/components/base/toast'
 import I18n from '@/context/i18n'
 import { timezones } from '@/utils/timezone'
-import { languages } from '@/i18n/language'
+import { languages } from '@/i18n-config/language'
 
 const titleClassName = `
   mb-2 system-sm-semibold text-text-secondary

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

 import Button from '@/app/components/base/button'
 import UpgradeBtn from '@/app/components/billing/upgrade-btn'
 import { NUM_INFINITE } from '@/app/components/billing/config'
-import { LanguagesSupported } from '@/i18n/language'
+import { LanguagesSupported } from '@/i18n-config/language'
 import cn from '@/utils/classnames'
 import Tooltip from '@/app/components/base/tooltip'
 import { RiPencilLine } from '@remixicon/react'

web/app/components/header/account-setting/model-provider-page/install-from-marketplace.tsx

 import List from '@/app/components/plugins/marketplace/list'
 import type { Plugin } from '@/app/components/plugins/types'
 import cn from '@/utils/classnames'
-import { getLocaleOnClient } from '@/i18n'
+import { getLocaleOnClient } from '@/i18n-config'
 import { getMarketplaceUrl } from '@/utils/var'
 
 type InstallFromMarketplaceProps = {

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

 import { Group } from '@/app/components/base/icons/src/vender/other'
 import { OpenaiBlue, OpenaiTeal, OpenaiViolet, OpenaiYellow } from '@/app/components/base/icons/src/public/llm'
 import cn from '@/utils/classnames'
-import { renderI18nObject } from '@/i18n'
+import { renderI18nObject } from '@/i18n-config'
 
 type ModelIconProps = {
   provider?: Model | ModelProvider

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

 import { useLanguage } from '../hooks'
 import { Openai } from '@/app/components/base/icons/src/vender/other'
 import { AnthropicDark, AnthropicLight } from '@/app/components/base/icons/src/public/llm'
-import { renderI18nObject } from '@/i18n'
+import { renderI18nObject } from '@/i18n-config'
 import { Theme } from '@/types/app'
 import cn from '@/utils/classnames'
 import useTheme from '@/hooks/use-theme'

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

 import { useState } from 'react'
 import { X } from '@/app/components/base/icons/src/vender/line/general'
-import { NOTICE_I18N } from '@/i18n/language'
+import { NOTICE_I18N } from '@/i18n-config/language'
 import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
 
 const MaintenanceNotice = () => {

web/app/components/i18n-server.tsx

 import React from 'react'
 import I18N from './i18n'
 import { ToastProvider } from './base/toast'
-import { getLocaleOnServer } from '@/i18n/server'
+import { getLocaleOnServer } from '@/i18n-config/server'
 
 export type II18NServerProps = {
   children: React.ReactNode

web/app/components/i18n.tsx

 import type { FC } from 'react'
 import React, { useEffect, useState } from 'react'
 import I18NContext from '@/context/i18n'
-import type { Locale } from '@/i18n'
-import { setLocaleOnClient } from '@/i18n'
+import type { Locale } from '@/i18n-config'
+import { setLocaleOnClient } from '@/i18n-config'
 import Loading from './base/loading'
 import { usePrefetchQuery } from '@tanstack/react-query'
 import { getSystemFeatures } from '@/service/common'

web/app/components/plugins/card/index.tsx

 import Placeholder from './base/placeholder'
 import cn from '@/utils/classnames'
 import { useGetLanguage } from '@/context/i18n'
-import { getLanguage } from '@/i18n/language'
+import { getLanguage } from '@/i18n-config/language'
 import { useSingleCategories } from '../hooks'
-import { renderI18nObject } from '@/i18n'
+import { renderI18nObject } from '@/i18n-config'
 import { useMixedTranslation } from '@/app/components/plugins/marketplace/hooks'
 import Partner from '../base/badges/partner'
 import Verified from '../base/badges/verified'

web/app/components/plugins/marketplace/description/index.tsx

 import {
   getLocaleOnServer,
   useTranslation as translate,
-} from '@/i18n/server'
+} from '@/i18n-config/server'
 
 type DescriptionProps = {
   locale?: string

web/app/components/plugins/marketplace/hooks.ts

   getFormattedPlugin,
   getMarketplaceCollectionsAndPlugins,
 } from './utils'
-import i18n from '@/i18n/i18next-config'
+import i18n from '@/i18n-config/i18next-config'
 import {
   useMutationPluginsFromMarketplace,
 } from '@/service/use-plugins'
 export const useMixedTranslation = (localeFromOuter?: string) => {
   let t = useTranslation().t
 
+  // !localeFromOuter only support zh-Hans and en-US for now
   if (localeFromOuter)
     t = i18n.getFixedT(localeFromOuter)
 
   callback: () => void,
   scrollContainerId = 'marketplace-container',
 ) => {
-  const container = document.getElementById(scrollContainerId)
-
   const handleScroll = useCallback((e: Event) => {
     const target = e.target as HTMLDivElement
     const {
   }, [callback])
 
   useEffect(() => {
+    const container = document.getElementById(scrollContainerId)
     if (container)
       container.addEventListener('scroll', handleScroll)
 
       if (container)
         container.removeEventListener('scroll', handleScroll)
     }
-  }, [container, handleScroll])
+  }, [handleScroll])
 }
 
 export const useSearchBoxAutoAnimate = (searchBoxAutoAnimate?: boolean) => {

web/app/components/plugins/marketplace/intersection-line/hooks.ts

 import { useMarketplaceContext } from '@/app/components/plugins/marketplace/context'
 
 export const useScrollIntersection = (
-  anchorRef: React.RefObject<HTMLDivElement>,
+  anchorRef: React.RefObject<HTMLDivElement | null>,
   intersectionContainerId = 'marketplace-container',
 ) => {
   const intersected = useMarketplaceContext(v => v.intersected)

web/app/components/plugins/marketplace/list/list-with-collection.tsx

 import type { MarketplaceCollection } from '../types'
 import CardWrapper from './card-wrapper'
 import type { Plugin } from '@/app/components/plugins/types'
-import { getLanguage } from '@/i18n/language'
+import { getLanguage } from '@/i18n-config/language'
 import cn from '@/utils/classnames'
 import type { SearchParamsFromCollection } from '@/app/components/plugins/marketplace/types'
 import { useMixedTranslation } from '@/app/components/plugins/marketplace/hooks'

web/app/components/plugins/marketplace/search-box/index.tsx

 type SearchBoxProps = {
   search: string
   onSearchChange: (search: string) => void
+  wrapperClassName?: string
   inputClassName?: string
   tags: string[]
   onTagsChange: (tags: string[]) => void
 const SearchBox = ({
   search,
   onSearchChange,
+  wrapperClassName,
   inputClassName,
   tags,
   onTagsChange,
 }: SearchBoxProps) => {
   return (
     <div
-      className='z-[11] flex items-center'
+      className={cn('z-[11] flex items-center', wrapperClassName)}
     >
       <div className={
         cn('flex items-center',

web/app/components/plugins/marketplace/search-box/search-box-wrapper.tsx

 
   return (
     <SearchBox
-      inputClassName={cn(
+      wrapperClassName={cn(
         'z-[0] mx-auto w-[640px] shrink-0',
         searchBoxCanAnimate && 'sticky top-3 z-[11]',
         !intersected && searchBoxCanAnimate && 'w-[508px] transition-[width] duration-300',
       )}
+      inputClassName='w-full'
       search={searchPluginText}
       onSearchChange={handleSearchPluginTextChange}
       tags={filterPluginTags}

web/app/components/plugins/plugin-detail-panel/model-selector/tts-params-panel.tsx

 import React, { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import { languages } from '@/i18n/language'
+import { languages } from '@/i18n-config/language'
 import { PortalSelect } from '@/app/components/base/select'
 import cn from '@/utils/classnames'
 

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

 import type {
   StrategyDetail as StrategyDetailType,
 } from '@/app/components/plugins/types'
-import type { Locale } from '@/i18n'
+import type { Locale } from '@/i18n-config'
 import { useRenderI18nObject } from '@/hooks/use-i18n'
 import { API_PREFIX } from '@/config'
 import cn from '@/utils/classnames'

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

 import type {
   StrategyDetail,
 } from '@/app/components/plugins/types'
-import type { Locale } from '@/i18n'
+import type { Locale } from '@/i18n-config'
 import { useRenderI18nObject } from '@/hooks/use-i18n'
 import cn from '@/utils/classnames'
 

web/app/components/plugins/reference-setting-modal/auto-update-setting/tool-item.tsx

 import React from 'react'
 import type { PluginDetail } from '@/app/components/plugins/types'
 import Icon from '@/app/components/plugins/card/base/card-icon'
-import { renderI18nObject } from '@/i18n'
+import { renderI18nObject } from '@/i18n-config'
 import { useGetLanguage } from '@/context/i18n'
 import { MARKETPLACE_API_PREFIX } from '@/config'
 import Checkbox from '@/app/components/base/checkbox'

web/app/components/plugins/types.ts

 import type { CredentialFormSchemaBase } from '../header/account-setting/model-provider-page/declarations'
 import type { ToolCredential } from '@/app/components/tools/types'
-import type { Locale } from '@/i18n'
+import type { Locale } from '@/i18n-config'
 import type { AgentFeature } from '@/app/components/workflow/nodes/agent/types'
 import type { AutoUpdateConfig } from './reference-setting-modal/auto-update-setting/types'
 export enum PluginType {

web/app/components/plugins/utils.ts

-import { LanguagesSupported } from '@/i18n/language'
+import { LanguagesSupported } from '@/i18n-config/language'
 
 import {
   categoryKeys,

web/app/components/share/text-generation/index.tsx

 } from '@/models/debug'
 import AppIcon from '@/app/components/base/app-icon'
 import Badge from '@/app/components/base/badge'
-import { changeLanguage } from '@/i18n/i18next-config'
+import { changeLanguage } from '@/i18n-config/i18next-config'
 import Loading from '@/app/components/base/loading'
 import { userInputsFormToPromptVariables } from '@/utils/model-config'
 import Res from '@/app/components/share/text-generation/result'

web/app/components/tools/add-tool-modal/category.tsx

 import cn from '@/utils/classnames'
 import { Apps02 } from '@/app/components/base/icons/src/vender/line/others'
 import I18n from '@/context/i18n'
-import { getLanguage } from '@/i18n/language'
+import { getLanguage } from '@/i18n-config/language'
 import { useStore as useLabelStore } from '@/app/components/tools/labels/store'
 import { fetchLabelList } from '@/service/tools'
 

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

 import Drawer from '@/app/components/base/drawer-plus'
 import I18n from '@/context/i18n'
 import { testAPIAvailable } from '@/service/tools'
-import { getLanguage } from '@/i18n/language'
+import { getLanguage } from '@/i18n-config/language'
 
 type Props = {
   positionCenter?: boolean

web/app/components/tools/marketplace/index.tsx

 import type { useMarketplace } from './hooks'
 import List from '@/app/components/plugins/marketplace/list'
 import Loading from '@/app/components/base/loading'
-import { getLocaleOnClient } from '@/i18n'
+import { getLocaleOnClient } from '@/i18n-config'
 import { getMarketplaceUrl } from '@/utils/var'
 
 type MarketplaceProps = {

web/app/components/tools/mcp/create-card.tsx

 } from '@remixicon/react'
 import MCPModal from './modal'
 import I18n from '@/context/i18n'
-import { getLanguage } from '@/i18n/language'
+import { getLanguage } from '@/i18n-config/language'
 import { useAppContext } from '@/context/app-context'
 import { useCreateMCP } from '@/service/use-tools'
 import type { ToolWithProvider } from '@/app/components/workflow/types'

web/app/components/tools/mcp/detail/tool-item.tsx

 import { useContext } from 'use-context-selector'
 import type { Tool } from '@/app/components/tools/types'
 import I18n from '@/context/i18n'
-import { getLanguage } from '@/i18n/language'
+import { getLanguage } from '@/i18n-config/language'
 import Tooltip from '@/app/components/base/tooltip'
 import cn from '@/utils/classnames'
 

web/app/components/tools/provider/custom-create-card.tsx

 } from '@remixicon/react'
 import type { CustomCollectionBackend } from '../types'
 import I18n from '@/context/i18n'
-import { getLanguage } from '@/i18n/language'
+import { getLanguage } from '@/i18n-config/language'
 import EditCustomToolModal from '@/app/components/tools/edit-custom-collection-modal'
 import { createCustomCollection } from '@/service/tools'
 import Toast from '@/app/components/base/toast'

web/app/components/tools/provider/detail.tsx

 import ToolItem from './tool-item'
 import cn from '@/utils/classnames'
 import I18n from '@/context/i18n'
-import { getLanguage } from '@/i18n/language'
+import { getLanguage } from '@/i18n-config/language'
 import Confirm from '@/app/components/base/confirm'
 import Button from '@/app/components/base/button'
 import Indicator from '@/app/components/header/indicator'

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

 import type { Collection, Tool } from '../types'
 import cn from '@/utils/classnames'
 import I18n from '@/context/i18n'
-import { getLanguage } from '@/i18n/language'
+import { getLanguage } from '@/i18n-config/language'
 import SettingBuiltInTool from '@/app/components/app/configuration/config/agent/agent-tools/setting-built-in-tool'
 
 type Props = {

web/app/components/workflow/nodes/agent/default.ts

 import type { NodeDefault } from '../../types'
 import type { AgentNodeType } from './types'
 import { FormTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
-import { renderI18nObject } from '@/i18n'
+import { renderI18nObject } from '@/i18n-config'
 
 const nodeDefault: NodeDefault<AgentNodeType> = {
   defaultValue: {

web/app/components/workflow/nodes/document-extractor/panel.tsx

 import Field from '@/app/components/workflow/nodes/_base/components/field'
 import { BlockEnum, type NodePanelProps } from '@/app/components/workflow/types'
 import I18n from '@/context/i18n'
-import { LanguagesSupported } from '@/i18n/language'
+import { LanguagesSupported } from '@/i18n-config/language'
 
 const i18nPrefix = 'workflow.nodes.docExtractor'
 

web/app/dev-only/i18n-checker/page.tsx

 'use client'
-import { loadLangResources } from '@/i18n/i18next-config'
+import { loadLangResources } from '@/i18n-config/i18next-config'
 import { useCallback, useEffect, useState } from 'react'
 import cn from '@/utils/classnames'
-import { LanguagesSupported } from '@/i18n/language'
+import { LanguagesSupported } from '@/i18n-config/language'
 
 export default function I18nTest() {
   const [langs, setLangs] = useState<Lang[]>([])

web/app/layout.tsx

 import I18nServer from './components/i18n-server'
 import BrowserInitializer from './components/browser-initializer'
 import SentryInitializer from './components/sentry-initializer'
-import { getLocaleOnServer } from '@/i18n/server'
+import { getLocaleOnServer } from '@/i18n-config/server'
 import { TanstackQueryInitializer } from '@/context/query-client'
 import { ThemeProvider } from 'next-themes'
 import './styles/globals.css'

web/app/signin/_header.tsx

 import { useContext } from 'use-context-selector'
 import Select from '@/app/components/base/select/locale'
 import Divider from '@/app/components/base/divider'
-import { languages } from '@/i18n/language'
-import type { Locale } from '@/i18n'
+import { languages } from '@/i18n-config/language'
+import type { Locale } from '@/i18n-config'
 import I18n from '@/context/i18n'
 import dynamic from 'next/dynamic'
 import { useGlobalPublicStore } from '@/context/global-public-context'

web/app/signin/invite-settings/page.tsx

 import { SimpleSelect } from '@/app/components/base/select'
 import Button from '@/app/components/base/button'
 import { timezones } from '@/utils/timezone'
-import { LanguagesSupported, languages } from '@/i18n/language'
+import { LanguagesSupported, languages } from '@/i18n-config/language'
 import I18n from '@/context/i18n'
 import { activateMember, invitationCheck } from '@/service/common'
 import Loading from '@/app/components/base/loading'

web/app/signin/oneMoreStep.tsx

 import Tooltip from '@/app/components/base/tooltip'
 import { SimpleSelect } from '@/app/components/base/select'
 import { timezones } from '@/utils/timezone'
-import { LanguagesSupported, languages } from '@/i18n/language'
+import { LanguagesSupported, languages } from '@/i18n-config/language'
 import { oneMoreStep } from '@/service/common'
 import Toast from '@/app/components/base/toast'
 import { useDocLink } from '@/context/i18n'

web/context/i18n.ts

   createContext,
   useContext,
 } from 'use-context-selector'
-import type { Locale } from '@/i18n'
-import { getDocLanguage, getLanguage, getPricingPageLanguage } from '@/i18n/language'
+import type { Locale } from '@/i18n-config'
+import { getDocLanguage, getLanguage, getPricingPageLanguage } from '@/i18n-config/language'
 import { noop } from 'lodash-es'
 
 type II18NContext = {

web/hooks/use-i18n.ts

 import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
-import { renderI18nObject } from '@/i18n'
+import { renderI18nObject } from '@/i18n-config'
 
 export const useRenderI18nObject = () => {
   const language = useLanguage()

web/i18n/auto-gen-i18n.js → web/i18n-config/auto-gen-i18n.js

-/* eslint-disable no-eval */
 const fs = require('node:fs')
 const path = require('node:path')
 const transpile = require('typescript').transpile

web/i18n/check-i18n.js → web/i18n-config/check-i18n.js

-/* eslint-disable no-eval */
 const fs = require('node:fs')
 const path = require('node:path')
 const transpile = require('typescript').transpile

web/i18n/i18next-config.ts → web/i18n-config/i18next-config.ts

 const requireSilent = async (lang: string, namespace: string) => {
   let res
   try {
-    res = (await import(`./${lang}/${namespace}`)).default
+    res = (await import(`../i18n/${lang}/${namespace}`)).default
   }
   catch {
-    res = (await import(`./en-US/${namespace}`)).default
+    res = (await import(`../i18n/en-US/${namespace}`)).default
   }
 
   return res
   return resources
 }
 
-const getFallbackTranslation = () => {
-  const resources = NAMESPACES.reduce((acc, ns, index) => {
-    acc[camelCase(NAMESPACES[index])] = require(`./en-US/${ns}`).default
+/**
+ * !Need to load en-US and zh-Hans resources for initial rendering, which are used in both marketplace and dify
+ * !Other languages will be loaded on demand
+ * !This is to avoid loading all languages at once which can be slow
+ */
+const getInitialTranslations = () => {
+  const en_USResources = NAMESPACES.reduce((acc, ns, index) => {
+    acc[camelCase(NAMESPACES[index])] = require(`../i18n/en-US/${ns}`).default
+    return acc
+  }, {} as Record<string, any>)
+  const zh_HansResources = NAMESPACES.reduce((acc, ns, index) => {
+    acc[camelCase(NAMESPACES[index])] = require(`../i18n/zh-Hans/${ns}`).default
     return acc
   }, {} as Record<string, any>)
   return {
-    translation: resources,
+    'en-US': {
+      translation: en_USResources,
+    },
+    'zh-Hans': {
+      translation: zh_HansResources,
+    },
   }
 }
 
     .init({
       lng: undefined,
       fallbackLng: 'en-US',
-      resources: {
-        'en-US': getFallbackTranslation(),
-      },
+      resources: getInitialTranslations(),
     })
 }
 

web/i18n/index.ts → web/i18n-config/index.ts

 import Cookies from 'js-cookie'
 
-import { changeLanguage } from '@/i18n/i18next-config'
+import { changeLanguage } from '@/i18n-config/i18next-config'
 import { LOCALE_COOKIE_NAME } from '@/config'
-import { LanguagesSupported } from '@/i18n/language'
+import { LanguagesSupported } from '@/i18n-config/language'
 
 export const i18n = {
   defaultLocale: 'en-US',

web/i18n/server.ts → web/i18n-config/server.ts

   const i18nInstance = createInstance()
   await i18nInstance
     .use(initReactI18next)
-    .use(resourcesToBackend((language: string, namespace: string) => import(`./${language}/${namespace}.ts`)))
+    .use(resourcesToBackend((language: string, namespace: string) => import(`../i18n/${language}/${namespace}.ts`)))
     .init({
       lng: lng === 'zh-Hans' ? 'zh-Hans' : lng,
       ns,

web/models/common.ts

-import type { I18nText } from '@/i18n/language'
+import type { I18nText } from '@/i18n-config/language'
 import type { Model } from '@/types/app'
 
 export type CommonResponse = {

web/models/share.ts

-import type { Locale } from '@/i18n'
+import type { Locale } from '@/i18n-config'
 import type { AppIconType } from '@/types/app'
 
 export type ResponseHolder = {}

web/types/app.ts

 import type { AnnotationReplyConfig, ChatPromptConfig, CompletionPromptConfig, DatasetConfigs, PromptMode } from '@/models/debug'
 import type { CollectionType } from '@/app/components/tools/types'
-import type { LanguagesSupported } from '@/i18n/language'
+import type { LanguagesSupported } from '@/i18n-config/language'
 import type { Tag } from '@/app/components/base/tag-management/constant'
 import type {
   RerankingModeEnum,