File size: 3,077 Bytes
a8b3f00 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 |
import type { FC } from 'react'
import React from 'react'
import useSWR from 'swr'
import { useTranslation } from 'react-i18next'
import { useContext } from 'use-context-selector'
import VarReferencePicker from '../_base/components/variable/var-reference-picker'
import OutputVars, { VarItem } from '../_base/components/output-vars'
import Split from '../_base/components/split'
import { useNodeHelpLink } from '../_base/hooks/use-node-help-link'
import useConfig from './use-config'
import type { DocExtractorNodeType } from './types'
import { fetchSupportFileTypes } from '@/service/datasets'
import Field from '@/app/components/workflow/nodes/_base/components/field'
import { BlockEnum, type NodePanelProps } from '@/app/components/workflow/types'
import I18n from '@/context/i18n'
import { LanguagesSupported } from '@/i18n/language'
const i18nPrefix = 'workflow.nodes.docExtractor'
const Panel: FC<NodePanelProps<DocExtractorNodeType>> = ({
id,
data,
}) => {
const { t } = useTranslation()
const { locale } = useContext(I18n)
const link = useNodeHelpLink(BlockEnum.DocExtractor)
const { data: supportFileTypesResponse } = useSWR({ url: '/files/support-type' }, fetchSupportFileTypes)
const supportTypes = supportFileTypesResponse?.allowed_extensions || []
const supportTypesShowNames = (() => {
const extensionMap: { [key: string]: string } = {
md: 'markdown',
pptx: 'pptx',
htm: 'html',
xlsx: 'xlsx',
docx: 'docx',
}
return [...supportTypes]
.map(item => extensionMap[item] || item) // map to standardized extension
.map(item => item.toLowerCase()) // convert to lower case
.filter((item, index, self) => self.indexOf(item) === index) // remove duplicates
.join(locale !== LanguagesSupported[1] ? ', ' : '、 ')
})()
const {
readOnly,
inputs,
handleVarChanges,
filterVar,
} = useConfig(id, data)
return (
<div className='mt-2'>
<div className='px-4 pb-4 space-y-4'>
<Field
title={t(`${i18nPrefix}.inputVar`)}
>
<>
<VarReferencePicker
readonly={readOnly}
nodeId={id}
isShowNodeName
value={inputs.variable_selector || []}
onChange={handleVarChanges}
filterVar={filterVar}
typePlaceHolder='File | Array[File]'
/>
<div className='mt-1 py-0.5 text-text-tertiary body-xs-regular'>
{t(`${i18nPrefix}.supportFileTypes`, { types: supportTypesShowNames })}
<a className='text-text-accent' href={link} target='_blank'>{t(`${i18nPrefix}.learnMore`)}</a>
</div>
</>
</Field>
</div>
<Split />
<div className='px-4 pt-4 pb-2'>
<OutputVars>
<VarItem
name='text'
type={inputs.is_array_file ? 'array[string]' : 'string'}
description={t(`${i18nPrefix}.outputVars.text`)}
/>
</OutputVars>
</div>
</div>
)
}
export default React.memo(Panel)
|