mirror of
https://github.com/langgenius/dify.git
synced 2025-07-15 13:14:44 +00:00
207 lines
6.5 KiB
TypeScript
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)
|