Merge branch 'feat/parent-child-retrieval' of https://github.com/langgenius/dify into feat/parent-child-retrieval

2024-12-05 15:32:59 +08:00 · 2024-12-05 15:32:59 +08:00 · 9f8cf03155
parent 0361bf00d1 1cfb938a7b
commit 9f8cf03155
3 changed files with 89 additions and 18 deletions
--- a/web/app/components/base/pagination/index.tsx
+++ b/web/app/components/base/pagination/index.tsx
@ -8,7 +8,7 @@ import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
 import cn from '@/utils/classnames'

-type Props = {
+export type Props = {
  className?: string
  current: number
  onChange: (cur: number) => void
--- a/web/app/components/datasets/documents/index.tsx
+++ b/web/app/components/datasets/documents/index.tsx
@ -13,7 +13,6 @@ import s from './style.module.css'
 import Loading from '@/app/components/base/loading'
 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 { createDocument, fetchDocuments } from '@/service/datasets'
 import { useDatasetDetailContext } from '@/context/dataset-detail'
@ -22,8 +21,6 @@ import type { NotionPage } from '@/models/common'
 import type { CreateDocumentReq } from '@/models/datasets'
 import { DataSourceType } from '@/models/datasets'
 import RetryButton from '@/app/components/base/retry-button'
-// Custom page count is not currently supported.
-const limit = 15

 const FolderPlusIcon = ({ className }: React.SVGProps<SVGElement>) => {
  return <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" className={className ?? ''}>
@ -75,12 +72,14 @@ type IDocumentsProps = {
 }

 export const fetcher = (url: string) => get(url, {}, {})
+const DEFAULT_LIMIT = 15

 const Documents: FC<IDocumentsProps> = ({ datasetId }) => {
  const { t } = useTranslation()
  const [inputValue, setInputValue] = useState<string>('') // the input value
  const [searchValue, setSearchValue] = useState<string>('')
  const [currPage, setCurrPage] = React.useState<number>(0)
+  const [limit, setLimit] = useState<number>(DEFAULT_LIMIT)
  const router = useRouter()
  const { dataset } = useDatasetDetailContext()
  const [notionPageSelectorModalVisible, setNotionPageSelectorModalVisible] = useState(false)
@ -94,7 +93,7 @@ const Documents: FC<IDocumentsProps> = ({ datasetId }) => {

  const query = useMemo(() => {
    return { page: currPage + 1, limit, keyword: debouncedSearchValue, fetch: isDataSourceNotion ? true : '' }
-  }, [currPage, debouncedSearchValue, isDataSourceNotion])
+  }, [currPage, debouncedSearchValue, isDataSourceNotion, limit])

  const { data: documentsRes, error, mutate } = useSWR(
    {
@ -196,7 +195,7 @@ const Documents: FC<IDocumentsProps> = ({ datasetId }) => {
  }

  const documentsList = isDataSourceNotion ? documentsWithProgress?.data : documentsRes?.data
-
+  const [selectedIds, setSelectedIds] = useState<string[]>([])
  const { run: handleSearch } = useDebounceFn(() => {
    setSearchValue(inputValue)
  }, { wait: 500 })
@ -246,13 +245,22 @@ const Documents: FC<IDocumentsProps> = ({ datasetId }) => {
        {isLoading
          ? <Loading type='app' />
          : total > 0
-            ? <List embeddingAvailable={embeddingAvailable} documents={documentsList || []} datasetId={datasetId} onUpdate={mutate} />
+            ? <List
+              embeddingAvailable={embeddingAvailable}
+              documents={documentsList || []}
+              datasetId={datasetId} onUpdate={mutate}
+              selectedIds={selectedIds}
+              onSelectedIdChange={setSelectedIds}
+              pagination={{
+                total,
+                limit,
+                onLimitChange: setLimit,
+                current: currPage,
+                onChange: setCurrPage,
+              }}
+            />
            : <EmptyElement canAdd={embeddingAvailable} onClick={routeToDocCreate} type={isDataSourceNotion ? 'sync' : 'upload'} />
        }
-        {/* Show Pagination only if the total is more than the limit */}
-        {(total && total > limit)
-          ? <Pagination current={currPage} onChange={setCurrPage} total={total} limit={limit} />
-          : null}
        <NotionPageSelectorModal
          isShow={notionPageSelectorModalVisible}
          onClose={() => setNotionPageSelectorModalVisible(false)}
--- a/web/app/components/datasets/documents/list.tsx
+++ b/web/app/components/datasets/documents/list.tsx
@ -1,9 +1,9 @@
 'use client'
 import type { FC } from 'react'
-import React, { useCallback, useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import { useBoolean, useDebounceFn } from 'ahooks'
 import { ArrowDownIcon } from '@heroicons/react/24/outline'
-import { pick } from 'lodash-es'
+import { pick, uniq } from 'lodash-es'
 import {
  RiArchive2Line,
  RiDeleteBinLine,
@ -39,6 +39,9 @@ import { ChuckingMode, DataSourceType, type DocumentDisplayStatus, type SimpleDo
 import type { CommonResponse } from '@/models/common'
 import useTimestamp from '@/hooks/use-timestamp'
 import { useDatasetDetailContextWithSelector as useDatasetDetailContext } from '@/context/dataset-detail'
+import type { Props as PaginationProps } from '@/app/components/base/pagination'
+import Pagination from '@/app/components/base/pagination'
+import Checkbox from '@/app/components/base/checkbox'

 export const useIndexStatus = () => {
  const { t } = useTranslation()
@ -380,14 +383,25 @@ type LocalDoc = SimpleDocumentDetail & { percent?: number }
 type IDocumentListProps = {
  embeddingAvailable: boolean
  documents: LocalDoc[]
+  selectedIds: string[]
+  onSelectedIdChange: (selectedIds: string[]) => void
  datasetId: string
+  pagination: PaginationProps
  onUpdate: () => void
 }

 /**
 * Document list component including basic information
 */
-const DocumentList: FC<IDocumentListProps> = ({ embeddingAvailable, documents = [], datasetId, onUpdate }) => {
+const DocumentList: FC<IDocumentListProps> = ({
+  embeddingAvailable,
+  documents = [],
+  selectedIds,
+  onSelectedIdChange,
+  datasetId,
+  pagination,
+  onUpdate,
+}) => {
  const { t } = useTranslation()
  const { formatTime } = useTimestamp()
  const router = useRouter()
@ -426,12 +440,37 @@ const DocumentList: FC<IDocumentListProps> = ({ embeddingAvailable, documents =
    onUpdate()
  }, [onUpdate])

+  const isAllSelected = useMemo(() => {
+    return localDocs.length > 0 && localDocs.every(doc => selectedIds.includes(doc.id))
+  }, [localDocs, selectedIds])
+
+  const isSomeSelected = useMemo(() => {
+    return localDocs.some(doc => selectedIds.includes(doc.id))
+  }, [localDocs, selectedIds])
+
+  const onSelectedAll = useCallback(() => {
+    if (isAllSelected)
+      onSelectedIdChange([])
+    else
+      onSelectedIdChange(uniq([...selectedIds, ...localDocs.map(doc => doc.id)]))
+  }, [isAllSelected, localDocs, onSelectedIdChange, selectedIds])
+
  return (
-    <div className='w-full h-full overflow-x-auto'>
+    <div className='relative w-full h-full overflow-x-auto'>
      <table className={`min-w-[700px] max-w-full w-full border-collapse border-0 text-sm mt-3 ${s.documentTable}`}>
        <thead className="h-8 leading-8 border-b border-gray-200 text-gray-500 font-medium text-xs uppercase">
          <tr>
-            <td className='w-12'>#</td>
+            <td className='w-12'>
+              <div className='flex items-center' onClick={e => e.stopPropagation()}>
+                <Checkbox
+                  className='shrink-0 mr-2'
+                  checked={isAllSelected}
+                  mixed={!isAllSelected && isSomeSelected}
+                  onCheck={onSelectedAll}
+                />
+                #
+              </div>
+            </td>
            <td>
              <div className='flex'>
                {t('datasetDocuments.list.table.header.fileName')}
@ -451,7 +490,7 @@ const DocumentList: FC<IDocumentListProps> = ({ embeddingAvailable, documents =
          </tr>
        </thead>
        <tbody className="text-gray-700">
-          {localDocs.map((doc) => {
+          {localDocs.map((doc, index) => {
            const isFile = doc.data_source_type === DataSourceType.FILE
            const fileType = isFile ? doc.data_source_detail_dict?.upload_file?.extension : ''
            return <tr
@ -460,7 +499,24 @@ const DocumentList: FC<IDocumentListProps> = ({ embeddingAvailable, documents =
              onClick={() => {
                router.push(`/datasets/${datasetId}/documents/${doc.id}`)
              }}>
-              <td className='text-left align-middle text-text-tertiary text-xs'>{doc.position}</td>
+              <td className='text-left align-middle text-text-tertiary text-xs'>
+                <div className='flex items-center' onClick={e => e.stopPropagation()}>
+
+                  <Checkbox
+                    className='shrink-0 mr-2'
+                    checked={selectedIds.includes(doc.id)}
+                    onCheck={() => {
+                      onSelectedIdChange(
+                        selectedIds.includes(doc.id)
+                          ? selectedIds.filter(id => id !== doc.id)
+                          : [...selectedIds, doc.id],
+                      )
+                    }}
+                  />
+                  {/* {doc.position} */}
+                  {index + 1}
+                </div>
+              </td>
              <td>
                <div className='group flex items-center justify-between'>
                  <span className={s.tdValue}>
@ -520,6 +576,13 @@ const DocumentList: FC<IDocumentListProps> = ({ embeddingAvailable, documents =
          })}
        </tbody>
      </table>
+      {/* Show Pagination only if the total is more than the limit */}
+      {pagination.total && pagination.total > (pagination.limit || 10) && (
+        <Pagination
+          {...pagination}
+          className='absolute bottom-0 left-0 w-full px-0 pb-0'
+        />
+      )}

      {isShowRenameModal && currDocument && (
        <RenameModal