From 4a249c40b1e46d939ac61ae7ca9ce0dd3b9acde8 Mon Sep 17 00:00:00 2001 From: twwu Date: Fri, 6 Jun 2025 15:35:19 +0800 Subject: [PATCH 1/3] feat: enhance input field configurations with blur listeners and update translations for display name --- .../form/form-scenarios/input-field/field.tsx | 1 + .../input-field/editor/form/hooks.ts | 26 ++++++++++++++++--- .../editor/form/initial-fields.tsx | 5 ++++ .../website-crawl/base/crawled-result.tsx | 2 +- .../website-crawl/base/options/index.tsx | 1 + web/i18n/en-US/app-debug.ts | 1 + web/i18n/zh-Hans/app-debug.ts | 1 + 7 files changed, 32 insertions(+), 5 deletions(-) diff --git a/web/app/components/base/form/form-scenarios/input-field/field.tsx b/web/app/components/base/form/form-scenarios/input-field/field.tsx index ab16b9a482..8a9de3fc0c 100644 --- a/web/app/components/base/form/form-scenarios/input-field/field.tsx +++ b/web/app/components/base/form/form-scenarios/input-field/field.tsx @@ -50,6 +50,7 @@ const InputField = ({ return ( ( { } export const useConfigurations = (props: { + getFieldValue: (fieldName: DeepKeys) => any, setFieldValue: (fieldName: DeepKeys, value: any) => void, supportFile: boolean }) => { const { t } = useTranslation() - const { setFieldValue, supportFile } = props + const { getFieldValue, setFieldValue, supportFile } = props const handleTypeChange = useCallback((type: PipelineInputVarType) => { if ([PipelineInputVarType.singleFile, PipelineInputVarType.multiFiles].includes(type)) { @@ -84,6 +85,17 @@ export const useConfigurations = (props: { setFieldValue('maxLength', DEFAULT_VALUE_MAX_LEN) }, [setFieldValue]) + const handleVariableNameBlur = useCallback((value: string) => { + if (!value) + return + setFieldValue('label', value) + }, [setFieldValue]) + + const handleDisplayNameBlur = useCallback((value: string) => { + if (!value) + setFieldValue('label', getFieldValue('variable')) + }, [getFieldValue, setFieldValue]) + const initialConfigurations = useMemo((): InputFieldConfiguration[] => { return [{ type: InputFieldType.inputTypeSelect, @@ -101,13 +113,19 @@ export const useConfigurations = (props: { variable: 'variable', placeholder: t('appDebug.variableConfig.inputPlaceholder'), required: true, + listeners: { + onBlur: ({ value }) => handleVariableNameBlur(value), + }, showConditions: [], }, { type: InputFieldType.textInput, - label: t('appDebug.variableConfig.labelName'), + label: t('appDebug.variableConfig.displayName'), variable: 'label', placeholder: t('appDebug.variableConfig.inputPlaceholder'), - required: true, + required: false, + listeners: { + onBlur: ({ value }) => handleDisplayNameBlur(value), + }, showConditions: [], }, { type: InputFieldType.numberInput, @@ -155,7 +173,7 @@ export const useConfigurations = (props: { required: true, showConditions: [], }] - }, [handleTypeChange, supportFile, t]) + }, [t, supportFile, handleTypeChange, handleVariableNameBlur, handleDisplayNameBlur]) return initialConfigurations } diff --git a/web/app/components/rag-pipeline/components/input-field/editor/form/initial-fields.tsx b/web/app/components/rag-pipeline/components/input-field/editor/form/initial-fields.tsx index c00708ed6e..9c6a053509 100644 --- a/web/app/components/rag-pipeline/components/input-field/editor/form/initial-fields.tsx +++ b/web/app/components/rag-pipeline/components/input-field/editor/form/initial-fields.tsx @@ -16,11 +16,16 @@ const InitialFields = ({ render: function Render({ form, }) { + const getFieldValue = useCallback((fieldName: string) => { + return form.getFieldValue(fieldName) + }, [form]) + const setFieldValue = useCallback((fieldName: string, value: any) => { form.setFieldValue(fieldName, value) }, [form]) const initialConfigurations = useConfigurations({ + getFieldValue, setFieldValue, supportFile, }) diff --git a/web/app/components/rag-pipeline/components/panel/test-run/data-source/website-crawl/base/crawled-result.tsx b/web/app/components/rag-pipeline/components/panel/test-run/data-source/website-crawl/base/crawled-result.tsx index 29737b0cdd..9d5019f31e 100644 --- a/web/app/components/rag-pipeline/components/panel/test-run/data-source/website-crawl/base/crawled-result.tsx +++ b/web/app/components/rag-pipeline/components/panel/test-run/data-source/website-crawl/base/crawled-result.tsx @@ -69,7 +69,7 @@ const CrawledResult = ({ onChange={handleCheckedAll} label={isCheckAll ? t(`${I18N_PREFIX}.resetAll`) : t(`${I18N_PREFIX}.selectAll`)} /> -
+
{list.map((item, index) => ( Date: Fri, 6 Jun 2025 15:54:55 +0800 Subject: [PATCH 2/3] refactor: rename cancel editor handler and improve variable name validation in field list --- .../components/input-field/editor/index.tsx | 3 +-- .../components/input-field/field-list/hooks.ts | 18 +++++++++++++++--- .../input-field/field-list/index.tsx | 4 ++-- 3 files changed, 18 insertions(+), 7 deletions(-) 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 3d50484955..6aef4e4186 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 @@ -27,8 +27,7 @@ const InputFieldEditor = ({ const handleSubmit = useCallback((value: FormData, moreInfo?: MoreInfo) => { const inputFieldData = convertFormDataToINputField(value) onSubmit(inputFieldData, moreInfo) - onClose() - }, [onSubmit, onClose]) + }, [onSubmit]) return ( { + const handleCloseInputFieldEditor = useCallback(() => { setShowInputFieldEditor(false) + editingFieldIndex.current = -1 setEditingField(undefined) }, []) @@ -77,6 +79,15 @@ export const useFieldList = ( }, [removedIndex, handleInputFieldsChange, removeUsedVarInNodes, removedVar, hideRemoveVarConfirm]) const handleSubmitField = useCallback((data: InputVar, moreInfo?: MoreInfo) => { + const isDuplicate = inputFieldsRef.current.some(field => + field.variable === data.variable && field.variable !== editingField?.variable) + if (isDuplicate) { + Toast.notify({ + type: 'error', + message: 'Variable name already exists. Please choose a different name.', + }) + return + } const newInputFields = produce(inputFieldsRef.current, (draft) => { const currentIndex = editingFieldIndex.current if (currentIndex === -1) { @@ -89,7 +100,8 @@ export const useFieldList = ( // 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]) + handleCloseInputFieldEditor() + }, [editingField?.variable, handleCloseInputFieldEditor, handleInputFieldsChange, handleOutVarRenameChange, nodeId]) return { inputFields, @@ -100,7 +112,7 @@ export const useFieldList = ( editingField, showInputFieldEditor, handleOpenInputFieldEditor, - handleCancelInputFieldEditor, + handleCloseInputFieldEditor, 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 d01996df3d..23106c2763 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 @@ -34,7 +34,7 @@ const FieldList = ({ handleSubmitField, handleListSortChange, handleRemoveField, - handleCancelInputFieldEditor, + handleCloseInputFieldEditor, handleOpenInputFieldEditor, showInputFieldEditor, editingField, @@ -69,7 +69,7 @@ const FieldList = ({ show={showInputFieldEditor} initialData={editingField} onSubmit={handleSubmitField} - onClose={handleCancelInputFieldEditor} + onClose={handleCloseInputFieldEditor} /> )} Date: Fri, 6 Jun 2025 17:00:34 +0800 Subject: [PATCH 3/3] refactor: update website crawl handling and improve parameter naming in pipeline processing --- .../documents/create-from-pipeline/hooks.ts | 7 ++++- .../documents/create-from-pipeline/index.tsx | 27 +++++++------------ .../website-crawl/base/crawled-result.tsx | 4 +-- .../website-crawl/base/crawler.tsx | 4 +-- .../components/panel/test-run/index.tsx | 13 +++------ web/service/use-pipeline.ts | 2 +- 6 files changed, 25 insertions(+), 32 deletions(-) diff --git a/web/app/components/datasets/documents/create-from-pipeline/hooks.ts b/web/app/components/datasets/documents/create-from-pipeline/hooks.ts index 65a0f33786..15f30ed726 100644 --- a/web/app/components/datasets/documents/create-from-pipeline/hooks.ts +++ b/web/app/components/datasets/documents/create-from-pipeline/hooks.ts @@ -162,11 +162,16 @@ export const useWebsiteCrawl = () => { setCurrentWebsite(undefined) }, []) + const updataCheckedCrawlResultChange = useCallback((checkedCrawlResult: CrawlResultItem[]) => { + setWebsitePages(checkedCrawlResult) + previewWebsitePage.current = checkedCrawlResult[0] + }, []) + return { websitePages, websiteCrawlJobId, previewWebsitePage, - setWebsitePages, + updataCheckedCrawlResultChange, setWebsiteCrawlJobId, currentWebsite, updateCurrentWebsite, diff --git a/web/app/components/datasets/documents/create-from-pipeline/index.tsx b/web/app/components/datasets/documents/create-from-pipeline/index.tsx index a293697790..7e4d2988fa 100644 --- a/web/app/components/datasets/documents/create-from-pipeline/index.tsx +++ b/web/app/components/datasets/documents/create-from-pipeline/index.tsx @@ -72,9 +72,9 @@ const CreateFormPipeline = () => { } = useOnlineDocuments() const { websitePages, - websiteCrawlJobId, + // websiteCrawlJobId, // todo: Add status query previewWebsitePage, - setWebsitePages, + updataCheckedCrawlResultChange, setWebsiteCrawlJobId, currentWebsite, updateCurrentWebsite, @@ -124,13 +124,8 @@ const CreateFormPipeline = () => { } datasourceInfoList.push(documentInfo) } - if (datasource.type === DatasourceType.websiteCrawl) { - const documentInfo = { - job_id: websiteCrawlJobId, - result: previewWebsitePage.current, - } - datasourceInfoList.push(documentInfo) - } + if (datasource.type === DatasourceType.websiteCrawl) + datasourceInfoList.push(previewWebsitePage.current) await runPublishedPipeline({ pipeline_id: pipelineId!, inputs: data, @@ -143,7 +138,7 @@ const CreateFormPipeline = () => { setEstimateData((res as PublishedPipelineRunPreviewResponse).data.outputs) }, }) - }, [datasource, pipelineId, previewFile, previewOnlineDocument, previewWebsitePage, runPublishedPipeline, websiteCrawlJobId]) + }, [datasource, pipelineId, previewFile, previewOnlineDocument, previewWebsitePage, runPublishedPipeline]) const handleProcess = useCallback(async (data: Record) => { if (!datasource) @@ -176,11 +171,9 @@ const CreateFormPipeline = () => { }) } if (datasource.type === DatasourceType.websiteCrawl) { - const documentInfo = { - job_id: websiteCrawlJobId, - result: websitePages, - } - datasourceInfoList.push(documentInfo) + websitePages.forEach((websitePage) => { + datasourceInfoList.push(websitePage) + }) } await runPublishedPipeline({ pipeline_id: pipelineId!, @@ -196,7 +189,7 @@ const CreateFormPipeline = () => { handleNextStep() }, }) - }, [datasource, fileList, handleNextStep, onlineDocuments, pipelineId, runPublishedPipeline, websiteCrawlJobId, websitePages]) + }, [datasource, fileList, handleNextStep, onlineDocuments, pipelineId, runPublishedPipeline, websitePages]) const onClickProcess = useCallback(() => { isPreview.current = false @@ -285,7 +278,7 @@ const CreateFormPipeline = () => { docLink: datasource.docLink || '', }} checkedCrawlResult={websitePages} - onCheckedCrawlResultChange={setWebsitePages} + onCheckedCrawlResultChange={updataCheckedCrawlResultChange} onJobIdChange={setWebsiteCrawlJobId} onPreview={updateCurrentWebsite} /> diff --git a/web/app/components/rag-pipeline/components/panel/test-run/data-source/website-crawl/base/crawled-result.tsx b/web/app/components/rag-pipeline/components/panel/test-run/data-source/website-crawl/base/crawled-result.tsx index 9d5019f31e..0115dc5e51 100644 --- a/web/app/components/rag-pipeline/components/panel/test-run/data-source/website-crawl/base/crawled-result.tsx +++ b/web/app/components/rag-pipeline/components/panel/test-run/data-source/website-crawl/base/crawled-result.tsx @@ -62,14 +62,14 @@ const CrawledResult = ({ time: usedTime.toFixed(1), })}
-
+
-
+
{list.map((item, index) => ( (0) const pipelineId = useDatasetDetailContextWithSelector(s => s.dataset?.pipeline_id) - const usePreProcessingParams = useRef(!isInPipeline ? usePublishedPipelineProcessingParams : useDraftPipelinePreProcessingParams) + const usePreProcessingParams = useRef(!isInPipeline ? usePublishedPipelinePreProcessingParams : useDraftPipelinePreProcessingParams) const { data: paramsConfig } = usePreProcessingParams.current({ pipeline_id: pipelineId!, node_id: nodeId, diff --git a/web/app/components/rag-pipeline/components/panel/test-run/index.tsx b/web/app/components/rag-pipeline/components/panel/test-run/index.tsx index b924200922..7b59575210 100644 --- a/web/app/components/rag-pipeline/components/panel/test-run/index.tsx +++ b/web/app/components/rag-pipeline/components/panel/test-run/index.tsx @@ -40,7 +40,7 @@ const TestRunPanel = () => { } = useOnlineDocuments() const { websitePages, - websiteCrawlJobId, + // websiteCrawlJobId, // todo: Add status query setWebsitePages, setWebsiteCrawlJobId, } = useWebsiteCrawl() @@ -90,20 +90,15 @@ const TestRunPanel = () => { } datasourceInfoList.push(documentInfo) } - if (datasource.type === DatasourceType.websiteCrawl) { - const documentInfo = { - job_id: websiteCrawlJobId, - result: [websitePages[0]], - } - datasourceInfoList.push(documentInfo) - } + if (datasource.type === DatasourceType.websiteCrawl) + datasourceInfoList.push(websitePages[0]) handleRun({ inputs: data, start_node_id: datasource.nodeId, datasource_type: datasource.type, datasource_info_list: datasourceInfoList, }) - }, [datasource, fileList, handleRun, onlineDocuments, websiteCrawlJobId, websitePages]) + }, [datasource, fileList, handleRun, onlineDocuments, websitePages]) return (
({ queryKey: [NAME_SPACE, 'published-pipeline-pre-processing-params', pipeline_id, node_id], queryFn: () => { - return get(`/rag/pipelines/${pipeline_id}/workflows/published/processing/parameters`, { + return get(`/rag/pipelines/${pipeline_id}/workflows/published/pre-processing/parameters`, { params: { node_id, },