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

2025-12-25 01:00:42 -05:00 · 2025-06-13 16:58:43 +08:00
parent 3a628bc671
commit f4df759ba6
36 changed files with 149 additions and 136 deletions
--- a/web/app/components/workflow/nodes/_base/components/agent-strategy.tsx
+++ b/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>}
--- a/web/app/components/workflow/nodes/_base/components/error-handle/default-value.tsx
+++ b/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')}
        &nbsp;
        <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'
        >
--- a/web/app/components/workflow/nodes/_base/components/error-handle/fail-branch-card.tsx
+++ b/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'
          >
--- a/web/app/components/workflow/nodes/_base/components/variable/var-reference-popup.tsx
+++ b/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={{
@@ -46,8 +44,10 @@ const VarReferencePopup: FC<Props> = ({
              description={<div className='system-xs-regular text-text-tertiary'>
                {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>
+                   className='text-text-accent-secondary'
+                   href={docLink('/guides/workflow/variables#conversation-variables', { 'zh-Hans': '/guides/workflow/variables#hui-hua-bian-liang' })}>
+                  {t('workflow.variableReference.conversationVars')}
+                </a>
              </div>}
            />
          ))
--- a/web/app/components/workflow/nodes/_base/hooks/use-node-help-link.ts
+++ b/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') {
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-config.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-config.tsx
@@ -21,8 +21,8 @@ import { MittProvider, VisualEditorContextProvider, useMittContext } from './vis
 import ErrorMessage from './error-message'
 import { useVisualEditorStore } from './visual-editor/store'
 import Toast from '@/app/components/base/toast'
-import { useGetDocLanguage } from '@/context/i18n'
 import { JSON_SCHEMA_MAX_DEPTH } from '@/config'
+import { useDocLink } from '@/context/i18n'

 type JsonSchemaConfigProps = {
  defaultSchema?: SchemaRoot
@@ -53,7 +53,7 @@ const JsonSchemaConfig: FC<JsonSchemaConfigProps> = ({
  onClose,
 }) => {
  const { t } = useTranslation()
-  const docLanguage = useGetDocLanguage()
+  const docLink = useDocLink()
  const [currentTab, setCurrentTab] = useState(SchemaView.VisualEditor)
  const [jsonSchema, setJsonSchema] = useState(defaultSchema || DEFAULT_SCHEMA)
  const [json, setJson] = useState(JSON.stringify(jsonSchema, null, 2))
@@ -252,7 +252,7 @@ const JsonSchemaConfig: FC<JsonSchemaConfigProps> = ({
      <div className='flex items-center gap-x-2 p-6 pt-5'>
        <a
          className='flex grow items-center gap-x-1 text-text-accent'
-          href={`https://docs.dify.ai/${docLanguage}/guides/workflow/structured-outputs`}
+          href={docLink('/guides/workflow/structured-outputs')}
          target='_blank'
          rel='noopener noreferrer'
        >
--- a/web/app/components/workflow/panel/chat-variable-panel/index.tsx
+++ b/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,8 +137,11 @@ 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>
-            </div>
+              <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'>
                <BubbleX className='mb-1 h-4 w-4 shrink-0 text-util-colors-teal-teal-700' />
--- a/web/app/components/workflow/run/node.tsx
+++ b/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'
                  >
--- a/web/app/components/workflow/run/status.tsx
+++ b/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'
              >