From 12b2f0ac3b69eaaedd6565d99c5ebf7e606a17a5 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Mon, 20 Apr 2026 09:06:44 +0800
Subject: [PATCH] chore: tip i18n

---
 .../__tests__/form-fields.spec.tsx            | 26 +++++++++++++++++++
 .../config-var/config-modal/form-fields.tsx   | 18 ++++++++++++-
 web/i18n/en-US/app-debug.json                 |  2 +-
 web/i18n/zh-Hans/app-debug.json               |  2 +-
 4 files changed, 45 insertions(+), 3 deletions(-)

diff --git a/web/app/components/app/configuration/config-var/config-modal/__tests__/form-fields.spec.tsx b/web/app/components/app/configuration/config-var/config-modal/__tests__/form-fields.spec.tsx
index 91fc828c2f..277ff32059 100644
--- a/web/app/components/app/configuration/config-var/config-modal/__tests__/form-fields.spec.tsx
+++ b/web/app/components/app/configuration/config-var/config-modal/__tests__/form-fields.spec.tsx
@@ -4,6 +4,29 @@ import { fireEvent, render, screen } from '@testing-library/react'
 import { InputVarType } from '@/app/components/workflow/types'
 import ConfigModalFormFields from '../form-fields'
 
+vi.mock('react-i18next', async () => {
+  const React = await import('react')
+  return {
+    useTranslation: () => ({
+      t: (key: string, options?: Record<string, unknown>) => {
+        const ns = options?.ns as string | undefined
+        return ns ? `${ns}.${key}` : key
+      },
+      i18n: { language: 'en', changeLanguage: vi.fn() },
+    }),
+    Trans: ({ i18nKey, components }: { i18nKey: string, components?: Record<string, ReactNode> }) => (
+      <span data-i18n-key={i18nKey}>
+        {i18nKey}
+        {components?.docLink}
+      </span>
+    ),
+  }
+})
+
+vi.mock('@/context/i18n', () => ({
+  useDocLink: () => (path?: string) => `https://docs.example.com${path || ''}`,
+}))
+
 vi.mock('@/app/components/base/file-uploader', () => ({
   FileUploaderInAttachmentWrapper: ({ onChange }: { onChange: (files: Array<Record<string, unknown>>) => void }) => (
     <button
@@ -170,6 +193,9 @@ describe('ConfigModalFormFields', () => {
     const textInputView = render(<ConfigModalFormFields {...textInputProps} />)
     expect(screen.getByText('variableConfig.hidden')).toBeInTheDocument()
     expect(screen.getByText('variableConfig.hiddenDescription')).toBeInTheDocument()
+    expect(screen.getByRole('link')).toHaveAttribute('href', 'https://docs.example.com/use-dify/nodes/user-input')
+    expect(screen.getByRole('link')).toHaveAttribute('target', '_blank')
+    expect(screen.getByRole('link')).toHaveAttribute('rel', 'noopener noreferrer')
     textInputView.unmount()
 
     const singleFileProps = createBaseProps()
diff --git a/web/app/components/app/configuration/config-var/config-modal/form-fields.tsx b/web/app/components/app/configuration/config-var/config-modal/form-fields.tsx
index de0a96ce02..46958b5c7c 100644
--- a/web/app/components/app/configuration/config-var/config-modal/form-fields.tsx
+++ b/web/app/components/app/configuration/config-var/config-modal/form-fields.tsx
@@ -5,6 +5,7 @@ import type { FileEntity } from '@/app/components/base/file-uploader/types'
 import type { InputVar, UploadFileSetting } from '@/app/components/workflow/types'
 import { RiQuestionLine } from '@remixicon/react'
 import * as React from 'react'
+import { Trans } from 'react-i18next'
 import Checkbox from '@/app/components/base/checkbox'
 import { FileUploaderInAttachmentWrapper } from '@/app/components/base/file-uploader'
 import Input from '@/app/components/base/input'
@@ -21,6 +22,7 @@ import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/
 import FileUploadSetting from '@/app/components/workflow/nodes/_base/components/file-upload-setting'
 import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
 import { InputVarType, SupportUploadFileTypes } from '@/app/components/workflow/types'
+import { useDocLink } from '@/context/i18n'
 import { TransferMethod } from '@/types/app'
 import ConfigSelect from '../config-select'
 import ConfigString from '../config-string'
@@ -69,6 +71,7 @@ const ConfigModalFormFields: FC<ConfigModalFormFieldsProps> = ({
 }) => {
   const { type, label, variable } = tempPayload
   const isFileInput = [InputVarType.singleFile, InputVarType.multiFiles].includes(type)
+  const docLink = useDocLink()
 
   return (
     <div className="space-y-2">
@@ -232,7 +235,20 @@ const ConfigModalFormFields: FC<ConfigModalFormFieldsProps> = ({
                 </div>
               </TooltipTrigger>
               <TooltipContent>
-                {t('variableConfig.hiddenDescription', { ns: 'appDebug' })}
+                <Trans
+                  i18nKey="variableConfig.hiddenDescription"
+                  ns="appDebug"
+                  components={{
+                    docLink: (
+                      <a
+                        href={docLink('/use-dify/nodes/user-input')}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="text-text-accent hover:underline"
+                      />
+                    ),
+                  }}
+                />
               </TooltipContent>
             </Tooltip>
           </div>
diff --git a/web/i18n/en-US/app-debug.json b/web/i18n/en-US/app-debug.json
index fa80e638c2..d08a712924 100644
--- a/web/i18n/en-US/app-debug.json
+++ b/web/i18n/en-US/app-debug.json
@@ -326,7 +326,7 @@
   "variableConfig.file.supportFileTypes": "Support File Types",
   "variableConfig.file.video.name": "Video",
   "variableConfig.hidden": "Hidden",
-  "variableConfig.hiddenDescription": "Hidden fields are not shown in the Web App start form and can be filled through URL query parameters.",
+  "variableConfig.hiddenDescription": "Hidden fields are not shown in the Web App start form. They can be populated via URL query parameters. For more details, <docLink>view the documentation</docLink>.",
   "variableConfig.hide": "Hide",
   "variableConfig.inputPlaceholder": "Please input",
   "variableConfig.json": "JSON Code",
diff --git a/web/i18n/zh-Hans/app-debug.json b/web/i18n/zh-Hans/app-debug.json
index 3f4dbdd193..fe7779630d 100644
--- a/web/i18n/zh-Hans/app-debug.json
+++ b/web/i18n/zh-Hans/app-debug.json
@@ -326,7 +326,7 @@
   "variableConfig.file.supportFileTypes": "支持的文件类型",
   "variableConfig.file.video.name": "视频",
   "variableConfig.hidden": "Hidden",
-  "variableConfig.hiddenDescription": "隐藏字段不会显示在 Web App 的开始表单中，可通过 URL 查询参数传值。",
+  "variableConfig.hiddenDescription": "隐藏字段不会显示在 Web App 的开始表单中，可通过 URL 查询参数传值。更多信息查看<docLink>文档</docLink>。",
   "variableConfig.hide": "隐藏",
   "variableConfig.inputPlaceholder": "请输入",
   "variableConfig.json": "JSON",