AI/dify
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/langgenius/dify.git synced 2025-08-19 00:05:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: change to new start file struct

Browse Source
This commit is contained in:
Joel 2024-08-27 16:37:15 +08:00
parent e20019f6e9
commit ec1bfdc723
5 changed files with 71 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
web/app/components/app/configuration/config-var/config-modal/index.tsx
View File

@ -3,6 +3,7 @@ import type { FC } from 'react'
import React, { useCallback, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { useContext } from 'use-context-selector'
import produce from 'immer'
import ModalFoot from '../modal-foot'
import ConfigSelect from '../config-select'
import ConfigString from '../config-string'
@ -17,6 +18,8 @@ import Modal from '@/app/components/base/modal'
import { ChangeType, InputVarType } from '@/app/components/workflow/types'
import FileUploadSetting from '@/app/components/workflow/nodes/_base/components/file-upload-setting'
import Checkbox from '@/app/components/base/checkbox'
import { DEFAULT_FILE_UPLOAD_SETTING } from '@/app/components/workflow/constants'
import { DEFAULT_VALUE_MAX_LEN } from '@/config'
const TEXT_MAX_LENGTH = 256
@ -44,8 +47,8 @@ const ConfigModal: FC<IConfigModalProps> = ({
const { type, label, variable, options, max_length } = tempPayload
const isStringInput = type === InputVarType.textInput || type === InputVarType.paragraph
const checkVariableName = useCallback((value: string) => {
const { isValid, errorMessageKey } = checkKeys([value], false)
const checkVariableName = useCallback((value: string, canBeEmpty?: boolean) => {
const { isValid, errorMessageKey } = checkKeys([value], canBeEmpty)
if (!isValid) {
Toast.notify({
type: 'error',
@ -68,9 +71,28 @@ const ConfigModal: FC<IConfigModalProps> = ({
}
}, [])
const handleTypeChange = useCallback((type: InputVarType) => {
return () => {
const newPayload = produce(tempPayload, (draft) => {
draft.type = type
if ([InputVarType.singleFile, InputVarType.multiFiles].includes(type)) {
(Object.keys(DEFAULT_FILE_UPLOAD_SETTING)).forEach((key) => {
if (key !== 'max_length')
(draft as any)[key] = (DEFAULT_FILE_UPLOAD_SETTING as any)[key]
})
if (type === InputVarType.multiFiles)
draft.max_length = DEFAULT_FILE_UPLOAD_SETTING.max_length
}
if (type === InputVarType.paragraph)
draft.max_length = DEFAULT_VALUE_MAX_LEN
})
setTempPayload(newPayload)
}
}, [tempPayload])
const handleVarKeyBlur = useCallback((e: any) => {
const varName = e.target.value
if (!checkVariableName(varName) || tempPayload.label)
if (!checkVariableName(varName, true) || tempPayload.label)
return
setTempPayload((prev) => {
@ -145,13 +167,13 @@ const ConfigModal: FC<IConfigModalProps> = ({
<Field title={t('appDebug.variableConig.fieldType')}>
<div className='grid grid-cols-3 gap-2'>
<SelectTypeItem type={InputVarType.textInput} selected={type === InputVarType.textInput} onClick={() => handlePayloadChange('type')(InputVarType.textInput)} />
<SelectTypeItem type={InputVarType.paragraph} selected={type === InputVarType.paragraph} onClick={() => handlePayloadChange('type')(InputVarType.paragraph)} />
<SelectTypeItem type={InputVarType.select} selected={type === InputVarType.select} onClick={() => handlePayloadChange('type')(InputVarType.select)} />
<SelectTypeItem type={InputVarType.number} selected={type === InputVarType.number} onClick={() => handlePayloadChange('type')(InputVarType.number)} />
<SelectTypeItem type={InputVarType.textInput} selected={type === InputVarType.textInput} onClick={handleTypeChange(InputVarType.textInput)} />
<SelectTypeItem type={InputVarType.paragraph} selected={type === InputVarType.paragraph} onClick={handleTypeChange(InputVarType.paragraph)} />
<SelectTypeItem type={InputVarType.select} selected={type === InputVarType.select} onClick={handleTypeChange(InputVarType.select)} />
<SelectTypeItem type={InputVarType.number} selected={type === InputVarType.number} onClick={handleTypeChange(InputVarType.number)} />
{supportFile && <>
<SelectTypeItem type={InputVarType.singleFile} selected={type === InputVarType.singleFile} onClick={() => handlePayloadChange('type')(InputVarType.singleFile)} />
<SelectTypeItem type={InputVarType.multiFiles} selected={type === InputVarType.multiFiles} onClick={() => handlePayloadChange('type')(InputVarType.multiFiles)} />
<SelectTypeItem type={InputVarType.singleFile} selected={type === InputVarType.singleFile} onClick={handleTypeChange(InputVarType.singleFile)} />
<SelectTypeItem type={InputVarType.multiFiles} selected={type === InputVarType.multiFiles} onClick={handleTypeChange(InputVarType.multiFiles)} />
</>}
</div>
</Field>

7
web/app/components/app/configuration/config-var/select-type-item/index.tsx
View File

@ -12,13 +12,18 @@ export type ISelectTypeItemProps = {
onClick: () => void
}
const i18nFileTypeMap: Record<string, string> = {
'file': 'single-file',
'file-list': 'multi-files',
}
const SelectTypeItem: FC<ISelectTypeItemProps> = ({
type,
selected,
onClick,
}) => {
const { t } = useTranslation()
const typeName = t(`appDebug.variableConig.${type}`)
const typeName = t(`appDebug.variableConig.${i18nFileTypeMap[type] || type}`)
return (
<div

7
web/app/components/workflow/constants.ts
View File

@ -474,6 +474,13 @@ export const FILE_STRUCT: Var[] = [
},
]
export const DEFAULT_FILE_UPLOAD_SETTING = {
allowed_file_upload_methods: ['local_file', 'remote_url'],
max_length: 5,
allowed_file_types: ['image'],
allowed_file_extensions: [],
}
export const WORKFLOW_DATA_UPDATE = 'WORKFLOW_DATA_UPDATE'
export const CUSTOM_NODE = 'custom'
export const DSL_EXPORT_CHECK = 'DSL_EXPORT_CHECK'

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

@ -25,15 +25,18 @@ const FileUploadSetting: FC<Props> = ({
const { t } = useTranslation()
const {
uploadMethod,
maxUploadNumLimit,
supportFileTypes,
customFileTypes,
allowed_file_upload_methods,
max_length,
allowed_file_types,
allowed_file_extensions,
} = payload
const handleSupportFileTypeChange = useCallback((type: SupportUploadFileTypes) => {
const newPayload = produce(payload, (draft) => {
draft.supportFileTypes = type
if (draft.allowed_file_types.includes(type))
draft.allowed_file_types = draft.allowed_file_types.filter(v => v !== type)
else
draft.allowed_file_types.push(type)
})
onChange(newPayload)
}, [onChange, payload])
@ -41,7 +44,10 @@ const FileUploadSetting: FC<Props> = ({
const handleUploadMethodChange = useCallback((method: TransferMethod) => {
return () => {
const newPayload = produce(payload, (draft) => {
draft.uploadMethod = method
if (method === TransferMethod.all)
draft.allowed_file_upload_methods = [TransferMethod.local_file, TransferMethod.remote_url]
else
draft.allowed_file_upload_methods = [method]
})
onChange(newPayload)
}
@ -49,7 +55,7 @@ const FileUploadSetting: FC<Props> = ({
const handleCustomFileTypesChange = useCallback((customFileTypes: string[]) => {
const newPayload = produce(payload, (draft) => {
draft.customFileTypes = customFileTypes.map((v) => {
draft.allowed_file_extensions = customFileTypes.map((v) => {
if (v.startsWith('.'))
return v
return `.${v}`
@ -60,7 +66,7 @@ const FileUploadSetting: FC<Props> = ({
const handleMaxUploadNumLimitChange = useCallback((value: number) => {
const newPayload = produce(payload, (draft) => {
draft.maxUploadNumLimit = value
draft.max_length = value
})
onChange(newPayload)
}, [onChange, payload])
@ -76,16 +82,16 @@ const FileUploadSetting: FC<Props> = ({
<FileTypeItem
key={type}
type={type as SupportUploadFileTypes.image | SupportUploadFileTypes.document | SupportUploadFileTypes.audio | SupportUploadFileTypes.video}
selected={supportFileTypes === type}
selected={allowed_file_types.includes(type)}
onSelect={handleSupportFileTypeChange}
/>
))
}
<FileTypeItem
type={SupportUploadFileTypes.custom}
selected={supportFileTypes === SupportUploadFileTypes.custom}
selected={allowed_file_types.includes(SupportUploadFileTypes.custom)}
onSelect={handleSupportFileTypeChange}
customFileTypes={customFileTypes}
customFileTypes={allowed_file_extensions}
onCustomFileTypesChange={handleCustomFileTypesChange}
/>
</div>
@ -97,17 +103,17 @@ const FileUploadSetting: FC<Props> = ({
<div className='grid grid-cols-3 gap-2'>
<OptionCard
title='Local Upload'
selected={uploadMethod === TransferMethod.local_file}
selected={allowed_file_upload_methods.length === 1 && allowed_file_upload_methods.includes(TransferMethod.local_file)}
onSelect={handleUploadMethodChange(TransferMethod.local_file)}
/>
<OptionCard
title="URL"
selected={uploadMethod === TransferMethod.remote_url}
selected={allowed_file_upload_methods.length === 1 && allowed_file_upload_methods.includes(TransferMethod.remote_url)}
onSelect={handleUploadMethodChange(TransferMethod.remote_url)}
/>
<OptionCard
title="Both"
selected={uploadMethod === TransferMethod.all}
selected={allowed_file_upload_methods.includes(TransferMethod.local_file) && allowed_file_upload_methods.includes(TransferMethod.remote_url)}
onSelect={handleUploadMethodChange(TransferMethod.all)}
/>
</div>
@ -120,7 +126,7 @@ const FileUploadSetting: FC<Props> = ({
<div>
<div className='mb-1.5 text-text-tertiary body-xs-regular'>{t('appDebug.variableConig.maxNumberTip')}</div>
<InputNumberWithSlider
value={maxUploadNumLimit || 1}
value={max_length}
min={1}
max={10}
onChange={handleMaxUploadNumLimitChange}

12
web/app/components/workflow/types.ts
View File

@ -147,8 +147,8 @@ export enum InputVarType {
json = 'json', // obj, array
contexts = 'contexts', // knowledge retrieval
iterator = 'iterator', // iteration input
singleFile = 'single-file',
multiFiles = 'multi-files',
singleFile = 'file',
multiFiles = 'file-list',
}
export type InputVar = {
@ -362,10 +362,10 @@ export enum SupportUploadFileTypes {
}
export type UploadFileSetting = {
uploadMethod: TransferMethod
maxUploadNumLimit?: number // multiple files upload limit
supportFileTypes: SupportUploadFileTypes
customFileTypes?: string[]
allowed_file_upload_methods: TransferMethod[]
allowed_file_types: SupportUploadFileTypes[]
allowed_file_extensions?: string[]
max_length: number
}
export type VisionSetting = {