youngkingdom/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-05-03 17:08:03 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: support custom file type

Browse Source
This commit is contained in:
Joel
2024-08-06 14:59:26 +08:00
parent fd0f8f33b5
commit 77d0aac1d3
6 changed files with 75 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
web/app/components/workflow/nodes/_base/components/file-type-item.tsx
View File

@ -2,20 +2,25 @@
import type { FC } from 'react'
import React, { useCallback } from 'react'
import { useTranslation } from 'react-i18next'
import type { SupportUploadFileTypes } from '../../../types'
import { SupportUploadFileTypes } from '../../../types'
import cn from '@/utils/classnames'
import { FILE_EXTS } from '@/app/components/base/prompt-editor/constants'
import TagInput from '@/app/components/base/tag-input'
type Props = {
type: SupportUploadFileTypes.image | SupportUploadFileTypes.document | SupportUploadFileTypes.audio | SupportUploadFileTypes.video
type: SupportUploadFileTypes.image | SupportUploadFileTypes.document | SupportUploadFileTypes.audio | SupportUploadFileTypes.video | SupportUploadFileTypes.custom
selected: boolean
onSelect: (type: SupportUploadFileTypes) => void
onCustomFileTypesChange?: (customFileTypes: string[]) => void
customFileTypes?: string[]
}
const FileTypeItem: FC<Props> = ({
type,
selected,
onSelect,
customFileTypes = [],
onCustomFileTypesChange = () => { },
}) => {
const { t } = useTranslation()
@ -24,23 +29,45 @@ const FileTypeItem: FC<Props> = ({
onSelect(type)
}, [selected, onSelect, type])
const isCustomSelected = type === SupportUploadFileTypes.custom && selected
return (
<div
className={cn(
'py-2 px-3 rounded-lg bg-components-option-card-option-bg border border-components-option-card-option-border',
'rounded-lg bg-components-option-card-option-bg border border-components-option-card-option-border',
!isCustomSelected && 'py-2 px-3',
selected && 'border-[1.5px] bg-components-option-card-option-selected-bg border-components-option-card-option-selected-border',
!selected && 'cursor-pointer hover:bg-components-option-card-option-bg-hover hover:border-components-option-card-option-border-hover',
)}
onClick={handleOnSelect}
>
<div className='flex items-center'>
{/* TODO: Wait File type icon */}
<span className='shrink-0 w-4 h-4 bg-[#00B2EA]'></span>
<div className='ml-2'>
<div className='text-text-primary system-sm-medium'>{t(`appDebug.variableConig.file.${type}.name`)}</div>
<div className='mt-1 text-text-tertiary system-2xs-regular-uppercase'>{FILE_EXTS[type].join(', ')}</div>
</div>
</div>
{isCustomSelected
? (
<div>
<div className='flex items-center p-3 pb-2 border-b border-divider-subtle'>
<span className='shrink-0 w-4 h-4 bg-[#00B2EA]'></span>
<div className='ml-2 text-text-primary system-sm-medium'>{t(`appDebug.variableConig.file.${type}.name`)}</div>
</div>
<div className='p-3'>
<TagInput
items={customFileTypes}
onChange={onCustomFileTypesChange}
placeholder={t('appDebug.variableConig.file.custom.createPlaceholder')!}
/>
</div>
</div>
)
: (
<div className='flex items-center'>
{/* TODO: Wait File type icon */}
<span className='shrink-0 w-4 h-4 bg-[#00B2EA]'></span>
<div className='ml-2'>
<div className='text-text-primary system-sm-medium'>{t(`appDebug.variableConig.file.${type}.name`)}</div>
<div className='mt-1 text-text-tertiary system-2xs-regular-uppercase'>{type !== SupportUploadFileTypes.custom ? FILE_EXTS[type].join(', ') : t('appDebug.variableConig.file.custom.description')}</div>
</div>
</div>
)}
</div>
)
}

19
web/app/components/workflow/nodes/_base/components/file-upload-setting.tsx
View File

@ -43,6 +43,17 @@ const FileUploadSetting: FC<Props> = ({
}
}, [onChange, payload])
const handleCustomFileTypesChange = useCallback((customFileTypes: string[]) => {
const newPayload = produce(payload, (draft) => {
draft.customFileTypes = customFileTypes.map((v) => {
if (v.startsWith('.'))
return v
return `.${v}`
})
})
onChange(newPayload)
}, [onChange, payload])
return (
<div>
<Field
@ -59,10 +70,18 @@ const FileUploadSetting: FC<Props> = ({
/>
))
}
<FileTypeItem
type={SupportUploadFileTypes.custom}
selected={supportFileTypes === SupportUploadFileTypes.custom}
onSelect={handleSupportFileTypeChange}
customFileTypes={customFileTypes}
onCustomFileTypesChange={handleCustomFileTypesChange}
/>
</div>
</Field>
<Field
title='Upload File Types'
className='mt-4'
>
<div className='grid grid-cols-3 gap-2'>
<OptionCard