update

web/app/components/datasets/external-knowledge-base/create/InfoPanel.tsx

@@ -1,8 +1,10 @@
 import { RiBookOpenLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
+import { useDocLink } from '@/context/i18n'
 
 const InfoPanel = () => {
   const { t } = useTranslation()
+  const docLink = useDocLink()
 
   return (
     <div className='flex w-[360px] flex-col items-start pb-2 pr-8 pt-[108px]'>
@@ -16,12 +18,15 @@ const InfoPanel = () => {
           </span>
           <span className='system-sm-regular text-text-tertiary'>
             {t('dataset.connectDatasetIntro.content.front')}
-            <a className='system-sm-regular ml-1 text-text-accent' href='https://docs.dify.ai/en/guides/knowledge-base/external-knowledge-api' target='_blank' rel="noopener noreferrer">
+            <a className='system-sm-regular ml-1 text-text-accent' href={docLink('/guides/knowledge-base/external-knowledge-api')} target='_blank' rel="noopener noreferrer">
               {t('dataset.connectDatasetIntro.content.link')}
             </a>
             {t('dataset.connectDatasetIntro.content.end')}
           </span>
-          <a className='system-sm-regular self-stretch text-text-accent' href='https://docs.dify.ai/en/guides/knowledge-base/connect-external-knowledge-base' target='_blank' rel="noopener noreferrer">
+          <a className='system-sm-regular self-stretch text-text-accent'
+             href={docLink('/guides/knowledge-base/connect-external-knowledge-base')}
+             target='_blank'
+             rel="noopener noreferrer">
             {t('dataset.connectDatasetIntro.learnMore')}
           </a>
         </p>

web/app/components/datasets/external-knowledge-base/create/index.tsx

@@ -11,6 +11,7 @@ import InfoPanel from './InfoPanel'
 import type { CreateKnowledgeBaseReq } from './declarations'
 import Divider from '@/app/components/base/divider'
 import Button from '@/app/components/base/button'
+import { useDocLink } from '@/context/i18n'
 
 type ExternalKnowledgeBaseCreateProps = {
   onConnect: (formValue: CreateKnowledgeBaseReq) => void
@@ -19,6 +20,7 @@ type ExternalKnowledgeBaseCreateProps = {
 
 const ExternalKnowledgeBaseCreate: React.FC<ExternalKnowledgeBaseCreateProps> = ({ onConnect, loading }) => {
   const { t } = useTranslation()
+  const docLink = useDocLink()
   const router = useRouter()
   const [formData, setFormData] = useState<CreateKnowledgeBaseReq>({
     name: '',
@@ -59,7 +61,7 @@ const ExternalKnowledgeBaseCreate: React.FC<ExternalKnowledgeBaseCreateProps> =
                 <span>{t('dataset.connectHelper.helper1')}</span>
                 <span className='system-sm-medium text-text-secondary'>{t('dataset.connectHelper.helper2')}</span>
                 <span>{t('dataset.connectHelper.helper3')}</span>
-                <a className='system-sm-regular self-stretch text-text-accent' href='https://docs.dify.ai/en/guides/knowledge-base/connect-external-knowledge-base' target='_blank' rel="noopener noreferrer">
+                <a className='system-sm-regular self-stretch text-text-accent' href={docLink('/guides/knowledge-base/connect-external-knowledge-base')} target='_blank' rel="noopener noreferrer">
                   {t('dataset.connectHelper.helper4')}
                 </a>
                 <span>{t('dataset.connectHelper.helper5')} </span>

web/app/components/datasets/hit-testing/modify-retrieval-modal.tsx

@@ -11,6 +11,7 @@ import EconomicalRetrievalMethodConfig from '@/app/components/datasets/common/ec
 import Button from '@/app/components/base/button'
 import { isReRankModelSelected } from '@/app/components/datasets/common/check-rerank-model'
 import { useModelListAndDefaultModelAndCurrentProviderAndModel } from '@/app/components/header/account-setting/model-provider-page/hooks'
+import { useDocLink } from '@/context/i18n'
 
 type Props = {
   indexMethod: string
@@ -29,6 +30,7 @@ const ModifyRetrievalModal: FC<Props> = ({
 }) => {
   const ref = useRef(null)
   const { t } = useTranslation()
+  const docLink = useDocLink()
   const [retrievalConfig, setRetrievalConfig] = useState(value)
 
   // useClickAway(() => {
@@ -72,7 +74,7 @@ const ModifyRetrievalModal: FC<Props> = ({
             <a
               target='_blank'
               rel='noopener noreferrer'
-              href='https://docs.dify.ai/guides/knowledge-base/create-knowledge-and-upload-documents#id-4-retrieval-settings'
+              href={docLink('/guides/knowledge-base/create-knowledge-and-upload-documents#id-4-retrieval-settings')}
               className='text-text-accent'
             >
               {t('datasetSettings.form.retrievalSetting.learnMore')}

web/app/components/datasets/settings/form/index.tsx

@@ -32,6 +32,7 @@ import { ModelTypeEnum } from '@/app/components/header/account-setting/model-pro
 import { fetchMembers } from '@/service/common'
 import type { Member } from '@/models/common'
 import AlertTriangle from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback/AlertTriangle'
+import { useDocLink } from '@/context/i18n'
 
 const rowClass = 'flex'
 const labelClass = `
@@ -46,6 +47,7 @@ const getKey = (pageIndex: number, previousPageData: DataSetListResponse) => {
 
 const Form = () => {
   const { t } = useTranslation()
+  const docLink = useDocLink()
   const { notify } = useContext(ToastContext)
   const { mutate } = useSWRConfig()
   const { isCurrentWorkspaceDatasetOperator } = useAppContext()
@@ -308,7 +310,7 @@ const Form = () => {
                 <div>
                   <div className='system-sm-semibold text-text-secondary'>{t('datasetSettings.form.retrievalSetting.title')}</div>
                   <div className='body-xs-regular 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#id-4-retrieval-settings')} className='text-text-accent'>{t('datasetSettings.form.retrievalSetting.learnMore')}</a>
                     {t('datasetSettings.form.retrievalSetting.description')}
                   </div>
                 </div>

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

@@ -14,6 +14,7 @@ import EditCustomToolModal from '@/app/components/tools/edit-custom-collection-m
 import { createCustomCollection } from '@/service/tools'
 import Toast from '@/app/components/base/toast'
 import { useAppContext } from '@/context/app-context'
+import { useDocLink } from '@/context/i18n'
 
 type Props = {
   onRefreshData: () => void
@@ -25,10 +26,11 @@ const Contribute = ({ onRefreshData }: Props) => {
   const language = getLanguage(locale)
   const { isCurrentWorkspaceManager } = useAppContext()
 
+  const docLink = useDocLink()
   const linkUrl = useMemo(() => {
-    if (language.startsWith('zh_'))
-      return 'https://docs.dify.ai/zh-hans/guides/tools#ru-he-chuang-jian-zi-ding-yi-gong-ju'
-    return 'https://docs.dify.ai/en/guides/tools#how-to-create-custom-tools'
+    return docLink('/guides/tools#how-to-create-custom-tools', {
+      'zh-Hans': '/guides/tools#ru-he-chuang-jian-zi-ding-yi-gong-ju',
+    })
   }, [language])
 
   const [isShowEditCollectionToolModal, setIsShowEditCustomCollectionModal] = useState(false)

web/app/components/workflow/nodes/_base/components/agent-strategy.tsx

@@ -19,9 +19,7 @@ import { useWorkflowStore } from '../../../store'
 import { useRenderI18nObject } from '@/hooks/use-i18n'
 import type { NodeOutPutVar } from '../../../types'
 import type { Node } from 'reactflow'
-import { useContext } from 'use-context-selector'
-import I18n from '@/context/i18n'
-import { LanguagesSupported } from '@/i18n/language'
+import { useDocLink } from '@/context/i18n'
 
 export type Strategy = {
   agent_strategy_provider_name: string
@@ -52,7 +50,7 @@ type CustomField = ToolSelectorSchema | MultipleToolSelectorSchema
 export const AgentStrategy = memo((props: AgentStrategyProps) => {
   const { strategy, onStrategyChange, formSchema, formValue, onFormValueChange, nodeOutputVars, availableNodes, nodeId } = props
   const { t } = useTranslation()
-  const { locale } = useContext(I18n)
+  const docLink = useDocLink()
   const defaultModel = useDefaultModel(ModelTypeEnum.textGeneration)
   const renderI18nObject = useRenderI18nObject()
   const workflowStore = useWorkflowStore()
@@ -223,11 +221,10 @@ export const AgentStrategy = memo((props: AgentStrategyProps) => {
           title={t('workflow.nodes.agent.strategy.configureTip')}
           description={<div className='text-xs text-text-tertiary'>
             {t('workflow.nodes.agent.strategy.configureTipDesc')} <br />
-            <Link href={
-              locale === LanguagesSupported[1]
-                ? 'https://docs.dify.ai/zh-hans/guides/workflow/node/agent#xuan-ze-agent-ce-le'
-                : 'https://docs.dify.ai/en/guides/workflow/node/agent#select-an-agent-strategy'
-            } className='text-text-accent-secondary' target='_blank'>
+            <Link href={docLink('/guides/workflow/node/agent#select-an-agent-strategy', {
+              'zh-Hans': '/guides/workflow/node/agent#xuan-ze-agent-ce-le',
+            })}
+              className='text-text-accent-secondary' target='_blank'>
               {t('workflow.nodes.agent.learnMore')}
             </Link>
           </div>}

web/app/components/workflow/nodes/_base/components/error-handle/default-value.tsx

@@ -5,6 +5,7 @@ import Input from '@/app/components/base/input'
 import { VarType } from '@/app/components/workflow/types'
 import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
 import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
+import { useDocLink } from '@/context/i18n'
 
 type DefaultValueProps = {
   forms: DefaultValueForm[]
@@ -15,6 +16,7 @@ const DefaultValue = ({
   onFormChange,
 }: DefaultValueProps) => {
   const { t } = useTranslation()
+  const docLink = useDocLink()
   const getFormChangeHandler = useCallback(({ key, type }: DefaultValueForm) => {
     return (payload: any) => {
       let value
@@ -34,7 +36,7 @@ const DefaultValue = ({
         {t('workflow.nodes.common.errorHandle.defaultValue.desc')}
          
         <a
-          href='https://docs.dify.ai/en/guides/workflow/error-handling/README'
+          href={docLink('/guides/workflow/error-handling/README')}
           target='_blank'
           className='text-text-accent'
         >

web/app/components/workflow/nodes/_base/components/error-handle/fail-branch-card.tsx

@@ -1,8 +1,10 @@
 import { RiMindMap } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
+import { useDocLink } from '@/context/i18n'
 
 const FailBranchCard = () => {
   const { t } = useTranslation()
+  const docLink = useDocLink()
 
   return (
     <div className='px-4 pt-2'>
@@ -17,7 +19,7 @@ const FailBranchCard = () => {
           {t('workflow.nodes.common.errorHandle.failBranch.customizeTip')}
           &nbsp;
           <a
-            href='https://docs.dify.ai/guides/workflow/error-handling'
+            href={docLink('/guides/workflow/error-handling/error-type')}
             target='_blank'
             className='text-text-accent'
           >

web/app/components/workflow/nodes/_base/components/variable/var-reference-popup.tsx

@@ -2,12 +2,10 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { useContext } from 'use-context-selector'
 import VarReferenceVars from './var-reference-vars'
 import type { NodeOutPutVar, ValueSelector, Var } from '@/app/components/workflow/types'
 import ListEmpty from '@/app/components/base/list-empty'
-import { LanguagesSupported } from '@/i18n/language'
-import I18n from '@/context/i18n'
+import { useDocLink } from '@/context/i18n'
 
 type Props = {
   vars: NodeOutPutVar[]
@@ -24,7 +22,7 @@ const VarReferencePopup: FC<Props> = ({
   isSupportFileVar = true,
 }) => {
   const { t } = useTranslation()
-  const { locale } = useContext(I18n)
+  const docLink = useDocLink()
   // max-h-[300px] overflow-y-auto todo: use portal to handle long list
   return (
     <div className='space-y-1 rounded-lg border border-components-panel-border bg-components-panel-bg p-1 shadow-lg' style={{
@@ -47,7 +45,9 @@ const VarReferencePopup: FC<Props> = ({
                 {t('workflow.variableReference.assignedVarsDescription')}
                 <a target='_blank' rel='noopener noreferrer'
                    className='text-text-accent-secondary'
-                  href={locale !== LanguagesSupported[1] ? 'https://docs.dify.ai/guides/workflow/variables#conversation-variables' : `https://docs.dify.ai/${locale.toLowerCase()}/guides/workflow/variables#hui-hua-bian-liang`}>{t('workflow.variableReference.conversationVars')}</a>
+                   href={docLink('/guides/workflow/variables#conversation-variables', { 'zh-Hans': '/guides/workflow/variables#hui-hua-bian-liang' })}>
+                  {t('workflow.variableReference.conversationVars')}
+                </a>
               </div>}
             />
           ))

web/app/components/workflow/nodes/_base/hooks/use-node-help-link.ts

@@ -1,14 +1,12 @@
 import { useMemo } from 'react'
-import { useGetLanguage } from '@/context/i18n'
+import { useDocLink, useGetLanguage } from '@/context/i18n'
 import { BlockEnum } from '@/app/components/workflow/types'
 
 export const useNodeHelpLink = (nodeType: BlockEnum) => {
   const language = useGetLanguage()
+  const docLink = useDocLink()
   const prefixLink = useMemo(() => {
-    if (language === 'zh_Hans')
-      return 'https://docs.dify.ai/zh-hans/guides/workflow/node/'
-
-    return 'https://docs.dify.ai/en/guides/workflow/node/'
+    return docLink('/guides/workflow/node/')
   }, [language])
   const linkMap = useMemo(() => {
     if (language === 'zh_Hans') {

web/app/components/workflow/panel/chat-variable-panel/index.tsx

@@ -3,7 +3,6 @@ import {
   useCallback,
   useState,
 } from 'react'
-import { useContext } from 'use-context-selector'
 import {
   useStoreApi,
 } from 'reactflow'
@@ -22,13 +21,12 @@ import type {
 import { findUsedVarNodes, updateNodeVars } from '@/app/components/workflow/nodes/_base/components/variable/utils'
 import { useNodesSyncDraft } from '@/app/components/workflow/hooks/use-nodes-sync-draft'
 import { BlockEnum } from '@/app/components/workflow/types'
-import I18n from '@/context/i18n'
-import { LanguagesSupported } from '@/i18n/language'
+import { useDocLink } from '@/context/i18n'
 import cn from '@/utils/classnames'
 
 const ChatVariablePanel = () => {
   const { t } = useTranslation()
-  const { locale } = useContext(I18n)
+  const docLink = useDocLink()
   const store = useStoreApi()
   const setShowChatVariablePanel = useStore(s => s.setShowChatVariablePanel)
   const varList = useStore(s => s.conversationVariables) as ConversationVariable[]
@@ -139,7 +137,10 @@ const ChatVariablePanel = () => {
             <div className='system-2xs-medium-uppercase inline-block rounded-[5px] border border-divider-deep px-[5px] py-[3px] text-text-tertiary'>TIPS</div>
             <div className='system-sm-regular mb-4 mt-1 text-text-secondary'>
               {t('workflow.chatVariable.panelDescription')}
-              <a target='_blank' rel='noopener noreferrer' className='text-text-accent' href={locale !== LanguagesSupported[1] ? 'https://docs.dify.ai/guides/workflow/variables#conversation-variables' : `https://docs.dify.ai/${locale.toLowerCase()}/guides/workflow/variables#hui-hua-bian-liang`}>{t('workflow.chatVariable.docLink')}</a>
+              <a target='_blank' rel='noopener noreferrer' className='text-text-accent'
+                 href={docLink('/guides/workflow/variables#conversation-variables', { 'zh-Hans': '/guides/workflow/variables#hui-hua-bian-liang' })}>
+                {t('workflow.chatVariable.docLink')}
+              </a>
           </div>
             <div className='flex items-center gap-2'>
               <div className='radius-lg flex flex-col border border-workflow-block-border bg-workflow-block-bg p-3 pb-4 shadow-md'>

web/app/components/workflow/run/node.tsx

@@ -28,6 +28,7 @@ import type {
 } from '@/types/workflow'
 import ErrorHandleTip from '@/app/components/workflow/nodes/_base/components/error-handle/error-handle-tip'
 import { hasRetryNode } from '@/app/components/workflow/utils'
+import { useDocLink } from '@/context/i18n'
 
 type Props = {
   className?: string
@@ -65,6 +66,7 @@ const NodePanel: FC<Props> = ({
     doSetCollapseState(state)
   }, [hideProcessDetail])
   const { t } = useTranslation()
+  const docLink = useDocLink()
 
   const getTime = (time: number) => {
     if (time < 1)
@@ -195,7 +197,7 @@ const NodePanel: FC<Props> = ({
                 <StatusContainer status='stopped'>
                   {nodeInfo.error}
                   <a
-                    href='https://docs.dify.ai/guides/workflow/error-handling/error-type'
+                    href={docLink('/guides/workflow/error-handling/error-type')}
                     target='_blank'
                     className='text-text-accent'
                   >

web/app/components/workflow/run/status.tsx

@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next'
 import cn from '@/utils/classnames'
 import Indicator from '@/app/components/header/indicator'
 import StatusContainer from '@/app/components/workflow/run/status-container'
+import { useDocLink } from '@/context/i18n'
 
 type ResultProps = {
   status: string
@@ -21,6 +22,7 @@ const StatusPanel: FC<ResultProps> = ({
   exceptionCounts,
 }) => {
   const { t } = useTranslation()
+  const docLink = useDocLink()
 
   return (
     <StatusContainer status={status}>
@@ -134,7 +136,7 @@ const StatusPanel: FC<ResultProps> = ({
             <div className='system-xs-medium text-text-warning'>
               {error}
               <a
-                href='https://docs.dify.ai/guides/workflow/error-handling/error-type'
+                href={docLink('/guides/workflow/error-handling/error-type')}
                 target='_blank'
                 className='text-text-accent'
               >

web/app/install/installForm.tsx

@@ -17,6 +17,7 @@ import Button from '@/app/components/base/button'
 import { fetchInitValidateStatus, fetchSetupStatus, setup } from '@/service/common'
 import type { InitValidateStatusResponse, SetupStatusResponse } from '@/models/common'
 import useDocumentTitle from '@/hooks/use-document-title'
+import { useDocLink } from '@/context/i18n'
 
 const validPassword = /^(?=.*[a-zA-Z])(?=.*\d).{8,}$/
 
@@ -36,6 +37,7 @@ type AccountFormValues = z.infer<typeof accountFormSchema>
 const InstallForm = () => {
   useDocumentTitle('')
   const { t } = useTranslation()
+  const docLink = useDocLink()
   const router = useRouter()
   const [showPassword, setShowPassword] = React.useState(false)
   const [loading, setLoading] = React.useState(true)
@@ -174,7 +176,7 @@ const InstallForm = () => {
               <Link
                 className='text-text-accent'
                 target='_blank' rel='noopener noreferrer'
-                href={'https://docs.dify.ai/user-agreement/open-source'}
+                href={docLink('/policies/open-source')}
               >{t('login.license.link')}</Link>
             </div>
           </div>

web/app/signin/oneMoreStep.tsx

@@ -12,6 +12,7 @@ import { timezones } from '@/utils/timezone'
 import { LanguagesSupported, languages } from '@/i18n/language'
 import { oneMoreStep } from '@/service/common'
 import Toast from '@/app/components/base/toast'
+import { useDocLink } from '@/context/i18n'
 
 type IState = {
   formState: 'processing' | 'error' | 'success' | 'initial'
@@ -51,6 +52,7 @@ const reducer: Reducer<IState, IAction> = (state: IState, action: IAction) => {
 
 const OneMoreStep = () => {
   const { t } = useTranslation()
+  const docLink = useDocLink()
   const router = useRouter()
   const searchParams = useSearchParams()
 
@@ -164,7 +166,7 @@ const OneMoreStep = () => {
             <Link
               className='system-xs-medium text-text-accent-secondary'
               target='_blank' rel='noopener noreferrer'
-              href={'https://docs.dify.ai/en/policies/agreement/README'}
+              href={docLink('/policies/agreement/README')}
             >{t('login.license.link')}</Link>
           </div>
         </div>

web/context/i18n.ts

@@ -39,9 +39,9 @@ const defaultDocBaseUrl = 'https://docs.dify.ai'
 export const useDocLink = (baseUrl?: string): ((path?: string, pathMap?: { [index: string]: string }) => string) => {
     const { locale } = useI18N()
     return (path?: string, pathMap?: { [index: string]: string }): string => {
-        const pathUrl = path || ''
         const baseDocUrl = baseUrl || defaultDocBaseUrl
         const docLanguage = getDocLanguage(locale)
+        const pathUrl = path || ''
         const targetPath = (pathMap !== undefined) ? pathMap[locale] || pathUrl : pathUrl
         return (targetPath.startsWith('/')) ? `${baseDocUrl}/${docLanguage}${targetPath}` : `${baseDocUrl}/${docLanguage}/${targetPath}`
     }