From fbf3abddf2894cfd73023278af89b92094b85357 Mon Sep 17 00:00:00 2001
From: twwu <twwu@dify.ai>
Date: Tue, 29 Jul 2025 14:52:17 +0800
Subject: [PATCH] feat: Add tooltip for configuration button in header and
 update translations

---
 .../data-source/base/header.tsx               | 27 ++++++++++++-------
 web/i18n/en-US/dataset-pipeline.ts            |  1 +
 web/i18n/zh-Hans/dataset-pipeline.ts          |  1 +
 3 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/base/header.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/base/header.tsx
index 96eef3350d..0756e1eb37 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/base/header.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/base/header.tsx
@@ -4,6 +4,8 @@ import Button from '@/app/components/base/button'
 import { RiBookOpenLine, RiEqualizer2Line } from '@remixicon/react'
 import type { CredentialSelectorProps } from './credential-selector'
 import CredentialSelector from './credential-selector'
+import Tooltip from '@/app/components/base/tooltip'
+import { useTranslation } from 'react-i18next'
 
 type HeaderProps = {
   docTitle: string
@@ -17,6 +19,8 @@ const Header = ({
   onClickConfiguration,
   ...rest
 }: HeaderProps) => {
+  const { t } = useTranslation()
+
   return (
     <div className='flex items-center gap-x-2'>
       <div className='flex shrink-0 grow items-center gap-x-1'>
@@ -24,16 +28,21 @@ const Header = ({
           {...rest}
         />
         <Divider type='vertical' className='mx-1 h-3.5' />
-        <Button
-          variant='ghost'
-          size='small'
-          className='size-6 px-1'
+        <Tooltip
+          popupContent={t('datasetPipeline.configurationTip', { pluginName: rest.pluginName })}
+          position='top'
         >
-          <RiEqualizer2Line
-            className='h-4 w-4'
-            onClick={onClickConfiguration}
-          />
-        </Button>
+          <Button
+            variant='ghost'
+            size='small'
+            className='size-6 px-1'
+          >
+            <RiEqualizer2Line
+              className='h-4 w-4'
+              onClick={onClickConfiguration}
+            />
+          </Button>
+        </Tooltip>
       </div>
       <a
         className='system-xs-medium flex items-center gap-x-1 overflow-hidden text-text-accent'
diff --git a/web/i18n/en-US/dataset-pipeline.ts b/web/i18n/en-US/dataset-pipeline.ts
index 31af466e41..eccafd0f8b 100644
--- a/web/i18n/en-US/dataset-pipeline.ts
+++ b/web/i18n/en-US/dataset-pipeline.ts
@@ -133,6 +133,7 @@ const translation = {
   credentialSelector: {
     name: '{{credentialName}}\'s {{pluginName}}',
   },
+  configurationTip: 'Configure {{pluginName}}',
   conversion: {
     title: 'Convert to Knowledge Pipeline',
     descriptionChunk1: 'You can now convert your existing knowledge base to use the Knowledge Pipeline for document processing',
diff --git a/web/i18n/zh-Hans/dataset-pipeline.ts b/web/i18n/zh-Hans/dataset-pipeline.ts
index edb70c0dbd..37aeb656e3 100644
--- a/web/i18n/zh-Hans/dataset-pipeline.ts
+++ b/web/i18n/zh-Hans/dataset-pipeline.ts
@@ -133,6 +133,7 @@ const translation = {
   credentialSelector: {
     name: '{{credentialName}} 的 {{pluginName}}',
   },
+  configurationTip: '配置 {{pluginName}}',
   conversion: {
     title: '转换为知识库 pipeline',
     descriptionChunk1: '您现在可以将现有知识库转换为使用知识库 pipeline 来处理文档',