app selector support scope

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 }

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)}
           />

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

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 */}