134 lines
4.4 KiB
TypeScript
Raw Normal View History

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,
} = 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)