diff --git a/web/app/components/rag-pipeline/components/input-field/editor/index.tsx b/web/app/components/rag-pipeline/components/input-field/editor/index.tsx index 7caca68c68..3d50484955 100644 --- a/web/app/components/rag-pipeline/components/input-field/editor/index.tsx +++ b/web/app/components/rag-pipeline/components/input-field/editor/index.tsx @@ -6,11 +6,12 @@ import { useCallback } from 'react' import { useTranslation } from 'react-i18next' import type { InputVar } from '@/models/pipeline' import type { FormData } from './form/types' +import type { MoreInfo } from '@/app/components/workflow/types' type InputFieldEditorProps = { show: boolean onClose: () => void - onSubmit: (data: InputVar) => void + onSubmit: (data: InputVar, moreInfo?: MoreInfo) => void initialData?: InputVar } @@ -23,9 +24,9 @@ const InputFieldEditor = ({ const { t } = useTranslation() const formData = convertToInputFieldFormData(initialData) - const handleSubmit = useCallback((value: FormData) => { + const handleSubmit = useCallback((value: FormData, moreInfo?: MoreInfo) => { const inputFieldData = convertFormDataToINputField(value) - onSubmit(inputFieldData) + onSubmit(inputFieldData, moreInfo) onClose() }, [onSubmit, onClose]) 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 080aca33e8..288b18eb8c 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 @@ -18,13 +18,15 @@ import ActionButton from '@/app/components/base/action-button' type FieldItemProps = { readonly?: boolean payload: InputVar + index: number onClickEdit: (id: string) => void - onRemove: (id: string) => void + onRemove: (index: number) => void } const FieldItem = ({ readonly, payload, + index, onClickEdit, onRemove, }: FieldItemProps) => { @@ -40,8 +42,8 @@ const FieldItem = ({ const handleRemove = useCallback(() => { if (readonly) return - onRemove(payload.variable) - }, [onRemove, payload.variable, readonly]) + onRemove(index) + }, [index, onRemove, readonly]) return (
void - onRemoveField: (id: string) => void + onRemoveField: (index: number) => void onEditField: (id: string) => void readonly?: boolean } @@ -46,6 +46,7 @@ const FieldListContainer = ({ {inputFields?.map((item, index) => ( void, + nodeId: string, ) => { const [inputFields, setInputFields] = useState(initialInputFields) const inputFieldsRef = useRef(inputFields) + const [removedVar, setRemovedVar] = useState([]) + const [removedIndex, setRemoveIndex] = useState(0) + + const { handleOutVarRenameChange, isVarUsedInNodes, removeUsedVarInNodes } = useWorkflow() + + const [isShowRemoveVarConfirm, { + setTrue: showRemoveVarConfirm, + setFalse: hideRemoveVarConfirm, + }] = useBoolean(false) + const handleInputFieldsChange = useCallback((newInputFields: InputVar[]) => { setInputFields(newInputFields) inputFieldsRef.current = newInputFields @@ -38,12 +53,27 @@ export const useFieldList = ( setEditingField(undefined) }, []) - const handleRemoveField = useCallback((id: string) => { - const newInputFields = inputFieldsRef.current.filter(field => field.variable !== id) + const handleRemoveField = useCallback((index: number) => { + const itemToRemove = inputFieldsRef.current[index] + // Check if the variable is used in other nodes + if (isVarUsedInNodes([nodeId, itemToRemove.variable || ''])) { + showRemoveVarConfirm() + setRemovedVar([nodeId, itemToRemove.variable || '']) + setRemoveIndex(index as number) + return + } + const newInputFields = inputFieldsRef.current.splice(index, 1) handleInputFieldsChange(newInputFields) - }, [handleInputFieldsChange]) + }, [handleInputFieldsChange, isVarUsedInNodes, nodeId, showRemoveVarConfirm]) - const handleSubmitField = useCallback((data: InputVar) => { + const onRemoveVarConfirm = useCallback(() => { + const newInputFields = inputFieldsRef.current.splice(removedIndex, 1) + handleInputFieldsChange(newInputFields) + removeUsedVarInNodes(removedVar) + hideRemoveVarConfirm() + }, [removedIndex, handleInputFieldsChange, removeUsedVarInNodes, removedVar, hideRemoveVarConfirm]) + + const handleSubmitField = useCallback((data: InputVar, moreInfo?: MoreInfo) => { const newInputFields = produce(inputFieldsRef.current, (draft) => { const currentIndex = draft.findIndex(field => field.variable === data.variable) if (currentIndex === -1) { @@ -53,7 +83,10 @@ export const useFieldList = ( draft[currentIndex] = data }) handleInputFieldsChange(newInputFields) - }, [handleInputFieldsChange]) + // Update variable name in nodes if it has changed + if (moreInfo?.type === ChangeType.changeVarName) + handleOutVarRenameChange(nodeId, [nodeId, moreInfo.payload?.beforeKey || ''], [nodeId, moreInfo.payload?.afterKey || '']) + }, [handleInputFieldsChange, handleOutVarRenameChange, nodeId]) return { inputFields, @@ -65,5 +98,8 @@ export const useFieldList = ( showInputFieldEditor, handleOpenInputFieldEditor, handleCancelInputFieldEditor, + isShowRemoveVarConfirm, + hideRemoveVarConfirm, + onRemoveVarConfirm, } } diff --git a/web/app/components/rag-pipeline/components/input-field/field-list/index.tsx b/web/app/components/rag-pipeline/components/input-field/field-list/index.tsx index 4681b5e45e..0c0fb697b8 100644 --- a/web/app/components/rag-pipeline/components/input-field/field-list/index.tsx +++ b/web/app/components/rag-pipeline/components/input-field/field-list/index.tsx @@ -6,6 +6,7 @@ import type { InputVar } from '@/models/pipeline' import ActionButton from '@/app/components/base/action-button' import { useFieldList } from './hooks' import FieldListContainer from './field-list-container' +import RemoveEffectVarConfirm from '@/app/components/workflow/nodes/_base/components/remove-effect-var-confirm' type FieldListProps = { nodeId: string @@ -37,7 +38,10 @@ const FieldList = ({ handleOpenInputFieldEditor, showInputFieldEditor, editingField, - } = useFieldList(initialInputFields, onInputFieldsChange) + isShowRemoveVarConfirm, + hideRemoveVarConfirm, + onRemoveVarConfirm, + } = useFieldList(initialInputFields, onInputFieldsChange, nodeId) return (
@@ -70,6 +74,11 @@ const FieldList = ({ onClose={handleCancelInputFieldEditor} /> )} +
) } diff --git a/web/app/components/workflow/nodes/data-source/panel.tsx b/web/app/components/workflow/nodes/data-source/panel.tsx index c5f738756b..64b9ee2b3c 100644 --- a/web/app/components/workflow/nodes/data-source/panel.tsx +++ b/web/app/components/workflow/nodes/data-source/panel.tsx @@ -37,7 +37,7 @@ const Panel: FC> = ({ id, data }) => { editingField, handleSubmitField, handleCancelInputFieldEditor, - } = useFieldList(variables, handleInputFieldVariablesChange) + } = useFieldList(variables, handleInputFieldVariablesChange, id) return (