refactor: generalize method for getting doc link respecting locale and fix error link paths (#20801)

2025-06-13 16:58:43 +08:00 · 2025-06-13 16:58:43 +08:00 · f4df759ba6
commit f4df759ba6
parent 3a628bc671
36 changed files with 149 additions and 136 deletions
--- a/web/app/components/app/configuration/config-prompt/conversation-history/history-panel.tsx
+++ b/web/app/components/app/configuration/config-prompt/conversation-history/history-panel.tsx
@ -1,13 +1,11 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import { useContext } from 'use-context-selector'
 import { useTranslation } from 'react-i18next'
 import OperationBtn from '@/app/components/app/configuration/base/operation-btn'
 import Panel from '@/app/components/app/configuration/base/feature-panel'
 import { MessageClockCircle } from '@/app/components/base/icons/src/vender/solid/general'
-import I18n from '@/context/i18n'
-import { LanguagesSupported } from '@/i18n/language'
+import { useDocLink } from '@/context/i18n'

 type Props = {
  showWarning: boolean
@ -19,7 +17,7 @@ const HistoryPanel: FC<Props> = ({
  onShowEditModal,
 }) => {
  const { t } = useTranslation()
-  const { locale } = useContext(I18n)
+  const docLink = useDocLink()

  return (
    <Panel
@ -45,9 +43,8 @@ const HistoryPanel: FC<Props> = ({
      {showWarning && (
        <div className='flex justify-between rounded-b-xl bg-background-section-burn px-3 py-2 text-xs text-text-secondary'>
          <div>{t('appDebug.feature.conversationHistory.tip')}
-            <a href={`${locale === LanguagesSupported[1]
-              ? 'https://docs.dify.ai/zh-hans/learn-more/extended-reading/prompt-engineering/README'
-              : 'https://docs.dify.ai/en/features/prompt-engineering'}`}
+            <a href={docLink('/learn-more/extended-reading/what-is-llmops',
+              { 'zh-Hans': '/learn-more/extended-reading/prompt-engineering/README' })}
            target='_blank' rel='noopener noreferrer'
            className='text-[#155EEF]'>{t('appDebug.feature.conversationHistory.learnMore')}
            </a>
--- a/web/app/components/app/configuration/dataset-config/settings-modal/index.tsx
+++ b/web/app/components/app/configuration/dataset-config/settings-modal/index.tsx
@ -31,6 +31,7 @@ import {
 import { ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { fetchMembers } from '@/service/common'
 import type { Member } from '@/models/common'
+import { useDocLink } from '@/context/i18n'

 type SettingsModalProps = {
  currentDataset: DataSet
@ -58,6 +59,7 @@ const SettingsModal: FC<SettingsModalProps> = ({
    currentModel: isRerankDefaultModelValid,
  } = useModelListAndDefaultModelAndCurrentProviderAndModel(ModelTypeEnum.rerank)
  const { t } = useTranslation()
+  const docLink = useDocLink()
  const { notify } = useToastContext()
  const ref = useRef(null)
  const isExternal = currentDataset.provider === 'external'
@ -328,7 +330,7 @@ const SettingsModal: FC<SettingsModalProps> = ({
              <div>
                <div className='system-sm-semibold text-text-secondary'>{t('datasetSettings.form.retrievalSetting.title')}</div>
                <div className='text-xs font-normal leading-[18px] text-text-tertiary'>
-                  <a target='_blank' rel='noopener noreferrer' href='https://docs.dify.ai/guides/knowledge-base/create-knowledge-and-upload-documents#id-4-retrieval-settings' className='text-text-accent'>{t('datasetSettings.form.retrievalSetting.learnMore')}</a>
+                  <a target='_blank' rel='noopener noreferrer' href={docLink('/guides/knowledge-base/create-knowledge-and-upload-documents/setting-indexing-methods#setting-the-retrieval-setting')} className='text-text-accent'>{t('datasetSettings.form.retrievalSetting.learnMore')}</a>
                  {t('datasetSettings.form.retrievalSetting.description')}
                </div>
              </div>
--- a/web/app/components/app/configuration/prompt-mode/advanced-mode-waring.tsx
+++ b/web/app/components/app/configuration/prompt-mode/advanced-mode-waring.tsx
@ -2,9 +2,7 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { useContext } from 'use-context-selector'
-import I18n from '@/context/i18n'
-import { LanguagesSupported } from '@/i18n/language'
+import { useDocLink } from '@/context/i18n'
 type Props = {
  onReturnToSimpleMode: () => void
 }
@ -13,7 +11,7 @@ const AdvancedModeWarning: FC<Props> = ({
  onReturnToSimpleMode,
 }) => {
  const { t } = useTranslation()
-  const { locale } = useContext(I18n)
+  const docLink = useDocLink()
  const [show, setShow] = React.useState(true)
  if (!show)
    return null
@ -25,7 +23,7 @@ const AdvancedModeWarning: FC<Props> = ({
          <span className='text-gray-700'>{t('appDebug.promptMode.advancedWarning.description')}</span>
          <a
            className='font-medium text-[#155EEF]'
-            href={`https://docs.dify.ai/${locale === LanguagesSupported[1] ? '/guides/features/prompt-engineering' : 'features/prompt-engineering'}`}
+            href={docLink('/guides/features/prompt-engineering')}
            target='_blank' rel='noopener noreferrer'
          >
            {t('appDebug.promptMode.advancedWarning.learnMore')}
--- a/web/app/components/app/create-app-modal/index.tsx
+++ b/web/app/components/app/create-app-modal/index.tsx
@ -29,6 +29,7 @@ import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
 import { getRedirection } from '@/utils/app-redirection'
 import FullScreenModal from '@/app/components/base/fullscreen-modal'
 import useTheme from '@/hooks/use-theme'
+import { useDocLink } from '@/context/i18n'

 type CreateAppProps = {
  onSuccess: () => void
@ -303,31 +304,33 @@ function AppTypeCard({ icon, title, description, active, onClick }: AppTypeCardP

 function AppPreview({ mode }: { mode: AppMode }) {
  const { t } = useTranslation()
+  const docLink = useDocLink()
  const modeToPreviewInfoMap = {
    'chat': {
      title: t('app.types.chatbot'),
      description: t('app.newApp.chatbotUserDescription'),
-      link: 'https://docs.dify.ai/guides/application-orchestrate/readme',
+      link: docLink('/guides/application-orchestrate/chatbot-application'),
    },
    'advanced-chat': {
      title: t('app.types.advanced'),
      description: t('app.newApp.advancedUserDescription'),
-      link: 'https://docs.dify.ai/en/guides/workflow/README',
+      link: docLink('/guides/workflow/readme'),
    },
    'agent-chat': {
      title: t('app.types.agent'),
      description: t('app.newApp.agentUserDescription'),
-      link: 'https://docs.dify.ai/en/guides/application-orchestrate/agent',
+      link: docLink('/guides/application-orchestrate/agent'),
    },
    'completion': {
      title: t('app.newApp.completeApp'),
      description: t('app.newApp.completionUserDescription'),
-      link: null,
+      link: docLink('/guides/application-orchestrate/text-generator',
+        { 'zh-Hans': '/guides/application-orchestrate/readme' }),
    },
    'workflow': {
      title: t('app.types.workflow'),
      description: t('app.newApp.workflowUserDescription'),
-      link: 'https://docs.dify.ai/en/guides/workflow/README',
+      link: docLink('/guides/workflow/readme'),
    },
  }
  const previewInfo = modeToPreviewInfoMap[mode]
--- a/web/app/components/app/overview/customize/index.tsx
+++ b/web/app/components/app/overview/customize/index.tsx
@ -3,13 +3,11 @@ import type { FC } from 'react'
 import React from 'react'
 import { ArrowTopRightOnSquareIcon } from '@heroicons/react/24/outline'
 import { useTranslation } from 'react-i18next'
-import { useContext } from 'use-context-selector'
+import { useDocLink } from '@/context/i18n'
 import type { AppMode } from '@/types/app'
-import I18n from '@/context/i18n'
 import Button from '@/app/components/base/button'
 import Modal from '@/app/components/base/modal'
 import Tag from '@/app/components/base/tag'
-import { LanguagesSupported } from '@/i18n/language'

 type IShareLinkProps = {
  isShow: boolean
@ -43,7 +41,7 @@ const CustomizeModal: FC<IShareLinkProps> = ({
  mode,
 }) => {
  const { t } = useTranslation()
-  const { locale } = useContext(I18n)
+  const docLink = useDocLink()
  const isChatApp = mode === 'chat' || mode === 'advanced-chat'

  return <Modal
@ -101,10 +99,7 @@ const CustomizeModal: FC<IShareLinkProps> = ({
        className='mt-2'
        onClick={() =>
          window.open(
-            `https://docs.dify.ai/${locale !== LanguagesSupported[1]
-              ? 'user-guide/launching-dify-apps/developing-with-apis'
-              : `${locale.toLowerCase()}/guides/application-publishing/developing-with-apis`
-            }`,
+            docLink('/guides/application-publishing/developing-with-apis'),
            '_blank',
          )
        }
--- a/web/app/components/app/overview/settings/index.tsx
+++ b/web/app/components/app/overview/settings/index.tsx
@ -4,7 +4,6 @@ import React, { useCallback, useEffect, useState } from 'react'
 import { RiArrowRightSLine, RiCloseLine } from '@remixicon/react'
 import Link from 'next/link'
 import { Trans, useTranslation } from 'react-i18next'
-import { useContext } from 'use-context-selector'
 import { SparklesSoft } from '@/app/components/base/icons/src/public/common'
 import Modal from '@/app/components/base/modal'
 import ActionButton from '@/app/components/base/action-button'
@ -19,14 +18,14 @@ import { SimpleSelect } from '@/app/components/base/select'
 import type { AppDetailResponse } from '@/models/app'
 import type { AppIconType, AppSSO, Language } from '@/types/app'
 import { useToastContext } from '@/app/components/base/toast'
-import { LanguagesSupported, languages } from '@/i18n/language'
+import { languages } from '@/i18n/language'
 import Tooltip from '@/app/components/base/tooltip'
 import { useProviderContext } from '@/context/provider-context'
 import { useModalContext } from '@/context/modal-context'
 import type { AppIconSelection } from '@/app/components/base/app-icon-picker'
 import AppIconPicker from '@/app/components/base/app-icon-picker'
-import I18n from '@/context/i18n'
 import cn from '@/utils/classnames'
+import { useDocLink } from '@/context/i18n'

 export type ISettingsModalProps = {
  isChat: boolean
@ -98,7 +97,7 @@ const SettingsModal: FC<ISettingsModalProps> = ({
  const [language, setLanguage] = useState(default_language)
  const [saveLoading, setSaveLoading] = useState(false)
  const { t } = useTranslation()
-  const { locale } = useContext(I18n)
+  const docLink = useDocLink()

  const [showAppIconPicker, setShowAppIconPicker] = useState(false)
  const [appIcon, setAppIcon] = useState<AppIconSelection>(
@ -238,7 +237,8 @@ const SettingsModal: FC<ISettingsModalProps> = ({
          </div>
          <div className='system-xs-regular mt-0.5 text-text-tertiary'>
            <span>{t(`${prefixSettings}.modalTip`)}</span>
-            <Link href={`${locale === LanguagesSupported[1] ? 'https://docs.dify.ai/zh-hans/guides/application-publishing/launch-your-webapp-quickly#she-zhi-ni-de-ai-zhan-dian' : 'https://docs.dify.ai/en/guides/application-publishing/launch-your-webapp-quickly/README'}`} target='_blank' rel='noopener noreferrer' className='text-text-accent'>{t('common.operation.learnMore')}</Link>
+            <Link href={docLink('/guides/application-publishing/launch-your-webapp-quickly/README')}
+              target='_blank' rel='noopener noreferrer' className='text-text-accent'>{t('common.operation.learnMore')}</Link>
          </div>
        </div>
        {/* form body */}