From a98df0158e740657431d8742e0c59307af83934d Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Tue, 26 Nov 2024 17:18:27 +0800
Subject: [PATCH] chore: document header

---
 web/app/components/datasets/documents/index.tsx    | 14 ++++++++++++--
 .../components/datasets/documents/style.module.css |  6 ------
 web/i18n/en-US/dataset-documents.ts                |  1 +
 3 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/web/app/components/datasets/documents/index.tsx b/web/app/components/datasets/documents/index.tsx
index 7a61d4d580..2176220843 100644
--- a/web/app/components/datasets/documents/index.tsx
+++ b/web/app/components/datasets/documents/index.tsx
@@ -7,6 +7,7 @@ import { useRouter } from 'next/navigation'
 import { useDebounce, useDebounceFn } from 'ahooks'
 import { groupBy, omit } from 'lodash-es'
 import { PlusIcon } from '@heroicons/react/24/solid'
+import { RiExternalLinkLine } from '@remixicon/react'
 import List from './list'
 import s from './style.module.css'
 import Loading from '@/app/components/base/loading'
@@ -208,8 +209,17 @@ const Documents: FC<IDocumentsProps> = ({ datasetId }) => {
   return (
     <div className='flex flex-col h-full overflow-y-auto'>
       <div className='flex flex-col justify-center gap-1 px-6 pt-4'>
-        <h1 className={s.title}>{t('datasetDocuments.list.title')}</h1>
-        <p className={s.desc}>{t('datasetDocuments.list.desc')}</p>
+        <h1 className='text-base font-semibold text-text-primary'>{t('datasetDocuments.list.title')}</h1>
+        <div className='flex items-center text-sm font-normal text-text-tertiary space-x-0.5'>
+          <span>{t('datasetDocuments.list.desc')}</span>
+          <a
+            className='flex items-center text-text-accent'
+            target='_blank'
+            href='https://docs.dify.ai/guides/knowledge-base/integrate-knowledge-within-application'>
+            <span>{t('datasetDocuments.list.learnMore')}</span>
+            <RiExternalLinkLine className='w-3 h-3' />
+          </a>
+        </div>
       </div>
       <div className='flex flex-col px-6 py-4 flex-1'>
         <div className='flex items-center justify-between flex-wrap'>
diff --git a/web/app/components/datasets/documents/style.module.css b/web/app/components/datasets/documents/style.module.css
index bd5a46531e..e10402e939 100644
--- a/web/app/components/datasets/documents/style.module.css
+++ b/web/app/components/datasets/documents/style.module.css
@@ -8,12 +8,6 @@
   box-sizing: border-box;
   max-width: 200px;
 }
-.title {
-  @apply text-xl font-medium text-gray-900;
-}
-.desc {
-  @apply text-sm font-normal text-gray-500;
-}
 .actionIconWrapperList {
   @apply h-6 w-6 rounded-md border-none p-1 hover:bg-gray-100 !important;
 }
diff --git a/web/i18n/en-US/dataset-documents.ts b/web/i18n/en-US/dataset-documents.ts
index 8988b9dc18..5c472e81a2 100644
--- a/web/i18n/en-US/dataset-documents.ts
+++ b/web/i18n/en-US/dataset-documents.ts
@@ -2,6 +2,7 @@ const translation = {
   list: {
     title: 'Documents',
     desc: 'All files of the Knowledge are shown here, and the entire Knowledge can be linked to Dify citations or indexed via the Chat plugin.',
+    learnMore: 'Learn more',
     addFile: 'Add file',
     addPages: 'Add Pages',
     addUrl: 'Add URL',