diff --git a/web/app/components/header/account-setting/api-based-extension-page/modal.tsx b/web/app/components/header/account-setting/api-based-extension-page/modal.tsx index f35986dbb0..b04981bf3c 100644 --- a/web/app/components/header/account-setting/api-based-extension-page/modal.tsx +++ b/web/app/components/header/account-setting/api-based-extension-page/modal.tsx @@ -30,7 +30,7 @@ const ApiBasedExtensionModal: FC = ({ onSave, }) => { const { t } = useTranslation() - const docLink = useDocLink('https://docs.dify.ai/versions/3-0-x') + const docLink = useDocLink() const [localeData, setLocaleData] = useState(data) const [loading, setLoading] = useState(false) const { notify } = useToastContext() diff --git a/web/app/components/workflow-app/components/workflow-onboarding-modal/index.tsx b/web/app/components/workflow-app/components/workflow-onboarding-modal/index.tsx index 0faf43bfd1..c483abfb0b 100644 --- a/web/app/components/workflow-app/components/workflow-onboarding-modal/index.tsx +++ b/web/app/components/workflow-app/components/workflow-onboarding-modal/index.tsx @@ -60,8 +60,6 @@ const WorkflowOnboardingModal: FC = ({
{t('onboarding.description', { ns: 'workflow' })} - {' '} - {t('onboarding.aboutStartNode', { ns: 'workflow' })}
diff --git a/web/context/i18n.spec.ts b/web/context/i18n.spec.ts new file mode 100644 index 0000000000..98f3552c99 --- /dev/null +++ b/web/context/i18n.spec.ts @@ -0,0 +1,254 @@ +import type { DocPathMap } from './i18n' +import type { DocPathWithoutLang } from '@/types/doc-paths' +import { useTranslation } from '#i18n' +import { renderHook } from '@testing-library/react' +import { getDocLanguage } from '@/i18n-config/language' +import { defaultDocBaseUrl, useDocLink } from './i18n' + +// Mock dependencies +vi.mock('#i18n', () => ({ + useTranslation: vi.fn(() => ({ + i18n: { language: 'en-US' }, + })), +})) + +vi.mock('@/i18n-config/language', () => ({ + getDocLanguage: vi.fn((locale: string) => { + const map: Record = { + 'zh-Hans': 'zh', + 'ja-JP': 'ja', + 'en-US': 'en', + } + return map[locale] || 'en' + }), + getLanguage: vi.fn(), + getPricingPageLanguage: vi.fn(), +})) + +describe('useDocLink', () => { + beforeEach(() => { + vi.clearAllMocks() + vi.mocked(useTranslation).mockReturnValue({ + i18n: { language: 'en-US' }, + } as ReturnType) + vi.mocked(getDocLanguage).mockReturnValue('en') + }) + + describe('Rendering', () => { + it('should return a function', () => { + const { result } = renderHook(() => useDocLink()) + expect(typeof result.current).toBe('function') + }) + }) + + describe('Base URL handling', () => { + it('should use default base URL when no baseUrl provided', () => { + const { result } = renderHook(() => useDocLink()) + const url = result.current() + expect(url).toBe(`${defaultDocBaseUrl}/en`) + }) + + it('should use custom base URL when provided', () => { + const customBaseUrl = 'https://custom.docs.com' + const { result } = renderHook(() => useDocLink(customBaseUrl)) + const url = result.current() + expect(url).toBe(`${customBaseUrl}/en`) + }) + + it('should remove trailing slash from base URL', () => { + const baseUrlWithSlash = 'https://docs.dify.ai/' + const { result } = renderHook(() => useDocLink(baseUrlWithSlash)) + const url = result.current('/use-dify/getting-started/introduction') + expect(url).toBe('https://docs.dify.ai/en/use-dify/getting-started/introduction') + }) + + it('should handle base URL without trailing slash', () => { + const baseUrlWithoutSlash = 'https://docs.dify.ai' + const { result } = renderHook(() => useDocLink(baseUrlWithoutSlash)) + const url = result.current('/use-dify/getting-started/introduction') + expect(url).toBe('https://docs.dify.ai/en/use-dify/getting-started/introduction') + }) + }) + + describe('Path handling', () => { + it('should handle path parameter', () => { + const { result } = renderHook(() => useDocLink()) + const url = result.current('/use-dify/getting-started/introduction') + expect(url).toBe(`${defaultDocBaseUrl}/en/use-dify/getting-started/introduction`) + }) + + it('should handle empty path', () => { + const { result } = renderHook(() => useDocLink()) + const url = result.current() + expect(url).toBe(`${defaultDocBaseUrl}/en`) + }) + + it('should handle undefined path', () => { + const { result } = renderHook(() => useDocLink()) + const url = result.current(undefined) + expect(url).toBe(`${defaultDocBaseUrl}/en`) + }) + }) + + describe('PathMap handling', () => { + it('should use path from pathMap when locale matches', () => { + vi.mocked(useTranslation).mockReturnValue({ + i18n: { language: 'zh-Hans' }, + } as ReturnType) + vi.mocked(getDocLanguage).mockReturnValue('zh') + + const pathMap: DocPathMap = { + 'zh-Hans': '/use-dify/getting-started/introduction', + 'en-US': '/use-dify/getting-started/quick-start', + } + + const { result } = renderHook(() => useDocLink()) + const url = result.current('/use-dify/getting-started/quick-start' as DocPathWithoutLang, pathMap) + expect(url).toBe(`${defaultDocBaseUrl}/zh/use-dify/getting-started/introduction`) + }) + + it('should use default path when locale not in pathMap', () => { + vi.mocked(useTranslation).mockReturnValue({ + i18n: { language: 'ja-JP' }, + } as ReturnType) + vi.mocked(getDocLanguage).mockReturnValue('ja') + + const pathMap: DocPathMap = { + 'zh-Hans': '/use-dify/getting-started/introduction', + 'en-US': '/use-dify/getting-started/quick-start', + } + + const { result } = renderHook(() => useDocLink()) + const url = result.current('/use-dify/getting-started/quick-start' as DocPathWithoutLang, pathMap) + expect(url).toBe(`${defaultDocBaseUrl}/ja/use-dify/getting-started/quick-start`) + }) + + it('should handle undefined pathMap', () => { + const { result } = renderHook(() => useDocLink()) + const url = result.current('/use-dify/getting-started/introduction', undefined) + expect(url).toBe(`${defaultDocBaseUrl}/en/use-dify/getting-started/introduction`) + }) + }) + + describe('Language prefix handling', () => { + it('should add /en prefix for English locale', () => { + vi.mocked(useTranslation).mockReturnValue({ + i18n: { language: 'en-US' }, + } as ReturnType) + vi.mocked(getDocLanguage).mockReturnValue('en') + + const { result } = renderHook(() => useDocLink()) + const url = result.current('/use-dify/getting-started/introduction') + expect(url).toContain('/en/') + }) + + it('should add /zh prefix for Chinese locale', () => { + vi.mocked(useTranslation).mockReturnValue({ + i18n: { language: 'zh-Hans' }, + } as ReturnType) + vi.mocked(getDocLanguage).mockReturnValue('zh') + + const { result } = renderHook(() => useDocLink()) + const url = result.current('/use-dify/getting-started/introduction') + expect(url).toContain('/zh/') + }) + + it('should add /ja prefix for Japanese locale', () => { + vi.mocked(useTranslation).mockReturnValue({ + i18n: { language: 'ja-JP' }, + } as ReturnType) + vi.mocked(getDocLanguage).mockReturnValue('ja') + + const { result } = renderHook(() => useDocLink()) + const url = result.current('/use-dify/getting-started/introduction') + expect(url).toContain('/ja/') + }) + }) + + describe('API reference path translations', () => { + it('should translate API reference path for Chinese locale', () => { + vi.mocked(useTranslation).mockReturnValue({ + i18n: { language: 'zh-Hans' }, + } as ReturnType) + vi.mocked(getDocLanguage).mockReturnValue('zh') + + const { result } = renderHook(() => useDocLink()) + const url = result.current('/api-reference/annotations/create-annotation') + expect(url).toBe(`${defaultDocBaseUrl}/api-reference/标注管理/创建标注`) + }) + + it('should translate API reference path for Japanese locale when translation exists', () => { + vi.mocked(useTranslation).mockReturnValue({ + i18n: { language: 'ja-JP' }, + } as ReturnType) + vi.mocked(getDocLanguage).mockReturnValue('ja') + + const { result } = renderHook(() => useDocLink()) + const url = result.current('/api-reference/application/get-application-basic-information') + expect(url).toBe(`${defaultDocBaseUrl}/api-reference/アプリケーション情報/アプリケーションの基本情報を取得`) + }) + + it('should not translate API reference path for English locale', () => { + vi.mocked(useTranslation).mockReturnValue({ + i18n: { language: 'en-US' }, + } as ReturnType) + vi.mocked(getDocLanguage).mockReturnValue('en') + + const { result } = renderHook(() => useDocLink()) + const url = result.current('/api-reference/annotations/create-annotation') + expect(url).toBe(`${defaultDocBaseUrl}/en/api-reference/annotations/create-annotation`) + }) + + it('should keep original path when no translation exists for non-English locale', () => { + vi.mocked(useTranslation).mockReturnValue({ + i18n: { language: 'ja-JP' }, + } as ReturnType) + vi.mocked(getDocLanguage).mockReturnValue('ja') + + const { result } = renderHook(() => useDocLink()) + // This path has no Japanese translation + const url = result.current('/api-reference/annotations/create-annotation') + expect(url).toBe(`${defaultDocBaseUrl}/ja/api-reference/annotations/create-annotation`) + }) + + it('should remove language prefix when translation is applied', () => { + vi.mocked(useTranslation).mockReturnValue({ + i18n: { language: 'zh-Hans' }, + } as ReturnType) + vi.mocked(getDocLanguage).mockReturnValue('zh') + + const { result } = renderHook(() => useDocLink()) + const url = result.current('/api-reference/annotations/create-annotation') + // Should NOT have /zh/ prefix when translated + expect(url).not.toContain('/zh/') + expect(url).toBe(`${defaultDocBaseUrl}/api-reference/标注管理/创建标注`) + }) + + it('should not translate non-API-reference paths', () => { + vi.mocked(useTranslation).mockReturnValue({ + i18n: { language: 'zh-Hans' }, + } as ReturnType) + vi.mocked(getDocLanguage).mockReturnValue('zh') + + const { result } = renderHook(() => useDocLink()) + const url = result.current('/use-dify/getting-started/introduction') + expect(url).toBe(`${defaultDocBaseUrl}/zh/use-dify/getting-started/introduction`) + }) + }) + + describe('Edge Cases', () => { + it('should handle path with anchor', () => { + const { result } = renderHook(() => useDocLink()) + const url = result.current('/use-dify/getting-started/introduction#overview' as DocPathWithoutLang) + expect(url).toBe(`${defaultDocBaseUrl}/en/use-dify/getting-started/introduction#overview`) + }) + + it('should handle multiple calls with same hook instance', () => { + const { result } = renderHook(() => useDocLink()) + const url1 = result.current('/use-dify/getting-started/introduction') + const url2 = result.current('/use-dify/getting-started/quick-start') + expect(url1).toBe(`${defaultDocBaseUrl}/en/use-dify/getting-started/introduction`) + expect(url2).toBe(`${defaultDocBaseUrl}/en/use-dify/getting-started/quick-start`) + }) + }) +}) diff --git a/web/context/i18n.ts b/web/context/i18n.ts index 01f9b82035..2766dfe5ea 100644 --- a/web/context/i18n.ts +++ b/web/context/i18n.ts @@ -31,14 +31,17 @@ export const useDocLink = (baseUrl?: string): ((path?: DocPathWithoutLang, pathM return (path?: DocPathWithoutLang, pathMap?: DocPathMap): string => { const pathUrl = path || '' let targetPath = (pathMap) ? pathMap[locale] || pathUrl : pathUrl + let languagePrefix = `/${docLanguage}` // Translate API reference paths for non-English locales if (targetPath.startsWith('/api-reference/') && docLanguage !== 'en') { const translatedPath = apiReferencePathTranslations[targetPath]?.[docLanguage as 'zh' | 'ja'] - if (translatedPath) + if (translatedPath) { targetPath = translatedPath + languagePrefix = '' + } } - return `${baseDocUrl}/${docLanguage}${targetPath}` + return `${baseDocUrl}${languagePrefix}${targetPath}` } }