From 8f14881aff0549c4a130fe79dbf8098806e60d81 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Thu, 14 Nov 2024 21:21:50 +0800
Subject: [PATCH] app parameters

---
 .../file-from-link-or-local/index.tsx         |   2 +-
 .../model-provider-page/model-modal/Form.tsx  |  56 +++----
 .../app-selector/app-inputs-form.tsx          | 125 ++++++++++++++
 .../app-selector/app-inputs-panel.tsx         | 156 +++++++++++++++++-
 .../app-selector/index.tsx                    |  27 ++-
 .../plugin-detail-panel/endpoint-modal.tsx    |   9 -
 web/service/use-apps.ts                       |   6 +-
 web/service/use-common.ts                     |  14 ++
 web/service/use-workflow.ts                   |  18 ++
 9 files changed, 362 insertions(+), 51 deletions(-)
 create mode 100644 web/app/components/plugins/plugin-detail-panel/app-selector/app-inputs-form.tsx
 create mode 100644 web/service/use-common.ts
 create mode 100644 web/service/use-workflow.ts

diff --git a/web/app/components/base/file-uploader/file-from-link-or-local/index.tsx b/web/app/components/base/file-uploader/file-from-link-or-local/index.tsx
index 1ff2bdd174..8ae8bb0538 100644
--- a/web/app/components/base/file-uploader/file-from-link-or-local/index.tsx
+++ b/web/app/components/base/file-uploader/file-from-link-or-local/index.tsx
@@ -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 && (
diff --git a/web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx b/web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx
index 711cb39007..f4e23b566b 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx
@@ -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 {
diff --git a/web/app/components/plugins/plugin-detail-panel/app-selector/app-inputs-form.tsx b/web/app/components/plugins/plugin-detail-panel/app-selector/app-inputs-form.tsx
new file mode 100644
index 0000000000..6dd9926d35
--- /dev/null
+++ b/web/app/components/plugins/plugin-detail-panel/app-selector/app-inputs-form.tsx
@@ -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
diff --git a/web/app/components/plugins/plugin-detail-panel/app-selector/app-inputs-panel.tsx b/web/app/components/plugins/plugin-detail-panel/app-selector/app-inputs-panel.tsx
index 1d3fe1c183..54fbfc75a9 100644
--- a/web/app/components/plugins/plugin-detail-panel/app-selector/app-inputs-panel.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/app-selector/app-inputs-panel.tsx
@@ -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>
   )
 }
diff --git a/web/app/components/plugins/plugin-detail-panel/app-selector/index.tsx b/web/app/components/plugins/plugin-detail-panel/app-selector/index.tsx
index 53b2152ea4..59556dcc10 100644
--- a/web/app/components/plugins/plugin-detail-panel/app-selector/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/app-selector/index.tsx
@@ -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>
diff --git a/web/app/components/plugins/plugin-detail-panel/endpoint-modal.tsx b/web/app/components/plugins/plugin-detail-panel/endpoint-modal.tsx
index f6e4a0d0bc..2d200cb348 100644
--- a/web/app/components/plugins/plugin-detail-panel/endpoint-modal.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/endpoint-modal.tsx
@@ -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'>
diff --git a/web/service/use-apps.ts b/web/service/use-apps.ts
index 6ece0627a8..1a3e9cedbb 100644
--- a/web/service/use-apps.ts
+++ b/web/service/use-apps.ts
@@ -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}`),
   })
 }
diff --git a/web/service/use-common.ts b/web/service/use-common.ts
new file mode 100644
index 0000000000..98ab535948
--- /dev/null
+++ b/web/service/use-common.ts
@@ -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'),
+  })
+}
diff --git a/web/service/use-workflow.ts b/web/service/use-workflow.ts
new file mode 100644
index 0000000000..9413854726
--- /dev/null
+++ b/web/service/use-workflow.ts
@@ -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`)
+    },
+  })
+}