From e53c4fc0ad5de4f9f7b471739d2db826b413b295 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Thu, 14 Nov 2024 16:42:26 +0800
Subject: [PATCH] empty inputs form of app selector

---
 .../model-provider-page/model-modal/Form.tsx  | 56 +++++++++----------
 .../app-selector/app-inputs-panel.tsx         | 36 ++++++++++++
 .../app-selector/index.tsx                    | 12 ++--
 web/i18n/en-US/app.ts                         |  1 +
 web/i18n/zh-Hans/app.ts                       |  1 +
 5 files changed, 72 insertions(+), 34 deletions(-)
 create mode 100644 web/app/components/plugins/plugin-detail-panel/app-selector/app-inputs-panel.tsx

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 f4e23b566b..711cb39007 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-panel.tsx b/web/app/components/plugins/plugin-detail-panel/app-selector/app-inputs-panel.tsx
new file mode 100644
index 0000000000..1d3fe1c183
--- /dev/null
+++ b/web/app/components/plugins/plugin-detail-panel/app-selector/app-inputs-panel.tsx
@@ -0,0 +1,36 @@
+'use client'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import Loading from '@/app/components/base/loading'
+import { useAppDetail } from '@/service/use-apps'
+import type { App } from '@/types/app'
+import cn from '@/utils/classnames'
+
+type Props = {
+  appDetail: App
+}
+
+const AppInputsPanel = ({
+  appDetail,
+}: Props) => {
+  const { t } = useTranslation()
+  const { data: currentApp, isFetching: isLoading } = useAppDetail(appDetail.id)
+
+  const inputs = []
+
+  return (
+    <div className={cn('px-4 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>
+      )}
+      {!isLoading && !inputs.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>
+      )}
+    </div>
+  )
+}
+
+export default AppInputsPanel
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 3c08e7abda..53b2152ea4 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
@@ -9,8 +9,7 @@ import {
 } from '@/app/components/base/portal-to-follow-elem'
 import AppTrigger from '@/app/components/plugins/plugin-detail-panel/app-selector/app-trigger'
 import AppPicker from '@/app/components/plugins/plugin-detail-panel/app-selector/app-picker'
-// import Button from '@/app/components/base/button'
-
+import AppInputsPanel from '@/app/components/plugins/plugin-detail-panel/app-selector/app-inputs-panel'
 import { useAppFullList } from '@/service/use-apps'
 import type { App } from '@/types/app'
 import type {
@@ -65,8 +64,6 @@ const AppSelector: FC<Props> = ({
     setIsShowChooseApp(false)
   }
 
-  // const { data: currentApp } = useAppDetail(value?.app_id || 'empty')
-
   return (
     <>
       <PortalToFollowElem
@@ -105,8 +102,11 @@ const AppSelector: FC<Props> = ({
               />
             </div>
             {/* app inputs config panel */}
-            <div className='px-4 py-3 flex items-center border-t border-divider-subtle'>
-            </div>
+            {currentAppInfo && (
+              <AppInputsPanel
+                appDetail={currentAppInfo}
+              />
+            )}
           </div>
         </PortalToFollowElemContent>
       </PortalToFollowElem>
diff --git a/web/i18n/en-US/app.ts b/web/i18n/en-US/app.ts
index c39b173fea..639ca289eb 100644
--- a/web/i18n/en-US/app.ts
+++ b/web/i18n/en-US/app.ts
@@ -137,6 +137,7 @@ const translation = {
     label: 'APP',
     placeholder: 'Select an app...',
     params: 'APP PARAMETERS',
+    noParams: 'No parameters needed',
   },
 }
 
diff --git a/web/i18n/zh-Hans/app.ts b/web/i18n/zh-Hans/app.ts
index 625b87acec..b7249b4af8 100644
--- a/web/i18n/zh-Hans/app.ts
+++ b/web/i18n/zh-Hans/app.ts
@@ -136,6 +136,7 @@ const translation = {
     label: '应用',
     placeholder: '选择一个应用',
     params: '应用参数',
+    noParams: '无需参数',
   },
 }