refactor(web): remove useMixedTranslation, better resource loading

web/__tests__/goto-anything/search-error-handling.test.ts

@@ -14,6 +14,14 @@ import { fetchAppList } from '@/service/apps'
 import { postMarketplace } from '@/service/base'
 import { fetchDatasets } from '@/service/datasets'
 
+// Mock react-i18next before importing modules that use it
+vi.mock('react-i18next', () => ({
+ getI18n: () => ({
+ t: (key: string) => key,
+ language: 'en',
+ }),
+}))
+
 // Mock API functions
 vi.mock('@/service/base', () => ({
  postMarketplace: vi.fn(),

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

@@ -1,14 +1,12 @@
 import Marketplace from '@/app/components/plugins/marketplace'
 import PluginPage from '@/app/components/plugins/plugin-page'
 import PluginsPanel from '@/app/components/plugins/plugin-page/plugins-panel'
-import { getLocaleOnServer } from '@/i18n-config/server'
 
 const PluginList = async () => {
- const locale = await getLocaleOnServer()
  return (
  <PluginPage
  plugins={<PluginsPanel />}
- marketplace={<Marketplace locale={locale} pluginTypeSwitchClassName="top-[60px]" showSearchParams={false} />}
+ marketplace={<Marketplace pluginTypeSwitchClassName="top-[60px]" showSearchParams={false} />}
  />
  )
 }

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

@@ -17,7 +17,7 @@ vi.mock('@/hooks/use-app-favicon', () => ({
  useAppFavicon: vi.fn(),
 }))
 
-vi.mock('@/i18n-config/i18next-config', () => ({
+vi.mock('@/i18n-config/client', () => ({
  changeLanguage: vi.fn().mockResolvedValue(undefined),
 }))
 

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

@@ -25,7 +25,7 @@ import { useToastContext } from '@/app/components/base/toast'
 import { InputVarType } from '@/app/components/workflow/types'
 import { useWebAppStore } from '@/context/web-app-context'
 import { useAppFavicon } from '@/hooks/use-app-favicon'
-import { changeLanguage } from '@/i18n-config/i18next-config'
+import { changeLanguage } from '@/i18n-config/client'
 import {
  delConversation,
  pinConversation,

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

@@ -13,7 +13,7 @@ import { shareQueryKeys } from '@/service/use-share'
 import { CONVERSATION_ID_INFO } from '../constants'
 import { useEmbeddedChatbot } from './hooks'
 
-vi.mock('@/i18n-config/i18next-config', () => ({
+vi.mock('@/i18n-config/client', () => ({
  changeLanguage: vi.fn().mockResolvedValue(undefined),
 }))
 

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

@@ -23,7 +23,7 @@ import { useToastContext } from '@/app/components/base/toast'
 import { addFileInfos, sortAgentSorts } from '@/app/components/tools/utils'
 import { InputVarType } from '@/app/components/workflow/types'
 import { useWebAppStore } from '@/context/web-app-context'
-import { changeLanguage } from '@/i18n-config/i18next-config'
+import { changeLanguage } from '@/i18n-config/client'
 import { updateFeedback } from '@/service/share'
 import {
  useInvalidateShareConversations,

web/app/components/goto-anything/actions/commands/account.tsx

@@ -1,7 +1,7 @@
 import type { SlashCommandHandler } from './types'
 import { RiUser3Line } from '@remixicon/react'
 import * as React from 'react'
-import i18n from '@/i18n-config/i18next-config'
+import { getI18n } from 'react-i18next'
 import { registerCommands, unregisterCommands } from './command-bus'
 
 // Account command dependency types - no external dependencies needed
@@ -21,6 +21,7 @@ export const accountCommand: SlashCommandHandler<AccountDeps> = {
  },
 
  async search(args: string, locale: string = 'en') {
+ const i18n = getI18n()
  return [{
  id: 'account',
  title: i18n.t('account.account', { ns: 'common', lng: locale }),

web/app/components/goto-anything/actions/commands/community.tsx

@@ -1,7 +1,7 @@
 import type { SlashCommandHandler } from './types'
 import { RiDiscordLine } from '@remixicon/react'
 import * as React from 'react'
-import i18n from '@/i18n-config/i18next-config'
+import { getI18n } from 'react-i18next'
 import { registerCommands, unregisterCommands } from './command-bus'
 
 // Community command dependency types
@@ -22,6 +22,7 @@ export const communityCommand: SlashCommandHandler<CommunityDeps> = {
  },
 
  async search(args: string, locale: string = 'en') {
+ const i18n = getI18n()
  return [{
  id: 'community',
  title: i18n.t('userProfile.community', { ns: 'common', lng: locale }),

web/app/components/goto-anything/actions/commands/docs.tsx

@@ -1,8 +1,8 @@
 import type { SlashCommandHandler } from './types'
 import { RiBookOpenLine } from '@remixicon/react'
 import * as React from 'react'
+import { getI18n } from 'react-i18next'
 import { defaultDocBaseUrl } from '@/context/i18n'
-import i18n from '@/i18n-config/i18next-config'
 import { getDocLanguage } from '@/i18n-config/language'
 import { registerCommands, unregisterCommands } from './command-bus'
 
@@ -19,13 +19,15 @@ export const docsCommand: SlashCommandHandler<DocDeps> = {
 
  // Direct execution function
  execute: () => {
+ const i18n = getI18n()
  const currentLocale = i18n.language
  const docLanguage = getDocLanguage(currentLocale)
  const url = `${defaultDocBaseUrl}/${docLanguage}`
  window.open(url, '_blank', 'noopener,noreferrer')
  },
 
  async search(args: string, locale: string = 'en') {
+ const i18n = getI18n()
  return [{
  id: 'doc',
  title: i18n.t('userProfile.helpCenter', { ns: 'common', lng: locale }),
@@ -41,6 +43,7 @@ export const docsCommand: SlashCommandHandler<DocDeps> = {
  },
 
  register(_deps: DocDeps) {
+ const i18n = getI18n()
  registerCommands({
  'navigation.doc': async (_args) => {
  // Get the current language from i18n

web/app/components/goto-anything/actions/commands/forum.tsx

@@ -1,7 +1,7 @@
 import type { SlashCommandHandler } from './types'
 import { RiFeedbackLine } from '@remixicon/react'
 import * as React from 'react'
-import i18n from '@/i18n-config/i18next-config'
+import { getI18n } from 'react-i18next'
 import { registerCommands, unregisterCommands } from './command-bus'
 
 // Forum command dependency types
@@ -22,6 +22,7 @@ export const forumCommand: SlashCommandHandler<ForumDeps> = {
  },
 
  async search(args: string, locale: string = 'en') {
+ const i18n = getI18n()
  return [{
  id: 'forum',
  title: i18n.t('userProfile.forum', { ns: 'common', lng: locale }),

web/app/components/goto-anything/actions/commands/language.tsx

@@ -1,6 +1,6 @@
 import type { CommandSearchResult } from '../types'
 import type { SlashCommandHandler } from './types'
-import i18n from '@/i18n-config/i18next-config'
+import { getI18n } from 'react-i18next'
 import { languages } from '@/i18n-config/language'
 import { registerCommands, unregisterCommands } from './command-bus'
 
@@ -14,6 +14,7 @@ const buildLanguageCommands = (query: string): CommandSearchResult[] => {
  const list = languages.filter(item => item.supported && (
  !q || item.name.toLowerCase().includes(q) || String(item.value).toLowerCase().includes(q)
  ))
+ const i18n = getI18n()
  return list.map(item => ({
  id: `lang-${item.value}`,
  title: item.name,

web/app/components/goto-anything/actions/commands/slash.tsx

@@ -2,8 +2,8 @@
 import type { ActionItem } from '../types'
 import { useTheme } from 'next-themes'
 import { useEffect } from 'react'
+import { getI18n } from 'react-i18next'
 import { setLocaleOnClient } from '@/i18n-config'
-import i18n from '@/i18n-config/i18next-config'
 import { accountCommand } from './account'
 import { executeCommand } from './command-bus'
 import { communityCommand } from './community'
@@ -14,6 +14,8 @@ import { slashCommandRegistry } from './registry'
 import { themeCommand } from './theme'
 import { zenCommand } from './zen'
 
+const i18n = getI18n()
+
 export const slashAction: ActionItem = {
  key: '/',
  shortcut: '/',

web/app/components/goto-anything/actions/commands/theme.tsx

@@ -2,7 +2,7 @@ import type { CommandSearchResult } from '../types'
 import type { SlashCommandHandler } from './types'
 import { RiComputerLine, RiMoonLine, RiSunLine } from '@remixicon/react'
 import * as React from 'react'
-import i18n from '@/i18n-config/i18next-config'
+import { getI18n } from 'react-i18next'
 import { registerCommands, unregisterCommands } from './command-bus'
 
 // Theme dependency types
@@ -32,6 +32,7 @@ const THEME_ITEMS = [
 ] as const
 
 const buildThemeCommands = (query: string, locale?: string): CommandSearchResult[] => {
+ const i18n = getI18n()
  const q = query.toLowerCase()
  const list = THEME_ITEMS.filter(item =>
  !q

web/app/components/goto-anything/actions/commands/zen.tsx

@@ -1,8 +1,8 @@
 import type { SlashCommandHandler } from './types'
 import { RiFullscreenLine } from '@remixicon/react'
 import * as React from 'react'
+import { getI18n } from 'react-i18next'
 import { isInWorkflowPage } from '@/app/components/workflow/constants'
-import i18n from '@/i18n-config/i18next-config'
 import { registerCommands, unregisterCommands } from './command-bus'
 
 // Zen command dependency types - no external dependencies needed
@@ -32,6 +32,7 @@ export const zenCommand: SlashCommandHandler<ZenDeps> = {
  execute: toggleZenMode,
 
  async search(_args: string, locale: string = 'en') {
+ const i18n = getI18n()
  return [{
  id: 'zen',
  title: i18n.t('gotoAnything.actions.zenTitle', { ns: 'app', lng: locale }) || 'Zen Mode',

web/app/components/header/account-setting/data-source-page-new/install-from-marketplace.tsx

@@ -15,7 +15,6 @@ import Divider from '@/app/components/base/divider'
 import Loading from '@/app/components/base/loading'
 import List from '@/app/components/plugins/marketplace/list'
 import ProviderCard from '@/app/components/plugins/provider-card'
-import { getLocaleOnClient } from '@/i18n-config'
 import { cn } from '@/utils/classnames'
 import { getMarketplaceUrl } from '@/utils/var'
 import {
@@ -33,7 +32,6 @@ const InstallFromMarketplace = ({
  const { t } = useTranslation()
  const { theme } = useTheme()
  const [collapse, setCollapse] = useState(false)
- const locale = getLocaleOnClient()
  const {
  plugins: allPlugins,
  isLoading: isAllPluginsLoading,
@@ -70,7 +68,6 @@ const InstallFromMarketplace = ({
  marketplaceCollectionPluginsMap={{}}
  plugins={allPlugins}
  showInstallButton
- locale={locale}
  cardContainerClassName="grid grid-cols-2 gap-2"
  cardRender={cardRender}
  emptyClassName="h-auto"

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

@@ -2,13 +2,13 @@
 
 import type { Item } from '@/app/components/base/select'
 import type { Locale } from '@/i18n-config'
+import { useRouter } from 'next/navigation'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import { SimpleSelect } from '@/app/components/base/select'
 import { ToastContext } from '@/app/components/base/toast'
 import { useAppContext } from '@/context/app-context'
-
 import { useLocale } from '@/context/i18n'
 import { setLocaleOnClient } from '@/i18n-config'
 import { languages } from '@/i18n-config/language'
@@ -25,6 +25,7 @@ export default function LanguagePage() {
  const { notify } = useContext(ToastContext)
  const [editing, setEditing] = useState(false)
  const { t } = useTranslation()
+ const router = useRouter()
 
  const handleSelectLanguage = async (item: Item) => {
  const url = '/account/interface-language'
@@ -35,7 +36,8 @@ export default function LanguagePage() {
  await updateUserProfile({ url, body: { [bodyKey]: item.value } })
  notify({ type: 'success', message: t('actionMsg.modifiedSuccessfully', { ns: 'common' }) })
 
- setLocaleOnClient(item.value.toString() as Locale)
+ setLocaleOnClient(item.value.toString() as Locale, false)
+ router.refresh()
  }
  catch (e) {
  notify({ type: 'error', message: (e as Error).message })

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

@@ -14,7 +14,6 @@ import Divider from '@/app/components/base/divider'
 import Loading from '@/app/components/base/loading'
 import List from '@/app/components/plugins/marketplace/list'
 import ProviderCard from '@/app/components/plugins/provider-card'
-import { getLocaleOnClient } from '@/i18n-config'
 import { cn } from '@/utils/classnames'
 import { getMarketplaceUrl } from '@/utils/var'
 import {
@@ -32,7 +31,6 @@ const InstallFromMarketplace = ({
  const { t } = useTranslation()
  const { theme } = useTheme()
  const [collapse, setCollapse] = useState(false)
- const locale = getLocaleOnClient()
  const {
  plugins: allPlugins,
  isLoading: isAllPluginsLoading,
@@ -69,7 +67,6 @@ const InstallFromMarketplace = ({
  marketplaceCollectionPluginsMap={{}}
  plugins={allPlugins}
  showInstallButton
- locale={locale}
  cardContainerClassName="grid grid-cols-2 gap-2"
  cardRender={cardRender}
  emptyClassName="h-auto"