From 5c6916354e7642455d63247fb1e8a186edd3267f Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Fri, 20 Dec 2024 11:59:18 +0800
Subject: [PATCH] app selector support scope

---
 .../model-provider-page/declarations.ts          |  1 +
 .../model-provider-page/model-modal/Form.tsx     |  2 ++
 .../app-selector/app-picker.tsx                  | 16 +++++++++++++---
 .../plugin-detail-panel/app-selector/index.tsx   |  6 +++++-
 4 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/web/app/components/header/account-setting/model-provider-page/declarations.ts b/web/app/components/header/account-setting/model-provider-page/declarations.ts
index a9272edc06..8f0adb1259 100644
--- a/web/app/components/header/account-setting/model-provider-page/declarations.ts
+++ b/web/app/components/header/account-setting/model-provider-page/declarations.ts
@@ -112,6 +112,7 @@ export type CredentialFormSchemaBase = {
   tooltip?: TypeWithI18N
   show_on: FormShowOnObject[]
   url?: string
+  scope?: string
 }
 
 export type CredentialFormSchemaTextInput = CredentialFormSchemaBase & { max_length?: number; placeholder?: TypeWithI18N }
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 d6614a8692..be10e3a4c0 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
@@ -351,6 +351,7 @@ const Form: FC<FormProps> = ({
         variable,
         label,
         required,
+        scope,
       } = formSchema as (CredentialFormSchemaTextInput | CredentialFormSchemaSecretInput)
 
       return (
@@ -366,6 +367,7 @@ const Form: FC<FormProps> = ({
           </div>
           <AppSelector
             disabled={readonly}
+            scope={scope}
             value={value[variable]}
             onSelect={item => handleFormChange(variable, { ...item, type: FormTypeEnum.appSelector } as any)}
           />
diff --git a/web/app/components/plugins/plugin-detail-panel/app-selector/app-picker.tsx b/web/app/components/plugins/plugin-detail-panel/app-selector/app-picker.tsx
index a5be6ffbdd..841663a5b4 100644
--- a/web/app/components/plugins/plugin-detail-panel/app-selector/app-picker.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/app-selector/app-picker.tsx
@@ -17,6 +17,7 @@ import type { App } from '@/types/app'
 
 type Props = {
   appList: App[]
+  scope: string
   disabled: boolean
   trigger: React.ReactNode
   placement?: Placement
@@ -27,6 +28,7 @@ type Props = {
 }
 
 const AppPicker: FC<Props> = ({
+  scope,
   appList,
   disabled,
   trigger,
@@ -38,8 +40,16 @@ const AppPicker: FC<Props> = ({
 }) => {
   const [searchText, setSearchText] = useState('')
   const filteredAppList = useMemo(() => {
-    return (appList || []).filter(app => app.name.toLowerCase().includes(searchText.toLowerCase())).filter(app => (app.mode !== 'advanced-chat' && app.mode !== 'workflow') || !!app.workflow)
-  }, [appList, searchText])
+    return (appList || [])
+      .filter(app => app.name.toLowerCase().includes(searchText.toLowerCase()))
+      .filter(app => (app.mode !== 'advanced-chat' && app.mode !== 'workflow') || !!app.workflow)
+      .filter(app => scope === 'all'
+      || (scope === 'completion' && app.mode === 'completion')
+      || (scope === 'workflow' && app.mode === 'workflow')
+      || (scope === 'chat' && app.mode === 'advanced-chat')
+      || (scope === 'chat' && app.mode === 'agent-chat')
+      || (scope === 'chat' && app.mode === 'chat'))
+  }, [appList, scope, searchText])
   const getAppType = (app: App) => {
     switch (app.mode) {
       case 'advanced-chat':
@@ -74,7 +84,7 @@ const AppPicker: FC<Props> = ({
       </PortalToFollowElemTrigger>
 
       <PortalToFollowElemContent className='z-[1000]'>
-        <div className="relative w-[356px] min-h-20 rounded-xl bg-components-panel-bg-blur border-[0.5px] border-components-panel-border shadow-lg">
+        <div className="relative w-[356px] min-h-20 rounded-xl backdrop-blur-sm bg-components-panel-bg-blur border-[0.5px] border-components-panel-border shadow-lg">
           <div className='p-2 pb-1'>
             <Input
               showLeftIcon
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 59556dcc10..5f5a0d7e3e 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
@@ -23,6 +23,7 @@ type Props = {
     inputs: Record<string, any>
     files?: any[]
   }
+  scope?: string
   disabled?: boolean
   placement?: Placement
   offset?: OffsetOptions
@@ -35,6 +36,7 @@ type Props = {
 }
 const AppSelector: FC<Props> = ({
   value,
+  scope,
   disabled,
   placement = 'bottom',
   offset = 4,
@@ -53,6 +55,7 @@ const AppSelector: FC<Props> = ({
       return undefined
     return appList.data.find(app => app.id === value.app_id)
   }, [appList?.data, value])
+
   const [isShowChooseApp, setIsShowChooseApp] = useState(false)
   const handleSelectApp = (app: App) => {
     const clearValue = app.id !== value?.app_id
@@ -103,7 +106,7 @@ const AppSelector: FC<Props> = ({
           />
         </PortalToFollowElemTrigger>
         <PortalToFollowElemContent className='z-[1000]'>
-          <div className="relative w-[389px] min-h-20 rounded-xl bg-components-panel-bg-blur border-[0.5px] border-components-panel-border shadow-lg">
+          <div className="relative w-[389px] min-h-20 rounded-xl backdrop-blur-sm bg-components-panel-bg-blur border-[0.5px] border-components-panel-border shadow-lg">
             <div className='px-4 py-3 flex flex-col gap-1'>
               <div className='h-6 flex items-center system-sm-semibold text-text-secondary'>{t('app.appSelector.label')}</div>
               <AppPicker
@@ -120,6 +123,7 @@ const AppSelector: FC<Props> = ({
                 disabled={false}
                 appList={appList?.data || []}
                 onSelect={handleSelectApp}
+                scope={scope || 'all'}
               />
             </div>
             {/* app inputs config panel */}