129 lines
4.1 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 {
useMemo,
} from 'react'
import { useTranslation } from 'react-i18next'
2025-04-22 16:46:33 +08:00
import { memo } from 'react'
import type { DataSourceNodeType } from './types'
2025-05-23 11:50:36 +08:00
import { CollectionType } from '@/app/components/tools/types'
2025-04-22 16:46:33 +08:00
import type { NodePanelProps } from '@/app/components/workflow/types'
2025-05-23 11:50:36 +08:00
import {
Field,
GroupWithBox,
} 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'
import StructureOutputItem from '@/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/show'
2025-05-23 11:50:36 +08:00
import TagInput from '@/app/components/base/tag-input'
2025-05-23 10:46:28 +08:00
import { Type } from '../llm/types'
2025-05-23 11:50:36 +08:00
import { useConfig } from './hooks/use-config'
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-23 11:50:36 +08:00
const {
output_schema = {},
provider_id,
provider_type,
fileExtensions = [],
} = data
const { handleFileExtensionsChange } = useConfig(id)
2025-05-23 10:46:28 +08:00
const outputSchema = useMemo(() => {
const res: any[] = []
if (!output_schema)
return []
Object.keys(output_schema.properties).forEach((outputKey) => {
const output = output_schema.properties[outputKey]
const type = output.type
if (type === 'object') {
res.push({
name: outputKey,
value: output,
})
}
else {
res.push({
name: outputKey,
type: output.type === 'array'
? `Array[${output.items?.type.slice(0, 1).toLocaleUpperCase()}${output.items?.type.slice(1)}]`
: `${output.type.slice(0, 1).toLocaleUpperCase()}${output.type.slice(1)}`,
description: output.description,
})
}
})
return res
}, [output_schema])
const hasObjectOutput = useMemo(() => {
if (!output_schema)
return false
const properties = output_schema.properties
return Object.keys(properties).some(key => properties[key].type === 'object')
}, [output_schema])
2025-04-22 16:46:33 +08:00
return (
2025-05-23 10:46:28 +08:00
<div >
2025-05-23 11:50:36 +08:00
{
provider_id === 'langgenius/file/file' && provider_type === CollectionType.datasource && (
<GroupWithBox boxProps={{ withBorderBottom: true }}>
<Field
fieldTitleProps={{
title: 'supported file formats',
}}
>
<TagInput
items={fileExtensions}
onChange={handleFileExtensionsChange}
placeholder='File extension, e.g. doc'
/>
</Field>
</GroupWithBox>
)
}
2025-05-23 10:46:28 +08:00
<OutputVars>
<VarItem
2025-05-23 11:50:36 +08:00
name='text'
type='string'
description={t('workflow.nodes.tool.outputVars.text')}
isIndent={hasObjectOutput}
/>
<VarItem
name='files'
type='array[file]'
description={t('workflow.nodes.tool.outputVars.files.title')}
isIndent={hasObjectOutput}
/>
<VarItem
name='json'
type='array[object]'
description={t('workflow.nodes.tool.outputVars.json')}
isIndent={hasObjectOutput}
/>
{outputSchema.map((outputItem: any) => (
<div key={outputItem.name}>
{outputItem.value?.type === 'object' ? (
<StructureOutputItem
rootClassName='code-sm-semibold text-text-secondary'
payload={{
schema: {
type: Type.object,
properties: {
[outputItem.name]: outputItem.value,
2025-05-23 10:46:28 +08:00
},
2025-05-23 11:50:36 +08:00
additionalProperties: false,
},
}} />
) : (
<VarItem
name={outputItem.name}
type={outputItem.type.toLocaleLowerCase()}
description={outputItem.description}
isIndent={hasObjectOutput}
/>
)}
</div>
))}
2025-05-23 10:46:28 +08:00
</OutputVars>
2025-04-22 16:46:33 +08:00
</div>
)
}
export default memo(Panel)