2025-06-05 16:51:19 +08:00

207 lines
6.5 KiB
TypeScript

import type { FC } from 'react'
import {
useCallback,
useMemo,
useState,
} from 'react'
import { useTranslation } from 'react-i18next'
import { memo } from 'react'
import { useBoolean } from 'ahooks'
import type { DataSourceNodeType } from './types'
import { DataSourceClassification } from './types'
import type { NodePanelProps } from '@/app/components/workflow/types'
import {
BoxGroupField,
Group,
} from '@/app/components/workflow/nodes/_base/components/layout'
import OutputVars, { VarItem } from '@/app/components/workflow/nodes/_base/components/output-vars'
import TagInput from '@/app/components/base/tag-input'
import { useNodesReadOnly } from '@/app/components/workflow/hooks'
import { useConfig } from './hooks/use-config'
import {
COMMON_OUTPUT,
FILE_OUTPUT,
WEBSITE_OUTPUT,
} from './constants'
import { useStore } from '@/app/components/workflow/store'
import Button from '@/app/components/base/button'
import ConfigCredential from './components/config-credential'
import InputVarList from '@/app/components/workflow/nodes/tool/components/input-var-list'
import { toolParametersToFormSchemas } from '@/app/components/tools/utils/to-form-schema'
import type { Var } from '@/app/components/workflow/types'
import { VarType } from '@/app/components/workflow/types'
import { useToastContext } from '@/app/components/base/toast'
import { useUpdateDataSourceCredentials } from '@/service/use-pipeline'
const Panel: FC<NodePanelProps<DataSourceNodeType>> = ({ id, data }) => {
const { t } = useTranslation()
const { notify } = useToastContext()
const { nodesReadOnly } = useNodesReadOnly()
const dataSourceList = useStore(s => s.dataSourceList)
const {
provider_type,
plugin_id,
fileExtensions = [],
datasource_parameters,
} = data
const {
handleFileExtensionsChange,
handleParametersChange,
} = useConfig(id)
const isLocalFile = provider_type === DataSourceClassification.file
const isWebsiteCrawl = provider_type === DataSourceClassification.website
const currentDataSource = dataSourceList?.find(ds => ds.plugin_id === plugin_id)
const isAuthorized = !!currentDataSource?.is_authorized
const [showAuthModal, {
setTrue: openAuthModal,
setFalse: hideAuthModal,
}] = useBoolean(false)
const currentDataSourceItem: any = currentDataSource?.tools.find(tool => tool.name === data.datasource_name)
const formSchemas = useMemo(() => {
return currentDataSourceItem ? toolParametersToFormSchemas(currentDataSourceItem.parameters) : []
}, [currentDataSourceItem])
const [currVarIndex, setCurrVarIndex] = useState(-1)
const currVarType = formSchemas[currVarIndex]?._type
const handleOnVarOpen = useCallback((index: number) => {
setCurrVarIndex(index)
}, [])
const filterVar = useCallback((varPayload: Var) => {
if (currVarType)
return varPayload.type === currVarType
return varPayload.type !== VarType.arrayFile
}, [currVarType])
const { mutateAsync } = useUpdateDataSourceCredentials()
const handleAuth = useCallback(async (value: any) => {
await mutateAsync({
provider: currentDataSource?.provider || '',
pluginId: currentDataSource?.plugin_id || '',
credentials: value,
})
notify({
type: 'success',
message: t('common.api.actionSuccess'),
})
hideAuthModal()
}, [currentDataSource, mutateAsync, notify, t, hideAuthModal])
return (
<div >
{
!isAuthorized && !showAuthModal && !isLocalFile && currentDataSource && (
<Group>
<Button
variant='primary'
className='w-full'
onClick={openAuthModal}
disabled={nodesReadOnly}
>
{t('workflow.nodes.tool.authorize')}
</Button>
</Group>
)
}
{
isAuthorized && !isLocalFile && (
<BoxGroupField
boxGroupProps={{
boxProps: { withBorderBottom: true },
}}
fieldProps={{
fieldTitleProps: {
title: t('workflow.nodes.tool.inputVars'),
},
supportCollapse: true,
}}
>
<InputVarList
readOnly={nodesReadOnly}
nodeId={id}
schema={formSchemas as any}
filterVar={filterVar}
value={datasource_parameters}
onChange={handleParametersChange}
isSupportConstantValue
onOpen={handleOnVarOpen}
/>
</BoxGroupField>
)
}
{
isLocalFile && (
<BoxGroupField
boxGroupProps={{
boxProps: { withBorderBottom: true },
}}
fieldProps={{
fieldTitleProps: {
title: t('workflow.nodes.dataSource.supportedFileFormats'),
},
}}
>
<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'
disableAdd={nodesReadOnly}
disableRemove={nodesReadOnly}
/>
</div>
</BoxGroupField>
)
}
<OutputVars>
{
COMMON_OUTPUT.map(item => (
<VarItem
name={item.name}
type={item.type}
description={item.description}
/>
))
}
{
isLocalFile && FILE_OUTPUT.map(item => (
<VarItem
name={item.name}
type={item.type}
description={item.description}
subItems={item.subItems.map(item => ({
name: item.name,
type: item.type,
description: item.description,
}))}
/>
))
}
{
isWebsiteCrawl && WEBSITE_OUTPUT.map(item => (
<VarItem
name={item.name}
type={item.type}
description={item.description}
/>
))
}
</OutputVars>
{
showAuthModal && !isLocalFile && (
<ConfigCredential
dataSourceItem={currentDataSource!}
onCancel={hideAuthModal}
onSaved={handleAuth}
isHideRemoveBtn
/>
)
}
</div>
)
}
export default memo(Panel)