opensource/dify
2
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-04-13 22:57:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: rename selectedFileList to selectedFileKeys across components and update related logic

Browse Source
This commit is contained in:
twwu 2025-07-10 15:14:23 +08:00
parent e66c2badda
commit 15cd9e0b12
13 changed files with 156 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/index.tsx
View File

@ -51,9 +51,9 @@ const Breadcrumbs = ({
}, [displayBreadcrumbNum, prefix])
const handleBackToBucketList = useCallback(() => {
const { setFileList, setSelectedFileList, setPrefix, setBucket } = dataSourceStore.getState()
const { setFileList, setSelectedFileKeys, setPrefix, setBucket } = dataSourceStore.getState()
setFileList([])
setSelectedFileList([])
setSelectedFileKeys([])
setBucket('')
setPrefix([])
getOnlineDriveFiles({
@ -64,9 +64,9 @@ const Breadcrumbs = ({
}, [dataSourceStore, getOnlineDriveFiles])
const handleClickBucketName = useCallback(() => {
const { setFileList, setSelectedFileList, setPrefix } = dataSourceStore.getState()
const { setFileList, setSelectedFileKeys, setPrefix } = dataSourceStore.getState()
setFileList([])
setSelectedFileList([])
setSelectedFileKeys([])
setPrefix([])
getOnlineDriveFiles({
prefix: [],
@ -75,16 +75,16 @@ const Breadcrumbs = ({
}, [dataSourceStore, getOnlineDriveFiles])
const handleClickBreadcrumb = useCallback((index: number) => {
const { setFileList, setSelectedFileList, setPrefix } = dataSourceStore.getState()
const { prefix, setFileList, setSelectedFileKeys, setPrefix } = dataSourceStore.getState()
const newPrefix = prefix.slice(0, index + 1)
setFileList([])
setSelectedFileList([])
setSelectedFileKeys([])
setPrefix(newPrefix)
getOnlineDriveFiles({
prefix: newPrefix,
fileList: [],
})
}, [dataSourceStore, getOnlineDriveFiles, prefix])
}, [dataSourceStore, getOnlineDriveFiles])
return (
<div className='flex grow items-center overflow-hidden'>

6
web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/index.tsx
View File

@ -6,7 +6,7 @@ import { useDebounceFn } from 'ahooks'
type FileListProps = {
fileList: OnlineDriveFile[]
selectedFileList: string[]
selectedFileKeys: string[]
prefix: string[]
keywords: string
bucket: string
@ -27,7 +27,7 @@ type FileListProps = {
const FileList = ({
fileList,
selectedFileList,
selectedFileKeys,
prefix,
keywords,
bucket,
@ -75,7 +75,7 @@ const FileList = ({
/>
<List
fileList={fileList}
selectedFileList={selectedFileList}
selectedFileKeys={selectedFileKeys}
keywords={keywords}
handleResetKeywords={handleResetKeywords}
handleOpenFolder={handleOpenFolder}

6
web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/list/index.tsx
View File

@ -9,7 +9,7 @@ import { useDataSourceStore } from '../../../store'
type FileListProps = {
fileList: OnlineDriveFile[]
selectedFileList: string[]
selectedFileKeys: string[]
keywords: string
isInPipeline: boolean
isLoading: boolean
@ -26,7 +26,7 @@ type FileListProps = {
const List = ({
fileList,
selectedFileList,
selectedFileKeys,
keywords,
handleResetKeywords,
handleSelectFile,
@ -82,7 +82,7 @@ const List = ({
<div className='flex h-full flex-col gap-y-px overflow-y-auto rounded-[10px] bg-background-section px-1 py-1.5'>
{
fileList.map((file) => {
const isSelected = selectedFileList.includes(file.key)
const isSelected = selectedFileKeys.includes(file.key)
return (
<Item
key={file.key}

32
web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/index.tsx
View File

@ -27,7 +27,7 @@ const OnlineDrive = ({
const prefix = useDataSourceStoreWithSelector(state => state.prefix)
const keywords = useDataSourceStoreWithSelector(state => state.keywords)
const bucket = useDataSourceStoreWithSelector(state => state.bucket)
const selectedFileList = useDataSourceStoreWithSelector(state => state.selectedFileList)
const selectedFileKeys = useDataSourceStoreWithSelector(state => state.selectedFileKeys)
const fileList = useDataSourceStoreWithSelector(state => state.fileList)
const currentNodeIdRef = useDataSourceStoreWithSelector(state => state.currentNodeIdRef)
const dataSourceStore = useDataSourceStore()
@ -43,7 +43,7 @@ const OnlineDrive = ({
startAfter?: string
fileList?: OnlineDriveFile[]
}) => {
const { startAfter } = dataSourceStore.getState()
const { startAfter, prefix, bucket, fileList } = dataSourceStore.getState()
const _prefix = params.prefix ?? prefix
const _bucket = params.bucket ?? bucket
const _startAfter = params.startAfter ?? startAfter.current
@ -80,16 +80,22 @@ const OnlineDrive = ({
},
},
)
}, [prefix, bucket, datasourceNodeRunURL, dataSourceStore, fileList])
}, [datasourceNodeRunURL, dataSourceStore])
useEffect(() => {
if (nodeId !== currentNodeIdRef.current) {
const { setFileList, setBucket, setPrefix, setKeywords, setSelectedFileList } = dataSourceStore.getState()
const {
setFileList,
setBucket,
setPrefix,
setKeywords,
setSelectedFileKeys,
} = dataSourceStore.getState()
setFileList([])
setBucket('')
setPrefix([])
setKeywords('')
setSelectedFileList([])
setSelectedFileKeys([])
currentNodeIdRef.current = nodeId
getOnlineDriveFiles({
prefix: [],
@ -124,9 +130,9 @@ const OnlineDrive = ({
}, [dataSourceStore])
const handleSelectFile = useCallback((file: OnlineDriveFile) => {
const { setSelectedFileList } = dataSourceStore.getState()
const { selectedFileKeys, setSelectedFileKeys } = dataSourceStore.getState()
if (file.type === OnlineDriveFileType.bucket) return
const newSelectedFileList = produce(selectedFileList, (draft) => {
const newSelectedFileList = produce(selectedFileKeys, (draft) => {
if (draft.includes(file.key)) {
const index = draft.indexOf(file.key)
draft.splice(index, 1)
@ -136,11 +142,11 @@ const OnlineDrive = ({
draft.push(file.key)
}
})
setSelectedFileList(newSelectedFileList)
}, [dataSourceStore, isInPipeline, selectedFileList])
setSelectedFileKeys(newSelectedFileList)
}, [dataSourceStore, isInPipeline])
const handleOpenFolder = useCallback((file: OnlineDriveFile) => {
const { setPrefix, setBucket, setFileList, setSelectedFileList } = dataSourceStore.getState()
const { prefix, setPrefix, setBucket, setFileList, setSelectedFileKeys } = dataSourceStore.getState()
if (file.type === OnlineDriveFileType.file) return
setFileList([])
if (file.type === OnlineDriveFileType.bucket) {
@ -148,7 +154,7 @@ const OnlineDrive = ({
getOnlineDriveFiles({ bucket: file.displayName, fileList: [] })
}
else {
setSelectedFileList([])
setSelectedFileKeys([])
const displayName = file.displayName.endsWith('/') ? file.displayName.slice(0, -1) : file.displayName
const newPrefix = produce(prefix, (draft) => {
draft.push(displayName)
@ -156,7 +162,7 @@ const OnlineDrive = ({
setPrefix(newPrefix)
getOnlineDriveFiles({ prefix: newPrefix, fileList: [] })
}
}, [dataSourceStore, getOnlineDriveFiles, prefix])
}, [dataSourceStore, getOnlineDriveFiles])
return (
<div className='flex flex-col gap-y-2'>
@ -166,7 +172,7 @@ const OnlineDrive = ({
/>
<FileList
fileList={onlineDriveFileList}
selectedFileList={selectedFileList}
selectedFileKeys={selectedFileKeys}
prefix={prefix}
keywords={keywords}
bucket={bucket}

12
web/app/components/datasets/documents/create-from-pipeline/data-source/store/slices/online-document.ts
View File

@ -17,7 +17,7 @@ export type OnlineDocumentSliceShape = {
previewOnlineDocumentRef: React.MutableRefObject<NotionPage | undefined>
}
export const createOnlineDocumentSlice: StateCreator<OnlineDocumentSliceShape> = (set) => {
export const createOnlineDocumentSlice: StateCreator<OnlineDocumentSliceShape> = (set, get) => {
return ({
documentsData: [],
setDocumentsData: (documentsData: DataSourceNotionWorkspace[]) => set(() => ({
@ -32,9 +32,13 @@ export const createOnlineDocumentSlice: StateCreator<OnlineDocumentSliceShape> =
currentWorkspaceId: workspaceId,
})),
onlineDocuments: [],
setOnlineDocuments: (documents: NotionPage[]) => set(() => ({
onlineDocuments: documents,
})),
setOnlineDocuments: (documents: NotionPage[]) => {
set(() => ({
onlineDocuments: documents,
}))
const { previewOnlineDocumentRef } = get()
previewOnlineDocumentRef.current = documents[0]
},
currentDocument: undefined,
setCurrentDocument: (document: NotionPage | undefined) => set(() => ({
currentDocument: document,

23
web/app/components/datasets/documents/create-from-pipeline/data-source/store/slices/online-drive.ts
View File

@ -6,17 +6,18 @@ export type OnlineDriveSliceShape = {
setPrefix: (prefix: string[]) => void
keywords: string
setKeywords: (keywords: string) => void
selectedFileList: string[]
setSelectedFileList: (selectedFileList: string[]) => void
selectedFileKeys: string[]
setSelectedFileKeys: (selectedFileKeys: string[]) => void
fileList: OnlineDriveFile[]
setFileList: (fileList: OnlineDriveFile[]) => void
bucket: string
setBucket: (bucket: string) => void
startAfter: React.MutableRefObject<string>
isTruncated: React.MutableRefObject<boolean>
previewOnlineDriveFileRef: React.MutableRefObject<OnlineDriveFile | undefined>
}
export const createOnlineDriveSlice: StateCreator<OnlineDriveSliceShape> = (set) => {
export const createOnlineDriveSlice: StateCreator<OnlineDriveSliceShape> = (set, get) => {
return ({
prefix: [],
setPrefix: (prefix: string[]) => set(() => ({
@ -26,11 +27,15 @@ export const createOnlineDriveSlice: StateCreator<OnlineDriveSliceShape> = (set)
setKeywords: (keywords: string) => set(() => ({
keywords,
})),
startAfter: { current: '' },
selectedFileList: [],
setSelectedFileList: (selectedFileList: string[]) => set(() => ({
selectedFileList,
})),
selectedFileKeys: [],
setSelectedFileKeys: (selectedFileKeys: string[]) => {
set(() => ({
selectedFileKeys,
}))
const key = selectedFileKeys[0]
const { fileList, previewOnlineDriveFileRef } = get()
previewOnlineDriveFileRef.current = fileList.find(file => file.key === key)
},
fileList: [],
setFileList: (fileList: OnlineDriveFile[]) => set(() => ({
fileList,
@ -39,6 +44,8 @@ export const createOnlineDriveSlice: StateCreator<OnlineDriveSliceShape> = (set)
setBucket: (bucket: string) => set(() => ({
bucket,
})),
startAfter: { current: '' },
isTruncated: { current: false },
previewOnlineDriveFileRef: { current: undefined },
})
}

12
web/app/components/datasets/documents/create-from-pipeline/data-source/store/slices/website-crawl.ts
View File

@ -16,12 +16,16 @@ export type WebsiteCrawlSliceShape = {
previewWebsitePageRef: React.MutableRefObject<CrawlResultItem | undefined>
}
export const createWebsiteCrawlSlice: StateCreator<WebsiteCrawlSliceShape> = (set) => {
export const createWebsiteCrawlSlice: StateCreator<WebsiteCrawlSliceShape> = (set, get) => {
return ({
websitePages: [],
setWebsitePages: (pages: CrawlResultItem[]) => set(() => ({
websitePages: pages,
})),
setWebsitePages: (pages: CrawlResultItem[]) => {
set(() => ({
websitePages: pages,
}))
const { previewWebsitePageRef } = get()
previewWebsitePageRef.current = pages[0]
},
currentWebsite: undefined,
setCurrentWebsite: (website: CrawlResultItem | undefined) => set(() => ({
currentWebsite: website,

2
web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/index.tsx
View File

@ -67,7 +67,6 @@ const WebsiteCrawl = ({
setPreviewIndex,
setCurrentWebsite,
currentNodeIdRef,
previewWebsitePageRef,
} = dataSourceStore.getState()
if (nodeId !== currentNodeIdRef.current) {
setStep(CrawlStep.init)
@ -75,7 +74,6 @@ const WebsiteCrawl = ({
setCurrentWebsite(undefined)
setWebsitePages([])
setPreviewIndex(0)
previewWebsitePageRef.current = undefined
setCrawledNum(0)
setTotalNum(0)
setCrawlErrorMessage('')

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

@ -63,7 +63,6 @@ export const useDatasourceOptions = (pipelineNodes: Node<DataSourceNodeType>[])
export const useLocalFile = () => {
const fileList = useDataSourceStoreWithSelector(state => state.localFileList)
const previewFileRef = useDataSourceStoreWithSelector(state => state.previewLocalFileRef)
const currentLocalFile = useDataSourceStoreWithSelector(state => state.currentLocalFile)
const dataSourceStore = useDataSourceStore()
@ -76,7 +75,6 @@ export const useLocalFile = () => {
return {
fileList,
previewFileRef,
allFileLoaded,
currentLocalFile,
hidePreviewLocalFile,
@ -87,7 +85,6 @@ export const useOnlineDocuments = () => {
const documentsData = useDataSourceStoreWithSelector(state => state.documentsData)
const currentWorkspaceId = useDataSourceStoreWithSelector(state => state.currentWorkspaceId)
const onlineDocuments = useDataSourceStoreWithSelector(state => state.onlineDocuments)
const previewOnlineDocumentRef = useDataSourceStoreWithSelector(state => state.previewOnlineDocumentRef)
const currentDocument = useDataSourceStoreWithSelector(state => state.currentDocument)
const dataSourceStore = useDataSourceStore()
@ -117,7 +114,6 @@ export const useOnlineDocuments = () => {
onlineDocuments,
currentDocument,
PagesMapAndSelectedPagesId,
previewOnlineDocumentRef,
hidePreviewOnlineDocument,
}
}
@ -125,7 +121,6 @@ export const useOnlineDocuments = () => {
export const useWebsiteCrawl = () => {
const websitePages = useDataSourceStoreWithSelector(state => state.websitePages)
const currentWebsite = useDataSourceStoreWithSelector(state => state.currentWebsite)
const previewWebsitePageRef = useDataSourceStoreWithSelector(state => state.previewWebsitePageRef)
const dataSourceStore = useDataSourceStore()
const hideWebsitePreview = useCallback(() => {
@ -136,7 +131,6 @@ export const useWebsiteCrawl = () => {
return {
websitePages,
previewWebsitePageRef,
currentWebsite,
hideWebsitePreview,
}
@ -144,10 +138,15 @@ export const useWebsiteCrawl = () => {
export const useOnlineDrive = () => {
const fileList = useDataSourceStoreWithSelector(state => state.fileList)
const selectedFileList = useDataSourceStoreWithSelector(state => state.selectedFileList)
const selectedFileKeys = useDataSourceStoreWithSelector(state => state.selectedFileKeys)
const selectedOnlineDriveFileList = useMemo(() => {
return selectedFileKeys.map(key => fileList.find(item => item.key === key)!)
}, [fileList, selectedFileKeys])
return {
fileList,
selectedFileList,
selectedFileKeys,
selectedOnlineDriveFileList,
}
}

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

@ -24,7 +24,7 @@ import WebsitePreview from './preview/web-preview'
import ProcessDocuments from './process-documents'
import ChunkPreview from './preview/chunk-preview'
import Processing from './processing'
import type { InitialDocumentDetail, PublishedPipelineRunPreviewResponse, PublishedPipelineRunResponse } from '@/models/pipeline'
import type { InitialDocumentDetail, OnlineDriveFile, PublishedPipelineRunPreviewResponse, PublishedPipelineRunResponse } from '@/models/pipeline'
import { DatasourceType } from '@/models/pipeline'
import { TransferMethod } from '@/types/app'
import { useAddDocumentsSteps, useLocalFile, useOnlineDocuments, useOnlineDrive, useWebsiteCrawl } from './hooks'
@ -57,7 +57,6 @@ const CreateFormPipeline = () => {
} = useAddDocumentsSteps()
const {
fileList,
previewFileRef,
allFileLoaded,
currentLocalFile,
hidePreviewLocalFile,
@ -67,18 +66,17 @@ const CreateFormPipeline = () => {
onlineDocuments,
currentDocument,
PagesMapAndSelectedPagesId,
previewOnlineDocumentRef,
hidePreviewOnlineDocument,
} = useOnlineDocuments()
const {
websitePages,
previewWebsitePageRef,
currentWebsite,
hideWebsitePreview,
} = useWebsiteCrawl()
const {
fileList: onlineDriveFileList,
selectedFileList,
selectedFileKeys,
selectedOnlineDriveFileList,
} = useOnlineDrive()
const datasourceType = datasource?.nodeData.provider_type
@ -107,9 +105,9 @@ const CreateFormPipeline = () => {
if (datasourceType === DatasourceType.websiteCrawl)
return isShowVectorSpaceFull || !websitePages.length
if (datasourceType === DatasourceType.onlineDrive)
return isShowVectorSpaceFull || !selectedFileList.length
return isShowVectorSpaceFull || !selectedFileKeys.length
return false
}, [datasource, datasourceType, isShowVectorSpaceFull, fileList.length, allFileLoaded, onlineDocuments.length, websitePages.length, selectedFileList.length])
}, [datasource, datasourceType, isShowVectorSpaceFull, fileList.length, allFileLoaded, onlineDocuments.length, websitePages.length, selectedFileKeys.length])
const fileUploadConfig = useMemo(() => fileUploadConfigResponse ?? {
file_size_limit: 15,
@ -143,8 +141,8 @@ const CreateFormPipeline = () => {
if (datasourceType === DatasourceType.onlineDocument)
return onlineDocuments.length
if (datasourceType === DatasourceType.onlineDrive)
return selectedFileList.length
}, [datasourceType, onlineDocuments.length, selectedFileList.length])
return selectedFileKeys.length
}, [datasourceType, onlineDocuments.length, selectedFileKeys.length])
const tip = useMemo(() => {
if (datasourceType === DatasourceType.onlineDocument)
@ -163,9 +161,15 @@ const CreateFormPipeline = () => {
const handlePreviewChunks = useCallback(async (data: Record<string, any>) => {
if (!datasource)
return
const {
previewLocalFileRef,
previewOnlineDocumentRef,
previewWebsitePageRef,
previewOnlineDriveFileRef,
} = dataSourceStore.getState()
const datasourceInfoList: Record<string, any>[] = []
if (datasourceType === DatasourceType.localFile) {
const { id, name, type, size, extension, mime_type } = previewFileRef.current as File
const { id, name, type, size, extension, mime_type } = previewLocalFileRef.current as File
const documentInfo = {
related_id: id,
name,
@ -188,6 +192,14 @@ const CreateFormPipeline = () => {
}
if (datasourceType === DatasourceType.websiteCrawl)
datasourceInfoList.push(previewWebsitePageRef.current!)
if (datasourceType === DatasourceType.onlineDrive) {
const { bucket } = dataSourceStore.getState()
const { key } = previewOnlineDriveFileRef.current!
datasourceInfoList.push({
bucket,
key,
})
}
await runPublishedPipeline({
pipeline_id: pipelineId!,
inputs: data,
@ -200,7 +212,7 @@ const CreateFormPipeline = () => {
setEstimateData((res as PublishedPipelineRunPreviewResponse).data.outputs)
},
})
}, [datasource, datasourceType, previewWebsitePageRef, runPublishedPipeline, pipelineId, previewFileRef, previewOnlineDocumentRef])
}, [datasource, datasourceType, runPublishedPipeline, pipelineId, dataSourceStore])
const handleProcess = useCallback(async (data: Record<string, any>) => {
if (!datasource)
@ -240,7 +252,7 @@ const CreateFormPipeline = () => {
if (datasourceType === DatasourceType.onlineDrive) {
if (datasourceType === DatasourceType.onlineDrive) {
const { bucket } = dataSourceStore.getState()
selectedFileList.forEach((key) => {
selectedFileKeys.forEach((key) => {
datasourceInfoList.push({
bucket,
key,
@ -262,7 +274,7 @@ const CreateFormPipeline = () => {
handleNextStep()
},
})
}, [dataSourceStore, datasource, datasourceType, fileList, handleNextStep, onlineDocuments, pipelineId, runPublishedPipeline, selectedFileList, websitePages])
}, [dataSourceStore, datasource, datasourceType, fileList, handleNextStep, onlineDocuments, pipelineId, runPublishedPipeline, selectedFileKeys, websitePages])
const onClickProcess = useCallback(() => {
isPreview.current = false
@ -279,22 +291,31 @@ const CreateFormPipeline = () => {
}, [handlePreviewChunks, handleProcess])
const handlePreviewFileChange = useCallback((file: DocumentItem) => {
previewFileRef.current = file
const { previewLocalFileRef } = dataSourceStore.getState()
previewLocalFileRef.current = file
onClickPreview()
}, [onClickPreview, previewFileRef])
}, [dataSourceStore, onClickPreview])
const handlePreviewOnlineDocumentChange = useCallback((page: NotionPage) => {
const { previewOnlineDocumentRef } = dataSourceStore.getState()
previewOnlineDocumentRef.current = page
onClickPreview()
}, [onClickPreview, previewOnlineDocumentRef])
}, [dataSourceStore, onClickPreview])
const handlePreviewWebsiteChange = useCallback((website: CrawlResultItem) => {
const { previewWebsitePageRef } = dataSourceStore.getState()
previewWebsitePageRef.current = website
onClickPreview()
}, [onClickPreview, previewWebsitePageRef])
}, [dataSourceStore, onClickPreview])
const handlePreviewOnlineDriveFileChange = useCallback((file: OnlineDriveFile) => {
const { previewOnlineDriveFileRef } = dataSourceStore.getState()
previewOnlineDriveFileRef.current = file
onClickPreview()
}, [dataSourceStore, onClickPreview])
const handleSelectAll = useCallback(() => {
const { setOnlineDocuments, setSelectedFileList, setSelectedPagesId } = dataSourceStore.getState()
const { setOnlineDocuments, setSelectedFileKeys, setSelectedPagesId } = dataSourceStore.getState()
if (datasourceType === DatasourceType.onlineDocument) {
const allIds = currentWorkspace?.pages.map(page => page.page_id) || []
if (onlineDocuments.length < allIds.length) {
@ -311,12 +332,12 @@ const CreateFormPipeline = () => {
const allKeys = onlineDriveFileList.filter((item) => {
return item.type !== 'bucket'
}).map(file => file.key)
if (selectedFileList.length < allKeys.length)
setSelectedFileList(allKeys)
if (selectedFileKeys.length < allKeys.length)
setSelectedFileKeys(allKeys)
else
setSelectedFileList([])
setSelectedFileKeys([])
}
}, [PagesMapAndSelectedPagesId, currentWorkspace?.pages, dataSourceStore, datasourceType, onlineDocuments.length, onlineDriveFileList, selectedFileList.length])
}, [PagesMapAndSelectedPagesId, currentWorkspace?.pages, dataSourceStore, datasourceType, onlineDocuments.length, onlineDriveFileList, selectedFileKeys.length])
if (isFetchingPipelineInfo) {
return (
@ -440,9 +461,10 @@ const CreateFormPipeline = () => {
<div className='flex h-full flex-col pl-2 pt-2'>
<ChunkPreview
dataSourceType={datasourceType as DatasourceType}
files={fileList.map(file => file.file)}
localFiles={fileList.map(file => file.file)}
onlineDocuments={onlineDocuments}
websitePages={websitePages}
onlineDriveFiles={selectedOnlineDriveFileList}
isIdle={isIdle}
isPending={isPending && isPreview.current}
estimateData={estimateData}
@ -450,6 +472,7 @@ const CreateFormPipeline = () => {
handlePreviewFileChange={handlePreviewFileChange}
handlePreviewOnlineDocumentChange={handlePreviewOnlineDocumentChange}
handlePreviewWebsitePageChange={handlePreviewWebsiteChange}
handlePreviewOnlineDriveFileChange={handlePreviewOnlineDriveFileChange}
/>
</div>
</div>

37
web/app/components/datasets/documents/create-from-pipeline/preview/chunk-preview.tsx
View File

@ -14,13 +14,15 @@ import { SkeletonContainer, SkeletonPoint, SkeletonRectangle, SkeletonRow } from
import { RiSearchEyeLine } from '@remixicon/react'
import Badge from '@/app/components/base/badge'
import Button from '@/app/components/base/button'
import type { OnlineDriveFile } from '@/models/pipeline'
import { DatasourceType } from '@/models/pipeline'
type ChunkPreviewProps = {
dataSourceType: DatasourceType
files: CustomFile[]
localFiles: CustomFile[]
onlineDocuments: NotionPage[]
websitePages: CrawlResultItem[]
onlineDriveFiles: OnlineDriveFile[]
isIdle: boolean
isPending: boolean
estimateData: FileIndexingEstimateResponse | undefined
@ -28,13 +30,15 @@ type ChunkPreviewProps = {
handlePreviewFileChange: (file: DocumentItem) => void
handlePreviewOnlineDocumentChange: (page: NotionPage) => void
handlePreviewWebsitePageChange: (page: CrawlResultItem) => void
handlePreviewOnlineDriveFileChange: (file: OnlineDriveFile) => void
}
const ChunkPreview = ({
dataSourceType,
files,
localFiles,
onlineDocuments,
websitePages,
onlineDriveFiles,
isIdle,
isPending,
estimateData,
@ -42,13 +46,15 @@ const ChunkPreview = ({
handlePreviewFileChange,
handlePreviewOnlineDocumentChange,
handlePreviewWebsitePageChange,
handlePreviewOnlineDriveFileChange,
}: ChunkPreviewProps) => {
const { t } = useTranslation()
const currentDocForm = useDatasetDetailContextWithSelector(s => s.dataset?.doc_form)
const [previewFile, setPreviewFile] = useState<DocumentItem>(files[0] as DocumentItem)
const [previewFile, setPreviewFile] = useState<DocumentItem>(localFiles[0] as DocumentItem)
const [previewOnlineDocument, setPreviewOnlineDocument] = useState<NotionPage>(onlineDocuments[0])
const [previewWebsitePage, setPreviewWebsitePage] = useState<CrawlResultItem>(websitePages[0])
const [previewOnlineDriveFile, setPreviewOnlineDriveFile] = useState<OnlineDriveFile>(onlineDriveFiles[0])
return (
<PreviewContainer
@ -58,7 +64,7 @@ const ChunkPreview = ({
<div className='flex items-center gap-1'>
{dataSourceType === DatasourceType.localFile
&& <PreviewDocumentPicker
files={files as Array<Required<CustomFile>>}
files={localFiles as Array<Required<CustomFile>>}
onChange={(selected) => {
setPreviewFile(selected)
handlePreviewFileChange(selected)
@ -110,6 +116,29 @@ const ChunkPreview = ({
}
/>
}
{dataSourceType === DatasourceType.onlineDrive
&& <PreviewDocumentPicker
files={
onlineDriveFiles.map(file => ({
id: file.key,
name: file.displayName,
extension: 'md',
}))
}
onChange={(selected) => {
const selectedFile = onlineDriveFiles.find(file => file.key === selected.id)
setPreviewOnlineDriveFile(selectedFile!)
handlePreviewOnlineDriveFileChange(selectedFile!)
}}
value={
{
id: previewOnlineDriveFile?.key || '',
name: previewOnlineDriveFile?.displayName || '',
extension: 'md',
}
}
/>
}
{
currentDocForm !== ChunkingMode.qa
&& <Badge text={t('datasetCreation.stepTwo.previewChunkCount', {

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

@ -23,7 +23,7 @@ const TestRunPanel = () => {
const fileList = useDataSourceStoreWithSelector(state => state.localFileList)
const onlineDocuments = useDataSourceStoreWithSelector(state => state.onlineDocuments)
const websitePages = useDataSourceStoreWithSelector(state => state.websitePages)
const selectedFileList = useDataSourceStoreWithSelector(state => state.selectedFileList)
const selectedFileKeys = useDataSourceStoreWithSelector(state => state.selectedFileKeys)
const dataSourceStore = useDataSourceStore()
const [datasource, setDatasource] = useState<Datasource>()
@ -45,9 +45,9 @@ const TestRunPanel = () => {
if (datasourceType === DatasourceType.websiteCrawl)
return !websitePages.length
if (datasourceType === DatasourceType.onlineDrive)
return !selectedFileList.length
return !selectedFileKeys.length
return false
}, [datasource, datasourceType, fileList, onlineDocuments.length, selectedFileList.length, websitePages.length])
}, [datasource, datasourceType, fileList, onlineDocuments.length, selectedFileKeys.length, websitePages.length])
const handleClose = useCallback(() => {
setShowDebugAndPreviewPanel(false)
@ -87,7 +87,7 @@ const TestRunPanel = () => {
const { bucket } = dataSourceStore.getState()
datasourceInfoList.push({
bucket,
key: selectedFileList[0],
key: selectedFileKeys[0],
})
}
handleRun({
@ -96,7 +96,7 @@ const TestRunPanel = () => {
datasource_type: datasourceType,
datasource_info_list: datasourceInfoList,
})
}, [dataSourceStore, datasource, datasourceType, fileList, handleRun, onlineDocuments, selectedFileList, websitePages])
}, [dataSourceStore, datasource, datasourceType, fileList, handleRun, onlineDocuments, selectedFileKeys, websitePages])
return (
<div

4
web/app/components/workflow/plugin-dependency/hooks.ts
View File

@ -8,8 +8,8 @@ export const usePluginDependencies = () => {
const { mutateAsync: checkPipelineDependencies } = useCheckPipelineDependencies()
const handleCheckPluginDependencies = useCallback(async (id: string, isPipeline = false) => {
const mutateAsync = isPipeline ? checkPipelineDependencies : checkWorkflowDependencies
const { leaked_dependencies } = await mutateAsync(id)
const checkDependencies = isPipeline ? checkPipelineDependencies : checkWorkflowDependencies
const { leaked_dependencies } = await checkDependencies(id)
const { setDependencies } = usePluginDependenciesStore.getState()
setDependencies(leaked_dependencies)
}, [checkWorkflowDependencies, checkPipelineDependencies])