feat: dataset document add notion-page-selector-modal

web/app/components/base/notion-page-selector/notion-page-selector-modal/index.tsx

@@ -11,11 +11,13 @@ type NotionPageSelectorModalProps = {
   isShow: boolean
   onClose: () => void
   onSave: (selectedPages: DataSourceNotionPage[]) => void
+  value?: string[]
 }
 const NotionPageSelectorModal = ({
   isShow,
   onClose,
   onSave,
+  value,
 }: NotionPageSelectorModalProps) => {
   const { t } = useTranslation()
   const [selectedPages, setSelectedPages] = useState<DataSourceNotionPage[]>([])
@@ -45,6 +47,7 @@ const NotionPageSelectorModal = ({
         </div>
       </div>
       <NotionPageSelector
+        value={value}
         onSelect={handleSelectPage}
         canPreview={false}
       />

web/app/components/base/notion-page-selector/search-input/index.tsx

@@ -19,7 +19,7 @@ const SearchInput = ({
   }, [onChange])
 
   return (
-    <div className={cn(s['input-wrapper'], 'flex items-center px-2 h-7 border border-gray-300 rounded-md', `${value ? 'bg-white' : 'bg-gray-100'}`)}>
+    <div className={cn(s['input-wrapper'], 'flex items-center px-2 h-7 rounded-md', `${value ? 'bg-white' : 'bg-gray-100'}`)}>
       <div className={cn(s['search-icon'], 'mr-[6px] w-4 h-4')} />
       <input
         className='grow text-[13px] bg-inherit border-0 outline-0 appearance-none'

web/app/components/datasets/documents/index.tsx

@@ -14,7 +14,11 @@ import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
 import Pagination from '@/app/components/base/pagination'
 import { get } from '@/service/base'
-import { fetchDocuments } from '@/service/datasets'
+import { createDocument, fetchDocuments } from '@/service/datasets'
+import { useDatasetDetailContext } from '@/context/dataset-detail'
+import { NotionPageSelectorModal } from '@/app/components/base/notion-page-selector'
+import type { DataSourceNotionPage } from '@/models/common'
+import type { CreateDocumentReq } from '@/models/datasets'
 
 // Custom page count is not currently supported.
 const limit = 15
@@ -75,6 +79,8 @@ const Documents: FC<IDocumentsProps> = ({ datasetId }) => {
   const [searchValue, setSearchValue] = useState<string>('')
   const [currPage, setCurrPage] = React.useState<number>(0)
   const router = useRouter()
+  const { dataset } = useDatasetDetailContext()
+  const [notionPageSelectorModalVisible, setNotionPageSelectorModalVisible] = useState(false)
 
   const query = useMemo(() => {
     return { page: currPage + 1, limit, keyword: searchValue }
@@ -89,6 +95,10 @@ const Documents: FC<IDocumentsProps> = ({ datasetId }) => {
   const total = documentsRes?.total || 0
 
   const routeToDocCreate = () => {
+    if (dataset?.data_source_type === 'notion_import') {
+      setNotionPageSelectorModalVisible(true)
+      return
+    }
     router.push(`/datasets/${datasetId}/documents/create`)
   }
 
@@ -96,6 +106,40 @@ const Documents: FC<IDocumentsProps> = ({ datasetId }) => {
 
   const isLoading = !documentsRes && !error
 
+  const handleSaveNotionPageSelected = async (selectedPages: (DataSourceNotionPage & { workspace_id: string })[]) => {
+    const params = {
+      data_source: {
+        type: dataset?.data_source_type,
+        info_list: {
+          data_source_type: dataset?.data_source_type,
+          notion_info_list: {
+            workspace_id: selectedPages[0].workspace_id,
+            pages: selectedPages.map((selectedPage) => {
+              const { page_id, page_name, page_icon, type } = selectedPage
+              return {
+                page_id,
+                page_name,
+                page_icon,
+                type,
+              }
+            }),
+          },
+        },
+      },
+      indexing_technique: dataset?.indexing_technique,
+      process_rule: {
+        rules: {},
+        mode: 'automatic',
+      },
+    } as CreateDocumentReq
+
+    await createDocument({
+      datasetId,
+      body: params,
+    })
+    mutate()
+  }
+
   return (
     <div className='flex flex-col h-full overflow-y-auto'>
       <div className='flex flex-col justify-center gap-1 px-6 pt-4'>
@@ -113,7 +157,11 @@ const Documents: FC<IDocumentsProps> = ({ datasetId }) => {
           />
           <Button type='primary' onClick={routeToDocCreate} className='!h-8 !text-[13px]'>
             <PlusIcon className='h-4 w-4 mr-2 stroke-current' />
-            {t('datasetDocuments.list.addFile')}
+            {
+              dataset?.data_source_type === 'notion_import'
+                ? t('datasetDocuments.list.addPages')
+                : t('datasetDocuments.list.addFile')
+            }
           </Button>
         </div>
         {isLoading
@@ -126,6 +174,14 @@ const Documents: FC<IDocumentsProps> = ({ datasetId }) => {
         {(total && total > limit)
           ? <Pagination current={currPage} onChange={setCurrPage} total={total} limit={limit} />
           : null}
+        <NotionPageSelectorModal
+          value={(documentsRes?.data || []).map((doc) => {
+            return doc.data_source_info.notion_page_id
+          })}
+          isShow={notionPageSelectorModalVisible}
+          onClose={() => setNotionPageSelectorModalVisible(false)}
+          onSave={handleSaveNotionPageSelected}
+        />
       </div>
     </div>
   )

web/context/dataset-detail.ts

-import { createContext } from 'use-context-selector'
+import { createContext, useContext } from 'use-context-selector'
 import type { DataSet } from '@/models/datasets'
 
 const DatasetDetailContext = createContext<{ indexingTechnique?: string; dataset?: DataSet }>({})
 
+export const useDatasetDetailContext = () => useContext(DatasetDetailContext)
+
 export default DatasetDetailContext

web/i18n/lang/dataset-documents.en.ts

@@ -3,6 +3,7 @@ const translation = {
     title: 'Documents',
     desc: 'All files of the dataset are shown here, and the entire dataset can be linked to Dify citations or indexed via the Chat plugin.',
     addFile: 'add file',
+    addPages: 'Add Pages',
     table: {
       header: {
         fileName: 'FILE NAME',

web/i18n/lang/dataset-documents.zh.ts

@@ -3,6 +3,7 @@ const translation = {
     title: '文档',
     desc: '数据集的所有文件都在这里显示，整个数据集都可以链接到 Dify 引用或通过 Chat 插件进行索引。',
     addFile: '添加文件',
+    addPages: '添加页面',
     table: {
       header: {
         fileName: '文件名',

web/models/common.ts

@@ -109,6 +109,7 @@ export type DataSourceNotionPage = {
   page_id: string
   page_name: string
   parent_id: string
+  type: string
 }
 
 export type DataSourceNotionWorkspace = {