opensource
/
dify
mirror of https://github.com/langgenius/dify.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: Refactor OnlineDocuments and PageSelector components to enhance state management and integrate new Actions component

This commit is contained in:
twwu 2025-07-01 16:32:21 +08:00
parent 2d0d448667
commit a81dc49ad2
9 changed files with 155 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
web/app/components/base/notion-page-selector/base.tsx
View File

@ -15,7 +15,6 @@ type NotionPageSelectorProps = {
previewPageId?: string
onPreview?: (selectedPage: NotionPage) => void
datasetId?: string
isInPipeline?: boolean
}
const NotionPageSelector = ({
@ -25,7 +24,6 @@ const NotionPageSelector = ({
previewPageId,
onPreview,
datasetId = '',
isInPipeline = false,
}: NotionPageSelectorProps) => {
const { data, refetch } = usePreImportNotionPages({ url: '/notion/pre-import/pages', datasetId })
const [prevData, setPrevData] = useState(data)
@ -98,7 +96,6 @@ const NotionPageSelector = ({
? (
<div className='flex flex-col gap-y-2'>
<Header
isInPipeline={isInPipeline}
onClickConfiguration={handleConfigureNotion}
title={'Choose notion pages'}
buttonText={'Configure Notion'}

1
web/app/components/datasets/documents/create-from-pipeline/data-source/actions.tsx → web/app/components/datasets/documents/create-from-pipeline/actions/index.tsx
View File

@ -8,6 +8,7 @@ import Link from 'next/link'
type ActionsProps = {
disabled?: boolean
handleNextStep: () => void
showSelect?: boolean
}
const Actions = ({

36
web/app/components/datasets/documents/create-from-pipeline/hooks.ts
View File

@ -7,7 +7,7 @@ import type { DataSourceNodeType } from '@/app/components/workflow/nodes/data-so
import type { CrawlResult, CrawlResultItem, DocumentItem, FileItem } from '@/models/datasets'
import { CrawlStep } from '@/models/datasets'
import produce from 'immer'
import type { NotionPage } from '@/models/common'
import type { DataSourceNotionPageMap, DataSourceNotionWorkspace, NotionPage } from '@/models/common'
export const useAddDocumentsSteps = () => {
const { t } = useTranslation()
@ -128,9 +128,34 @@ export const useLocalFile = () => {
}
export const useOnlineDocuments = () => {
const [documentsData, setDocumentsData] = useState<DataSourceNotionWorkspace[]>([])
const [searchValue, setSearchValue] = useState('')
const [currentWorkspaceId, setCurrentWorkspaceId] = useState('')
const [onlineDocuments, setOnlineDocuments] = useState<NotionPage[]>([])
const [currentDocument, setCurrentDocument] = useState<NotionPage | undefined>()
const PagesMapAndSelectedPagesId: [DataSourceNotionPageMap, Set<string>, Set<string>] = useMemo(() => {
const selectedPagesId = new Set<string>()
const boundPagesId = new Set<string>()
const pagesMap = (documentsData || []).reduce((prev: DataSourceNotionPageMap, next: DataSourceNotionWorkspace) => {
next.pages.forEach((page) => {
if (page.is_bound) {
selectedPagesId.add(page.page_id)
boundPagesId.add(page.page_id)
}
prev[page.page_id] = {
...page,
workspace_id: next.workspace_id,
}
})
return prev
}, {})
return [pagesMap, selectedPagesId, boundPagesId]
}, [documentsData])
const defaultSelectedPagesId = [...Array.from(PagesMapAndSelectedPagesId[1]), ...(onlineDocuments.map(doc => doc.page_id) || [])]
const [selectedPagesId, setSelectedPagesId] = useState<Set<string>>(new Set(defaultSelectedPagesId))
const previewOnlineDocument = useRef<NotionPage>(onlineDocuments[0])
const updateOnlineDocuments = (value: NotionPage[]) => {
@ -146,6 +171,15 @@ export const useOnlineDocuments = () => {
}, [])
return {
documentsData,
setDocumentsData,
searchValue,
setSearchValue,
currentWorkspaceId,
setCurrentWorkspaceId,
PagesMapAndSelectedPagesId,
selectedPagesId,
setSelectedPagesId,
onlineDocuments,
previewOnlineDocument,
updateOnlineDocuments,

21
web/app/components/datasets/documents/create-from-pipeline/index.tsx
View File

@ -8,7 +8,7 @@ import type { NotionPage } from '@/models/common'
import OnlineDocuments from '@/app/components/rag-pipeline/components/panel/test-run/data-source/online-documents'
import VectorSpaceFull from '@/app/components/billing/vector-space-full'
import WebsiteCrawl from '@/app/components/rag-pipeline/components/panel/test-run/data-source/website-crawl'
import Actions from './data-source/actions'
import Actions from './actions'
import { useTranslation } from 'react-i18next'
import type { Datasource } from '@/app/components/rag-pipeline/components/panel/test-run/types'
import LeftHeader from './left-header'
@ -61,6 +61,15 @@ const CreateFormPipeline = () => {
hideFilePreview,
} = useLocalFile()
const {
documentsData,
setDocumentsData,
searchValue,
setSearchValue,
currentWorkspaceId,
setCurrentWorkspaceId,
PagesMapAndSelectedPagesId,
selectedPagesId,
setSelectedPagesId,
onlineDocuments,
previewOnlineDocument,
updateOnlineDocuments,
@ -261,9 +270,17 @@ const CreateFormPipeline = () => {
)}
{datasourceType === DatasourceType.onlineDocument && (
<OnlineDocuments
documentsData={documentsData}
setDocumentsData={setDocumentsData}
searchValue={searchValue}
setSearchValue={setSearchValue}
currentWorkspaceId={currentWorkspaceId}
setCurrentWorkspaceId={setCurrentWorkspaceId}
PagesMapAndSelectedPagesId={PagesMapAndSelectedPagesId}
selectedPagesId={selectedPagesId}
setSelectedPagesId={setSelectedPagesId}
nodeId={datasource!.nodeId}
nodeData={datasource!.nodeData}
pageIdList={onlineDocuments.map(doc => doc.page_id)}
onSelect={updateOnlineDocuments}
onPreview={updateCurrentPage}
/>

0
web/app/components/rag-pipeline/components/panel/test-run/data-source/actions.tsx → web/app/components/rag-pipeline/components/panel/test-run/data-source/actions/index.tsx
View File

69
web/app/components/rag-pipeline/components/panel/test-run/data-source/online-documents/index.tsx
View File

@ -1,4 +1,4 @@
import { useCallback, useEffect, useMemo, useState } from 'react'
import { useCallback, useEffect, useMemo } from 'react'
import WorkspaceSelector from '@/app/components/base/notion-page-selector/workspace-selector'
import SearchInput from '@/app/components/base/notion-page-selector/search-input'
import PageSelector from './page-selector'
@ -12,28 +12,41 @@ import type { DataSourceNodeCompletedResponse } from '@/types/pipeline'
import type { DataSourceNodeType } from '@/app/components/workflow/nodes/data-source/types'
type OnlineDocumentsProps = {
pageIdList?: string[]
onSelect: (selectedPages: NotionPage[]) => void
previewPageId?: string
onPreview?: (selectedPage: NotionPage) => void
isInPipeline?: boolean
nodeId: string
nodeData: DataSourceNodeType
documentsData: DataSourceNotionWorkspace[]
setDocumentsData: (documentsData: DataSourceNotionWorkspace[]) => void
searchValue: string
setSearchValue: (value: string) => void
currentWorkspaceId: string
setCurrentWorkspaceId: (workspaceId: string) => void
PagesMapAndSelectedPagesId: [DataSourceNotionPageMap, Set<string>, Set<string>]
selectedPagesId: Set<string>
setSelectedPagesId: (selectedPagesId: Set<string>) => void
}
const OnlineDocuments = ({
pageIdList,
onSelect,
previewPageId,
onPreview,
isInPipeline = false,
nodeId,
nodeData,
documentsData,
setDocumentsData,
searchValue,
setSearchValue,
currentWorkspaceId,
setCurrentWorkspaceId,
PagesMapAndSelectedPagesId,
selectedPagesId,
setSelectedPagesId,
}: OnlineDocumentsProps) => {
const pipelineId = useDatasetDetailContextWithSelector(s => s.dataset?.pipeline_id)
const [documentsData, setDocumentsData] = useState<DataSourceNotionWorkspace[]>([])
const [searchValue, setSearchValue] = useState('')
const [currentWorkspaceId, setCurrentWorkspaceId] = useState('')
const datasourceNodeRunURL = !isInPipeline
? `/rag/pipelines/${pipelineId}/workflows/published/datasource/nodes/${nodeId}/run`
@ -51,6 +64,7 @@ const OnlineDocuments = ({
{
onDataSourceNodeCompleted: (documentsData: DataSourceNodeCompletedResponse) => {
setDocumentsData(documentsData.data as DataSourceNotionWorkspace[])
setCurrentWorkspaceId(documentsData.data[0].workspace_id)
},
onError: (message: string) => {
Toast.notify({
@ -60,62 +74,36 @@ const OnlineDocuments = ({
},
},
)
}, [datasourceNodeRunURL])
}, [datasourceNodeRunURL, setCurrentWorkspaceId, setDocumentsData])
useEffect(() => {
getOnlineDocuments()
if (!documentsData.length)
getOnlineDocuments()
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])
const firstWorkspaceId = documentsData[0]?.workspace_id
const currentWorkspace = documentsData.find(workspace => workspace.workspace_id === currentWorkspaceId)
const PagesMapAndSelectedPagesId: [DataSourceNotionPageMap, Set<string>, Set<string>] = useMemo(() => {
const selectedPagesId = new Set<string>()
const boundPagesId = new Set<string>()
const pagesMap = documentsData.reduce((prev: DataSourceNotionPageMap, next: DataSourceNotionWorkspace) => {
next.pages.forEach((page) => {
if (page.is_bound) {
selectedPagesId.add(page.page_id)
boundPagesId.add(page.page_id)
}
prev[page.page_id] = {
...page,
workspace_id: next.workspace_id,
}
})
return prev
}, {})
return [pagesMap, selectedPagesId, boundPagesId]
}, [documentsData])
const defaultSelectedPagesId = [...Array.from(PagesMapAndSelectedPagesId[1]), ...(pageIdList || [])]
const [selectedPagesId, setSelectedPagesId] = useState<Set<string>>(new Set(defaultSelectedPagesId))
const handleSearchValueChange = useCallback((value: string) => {
setSearchValue(value)
}, [])
}, [setSearchValue])
const handleSelectWorkspace = useCallback((workspaceId: string) => {
setCurrentWorkspaceId(workspaceId)
}, [])
}, [setCurrentWorkspaceId])
const handleSelectPages = useCallback((newSelectedPagesId: Set<string>) => {
const selectedPages = Array.from(newSelectedPagesId).map(pageId => PagesMapAndSelectedPagesId[0][pageId])
setSelectedPagesId(new Set(Array.from(newSelectedPagesId)))
onSelect(selectedPages)
}, [onSelect, PagesMapAndSelectedPagesId])
}, [setSelectedPagesId, onSelect, PagesMapAndSelectedPagesId])
const handlePreviewPage = useCallback((previewPageId: string) => {
if (onPreview)
onPreview(PagesMapAndSelectedPagesId[0][previewPageId])
}, [PagesMapAndSelectedPagesId, onPreview])
useEffect(() => {
setCurrentWorkspaceId(firstWorkspaceId)
}, [firstWorkspaceId])
const headerInfo = useMemo(() => {
return {
title: nodeData.title,
@ -137,7 +125,7 @@ const OnlineDocuments = ({
<div className='flex h-12 items-center gap-x-2 rounded-t-xl border-b border-b-divider-regular bg-components-panel-bg p-2'>
<div className='flex grow items-center gap-x-1'>
<WorkspaceSelector
value={currentWorkspaceId || firstWorkspaceId}
value={currentWorkspaceId}
items={documentsData}
onSelect={handleSelectWorkspace}
/>
@ -149,7 +137,7 @@ const OnlineDocuments = ({
</div>
<div className='overflow-hidden rounded-b-xl'>
<PageSelector
value={selectedPagesId}
checkedIds={selectedPagesId}
disabledValue={PagesMapAndSelectedPagesId[2]}
searchValue={searchValue}
list={currentWorkspace?.pages || []}
@ -159,6 +147,7 @@ const OnlineDocuments = ({
previewPageId={previewPageId}
onPreview={handlePreviewPage}
isMultipleChoice={!isInPipeline}
currentWorkspaceId={currentWorkspaceId}
/>
</div>
</div>

36
web/app/components/rag-pipeline/components/panel/test-run/data-source/online-documents/page-selector/index.tsx
View File

@ -6,7 +6,7 @@ import Item from './item'
import { recursivePushInParentDescendants } from './utils'
type PageSelectorProps = {
value: Set<string>
checkedIds: Set<string>
disabledValue: Set<string>
searchValue: string
pagesMap: DataSourceNotionPageMap
@ -16,6 +16,7 @@ type PageSelectorProps = {
previewPageId?: string
onPreview?: (selectedPageId: string) => void
isMultipleChoice?: boolean
currentWorkspaceId: string
}
export type NotionPageTreeItem = {
@ -33,7 +34,7 @@ type NotionPageItem = {
} & DataSourceNotionPage
const PageSelector = ({
value,
checkedIds,
disabledValue,
searchValue,
pagesMap,
@ -43,24 +44,22 @@ const PageSelector = ({
previewPageId,
onPreview,
isMultipleChoice = true,
currentWorkspaceId,
}: PageSelectorProps) => {
const { t } = useTranslation()
const [prevDataList, setPrevDataList] = useState(list)
const [dataList, setDataList] = useState<NotionPageItem[]>([])
const [localPreviewPageId, setLocalPreviewPageId] = useState('')
useEffect(() => {
if (prevDataList !== list) {
setPrevDataList(list)
setDataList(list.filter(item => item.parent_id === 'root' || !pagesMap[item.parent_id]).map((item) => {
return {
...item,
expand: false,
depth: 0,
}
}))
}
}, [prevDataList, list, pagesMap])
setDataList(list.filter(item => item.parent_id === 'root' || !pagesMap[item.parent_id]).map((item) => {
return {
...item,
expand: false,
depth: 0,
}
}))
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [currentWorkspaceId])
const searchDataList = list.filter((item) => {
return item.page_name.includes(searchValue)
@ -108,13 +107,14 @@ const PageSelector = ({
expand: false,
depth: listMapWithChildrenAndDescendants[item].depth,
})),
...dataList.slice(index + 1)]
...dataList.slice(index + 1),
]
}
setDataList(newDataList)
}, [dataList, listMapWithChildrenAndDescendants, pagesMap])
const handleCheck = useCallback((index: number) => {
const copyValue = new Set([...value])
const copyValue = new Set([...checkedIds])
const current = currentDataList[index]
const pageId = current.page_id
const currentWithChildrenAndDescendants = listMapWithChildrenAndDescendants[pageId]
@ -143,7 +143,7 @@ const PageSelector = ({
}
onSelect(new Set([...copyValue]))
}, [currentDataList, isMultipleChoice, listMapWithChildrenAndDescendants, onSelect, searchValue, value])
}, [currentDataList, isMultipleChoice, listMapWithChildrenAndDescendants, onSelect, searchValue, checkedIds])
const handlePreview = useCallback((index: number) => {
const current = currentDataList[index]
@ -174,7 +174,7 @@ const PageSelector = ({
itemData={{
dataList: currentDataList,
handleToggle,
checkedIds: value,
checkedIds,
disabledCheckedIds: disabledValue,
handleCheck,
canPreview,

36
web/app/components/rag-pipeline/components/panel/test-run/hooks.ts
View File

@ -8,7 +8,7 @@ import { useCallback, useMemo, useState } from 'react'
import type { CrawlResult } from '@/models/datasets'
import { type CrawlResultItem, CrawlStep, type FileItem } from '@/models/datasets'
import produce from 'immer'
import type { NotionPage } from '@/models/common'
import type { DataSourceNotionPageMap, DataSourceNotionWorkspace, NotionPage } from '@/models/common'
export const useTestRunSteps = () => {
const { t } = useTranslation()
@ -107,13 +107,47 @@ export const useLocalFile = () => {
}
export const useOnlineDocuments = () => {
const [documentsData, setDocumentsData] = useState<DataSourceNotionWorkspace[]>([])
const [searchValue, setSearchValue] = useState('')
const [currentWorkspaceId, setCurrentWorkspaceId] = useState('')
const [onlineDocuments, setOnlineDocuments] = useState<NotionPage[]>([])
const PagesMapAndSelectedPagesId: [DataSourceNotionPageMap, Set<string>, Set<string>] = useMemo(() => {
const selectedPagesId = new Set<string>()
const boundPagesId = new Set<string>()
const pagesMap = (documentsData || []).reduce((prev: DataSourceNotionPageMap, next: DataSourceNotionWorkspace) => {
next.pages.forEach((page) => {
if (page.is_bound) {
selectedPagesId.add(page.page_id)
boundPagesId.add(page.page_id)
}
prev[page.page_id] = {
...page,
workspace_id: next.workspace_id,
}
})
return prev
}, {})
return [pagesMap, selectedPagesId, boundPagesId]
}, [documentsData])
const defaultSelectedPagesId = [...Array.from(PagesMapAndSelectedPagesId[1]), ...(onlineDocuments.map(doc => doc.page_id) || [])]
const [selectedPagesId, setSelectedPagesId] = useState<Set<string>>(new Set(defaultSelectedPagesId))
const updateOnlineDocuments = (value: NotionPage[]) => {
setOnlineDocuments(value)
}
return {
documentsData,
setDocumentsData,
searchValue,
setSearchValue,
currentWorkspaceId,
setCurrentWorkspaceId,
PagesMapAndSelectedPagesId,
selectedPagesId,
setSelectedPagesId,
onlineDocuments,
updateOnlineDocuments,
}

19
web/app/components/rag-pipeline/components/panel/test-run/index.tsx
View File

@ -32,6 +32,15 @@ const TestRunPanel = () => {
updateFileList,
} = useLocalFile()
const {
documentsData,
setDocumentsData,
searchValue,
setSearchValue,
currentWorkspaceId,
setCurrentWorkspaceId,
PagesMapAndSelectedPagesId,
selectedPagesId,
setSelectedPagesId,
onlineDocuments,
updateOnlineDocuments,
} = useOnlineDocuments()
@ -125,9 +134,17 @@ const TestRunPanel = () => {
)}
{datasourceType === DatasourceType.onlineDocument && (
<OnlineDocuments
documentsData={documentsData}
setDocumentsData={setDocumentsData}
searchValue={searchValue}
setSearchValue={setSearchValue}
currentWorkspaceId={currentWorkspaceId}
setCurrentWorkspaceId={setCurrentWorkspaceId}
PagesMapAndSelectedPagesId={PagesMapAndSelectedPagesId}
selectedPagesId={selectedPagesId}
setSelectedPagesId={setSelectedPagesId}
nodeId={datasource!.nodeId}
nodeData={datasource!.nodeData}
pageIdList={onlineDocuments.map(doc => doc.page_id)}
onSelect={updateOnlineDocuments}
isInPipeline
/>