diff --git a/web/app/components/rag-pipeline/components/input-field/field-list/field-item.tsx b/web/app/components/rag-pipeline/components/input-field/field-list/field-item.tsx index 288b18eb8c..4124878c17 100644 --- a/web/app/components/rag-pipeline/components/input-field/field-list/field-item.tsx +++ b/web/app/components/rag-pipeline/components/input-field/field-list/field-item.tsx @@ -51,11 +51,13 @@ const FieldItem = ({ className={cn( 'flex h-8 cursor-pointer items-center justify-between gap-x-1 rounded-lg border border-components-panel-border-subtle bg-components-panel-on-panel-item-bg py-1 pl-2 shadow-xs hover:shadow-sm', (isHovering && !readonly) ? 'pr-1' : 'pr-2.5', + readonly && 'cursor-default', )} + onClick={handleOnClickEdit} >
{ - isHovering + (isHovering && !readonly) ? : } diff --git a/web/app/components/rag-pipeline/components/input-field/field-list/field-list-container.tsx b/web/app/components/rag-pipeline/components/input-field/field-list/field-list-container.tsx index 2b97226855..d1c2f768d7 100644 --- a/web/app/components/rag-pipeline/components/input-field/field-list/field-list-container.tsx +++ b/web/app/components/rag-pipeline/components/input-field/field-list/field-list-container.tsx @@ -1,5 +1,6 @@ import { memo, + useCallback, useMemo, } from 'react' import { ReactSortable } from 'react-sortablejs' @@ -7,6 +8,7 @@ import cn from '@/utils/classnames' import type { InputVar } from '@/models/pipeline' import FieldItem from './field-item' import type { SortableItem } from './types' +import { isEqual } from 'lodash-es' type FieldListContainerProps = { className?: string @@ -33,11 +35,17 @@ const FieldListContainer = ({ }) }, [inputFields]) + const handleListSortChange = useCallback((newList: SortableItem[]) => { + if (isEqual(newList, list)) + return + onListSortChange(newList) + }, [list, onListSortChange]) + return ( className={cn(className)} list={list} - setList={onListSortChange} + setList={handleListSortChange} handle='.handle' ghostClass='opacity-50' group='rag-pipeline-input-field' diff --git a/web/app/components/rag-pipeline/components/input-field/field-list/hooks.ts b/web/app/components/rag-pipeline/components/input-field/field-list/hooks.ts index c74d85ff2b..86a985ac7b 100644 --- a/web/app/components/rag-pipeline/components/input-field/field-list/hooks.ts +++ b/web/app/components/rag-pipeline/components/input-field/field-list/hooks.ts @@ -44,9 +44,11 @@ export const useFieldList = ( const [editingField, setEditingField] = useState() const [showInputFieldEditor, setShowInputFieldEditor] = useState(false) + const editingFieldIndex = useRef(-1) const handleOpenInputFieldEditor = useCallback((id?: string) => { - const fieldToEdit = inputFieldsRef.current.find(field => field.variable === id) - setEditingField(fieldToEdit) + const index = inputFieldsRef.current.findIndex(field => field.variable === id) + editingFieldIndex.current = index + setEditingField(inputFieldsRef.current[index]) setShowInputFieldEditor(true) }, []) const handleCancelInputFieldEditor = useCallback(() => { @@ -76,7 +78,7 @@ export const useFieldList = ( const handleSubmitField = useCallback((data: InputVar, moreInfo?: MoreInfo) => { const newInputFields = produce(inputFieldsRef.current, (draft) => { - const currentIndex = draft.findIndex(field => field.variable === data.variable) + const currentIndex = editingFieldIndex.current if (currentIndex === -1) { draft.push(data) return diff --git a/web/app/components/rag-pipeline/components/input-field/index.tsx b/web/app/components/rag-pipeline/components/input-field/index.tsx index 73d9f2b59f..e481e5c924 100644 --- a/web/app/components/rag-pipeline/components/input-field/index.tsx +++ b/web/app/components/rag-pipeline/components/input-field/index.tsx @@ -17,7 +17,6 @@ import Datasource from './label-right-content/datasource' import { useNodes } from 'reactflow' import type { DataSourceNodeType } from '@/app/components/workflow/nodes/data-source/types' import { useTranslation } from 'react-i18next' -// import produce from 'immer' import { useNodesSyncDraft } from '@/app/components/workflow/hooks' import type { InputVar, RAGPipelineVariables } from '@/models/pipeline' import Button from '@/app/components/base/button' @@ -57,8 +56,8 @@ const InputFieldDialog = ({ const { doSyncWorkflowDraft } = useNodesSyncDraft() - useUnmount(async () => { - await doSyncWorkflowDraft() + useUnmount(() => { + doSyncWorkflowDraft() }) const { run: syncWorkflowDraft } = useDebounceFn(() => { diff --git a/web/app/components/rag-pipeline/components/input-field/preview/process-documents.tsx b/web/app/components/rag-pipeline/components/input-field/preview/process-documents.tsx index 2d93f66b75..caabf4bde6 100644 --- a/web/app/components/rag-pipeline/components/input-field/preview/process-documents.tsx +++ b/web/app/components/rag-pipeline/components/input-field/preview/process-documents.tsx @@ -16,7 +16,7 @@ const ProcessDocuments = ({ const { data: paramsConfig } = useDraftPipelineProcessingParams({ pipeline_id: pipelineId!, node_id: dataSourceNodeId, - }) + }, !!pipelineId && !!dataSourceNodeId) return (
diff --git a/web/models/pipeline.ts b/web/models/pipeline.ts index ac0f5f544b..3015939132 100644 --- a/web/models/pipeline.ts +++ b/web/models/pipeline.ts @@ -142,6 +142,15 @@ export type PipelineProcessingParamsResponse = { variables: RAGPipelineVariables } +export type PipelinePreProcessingParamsRequest = { + pipeline_id: string + node_id: string +} + +export type PipelinePreProcessingParamsResponse = { + variables: RAGPipelineVariables +} + export type PipelineDatasourceNodeRunRequest = { pipeline_id: string node_id: string diff --git a/web/service/use-pipeline.ts b/web/service/use-pipeline.ts index 98bb21e19c..3fa3dff8bd 100644 --- a/web/service/use-pipeline.ts +++ b/web/service/use-pipeline.ts @@ -10,6 +10,8 @@ import type { PipelineCheckDependenciesResponse, PipelineDatasourceNodeRunRequest, PipelineDatasourceNodeRunResponse, + PipelinePreProcessingParamsRequest, + PipelinePreProcessingParamsResponse, PipelineProcessingParamsRequest, PipelineProcessingParamsResponse, PipelineTemplateByIdResponse, @@ -136,7 +138,7 @@ export const useDatasourceNodeRun = ( }) } -export const useDraftPipelineProcessingParams = (params: PipelineProcessingParamsRequest) => { +export const useDraftPipelineProcessingParams = (params: PipelineProcessingParamsRequest, enabled = true) => { const { pipeline_id, node_id } = params return useQuery({ queryKey: [NAME_SPACE, 'pipeline-processing-params', pipeline_id], @@ -148,7 +150,7 @@ export const useDraftPipelineProcessingParams = (params: PipelineProcessingParam }) }, staleTime: 0, - enabled: !!pipeline_id && !!node_id, + enabled, }) } @@ -248,3 +250,34 @@ export const useUpdateDataSourceCredentials = ( }, }) } + +export const useDraftPipelinePreProcessingParams = (params: PipelinePreProcessingParamsRequest, enabled = true) => { + const { pipeline_id, node_id } = params + return useQuery({ + queryKey: [NAME_SPACE, 'pipeline-processing-params', pipeline_id], + queryFn: () => { + return get(`/rag/pipelines/${pipeline_id}/workflows/draft/pre-processing/parameters`, { + params: { + node_id, + }, + }) + }, + staleTime: 0, + enabled, + }) +} + +export const usePublishedPipelinePreProcessingParams = (params: PipelinePreProcessingParamsRequest, enabled = true) => { + const { pipeline_id, node_id } = params + return useQuery({ + queryKey: [NAME_SPACE, 'pipeline-processing-params', pipeline_id], + queryFn: () => { + return get(`/rag/pipelines/${pipeline_id}/workflows/published/processing/parameters`, { + params: { + node_id, + }, + }) + }, + enabled, + }) +}