opensource
/
dify
mirror of https://github.com/langgenius/dify.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

app parameters

This commit is contained in:
JzoNg 2024-11-14 21:21:50 +08:00
parent e53c4fc0ad
commit 8f14881aff
9 changed files with 362 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/app/components/base/file-uploader/file-from-link-or-local/index.tsx
View File

@ -59,7 +59,7 @@ const FileFromLinkOrLocal = ({
<PortalToFollowElemTrigger onClick={() => setOpen(v => !v)} asChild>
{trigger(open)}
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className='z-10'>
<PortalToFollowElemContent className='z-[1001]'>
<div className='p-3 w-[280px] bg-components-panel-bg-blur border-[0.5px] border-components-panel-border rounded-xl shadow-lg'>
{
showFromLink && (

56
web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx
View File

@ -18,7 +18,7 @@ import { SimpleSelect } from '@/app/components/base/select'
import Tooltip from '@/app/components/base/tooltip'
import Radio from '@/app/components/base/radio'
import ModelParameterModal from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal'
// import ToolSelector from '@/app/components/plugins/plugin-detail-panel/tool-selector'
import ToolSelector from '@/app/components/plugins/plugin-detail-panel/tool-selector'
import AppSelector from '@/app/components/plugins/plugin-detail-panel/app-selector'
type FormProps = {
@ -318,34 +318,34 @@ const Form: FC<FormProps> = ({
)
}
// if (formSchema.type === FormTypeEnum.toolSelector) {
// const {
// variable,
// label,
// required,
// } = formSchema as (CredentialFormSchemaTextInput | CredentialFormSchemaSecretInput)
if (formSchema.type === FormTypeEnum.toolSelector) {
const {
variable,
label,
required,
} = formSchema as (CredentialFormSchemaTextInput | CredentialFormSchemaSecretInput)
// return (
// <div key={variable} className={cn(itemClassName, 'py-3')}>
// <div className={cn(fieldLabelClassName, 'flex items-center py-2 system-sm-semibold text-text-secondary')}>
// {label[language] || label.en_US}
// {
// required && (
// <span className='ml-1 text-red-500'>*</span>
// )
// }
// {tooltipContent}
// </div>
// <ToolSelector
// disabled={readonly}
// value={value[variable]}
// onSelect={item => handleFormChange(variable, item as any)}
// />
// {fieldMoreInfo?.(formSchema)}
// {validating && changeKey === variable && <ValidatingTip />}
// </div>
// )
// }
return (
<div key={variable} className={cn(itemClassName, 'py-3')}>
<div className={cn(fieldLabelClassName, 'flex items-center py-2 system-sm-semibold text-text-secondary')}>
{label[language] || label.en_US}
{
required && (
<span className='ml-1 text-red-500'>*</span>
)
}
{tooltipContent}
</div>
<ToolSelector
disabled={readonly}
value={value[variable]}
onSelect={item => handleFormChange(variable, item as any)}
/>
{fieldMoreInfo?.(formSchema)}
{validating && changeKey === variable && <ValidatingTip />}
</div>
)
}
if (formSchema.type === FormTypeEnum.appSelector) {
const {

125
web/app/components/plugins/plugin-detail-panel/app-selector/app-inputs-form.tsx Normal file
View File

@ -0,0 +1,125 @@
import { useCallback } from 'react'
import { useTranslation } from 'react-i18next'
import Input from '@/app/components/base/input'
import Textarea from '@/app/components/base/textarea'
import { PortalSelect } from '@/app/components/base/select'
import { InputVarType } from '@/app/components/workflow/types'
import { FileUploaderInAttachmentWrapper } from '@/app/components/base/file-uploader'
type Props = {
inputsForms: any[]
inputs: Record<string, any>
inputsRef: any
onFormChange: (value: Record<string, any>) => void
}
const AppInputsForm = ({
inputsForms,
inputs,
inputsRef,
onFormChange,
}: Props) => {
const { t } = useTranslation()
const handleFormChange = useCallback((variable: string, value: any) => {
onFormChange({
...inputsRef.current,
[variable]: value,
})
}, [onFormChange, inputsRef])
const renderField = (form: any) => {
const {
label,
variable,
options,
} = form
if (form.type === InputVarType.textInput) {
return (
<Input
value={inputs[variable] || ''}
onChange={e => handleFormChange(variable, e.target.value)}
placeholder={label}
/>
)
}
if (form.type === InputVarType.number) {
return (
<Input
type="number"
value={inputs[variable] || ''}
onChange={e => handleFormChange(variable, e.target.value)}
placeholder={label}
/>
)
}
if (form.type === InputVarType.paragraph) {
return (
<Textarea
value={inputs[variable] || ''}
onChange={e => handleFormChange(variable, e.target.value)}
placeholder={label}
/>
)
}
if (form.type === InputVarType.select) {
return (
<PortalSelect
popupClassName="w-[356px] z-[1050]"
value={inputs[variable] || ''}
items={options.map((option: string) => ({ value: option, name: option }))}
onSelect={item => handleFormChange(variable, item.value as string)}
placeholder={label}
/>
)
}
if (form.type === InputVarType.singleFile) {
return (
<FileUploaderInAttachmentWrapper
value={inputs[variable] ? [inputs[variable]] : []}
onChange={files => handleFormChange(variable, files[0])}
fileConfig={{
allowed_file_types: form.allowed_file_types,
allowed_file_extensions: form.allowed_file_extensions,
allowed_file_upload_methods: form.allowed_file_upload_methods,
number_limits: 1,
fileUploadConfig: (form as any).fileUploadConfig,
}}
/>
)
}
if (form.type === InputVarType.multiFiles) {
return (
<FileUploaderInAttachmentWrapper
value={inputs[variable]}
onChange={files => handleFormChange(variable, files)}
fileConfig={{
allowed_file_types: form.allowed_file_types,
allowed_file_extensions: form.allowed_file_extensions,
allowed_file_upload_methods: form.allowed_file_upload_methods,
number_limits: form.max_length,
fileUploadConfig: (form as any).fileUploadConfig,
}}
/>
)
}
}
if (!inputsForms.length)
return null
return (
<div className='px-4 py-2 flex flex-col gap-4'>
{inputsForms.map(form => (
<div key={form.variable}>
<div className='h-6 mb-1 flex items-center gap-1 text-text-secondary system-sm-semibold'>
<div className='truncate'>{form.label}</div>
{!form.required && <span className='text-text-tertiary system-xs-regular'>{t('workflow.panel.optional')}</span>}
</div>
{renderField(form)}
</div>
))}
</div>
)
}
export default AppInputsForm

156
web/app/components/plugins/plugin-detail-panel/app-selector/app-inputs-panel.tsx
View File

@ -1,34 +1,178 @@
'use client'
import React from 'react'
import React, { useMemo, useRef } from 'react'
import { useTranslation } from 'react-i18next'
import Loading from '@/app/components/base/loading'
import AppInputsForm from '@/app/components/plugins/plugin-detail-panel/app-selector/app-inputs-form'
import { useAppDetail } from '@/service/use-apps'
import { useAppWorkflow } from '@/service/use-workflow'
import { useFileUploadConfig } from '@/service/use-common'
import { Resolution } from '@/types/app'
import { FILE_EXTS } from '@/app/components/base/prompt-editor/constants'
import type { App } from '@/types/app'
import type { FileUpload } from '@/app/components/base/features/types'
import { BlockEnum, InputVarType, SupportUploadFileTypes } from '@/app/components/workflow/types'
import cn from '@/utils/classnames'
type Props = {
value?: {
app_id: string
inputs: Record<string, any>
}
appDetail: App
onFormChange: (value: Record<string, any>) => void
}
const AppInputsPanel = ({
value,
appDetail,
onFormChange,
}: Props) => {
const { t } = useTranslation()
const { data: currentApp, isFetching: isLoading } = useAppDetail(appDetail.id)
const inputsRef = useRef<any>(value?.inputs || {})
const isBasicApp = appDetail.mode !== 'advanced-chat' && appDetail.mode !== 'workflow'
const { data: fileUploadConfig } = useFileUploadConfig()
const { data: currentApp, isFetching: isAppLoading } = useAppDetail(appDetail.id)
const { data: currentWorkflow, isFetching: isWorkflowLoading } = useAppWorkflow(isBasicApp ? 'empty' : appDetail.id)
const isLoading = isAppLoading || isWorkflowLoading
const inputs = []
const basicAppFileConfig = useMemo(() => {
let fileConfig: FileUpload
if (isBasicApp)
fileConfig = currentApp?.model_config?.file_upload as FileUpload
else
fileConfig = currentWorkflow?.features?.file_upload as FileUpload
return {
image: {
detail: fileConfig?.image?.detail || Resolution.high,
enabled: !!fileConfig?.image?.enabled,
number_limits: fileConfig?.image?.number_limits || 3,
transfer_methods: fileConfig?.image?.transfer_methods || ['local_file', 'remote_url'],
},
enabled: !!(fileConfig?.enabled || fileConfig?.image?.enabled),
allowed_file_types: fileConfig?.allowed_file_types || [SupportUploadFileTypes.image],
allowed_file_extensions: fileConfig?.allowed_file_extensions || [...FILE_EXTS[SupportUploadFileTypes.image]].map(ext => `.${ext}`),
allowed_file_upload_methods: fileConfig?.allowed_file_upload_methods || fileConfig?.image?.transfer_methods || ['local_file', 'remote_url'],
number_limits: fileConfig?.number_limits || fileConfig?.image?.number_limits || 3,
}
}, [currentApp?.model_config?.file_upload, currentWorkflow?.features?.file_upload, isBasicApp])
const inputFormSchema = useMemo(() => {
if (!currentApp)
return []
let inputFormSchema = []
if (isBasicApp) {
inputFormSchema = currentApp.model_config.user_input_form.filter((item: any) => !item.external_data_tool).map((item: any) => {
if (item.paragraph) {
return {
...item.paragraph,
type: 'paragraph',
required: false,
}
}
if (item.number) {
return {
...item.number,
type: 'number',
required: false,
}
}
if (item.select) {
return {
...item.select,
type: 'select',
required: false,
}
}
if (item['file-list']) {
return {
...item['file-list'],
type: 'file-list',
required: false,
fileUploadConfig,
}
}
if (item.file) {
return {
...item.file,
type: 'file',
required: false,
fileUploadConfig,
}
}
return {
...item['text-input'],
type: 'text-input',
required: false,
}
})
}
else {
const startNode = currentWorkflow?.graph.nodes.find(node => node.data.type === BlockEnum.Start) as any
inputFormSchema = startNode?.data.variables.map((variable: any) => {
if (variable.type === InputVarType.multiFiles) {
return {
...variable,
required: false,
fileUploadConfig,
}
}
if (variable.type === InputVarType.singleFile) {
return {
...variable,
required: false,
fileUploadConfig,
}
}
return {
...variable,
required: false,
}
})
}
if ((currentApp.mode === 'completion' || currentApp.mode === 'workflow') && basicAppFileConfig.enabled) {
inputFormSchema.push({
label: 'Image Upload',
variable: '#image#',
type: InputVarType.singleFile,
required: false,
...basicAppFileConfig,
fileUploadConfig,
})
}
return inputFormSchema
}, [basicAppFileConfig, currentApp, currentWorkflow, fileUploadConfig, isBasicApp])
const handleFormChange = (value: Record<string, any>) => {
inputsRef.current = value
onFormChange(value)
}
return (
<div className={cn('px-4 pb-4 rounded-b-2xl border-t border-divider-subtle')}>
<div className={cn('max-h-[240px] flex flex-col pb-4 rounded-b-2xl border-t border-divider-subtle')}>
{isLoading && <div className='pt-3'><Loading type='app' /></div>}
{!isLoading && (
<div className='mt-3 mb-2 h-6 flex items-center system-sm-semibold text-text-secondary'>{t('app.appSelector.params')}</div>
<div className='shrink-0 mt-3 mb-2 px-4 h-6 flex items-center system-sm-semibold text-text-secondary'>{t('app.appSelector.params')}</div>
)}
{!isLoading && !inputs.length && (
{!isLoading && !inputFormSchema.length && (
<div className='h-16 flex flex-col justify-center items-center'>
<div className='text-text-tertiary system-sm-regular'>{t('app.appSelector.noParams')}</div>
</div>
)}
{!isLoading && !!inputFormSchema.length && (
<div className='grow overflow-y-auto'>
<AppInputsForm
inputs={value?.inputs || {}}
inputsRef={inputsRef}
inputsForms={inputFormSchema}
onFormChange={handleFormChange}
/>
</div>
)}
</div>
)
}

27
web/app/components/plugins/plugin-detail-panel/app-selector/index.tsx
View File

@ -55,14 +55,35 @@ const AppSelector: FC<Props> = ({
}, [appList?.data, value])
const [isShowChooseApp, setIsShowChooseApp] = useState(false)
const handleSelectApp = (app: App) => {
const clearValue = app.id !== value?.app_id
const appValue = {
app_id: app.id,
inputs: value?.inputs || {},
files: value?.files || [],
inputs: clearValue ? {} : value?.inputs || {},
files: clearValue ? [] : value?.files || [],
}
onSelect(appValue)
setIsShowChooseApp(false)
}
const handleFormChange = (inputs: Record<string, any>) => {
const newFiles = inputs['#image#']
delete inputs['#image#']
const newValue = {
app_id: value?.app_id || '',
inputs,
files: newFiles ? [newFiles] : value?.files || [],
}
onSelect(newValue)
}
const formattedValue = useMemo(() => {
return {
app_id: value?.app_id || '',
inputs: {
...value?.inputs,
...(value?.files?.length ? { '#image#': value.files[0] } : {}),
},
}
}, [value])
return (
<>
@ -104,7 +125,9 @@ const AppSelector: FC<Props> = ({
{/* app inputs config panel */}
{currentAppInfo && (
<AppInputsPanel
value={formattedValue}
appDetail={currentAppInfo}
onFormChange={handleFormChange}
/>
)}
</div>

9
web/app/components/plugins/plugin-detail-panel/endpoint-modal.tsx
View File

@ -11,8 +11,6 @@ import Toast from '@/app/components/base/toast'
import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
import cn from '@/utils/classnames'
import AppSelector from '@/app/components/plugins/plugin-detail-panel/app-selector'
type Props = {
formSchemas: any
defaultValues?: any
@ -40,8 +38,6 @@ const EndpointModal: FC<Props> = ({
onSaved(tempCredential)
}
const [mockApp, setMockApp] = React.useState<any>(null)
return (
<Drawer
isOpen
@ -85,11 +81,6 @@ const EndpointModal: FC<Props> = ({
</a>)
: null}
/>
<AppSelector
disabled={false}
value={mockApp}
onSelect={setMockApp}
/>
</div>
<div className={cn('p-4 pt-0 flex justify-end')} >
<div className='flex gap-2'>

6
web/service/use-apps.ts
View File

@ -22,10 +22,6 @@ export const useInvalidateAppFullList = () => {
export const useAppDetail = (appID: string) => {
return useQuery<App>({
queryKey: [NAME_SPACE, 'detail', appID],
queryFn: () => {
if (appID === 'empty')
return Promise.resolve(undefined as unknown as App)
return get<App>(`/apps/${appID}`)
},
queryFn: () => get<App>(`/apps/${appID}`),
})
}

14
web/service/use-common.ts Normal file
View File

@ -0,0 +1,14 @@
import { get } from './base'
import type {
FileUploadConfigResponse,
} from '@/models/common'
import { useQuery } from '@tanstack/react-query'
const NAME_SPACE = 'common'
export const useFileUploadConfig = () => {
return useQuery<FileUploadConfigResponse>({
queryKey: [NAME_SPACE, 'file-upload-config'],
queryFn: () => get<FileUploadConfigResponse>('/files/upload'),
})
}

18
web/service/use-workflow.ts Normal file
View File

@ -0,0 +1,18 @@
import { get } from './base'
import type {
FetchWorkflowDraftResponse,
} from '@/types/workflow'
import { useQuery } from '@tanstack/react-query'
const NAME_SPACE = 'workflow'
export const useAppWorkflow = (appID: string) => {
return useQuery<FetchWorkflowDraftResponse>({
queryKey: [NAME_SPACE, 'publish', appID],
queryFn: () => {
if (appID === 'empty')
return Promise.resolve({} as unknown as FetchWorkflowDraftResponse)
return get<FetchWorkflowDraftResponse>(`/apps/${appID}/workflows/publish`)
},
})
}