chore: document header

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'>

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;
 }

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',