feat: enhance field item interaction and add preprocessing parameters hooks

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}
     >
       <div className='flex grow basis-0 items-center gap-x-1'>
         {
-          isHovering
+          (isHovering && !readonly)
             ? <RiDraggable className='handle h-4 w-4 cursor-all-scroll text-text-quaternary' />
             : <InputField className='size-4 text-text-accent' />
         }

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 (
     <ReactSortable<SortableItem>
       className={cn(className)}
       list={list}
-      setList={onListSortChange}
+      setList={handleListSortChange}
       handle='.handle'
       ghostClass='opacity-50'
       group='rag-pipeline-input-field'

web/app/components/rag-pipeline/components/input-field/field-list/hooks.ts

@@ -44,9 +44,11 @@ export const useFieldList = (
 
   const [editingField, setEditingField] = useState<InputVar | undefined>()
   const [showInputFieldEditor, setShowInputFieldEditor] = useState(false)
+  const editingFieldIndex = useRef<number>(-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

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(() => {

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 (
     <div className='flex flex-col'>

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

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<PipelineProcessingParamsResponse>({
     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<PipelinePreProcessingParamsResponse>({
+    queryKey: [NAME_SPACE, 'pipeline-processing-params', pipeline_id],
+    queryFn: () => {
+      return get<PipelinePreProcessingParamsResponse>(`/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<PipelinePreProcessingParamsResponse>({
+    queryKey: [NAME_SPACE, 'pipeline-processing-params', pipeline_id],
+    queryFn: () => {
+      return get<PipelinePreProcessingParamsResponse>(`/rag/pipelines/${pipeline_id}/workflows/published/processing/parameters`, {
+        params: {
+          node_id,
+        },
+      })
+    },
+    enabled,
+  })
+}