2025-04-22 16:46:33 +08:00
|
|
|
import type { FC } from 'react'
|
2025-05-23 10:46:28 +08:00
|
|
|
import { useTranslation } from 'react-i18next'
|
2025-04-22 16:46:33 +08:00
|
|
|
import { memo } from 'react'
|
2025-05-27 17:42:02 +08:00
|
|
|
import { RiAddLine } from '@remixicon/react'
|
2025-04-22 16:46:33 +08:00
|
|
|
import type { DataSourceNodeType } from './types'
|
|
|
|
import type { NodePanelProps } from '@/app/components/workflow/types'
|
2025-05-23 16:27:19 +08:00
|
|
|
import { BoxGroupField } from '@/app/components/workflow/nodes/_base/components/layout'
|
2025-05-23 10:46:28 +08:00
|
|
|
import OutputVars, { VarItem } from '@/app/components/workflow/nodes/_base/components/output-vars'
|
2025-05-23 11:50:36 +08:00
|
|
|
import TagInput from '@/app/components/base/tag-input'
|
2025-05-27 17:42:02 +08:00
|
|
|
import FieldList from '@/app/components/rag-pipeline/components/input-field/field-list/field-list-container'
|
|
|
|
import { useFieldList } from '@/app/components/rag-pipeline/components/input-field/field-list/hooks'
|
|
|
|
import InputFieldEditor from '@/app/components/rag-pipeline/components/input-field/editor'
|
|
|
|
import { useNodesReadOnly } from '@/app/components/workflow/hooks'
|
2025-05-23 11:50:36 +08:00
|
|
|
import { useConfig } from './hooks/use-config'
|
2025-05-23 18:19:01 +08:00
|
|
|
import { OUTPUT_VARIABLES_MAP } from './constants'
|
2025-05-27 17:42:02 +08:00
|
|
|
import ActionButton from '@/app/components/base/action-button'
|
2025-05-23 10:46:28 +08:00
|
|
|
|
2025-05-23 11:50:36 +08:00
|
|
|
const Panel: FC<NodePanelProps<DataSourceNodeType>> = ({ id, data }) => {
|
2025-05-23 10:46:28 +08:00
|
|
|
const { t } = useTranslation()
|
2025-05-27 17:42:02 +08:00
|
|
|
const { nodesReadOnly } = useNodesReadOnly()
|
2025-05-23 11:50:36 +08:00
|
|
|
const {
|
2025-05-27 17:42:02 +08:00
|
|
|
variables,
|
2025-05-23 11:50:36 +08:00
|
|
|
provider_type,
|
|
|
|
fileExtensions = [],
|
|
|
|
} = data
|
2025-05-27 17:42:02 +08:00
|
|
|
const {
|
|
|
|
handleInputFieldVariablesChange,
|
|
|
|
handleFileExtensionsChange,
|
|
|
|
} = useConfig(id)
|
2025-05-26 17:47:03 +08:00
|
|
|
const isLocalFile = provider_type === 'local_file'
|
2025-05-27 17:42:02 +08:00
|
|
|
const {
|
|
|
|
inputFields,
|
|
|
|
handleListSortChange,
|
|
|
|
handleRemoveField,
|
|
|
|
handleOpenInputFieldEditor,
|
|
|
|
showInputFieldEditor,
|
|
|
|
editingField,
|
|
|
|
handleSubmitField,
|
|
|
|
handleCancelInputFieldEditor,
|
2025-05-28 16:38:49 +08:00
|
|
|
} = useFieldList(variables, handleInputFieldVariablesChange, id)
|
2025-04-22 16:46:33 +08:00
|
|
|
|
|
|
|
return (
|
2025-05-23 10:46:28 +08:00
|
|
|
<div >
|
2025-05-27 17:42:02 +08:00
|
|
|
{
|
|
|
|
!isLocalFile && (
|
|
|
|
<BoxGroupField
|
|
|
|
boxGroupProps={{
|
|
|
|
boxProps: { withBorderBottom: true },
|
|
|
|
}}
|
|
|
|
fieldProps={{
|
|
|
|
fieldTitleProps: {
|
|
|
|
title: t('workflow.nodes.common.inputVars'),
|
|
|
|
operation: (
|
|
|
|
<ActionButton
|
|
|
|
onClick={(e) => {
|
|
|
|
e.stopPropagation()
|
|
|
|
handleOpenInputFieldEditor()
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
<RiAddLine className='h-4 w-4' />
|
|
|
|
</ActionButton>
|
|
|
|
),
|
|
|
|
},
|
|
|
|
supportCollapse: true,
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
<FieldList
|
|
|
|
inputFields={inputFields}
|
|
|
|
readonly={nodesReadOnly}
|
|
|
|
onListSortChange={handleListSortChange}
|
|
|
|
onRemoveField={handleRemoveField}
|
|
|
|
onEditField={handleOpenInputFieldEditor}
|
|
|
|
/>
|
|
|
|
</BoxGroupField>
|
|
|
|
)
|
|
|
|
}
|
2025-05-23 11:50:36 +08:00
|
|
|
{
|
2025-05-23 16:27:19 +08:00
|
|
|
isLocalFile && (
|
|
|
|
<BoxGroupField
|
|
|
|
boxGroupProps={{
|
|
|
|
boxProps: { withBorderBottom: true },
|
|
|
|
}}
|
|
|
|
fieldProps={{
|
|
|
|
fieldTitleProps: {
|
2025-05-23 14:25:38 +08:00
|
|
|
title: t('workflow.nodes.dataSource.supportedFileFormats'),
|
2025-05-23 16:27:19 +08:00
|
|
|
},
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
<div className='rounded-lg bg-components-input-bg-normal p-1 pt-0'>
|
|
|
|
<TagInput
|
|
|
|
items={fileExtensions}
|
|
|
|
onChange={handleFileExtensionsChange}
|
|
|
|
placeholder={t('workflow.nodes.dataSource.supportedFileFormatsPlaceholder')}
|
|
|
|
inputClassName='bg-transparent'
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</BoxGroupField>
|
2025-05-23 11:50:36 +08:00
|
|
|
)
|
|
|
|
}
|
2025-05-23 10:46:28 +08:00
|
|
|
<OutputVars>
|
|
|
|
<VarItem
|
2025-05-23 18:19:01 +08:00
|
|
|
name={OUTPUT_VARIABLES_MAP.datasource_type.name}
|
|
|
|
type={OUTPUT_VARIABLES_MAP.datasource_type.type}
|
|
|
|
description={OUTPUT_VARIABLES_MAP.datasource_type.description}
|
2025-05-23 11:50:36 +08:00
|
|
|
/>
|
2025-05-23 16:27:19 +08:00
|
|
|
{
|
|
|
|
isLocalFile && (
|
|
|
|
<VarItem
|
2025-05-23 18:19:01 +08:00
|
|
|
name={OUTPUT_VARIABLES_MAP.file.name}
|
|
|
|
type={OUTPUT_VARIABLES_MAP.file.type}
|
|
|
|
description={OUTPUT_VARIABLES_MAP.file.description}
|
2025-05-26 15:57:34 +08:00
|
|
|
subItems={OUTPUT_VARIABLES_MAP.file.subItems.map(item => ({
|
|
|
|
name: item.name,
|
|
|
|
type: item.type,
|
|
|
|
description: item.description,
|
|
|
|
}))}
|
2025-05-23 16:27:19 +08:00
|
|
|
/>
|
|
|
|
)
|
|
|
|
}
|
2025-05-23 10:46:28 +08:00
|
|
|
</OutputVars>
|
2025-05-27 17:42:02 +08:00
|
|
|
{showInputFieldEditor && (
|
|
|
|
<InputFieldEditor
|
|
|
|
show={showInputFieldEditor}
|
|
|
|
initialData={editingField}
|
|
|
|
onSubmit={handleSubmitField}
|
|
|
|
onClose={handleCancelInputFieldEditor}
|
|
|
|
/>
|
|
|
|
)}
|
2025-04-22 16:46:33 +08:00
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
export default memo(Panel)
|