feat: enhance input field management with internationalization support and improved state handling

2025-05-09 16:35:09 +08:00 · 2025-05-09 16:35:09 +08:00 · 97ec855df4
parent 7e31da7882
commit 97ec855df4
11 changed files with 207 additions and 96 deletions
--- a/web/app/components/rag-pipeline/components/input-field/editor/index.tsx
+++ b/web/app/components/rag-pipeline/components/input-field/editor/index.tsx
@ -3,20 +3,30 @@ import DialogWrapper from '../dialog-wrapper'
 import type { InputVar } from '@/app/components/workflow/types'
 import InputFieldForm from './form'
 import { convertToInputFieldFormData } from './utils'
+import { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'

 type InputFieldEditorProps = {
  show: boolean
  onClose: () => void
+  onSubmit: (data: InputVar) => void
  initialData?: InputVar
 }

 const InputFieldEditor = ({
  show,
  onClose,
+  onSubmit,
  initialData,
 }: InputFieldEditorProps) => {
+  const { t } = useTranslation()
  const formData = convertToInputFieldFormData(initialData)

+  const handleSubmit = useCallback((value: InputVar) => {
+    onSubmit(value)
+    onClose()
+  }, [onSubmit, onClose])
+
  return (
    <DialogWrapper
      show={show}
@ -26,7 +36,7 @@ const InputFieldEditor = ({
    >
      <div className='relative flex h-fit flex-col'>
        <div className='system-xl-semibold flex items-center pb-1 pl-4 pr-11 pt-3.5 text-text-primary'>
-          Add Input Field
+          {initialData ? t('datasetPipeline.inputFieldPanel.editInputField') : t('datasetPipeline.inputFieldPanel.addInputField')}
        </div>
        <button
          type='button'
@ -39,10 +49,7 @@ const InputFieldEditor = ({
          initialData={formData}
          supportFile
          onCancel={onClose}
-          onSubmit={(value) => {
-            console.log('submit', value)
-            onClose()
-          }}
+          onSubmit={handleSubmit}
        />
      </div>
    </DialogWrapper>
--- 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
@ -5,6 +5,7 @@ import cn from '@/utils/classnames'
 import { useCallback, useMemo, useState } from 'react'
 import InputFieldEditor from '../editor'
 import { ReactSortable } from 'react-sortablejs'
+import produce from 'immer'

 type FieldListProps = {
  LabelRightContent: React.ReactNode
@ -22,6 +23,8 @@ const FieldList = ({
  labelClassName,
 }: FieldListProps) => {
  const [showInputFieldEditor, setShowInputFieldEditor] = useState(false)
+  const [currentIndex, setCurrentIndex] = useState<number>(-1)
+  const [currentInputField, setCurrentInputField] = useState<InputVar>()

  const optionList = useMemo(() => {
    return inputFields.map((content, index) => {
@ -45,12 +48,23 @@ const FieldList = ({
  }, [handleInputFieldsChange, inputFields])

  const handleAddField = () => {
+    setCurrentIndex(-1)
+    setCurrentInputField(undefined)
    setShowInputFieldEditor(true)
  }

  const handleEditField = useCallback((index: number) => {
+    setCurrentIndex(index)
+    setCurrentInputField(inputFields[index])
    setShowInputFieldEditor(true)
-  }, [])
+  }, [inputFields])
+
+  const handleSubmitChange = useCallback((data: InputVar) => {
+    const newInputFields = produce(inputFields, (draft) => {
+      draft[currentIndex] = data
+    })
+    handleInputFieldsChange(newInputFields)
+  }, [currentIndex, handleInputFieldsChange, inputFields])

  const handleCloseEditor = useCallback(() => {
    setShowInputFieldEditor(false)
@ -94,6 +108,8 @@ const FieldList = ({
      {showInputFieldEditor && (
        <InputFieldEditor
          show={showInputFieldEditor}
+          initialData={currentInputField}
+          onSubmit={handleSubmitChange}
          onClose={handleCloseEditor}
        />
      )}
--- a/web/app/components/rag-pipeline/components/input-field/index.tsx
+++ b/web/app/components/rag-pipeline/components/input-field/index.tsx
@ -1,65 +1,69 @@
 import {
  memo,
  useCallback,
-  useState,
+  useMemo,
 } from 'react'
 import { useStore } from '@/app/components/workflow/store'
 import { RiCloseLine } from '@remixicon/react'
-import { Jina } from '@/app/components/base/icons/src/public/llm'
-import type { InputVar } from '@/app/components/workflow/types'
-import { InputVarType } from '@/app/components/workflow/types'
-import Tooltip from '@/app/components/base/tooltip'
+import { BlockEnum, type InputVar } from '@/app/components/workflow/types'
 import DialogWrapper from './dialog-wrapper'
 import FieldList from './field-list'
 import FooterTip from './footer-tip'
+import SharedInputs from './label-right-content/shared-inputs'
+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'

 type InputFieldDialogProps = {
  readonly?: boolean
-  initialInputFieldsMap?: Record<string, InputVar[]>
 }

 const InputFieldDialog = ({
  readonly = false,
-  initialInputFieldsMap,
 }: InputFieldDialogProps) => {
+  const { t } = useTranslation()
+  const nodes = useNodes<DataSourceNodeType>()
  const showInputFieldDialog = useStore(state => state.showInputFieldDialog)
  const setShowInputFieldDialog = useStore(state => state.setShowInputFieldDialog)
-  // TODO: delete mock data
-  const [inputFieldsMap, setInputFieldsMap] = useState(initialInputFieldsMap || {
-    jina: [{
-      variable: 'name',
-      label: 'name',
-      type: InputVarType.textInput,
-      required: true,
-      max_length: 12,
-    }, {
-      variable: 'num',
-      label: 'num',
-      type: InputVarType.number,
-      required: true,
-    }],
-    firecrawl: [{
-      variable: 'name',
-      label: 'name',
-      type: InputVarType.textInput,
-      required: true,
-      max_length: 12,
-    }],
-    shared: [{
-      variable: 'name',
-      label: 'name',
-      type: InputVarType.textInput,
-      required: true,
-      max_length: 12,
-    }],
-  })
+  const ragPipelineVariables = useStore(state => state.ragPipelineVariables)
+  const setRagPipelineVariables = useStore(state => state.setRagPipelineVariables)
+
+  const datasourceTitleMap = useMemo(() => {
+    const datasourceNameMap: Record<string, string> = {}
+    const datasourceNodes = nodes.filter(node => node.data.type === BlockEnum.DataSource)
+    datasourceNodes.forEach((node) => {
+      const { id, data } = node
+      if (data?.title)
+        datasourceNameMap[id] = data.title
+    })
+    return datasourceNameMap
+  }, [nodes])
+
+  const inputFieldsMap = useMemo(() => {
+    const inputFieldsMap: Record<string, InputVar[]> = {}
+    ragPipelineVariables?.forEach((variable) => {
+      const { nodeId, variables } = variable
+      if (nodeId)
+        inputFieldsMap[nodeId] = variables
+      else
+        inputFieldsMap.shared = variables
+    })
+    return inputFieldsMap
+  }, [ragPipelineVariables])
+
+  const datasourceKeys = useMemo(() => {
+    return Object.keys(inputFieldsMap).filter(key => key !== 'shared')
+  }, [inputFieldsMap])

  const updateInputFields = useCallback((key: string, value: InputVar[]) => {
-    setInputFieldsMap(prev => ({
-      ...prev,
-      [key]: value,
-    }))
-  }, [])
+    const newRagPipelineVariables = produce(ragPipelineVariables!, (draft) => {
+      const index = draft.findIndex(variable => variable.nodeId === key)
+      draft[index].variables = value
+    })
+    setRagPipelineVariables?.(newRagPipelineVariables)
+  }, [ragPipelineVariables, setRagPipelineVariables])

  const closePanel = useCallback(() => {
    setShowInputFieldDialog?.(false)
@ -72,9 +76,8 @@ const InputFieldDialog = ({
    >
      <div className='flex grow flex-col'>
        <div className='flex items-center p-4 pb-0'>
-          {/* // TODO： i18n */}
          <div className='system-xl-semibold grow'>
-            User input fields
+            {t('datasetPipeline.inputFieldPanel.title')}
          </div>
          <button
            type='button'
@ -85,54 +88,31 @@ const InputFieldDialog = ({
          </button>
        </div>
        <div className='system-sm-regular px-4 py-1 text-text-tertiary'>
-          User input fields are used to define and collect variables required during the pipeline execution process. Users can customize the field type and flexibly configure the input value to meet the needs of different data sources or document processing steps.
+          {t('datasetPipeline.inputFieldPanel.description')}
        </div>
        <div className='flex grow flex-col overflow-y-auto'>
-          {/* Jina Reader Field List */}
-          <FieldList
-            LabelRightContent={(
-              <div className='flex items-center gap-x-1.5'>
-                <div className='flex size-5 items-center justify-center rounded-md border-[0.5px] border-components-panel-border-subtle bg-background-default'>
-                  <Jina className='size-3.5' />
-                </div>
-                <span className='system-sm-medium text-text-secondary'>Jina Reader</span>
-              </div>
-            )}
-            inputFields={inputFieldsMap.jina}
-            readonly={readonly}
-            labelClassName='pt-2 pb-1'
-            handleInputFieldsChange={updateInputFields.bind(null, 'jina')}
-          />
-          {/* Firecrawl Field List */}
-          <FieldList
-            LabelRightContent={(
-              <div className='flex items-center gap-x-1.5'>
-                <div className='flex size-5 items-center justify-center rounded-md border-[0.5px] border-components-panel-border-subtle bg-background-default'>
-                  <span className='text-[14px] leading-[14px]'>🔥</span>
-                </div>
-                <span className='system-sm-medium text-text-secondary'>Firecrawl</span>
-              </div>
-            )}
-            inputFields={inputFieldsMap.firecrawl}
-            readonly={readonly}
-            labelClassName='pt-2 pb-1'
-            handleInputFieldsChange={updateInputFields.bind(null, 'firecrawl')}
-          />
+          {/* Datasources Inputs */}
+          {
+            datasourceKeys.map((key) => {
+              const inputFields = inputFieldsMap[key] || []
+              return (
+                <FieldList
+                  LabelRightContent={<Datasource title={datasourceTitleMap[key]} />}
+                  inputFields={inputFields}
+                  readonly={readonly}
+                  labelClassName='pt-2 pb-1'
+                  handleInputFieldsChange={updateInputFields.bind(null, key)}
+                />
+              )
+            })
+          }
          {/* Shared Inputs */}
          <FieldList
-            LabelRightContent={(
-              <div className='flex items-center gap-x-1'>
-                <span className='system-sm-medium text-text-secondary'>SHARED INPUTS</span>
-                <Tooltip
-                  popupContent='Shared Inputs are available to all downstream nodes across data sources. For example, variables like delimiter and maximum chunk length can be uniformly applied when processing documents from multiple sources.'
-                  popupClassName='!w-[300px]'
-                />
-              </div>
-            )}
-            inputFields={inputFieldsMap.shared}
+            LabelRightContent={<SharedInputs />}
+            inputFields={inputFieldsMap.shared || []}
            readonly={readonly}
            labelClassName='pt-1 pb-2'
-            handleInputFieldsChange={updateInputFields.bind(null, 'shared')}
+            handleInputFieldsChange={updateInputFields.bind(null, '')}
          />
        </div>
        <FooterTip />
--- a/web/app/components/rag-pipeline/components/input-field/label-right-content/datasource.tsx
+++ b/web/app/components/rag-pipeline/components/input-field/label-right-content/datasource.tsx
@ -0,0 +1,21 @@
+import React from 'react'
+import { RiDatabase2Fill } from '@remixicon/react'
+
+type DatasourceProps = {
+  title: string
+}
+
+const Datasource = ({
+  title,
+}: DatasourceProps) => {
+  return (
+    <div className='flex items-center gap-x-1.5'>
+      <div className='flex size-5 items-center justify-center rounded-md border-[0.5px] border-components-panel-border-subtle bg-background-default'>
+        <RiDatabase2Fill className='size-3.5 text-text-secondary' />
+      </div>
+      <span className='system-sm-medium text-text-secondary'>{title}</span>
+    </div>
+  )
+}
+
+export default React.memo(Datasource)
--- a/web/app/components/rag-pipeline/components/input-field/label-right-content/shared-inputs.tsx
+++ b/web/app/components/rag-pipeline/components/input-field/label-right-content/shared-inputs.tsx
@ -0,0 +1,21 @@
+import Tooltip from '@/app/components/base/tooltip'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+
+const SharedInputs = () => {
+  const { t } = useTranslation()
+
+  return (
+    <div className='flex items-center gap-x-1'>
+      <span className='system-sm-semibold-uppercase text-text-secondary'>
+        {t('datasetPipeline.inputFieldPanel.sharedInputs.title')}
+      </span>
+      <Tooltip
+        popupContent={t('datasetPipeline.inputFieldPanel.sharedInputs.tooltip')}
+        popupClassName='!w-[300px]'
+      />
+    </div>
+  )
+}
+
+export default React.memo(SharedInputs)
--- a/web/app/components/rag-pipeline/components/panel/test-run/index.tsx
+++ b/web/app/components/rag-pipeline/components/panel/test-run/index.tsx
@ -128,7 +128,7 @@ const TestRunPanel = () => {

  const { handleRun } = useWorkflowRun()

-  const handleProcess = useCallback(() => {
+  const handleProcess = useCallback((data: Record<string, any>) => {
    const datasourceInfo: Record<string, any> = {}
    if (datasource.type === DataSourceType.FILE)
      datasourceInfo.fileId = fileList.map(file => file.fileID)
@ -145,8 +145,9 @@ const TestRunPanel = () => {
      datasourceInfo.jobId = websiteCrawlJobId
      datasourceInfo.result = websitePages
    }
+    // todo: TBD
    handleRun({
-      inputs: {},
+      inputs: data,
      datasource_type: datasource,
      datasource_info: datasourceInfo,
    })
--- a/web/app/components/rag-pipeline/components/rag-pipeline-header/input-field-button.tsx
+++ b/web/app/components/rag-pipeline/components/rag-pipeline-header/input-field-button.tsx
@ -2,8 +2,10 @@ import Button from '@/app/components/base/button'
 import { InputField } from '@/app/components/base/icons/src/vender/pipeline'
 import { useStore } from '@/app/components/workflow/store'
 import { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'

 const InputFieldButton = () => {
+  const { t } = useTranslation()
  const setShowInputFieldDialog = useStore(state => state.setShowInputFieldDialog)
  const handleClick = useCallback(() => {
    setShowInputFieldDialog?.(true)
@ -16,8 +18,7 @@ const InputFieldButton = () => {
      onClick={handleClick}
    >
      <InputField className='h-4 w-4' />
-      {/* // TODO: i18n */}
-      <span className='px-0.5'>Input Field</span>
+      <span className='px-0.5'>{t('datasetPipeline.inputField')}</span>
    </Button>
  )
 }
--- a/web/app/components/rag-pipeline/store/index.ts
+++ b/web/app/components/rag-pipeline/store/index.ts
@ -1,4 +1,6 @@
+import type { RAGPipelineVariables } from '@/models/pipeline'
 import type { StateCreator } from 'zustand'
+import { InputVarType } from '../../workflow/types'

 export type RagPipelineSliceShape = {
  pipelineId: string
@ -6,6 +8,8 @@ export type RagPipelineSliceShape = {
  setShowInputFieldDialog: (showInputFieldPanel: boolean) => void
  nodesDefaultConfigs: Record<string, any>
  setNodesDefaultConfigs: (nodesDefaultConfigs: Record<string, any>) => void
+  ragPipelineVariables: RAGPipelineVariables
+  setRagPipelineVariables: (ragPipelineVariables: RAGPipelineVariables) => void
 }

 export type CreateRagPipelineSliceSlice = StateCreator<RagPipelineSliceShape>
@ -15,4 +19,35 @@ export const createRagPipelineSliceSlice: StateCreator<RagPipelineSliceShape> =
  setShowInputFieldDialog: showInputFieldDialog => set(() => ({ showInputFieldDialog })),
  nodesDefaultConfigs: {},
  setNodesDefaultConfigs: nodesDefaultConfigs => set(() => ({ nodesDefaultConfigs })),
+  ragPipelineVariables: [{
+    // TODO: delete mock data
+    nodeId: '123',
+    variables: [{
+      variable: 'name',
+      label: 'name',
+      type: InputVarType.textInput,
+      required: true,
+      max_length: 12,
+    }, {
+        variable: 'num',
+        label: 'num',
+        type: InputVarType.number,
+        required: true,
+      }],
+  }, {
+      nodeId: '',
+      variables: [{
+        variable: 'name',
+        label: 'name',
+        type: InputVarType.textInput,
+        required: true,
+        max_length: 12,
+      }, {
+        variable: 'num',
+        label: 'num',
+        type: InputVarType.number,
+        required: true,
+      }],
+    }],
+  setRagPipelineVariables: (ragPipelineVariables: RAGPipelineVariables) => set(() => ({ ragPipelineVariables })),
 })
--- a/web/i18n/en-US/dataset-pipeline.ts
+++ b/web/i18n/en-US/dataset-pipeline.ts
@ -55,6 +55,17 @@ const translation = {
      localFiles: 'Local Files',
    },
  },
+  inputField: 'Input Field',
+  inputFieldPanel: {
+    title: 'User Input Fields',
+    description: 'User input fields are used to define and collect variables required during the pipeline execution process. Users can customize the field type and flexibly configure the input value to meet the needs of different data sources or document processing steps.',
+    sharedInputs: {
+      title: 'Shared Inputs',
+      tooltip: 'Shared Inputs are available to all downstream nodes across data sources. For example, variables like delimiter and maximum chunk length can be uniformly applied when processing documents from multiple sources.',
+    },
+    addInputField: 'Add Input Field',
+    editInputField: 'Edit Input Field',
+  },
 }

 export default translation
--- a/web/i18n/zh-Hans/dataset-pipeline.ts
+++ b/web/i18n/zh-Hans/dataset-pipeline.ts
@ -54,6 +54,17 @@ const translation = {
    dataSource: {
      localFiles: '本地文件',
    },
+    inputField: '输入字段',
+    inputFieldPanel: {
+      title: '用户输入字段',
+      description: '用户输入字段用于定义和收集流水线执行过程中所需的变量，用户可以自定义字段类型，并灵活配置输入，以满足不同数据源或文档处理的需求。',
+      sharedInputs: {
+        title: '共享输入',
+        tooltip: '共享输入可被数据源中的所有下游节点使用。例如，在处理来自多个来源的文档时，delimiter（分隔符）和 maximum chunk length（最大分块长度）等变量可以统一应用。',
+      },
+      addInputField: '添加输入字段',
+      editInputField: '编辑输入字段',
+    },
  },
 }

--- a/web/models/pipeline.ts
+++ b/web/models/pipeline.ts
@ -1,4 +1,4 @@
-import type { InputVarType } from '@/app/components/workflow/types'
+import type { InputVar, InputVarType } from '@/app/components/workflow/types'
 import type { DSLImportMode, DSLImportStatus } from './app'
 import type { ChunkingMode, IconInfo } from './datasets'
 import type { Dependency } from '@/app/components/plugins/types'
@ -85,3 +85,10 @@ export type Variables = {
 export type PipelineProcessingParamsResponse = {
  variables: Variables[]
 }
+
+export type RAGPipelineVariable = InputVar
+
+export type RAGPipelineVariables = Array<{
+  nodeId: string
+  variables: RAGPipelineVariable[]
+}>