From e5d8c0750872b0c908ec02b7263abb7ff90b6517 Mon Sep 17 00:00:00 2001
From: Yi <yxiaoisme@gmail.com>
Date: Sun, 29 Sep 2024 11:12:03 +0800
Subject: [PATCH] add helper text

---
 web/app/(commonLayout)/datasets/NewDatasetCard.tsx  |  3 ++-
 .../create/ExternalApiSelect.tsx                    |  2 +-
 .../external-knowledge-base/create/index.tsx        | 13 +++++++++++--
 web/i18n/en-US/dataset.ts                           |  7 +++++++
 web/i18n/zh-Hans/dataset.ts                         |  7 +++++++
 5 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/web/app/(commonLayout)/datasets/NewDatasetCard.tsx b/web/app/(commonLayout)/datasets/NewDatasetCard.tsx
index 19a7ba2ab6..47eb4e8827 100644
--- a/web/app/(commonLayout)/datasets/NewDatasetCard.tsx
+++ b/web/app/(commonLayout)/datasets/NewDatasetCard.tsx
@@ -14,7 +14,7 @@ const CreateAppCard = forwardRef<HTMLAnchorElement>((_, ref) => {
     <div className='flex flex-col bg-background-default-dimm border-[0.5px] border-components-panel-border rounded-xl
       min-h-[160px] transition-all duration-200 ease-in-out'
     >
-      <a ref={ref} className='group flex flex-grow items-start p-4 pb-2 cursor-pointer' href='/datasets/create'>
+      <a ref={ref} className='group flex flex-grow items-start p-4 pb-1 cursor-pointer' href='/datasets/create'>
         <div className='flex items-center gap-3'>
           <div className='w-10 h-10 p-2 flex items-center justify-center border border-dashed border-divider-regular rounded-lg
             bg-background-default-lighter group-hover:border-solid group-hover:border-effects-highlight group-hover:bg-background-default-dodge'
@@ -24,6 +24,7 @@ const CreateAppCard = forwardRef<HTMLAnchorElement>((_, ref) => {
           <div className='system-md-semibold text-text-secondary group-hover:text-text-accent'>{t('dataset.createDataset')}</div>
         </div>
       </a>
+      <div className='px-4 pb-2 text-text-tertiary system-xs-medium'>{t('dataset.createDatasetIntro')}</div>
       <a className='group flex p-4 items-center gap-1 border-t-[0.5px] border-divider-subtle rounded-b-xl cursor-pointer' href='/datasets/connect'>
         <div className='system-xs-medium text-text-tertiary group-hover:text-text-accent'>{t('dataset.connectDataset')}</div>
         <RiArrowRightLine className='w-3.5 h-3.5 text-text-tertiary group-hover:text-text-accent' />
diff --git a/web/app/components/datasets/external-knowledge-base/create/ExternalApiSelect.tsx b/web/app/components/datasets/external-knowledge-base/create/ExternalApiSelect.tsx
index 3c4733933e..c1dc9d77d2 100644
--- a/web/app/components/datasets/external-knowledge-base/create/ExternalApiSelect.tsx
+++ b/web/app/components/datasets/external-knowledge-base/create/ExternalApiSelect.tsx
@@ -53,7 +53,7 @@ const ExternalApiSelect: React.FC<ExternalApiSelectProps> = ({ items, value, onS
           ? (
             <div className="flex px-2 py-1 items-center gap-0.5 self-stretch rounded-lg">
               <ApiConnectionMod className='text-text-secondary w-4 h-4' />
-              <div className='flex p-1 items-center flex-grow'>
+              <div className='flex items-center flex-grow'>
                 <span className='text-components-input-text-filled text-ellipsis system-sm-regular overflow-hidden'>{selectedItem.name}</span>
               </div>
             </div>
diff --git a/web/app/components/datasets/external-knowledge-base/create/index.tsx b/web/app/components/datasets/external-knowledge-base/create/index.tsx
index e4b72e8d79..41662ce907 100644
--- a/web/app/components/datasets/external-knowledge-base/create/index.tsx
+++ b/web/app/components/datasets/external-knowledge-base/create/index.tsx
@@ -52,8 +52,17 @@ const ExternalKnowledgeBaseCreate: React.FC<ExternalKnowledgeBaseCreateProps> =
       <div className='flex justify-center flex-grow self-stretch'>
         <div className='flex w-full max-w-[960px] px-14 py-0 flex-col items-center'>
           <div className='flex w-full max-w-[640px] pt-6 pb-8 flex-col grow items-center gap-4'>
-            <div className='relative flex py-2 items-center gap-2 self-stretch'>
-              <div className='flex-grow text-text-primary system-xl-semibold'>{t('dataset.connectDataset')}</div>
+            <div className='relative flex flex-col py-2 items-center gap-[2px] self-stretch'>
+              <div className='flex-grow text-text-primary system-xl-semibold self-stretch'>{t('dataset.connectDataset')}</div>
+              <p className='text-text-tertiary system-sm-regular'>
+                <span>{t('dataset.connectHelper.helper1')}</span>
+                <span className='text-text-secondary system-sm-medium'>{t('dataset.connectHelper.helper2')}</span>
+                <span>{t('dataset.connectHelper.helper3')}</span>
+                <a className='self-stretch text-text-accent system-sm-regular' href='https://docs.dify.ai/guides/knowledge-base/connect-external-knowledge' target='_blank' rel="noopener noreferrer">
+                  {t('dataset.connectHelper.helper4')}
+                </a>
+                <span>{t('dataset.connectHelper.helper5')} </span>
+              </p>
               <Button
                 className='flex w-8 h-8 p-2 items-center justify-center absolute left-[-44px] top-1 rounded-full'
                 variant='tertiary'
diff --git a/web/i18n/en-US/dataset.ts b/web/i18n/en-US/dataset.ts
index ca2d4e8d9d..e89ea47c26 100644
--- a/web/i18n/en-US/dataset.ts
+++ b/web/i18n/en-US/dataset.ts
@@ -53,6 +53,13 @@ const translation = {
     },
     learnMore: 'Learn More',
   },
+  connectHelper: {
+    helper1: 'Connect to external knowledge bases via API and knowledge base ID. Currently, ',
+    helper2: 'only the retrieval functionality is supported',
+    helper3: '. We strongly recommend that you ',
+    helper4: 'read the help documentation',
+    helper5: ' carefully before using this feature.',
+  },
   createDatasetIntro: 'Import your own text data or write data in real-time via Webhook for LLM context enhancement.',
   deleteDatasetConfirmTitle: 'Delete this Knowledge?',
   deleteDatasetConfirmContent:
diff --git a/web/i18n/zh-Hans/dataset.ts b/web/i18n/zh-Hans/dataset.ts
index 68a570e1a6..d057af0c16 100644
--- a/web/i18n/zh-Hans/dataset.ts
+++ b/web/i18n/zh-Hans/dataset.ts
@@ -49,6 +49,13 @@ const translation = {
     },
     learnMore: '了解更多',
   },
+  connectHelper: {
+    helper1: '通过 API 和知识库 ID 连接到外部知识库。目前，',
+    helper2: '仅支持检索功能',
+    helper3: '。我们强烈建议您在使用此功能之前',
+    helper4: '仔细阅读帮助文档',
+    helper5: '。',
+  },
   connectDataset: '连接外部知识库',
   createDatasetIntro: '导入您自己的文本数据或通过 Webhook 实时写入数据以增强 LLM 的上下文。',
   deleteDatasetConfirmTitle: '要删除知识库吗？',